/* ================================================================
   CloudSpace Billing Portal — Design Override
   File:   cloudspace_billing/css/cloudspace.css
   Loaded: after bootstrap.min.css + main.css  (add in header.tpl)

   Base stack : Bootstrap 2.x  (span grid, nav-tabs, btn-* etc.)
   Style goal : Match cloud-space.ca — navy + blue + teal, Inter font,
                rounded cards, clean tables, minimal whitespace aesthetic.

   RULES:
   - Do NOT edit bootstrap.min.css or main.css
   - All HostBill Smarty hooks / variables remain untouched
   - Preserve all .nav-fixed, #updater, #cont JS-targeted selectors
================================================================ */


/* ---------------------------------------------------------------
   1.  Design Tokens
--------------------------------------------------------------- */
:root {
  /* Brand (mirrors cloud-space.ca Tailwind config) */
  --cs-navy:         #001f3f;
  --cs-navy-mid:     #1e3a8a;   /* Tailwind blue-900 — used in hero gradient */
  --cs-primary:      #0066cc;
  --cs-primary-dk:   #0052a3;
  --cs-accent:       #00D9C0;
  --cs-accent-dk:    #00b8a3;

  /* Page surfaces */
  --cs-bg:           #f9fafb;   /* Tailwind gray-50  */
  --cs-surface:      #ffffff;
  --cs-surface-2:    #f3f4f6;   /* Tailwind gray-100 */
  --cs-border:       #e5e7eb;   /* Tailwind gray-200 */
  --cs-border-dark:  #d1d5db;   /* Tailwind gray-300 */

  /* Text */
  --cs-text:         #111827;   /* Tailwind gray-900 */
  --cs-text-body:    #374151;   /* Tailwind gray-700 */
  --cs-muted:        #6b7280;   /* Tailwind gray-500 */
  --cs-light:        #9ca3af;   /* Tailwind gray-400 */

  /* Semantic */
  --cs-success:      #059669;
  --cs-success-bg:   #d1fae5;
  --cs-success-bdr:  #6ee7b7;
  --cs-warning:      #d97706;
  --cs-warning-bg:   #fef3c7;
  --cs-warning-bdr:  #fcd34d;
  --cs-danger:       #dc2626;
  --cs-danger-bg:    #fee2e2;
  --cs-danger-bdr:   #fca5a5;
  --cs-info-bg:      #dbeafe;
  --cs-info-bdr:     #93c5fd;

  /* Shape */
  --cs-radius:       8px;       /* rounded-lg  */
  --cs-radius-xl:    12px;      /* rounded-xl  */
  --cs-radius-2xl:   16px;      /* rounded-2xl */
  --cs-radius-pill:  9999px;

  /* Elevation (matches Tailwind shadow-* scale) */
  --cs-shadow-xs:    0 1px 2px  rgba(0,0,0,0.06);
  --cs-shadow-sm:    0 1px 3px  rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --cs-shadow:       0 4px 6px  rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --cs-shadow-lg:    0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.05);
  --cs-shadow-2xl:   0 20px 40px rgba(0,31,63,0.15);

  /* Typography */
  --cs-font: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont,
             'Segoe UI', Helvetica, Arial, sans-serif;
  --cs-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}


/* ---------------------------------------------------------------
   2.  Base / Typography Reset
--------------------------------------------------------------- */
body {
  background:            var(--cs-bg) !important;
  background-image:      none !important;
  font-family:           var(--cs-font) !important;
  font-size:             14px !important;
  line-height:           1.6 !important;
  color:                 var(--cs-text-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cs-font) !important;
  color:        var(--cs-text) !important;
  font-weight:  700 !important;
}

a             { color: var(--cs-primary); }
a:hover       { color: var(--cs-primary-dk); }

.muted, small { color: var(--cs-muted) !important; }

/* Bootstrap 2 overrides */
.text-info    { color: var(--cs-primary)  !important; }
.text-success { color: var(--cs-success)  !important; }
.text-error   { color: var(--cs-danger)   !important; }


/* ---------------------------------------------------------------
   3.  Page Layout — #wrapper, .container
--------------------------------------------------------------- */
#wrapper    { background: transparent; }
.container  { background: transparent; }


/* ---------------------------------------------------------------
   4.  Top Bar  (#headpart / #mainpart)
   Dark navy, brand on left, controls on right
--------------------------------------------------------------- */
#headpart {
  background:    linear-gradient(135deg, var(--cs-navy) 0%, var(--cs-navy-mid) 100%);
  height:        auto !important;
  padding:       0;
  /* Full bleed within Bootstrap 2 container */
  margin-left:   -20px;
  margin-right:  -20px;
  padding-left:  24px;
  padding-right: 24px;
}

#mainpart {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          64px;
}

/* Brand / h1 */
#headpart h1 {
  font-family:    var(--cs-font) !important;
  font-size:      20px !important;
  font-weight:    700 !important;
  letter-spacing: -0.3px !important;
  color:          #ffffff !important;
  line-height:    1 !important;
  text-shadow:    none !important;
  margin:         0 !important;
  flex:           1;
  order:          -1;
}

.cs-brand-link,
.cs-brand-link:hover,
.cs-brand-link:focus {
  color:           #ffffff !important;
  text-decoration: none !important;
}

/* Decorative "cloud-accent" dot on brand */
.cs-brand-link::after {
  content:          '·';
  color:            var(--cs-accent);
  margin-left:      2px;
  font-size:        26px;
  line-height:      0;
  vertical-align:   -4px;
}

/* Right-side control strip */
.headersection {
  padding-top: 0 !important;
  font-size:   12px !important;
  display:     flex !important;
  align-items: center !important;
  gap:         6px;
  height:      64px;
  order:       1;
}

.headersection .btn-group {
  display:     inline-flex !important;
  align-items: center;
}

/* Buttons inside the dark top bar */
.headersection .btn {
  background:       rgba(255,255,255,0.10) !important;
  background-image: none !important;
  border:           1px solid rgba(255,255,255,0.16) !important;
  color:            rgba(255,255,255,0.90) !important;
  text-shadow:      none !important;
  box-shadow:       none !important;
  border-radius:    var(--cs-radius) !important;
  font-size:        12px !important;
  font-weight:      500 !important;
  padding:          5px 12px !important;
  line-height:      1.5 !important;
  transition:       background 0.15s, border-color 0.15s;
}

.headersection .btn:hover {
  background: rgba(255,255,255,0.20) !important;
  color:      #ffffff !important;
}

.headersection .btn-primary {
  background:   var(--cs-primary) !important;
  border-color: var(--cs-primary) !important;
  color:        #ffffff !important;
}
.headersection .btn-primary:hover {
  background:   var(--cs-primary-dk) !important;
  border-color: var(--cs-primary-dk) !important;
}

/* Dropdown menus spawned from the top bar */
.headersection .dropdown-menu {
  border-radius: var(--cs-radius-xl) !important;
  border:        1px solid var(--cs-border) !important;
  box-shadow:    var(--cs-shadow-lg) !important;
  padding:       6px 0 !important;
  background:    var(--cs-surface) !important;
  min-width:     200px;
}

.headersection .dropdown-menu li a {
  color:       var(--cs-text-body) !important;
  font-size:   13px !important;
  padding:     8px 16px !important;
  white-space: normal;
}
.headersection .dropdown-menu li a:hover {
  background: var(--cs-surface-2) !important;
  color:      var(--cs-primary) !important;
}
.headersection .dropdown-menu .muted {
  font-size: 12px !important;
}
.headersection .dropdown-menu .divider {
  background:  var(--cs-border) !important;
  margin:      4px 0 !important;
}

/* Notifications dropdown */
.notifications-drop            { min-width: 300px !important; }
.notifications-drop-item a     { padding: 10px 16px !important; display: block; }
.notifications-drop-item-title { font-size: 13px !important; color: var(--cs-text) !important; }
.notifications-drop-item-time  { font-size: 11px !important; color: var(--cs-muted) !important; display: block; margin-top: 2px; }
.notifications-drop-item.seen .notifications-drop-item-title { color: var(--cs-muted) !important; }
.notifications-drop-showall a  { font-size: 12px !important; font-weight: 600; color: var(--cs-primary) !important; }

/* Headersection img (language flags) */
.headersection button img { margin-top: 0 !important; vertical-align: middle; }


/* ---------------------------------------------------------------
   5.  Main Navigation  (#mainmenu)
   Dark navy, underline-accent on active/hover, dark dropdowns
--------------------------------------------------------------- */
#mainmenu-container {
  background:    linear-gradient(135deg, var(--cs-navy) 0%, var(--cs-navy-mid) 100%);
  border-top:    1px solid rgba(255,255,255,0.06);
  border-bottom: 2px solid rgba(0,0,0,0.15);
  height:        52px !important;
  margin-left:   -20px;
  margin-right:  -20px;
  padding-left:  24px;
  padding-right: 24px;
  position:      relative;
}

#mainmenu {
  background:       transparent !important;
  background-image: none !important;
  border:           none !important;
  border-radius:    0 !important;
  box-shadow:       none !important;
  -webkit-box-shadow: none !important;
}

/* Sticky state (JS adds .nav-fixed) */
#mainmenu.nav-fixed {
  background:    linear-gradient(135deg, var(--cs-navy) 0%, var(--cs-navy-mid) 100%) !important;
  border-bottom: 2px solid rgba(0,0,0,0.20) !important;
  box-shadow:    0 4px 20px rgba(0,0,0,0.25) !important;
  padding-left:  24px !important;
  padding-right: 24px !important;
}
#mainmenu.nav-fixed .nav {
  width:     auto !important;
  max-width: 940px;
  margin:    0 auto;
}

/* Nav-tab strip */
#mainmenu .nav-tabs {
  border:        none !important;
  border-radius: 0 !important;
  margin:        0 !important;
}
#mainmenu .nav-tabs > li         { margin-bottom: 0 !important; }

#mainmenu .nav-tabs > li > a {
  border:           none !important;
  border-radius:    0 !important;
  margin:           0 !important;
  color:            rgba(255,255,255,0.65) !important;
  font-size:        13px !important;
  font-weight:      500 !important;
  line-height:      48px !important;
  padding:          0 16px !important;
  background:       transparent !important;
  background-image: none !important;
  text-shadow:      none !important;
  box-shadow:       none !important;
  border-bottom:    3px solid transparent !important;
  transition:       color 0.15s, border-color 0.15s;
}

#mainmenu .nav-tabs > li > a:hover,
#mainmenu .dropdown.open .dropdown-toggle {
  color:            rgba(255,255,255,0.95) !important;
  background:       transparent !important;
  background-image: none !important;
  border-bottom:    3px solid var(--cs-accent) !important;
  text-shadow:      none !important;
  box-shadow:       none !important;
}

#mainmenu .nav-tabs > .active > a,
#mainmenu .nav-tabs > .active > a:hover {
  background:       transparent !important;
  background-image: none !important;
  color:            #ffffff !important;
  border-bottom:    3px solid var(--cs-accent) !important;
  text-shadow:      none !important;
}

/* Dropdown panels (dark) */
#mainmenu .dropdown-menu {
  background:    var(--cs-navy) !important;
  border:        1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--cs-radius-xl) !important;
  box-shadow:    var(--cs-shadow-2xl) !important;
  padding:       8px 0 !important;
  margin-top:    2px !important;
  min-width:     180px !important;
  min-height:    auto !important;
  text-shadow:   none !important;
}

#mainmenu .dropdown-menu .cntn {
  background:    transparent !important;
  border-radius: 0 !important;
  padding:       0 !important;
}

#mainmenu .dropdown-menu li       { float: none !important; width: auto !important; overflow: visible !important; }
#mainmenu .dropdown-menu li > a,
#mainmenu .dropdown-menu a {
  color:       rgba(255,255,255,0.80) !important;
  font-size:   13px !important;
  padding:     8px 18px !important;
  white-space: normal !important;
  display:     block;
  text-shadow: none !important;
  background:  transparent !important;
}

#mainmenu .dropdown-menu li > a:hover,
#mainmenu .dropdown-menu .active > a {
  background:  rgba(255,255,255,0.08) !important;
  color:       #ffffff !important;
  box-shadow:  none !important;
  text-decoration: none !important;
}

#mainmenu .nav-header {
  color:          rgba(255,255,255,0.35) !important;
  font-size:      10px !important;
  font-weight:    700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  text-shadow:    none !important;
  padding:        10px 18px 4px !important;
  margin:         0 !important;
}

/* Caret colours */
#mainmenu .nav-tabs .dropdown-toggle .caret,
#mainmenu .nav-tabs .open .dropdown-toggle .caret {
  border-top-color:    rgba(255,255,255,0.60) !important;
  border-bottom-color: rgba(255,255,255,0.60) !important;
  margin-top:          20px !important;
}


/* ---------------------------------------------------------------
   6.  Cart Dropdown
--------------------------------------------------------------- */
.cart-dropdown                    { display: inline-flex; align-items: center; }
.cart-dropdown + .btn-group,
.btn-group + .cart-dropdown       { margin-left: 6px; }

.cart-dropdown .cart-dropdown-grp,
.headersection .cart-dropdown > button {
  background:       rgba(255,255,255,0.10) !important;
  background-image: none !important;
  border:           1px solid rgba(255,255,255,0.16) !important;
  color:            rgba(255,255,255,0.90) !important;
  text-shadow:      none !important;
  box-shadow:       none !important;
  border-radius:    var(--cs-radius) !important;
}

.cart-dropdown .dropdown-menu {
  background:    var(--cs-surface) !important;
  border:        1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-xl) !important;
  box-shadow:    var(--cs-shadow-2xl) !important;
  min-height:    auto !important;
  padding:       8px 0 !important;
}
.cart-dropdown .cntn {
  background:    var(--cs-surface) !important;
  border-radius: var(--cs-radius-xl) !important;
  padding:       8px 0 !important;
}
.cart-dropdown li            { float: none !important; width: auto !important; }
.cart-dropdown li a          { color: var(--cs-text-body) !important; font-size: 13px !important; padding: 8px 16px !important; }
.cart-dropdown li a:hover    { background: var(--cs-surface-2) !important; color: var(--cs-primary) !important; }
.cart-dropdown .nav-header   { color: var(--cs-muted) !important; text-shadow: none !important; font-size: 10px !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; }
.cart-dropdown .counter      { color: var(--cs-primary) !important; font-weight: 600 !important; margin-right: 8px; }
.cart-dropdown .text-overflow{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.cart-dropdown .iconwrap     { display: none; } /* hide large icon in lean mode */

/* Arrow triangles removed */
.cart-dropdown .dropdown-toggle:before,
.cart-dropdown .dropdown-toggle:after { display: none !important; }


/* ---------------------------------------------------------------
   7.  Sub-Navigation  (#submenu / .nav-pills)
   White bar, underline-style active state
--------------------------------------------------------------- */
#submenu {
  background:    var(--cs-surface);
  border-bottom: 1px solid var(--cs-border);
  margin-left:   -20px;
  margin-right:  -20px;
  padding-left:  24px;
  padding-right: 24px;
}

#submenu ul.nav-pills,
ul.nav-pills.pa1 {
  border-bottom: none !important;
  box-shadow:    none !important;
  margin:        0 !important;
  padding:       0 !important;
}

#submenu .nav-pills > li > a,
ul.nav-pills.pa1 > li > a {
  border-radius:  0 !important;
  color:          var(--cs-muted) !important;
  font-size:      13px !important;
  font-weight:    500 !important;
  padding:        10px 14px !important;
  line-height:    1.4 !important;
  border-bottom:  3px solid transparent !important;
  background:     transparent !important;
  transition:     color 0.15s, border-color 0.15s;
}

#submenu .nav-pills > li > a:hover,
ul.nav-pills.pa1 > li > a:hover {
  color:          var(--cs-primary) !important;
  background:     transparent !important;
  border-bottom:  3px solid var(--cs-primary) !important;
}

#submenu .nav-pills > li.active > a,
ul.nav-pills.pa1 > li.active > a {
  background:     transparent !important;
  color:          var(--cs-primary) !important;
  border-bottom:  3px solid var(--cs-primary) !important;
  font-weight:    600 !important;
}

/* Clear float after sub-nav */
#submenu + .clear { display: none; }


/* ---------------------------------------------------------------
   8.  Flash Notifications & Alerts
--------------------------------------------------------------- */
#errors, #infos { margin-top: 12px; }

.alert {
  border-radius:    var(--cs-radius) !important;
  border:           1px solid transparent !important;
  padding:          12px 16px !important;
  font-size:        13px !important;
  background-image: none !important;
  text-shadow:      none !important;
}
.alert .close { opacity: 0.5; font-size: 16px; line-height: 1; }
.alert .close:hover { opacity: 1; }

.alert-info {
  background:   var(--cs-info-bg) !important;
  border-color: var(--cs-info-bdr) !important;
  color:        #1e40af !important;
  border-left:  4px solid var(--cs-primary) !important;
}
.alert-error, .alert-danger {
  background:   var(--cs-danger-bg) !important;
  border-color: var(--cs-danger-bdr) !important;
  color:        #991b1b !important;
  border-left:  4px solid var(--cs-danger) !important;
}
.alert-success {
  background:   var(--cs-success-bg) !important;
  border-color: var(--cs-success-bdr) !important;
  color:        #065f46 !important;
  border-left:  4px solid var(--cs-success) !important;
}
.alert-warning {
  background:   var(--cs-warning-bg) !important;
  border-color: var(--cs-warning-bdr) !important;
  color:        #92400e !important;
  border-left:  4px solid var(--cs-warning) !important;
}


/* ---------------------------------------------------------------
   9.  Cards — .wbox
--------------------------------------------------------------- */
.wbox,
.con-inner-middle {
  background:    var(--cs-surface) !important;
  border:        1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-xl) !important;
  box-shadow:    var(--cs-shadow-sm) !important;
  margin-bottom: 20px !important;
  overflow:      hidden;
}

.wbox_header {
  background:       var(--cs-surface-2) !important;
  background-image: none !important;
  border-bottom:    1px solid var(--cs-border) !important;
  border-radius:    var(--cs-radius-xl) var(--cs-radius-xl) 0 0 !important;
  padding:          14px 20px !important;
  font-size:        15px !important;
  font-weight:      600 !important;
  color:            var(--cs-text) !important;
  text-shadow:      none !important;
  box-shadow:       none !important;
  position:         relative;
}

.wbox_header.nbottom { border-bottom: none !important; }

.wbox_header .wbox_right { margin: -4px -4px 0 0; }
.wbox_header .wbox_right a { font-weight: normal !important; }

.wbox_content {
  padding:    16px 20px !important;
  box-shadow: none !important;
}

/* Table inside wbox: remove double border, fix radius */
.wbox .table.fullscreen {
  border-radius: 0 0 var(--cs-radius-xl) var(--cs-radius-xl) !important;
  margin:        0 !important;
  border-bottom: none !important;
}


/* ---------------------------------------------------------------
   10.  Data Tables  (.table.fullscreen)
--------------------------------------------------------------- */
.table {
  background:    var(--cs-surface) !important;
  border-radius: var(--cs-radius-xl) !important;
  font-size:     13px;
}

.table.fullscreen {
  border-bottom: 1px solid var(--cs-border) !important;
}

.table.fullscreen tr th {
  background:       var(--cs-surface-2) !important;
  background-image: none !important;
  color:            var(--cs-muted) !important;
  font-size:        11px !important;
  font-weight:      700 !important;
  text-transform:   uppercase !important;
  letter-spacing:   0.5px !important;
  border-left:      none !important;
  border-top:       none !important;
  border-bottom:    2px solid var(--cs-border) !important;
  padding:          10px 12px !important;
}

.table.fullscreen tr th:first-child { border-left: none !important; }
.table.fullscreen + tbody { border-top: none !important; }

.table.fullscreen tr td {
  border-top:      1px solid var(--cs-border) !important;
  padding:         10px 12px !important;
  color:           var(--cs-text-body) !important;
  vertical-align:  middle !important;
}

.table.fullscreen tr td:first-child,
.table.fullscreen tr th:first-child { padding-left:  20px !important; }
.table.fullscreen tr td:last-child,
.table.fullscreen tr th:last-child  { padding-right: 20px !important; }

/* Striped rows */
.table-striped tbody > tr:nth-child(odd) > td  { background: transparent !important; }
.table-striped tbody > tr:nth-child(even) > td { background: #f9fafb !important; }
.table tbody tr:hover > td                      { background: #eff6ff !important; }

/* Bootstrap 2 tbody+tbody border */
.table.fullscreen tbody + tbody { border-top: 2px solid var(--cs-border) !important; }

/* Sort arrows — replace old GIF with CSS */
a.sortorder          { color: var(--cs-muted) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; text-decoration: none !important; padding-right: 18px !important; }
a.sortorder:hover    { color: var(--cs-primary) !important; }
a.asc                { background: none !important; }
a.desc               { background: none !important; }
a.asc::after         { content: ' ↑'; color: var(--cs-primary); font-size: 10px; }
a.desc::after        { content: ' ↓'; color: var(--cs-primary); font-size: 10px; }


/* ---------------------------------------------------------------
   11.  Buttons
   Override Bootstrap 2 gradient buttons with flat, brand buttons
--------------------------------------------------------------- */
/* Reset */
.btn {
  border-radius:    var(--cs-radius) !important;
  border:           1px solid transparent !important;
  background-image: none !important;
  text-shadow:      none !important;
  box-shadow:       none !important;
  font-family:      var(--cs-font) !important;
  font-size:        13px !important;
  font-weight:      500 !important;
  padding:          7px 16px !important;
  line-height:      1.5 !important;
  cursor:           pointer;
  transition:       background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn:active,
.btn.active { box-shadow: none !important; background-image: none !important; }

/* Default / ghost */
.btn:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-danger)
:not(.btn-warning):not(.btn-inverse):not(.btn-link) {
  background:   var(--cs-surface) !important;
  border-color: var(--cs-border-dark) !important;
  color:        var(--cs-text-body) !important;
}

/* Explicit .btn with no modifiers */
.btn.dropdown-toggle:not(.btn-primary):not(.btn-success):not(.btn-info)
:not(.btn-danger):not(.btn-warning):not(.btn-inverse) {
  background:   var(--cs-surface) !important;
  border-color: var(--cs-border-dark) !important;
  color:        var(--cs-text-body) !important;
}

/* Primary — brand blue */
.btn-primary {
  background:   var(--cs-primary) !important;
  border-color: var(--cs-primary) !important;
  color:        #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background:   var(--cs-primary-dk) !important;
  border-color: var(--cs-primary-dk) !important;
  color:        #ffffff !important;
}

/* Success — cloud-accent teal */
.btn-success {
  background:   var(--cs-accent) !important;
  border-color: var(--cs-accent-dk) !important;
  color:        var(--cs-navy) !important;
  font-weight:  600 !important;
}
.btn-success:hover {
  background:   var(--cs-accent-dk) !important;
  border-color: var(--cs-accent-dk) !important;
  color:        var(--cs-navy) !important;
}

/* Info — light blue */
.btn-info {
  background:   #dbeafe !important;
  border-color: #93c5fd !important;
  color:        var(--cs-primary) !important;
}
.btn-info:hover {
  background:   #bfdbfe !important;
  border-color: #60a5fa !important;
  color:        var(--cs-primary-dk) !important;
}

/* Danger */
.btn-danger {
  background:   var(--cs-danger) !important;
  border-color: var(--cs-danger) !important;
  color:        #ffffff !important;
}
.btn-danger:hover { background: #b91c1c !important; color: #ffffff !important; }

/* Warning — use amber */
.btn-warning {
  background:   var(--cs-warning) !important;
  border-color: var(--cs-warning) !important;
  color:        #ffffff !important;
}
.btn-warning:hover { background: #b45309 !important; color: #ffffff !important; }

/* Inverse */
.btn-inverse {
  background:   var(--cs-navy) !important;
  border-color: var(--cs-navy) !important;
  color:        #ffffff !important;
}
.btn-inverse:hover { background: var(--cs-navy-mid) !important; }

/* Sizes */
.btn-large, .btn-lg { padding: 10px 22px !important; font-size: 14px !important; border-radius: var(--cs-radius) !important; }
.btn-small, .btn-sm { padding: 4px 10px !important; font-size: 12px !important; }
.btn-mini,  .btn-xs { padding: 2px 8px !important;  font-size: 11px !important; }

/* Pagination button group active state */
.btn-group[data-toggle="buttons-radio"] .btn.active {
  background:   var(--cs-primary) !important;
  color:        #ffffff !important;
  border-color: var(--cs-primary) !important;
}

/* btn-link stays clean */
.btn-link { background: transparent !important; border-color: transparent !important; color: var(--cs-primary) !important; padding: 0 !important; }
.btn-link:hover { color: var(--cs-primary-dk) !important; text-decoration: underline !important; }


/* ---------------------------------------------------------------
   12.  Status Badges  (.label-*)
   Pill-style, soft-coloured, no text-shadow
--------------------------------------------------------------- */
.label {
  border-radius: var(--cs-radius-pill) !important;
  font-size:     11px !important;
  font-weight:   600 !important;
  padding:       3px 9px !important;
  text-shadow:   none !important;
  letter-spacing: 0.2px;
  display:       inline-block;
}

/* Green — Active, Paid, Accepted, Client-Reply */
.label-Active, .label-Paid, .label-Accepted, .label-Client-Reply {
  background: var(--cs-success-bg) !important;
  color:      #065f46 !important;
}
/* Red — Unpaid, Expired, Answered, Cancelled, Suspended, Terminated */
.label-Unpaid, .label-Expired, .label-Answered,
.label-Cancelled, .label-Suspended, .label-Terminated {
  background: var(--cs-danger-bg) !important;
  color:      #991b1b !important;
}
/* Blue — Pending, Open, Invoiced */
.label-Pending, .label-Open, .label-Invoiced {
  background: var(--cs-info-bg) !important;
  color:      #1e40af !important;
}
/* Amber — In-Progress, Sent */
.label-In-Progress, .label-Sent {
  background: var(--cs-warning-bg) !important;
  color:      #92400e !important;
}
/* Free — teal */
.label-Free {
  background: var(--cs-success-bg) !important;
  color:      #065f46 !important;
}

/* Hover — slight dim only */
.label-Active:hover, .label-Paid:hover, .label-Accepted:hover, .label-Client-Reply:hover,
.label-Unpaid:hover, .label-Expired:hover, .label-Answered:hover,
.label-Pending:hover, .label-Open:hover, .label-Invoiced:hover,
.label-In-Progress:hover, .label-Sent:hover { opacity: 0.85; }

/* .badge (ticket counters) */
.badge        { background: var(--cs-muted) !important; border-radius: var(--cs-radius-pill) !important; font-size: 11px !important; padding: 2px 7px !important; }
.badge.open   { background: var(--cs-primary) !important; }

/* Generic pill on statistic line */
.statistic .badge { margin-left: 4px; }


/* ---------------------------------------------------------------
   13.  Form Elements
--------------------------------------------------------------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
textarea,
select,
input.styled,
select.styled,
input.magnify {
  font-family:       var(--cs-font) !important;
  font-size:         13px !important;
  border:            1px solid var(--cs-border-dark) !important;
  border-radius:     var(--cs-radius) !important;
  padding:           8px 10px !important;
  box-shadow:        var(--cs-shadow-xs) !important;
  background:        var(--cs-surface) !important;
  color:             var(--cs-text) !important;
  transition:        border-color 0.15s, box-shadow 0.15s;
  outline:           none;
  -webkit-appearance: none;
}

/* Bootstrap 2 constrains select to height:28px + line-height:28px which
   clips text when our padding is in effect. Reset to auto-sized. */
select,
select.styled {
  height:      auto !important;
  line-height: 1.5 !important;
  width:       auto !important;   /* override Bootstrap's width:210px */
  max-width:   100% !important;
  box-sizing:  border-box !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
input.styled:focus,
select.styled:focus {
  border-color: var(--cs-primary) !important;
  box-shadow:   0 0 0 3px rgba(0,102,204,0.15) !important;
}

label {
  font-size:     13px !important;
  font-weight:   500 !important;
  color:         var(--cs-text) !important;
  margin-bottom: 4px !important;
}

.control-label { color: var(--cs-muted) !important; font-size: 13px !important; }

.form-actions {
  background:    var(--cs-surface-2) !important;
  border-top:    1px solid var(--cs-border) !important;
  border-radius: 0 0 var(--cs-radius-xl) var(--cs-radius-xl) !important;
  padding:       14px 20px !important;
  margin:        16px -20px -16px !important;
}

input[type="checkbox"],
input[type="radio"] { accent-color: var(--cs-primary); }

/* Input-append pattern (search bar) */
.input-append .btn,
.input-prepend .btn {
  border-radius: 0 var(--cs-radius) var(--cs-radius) 0 !important;
}
.input-append input,
.input-prepend input {
  border-radius: var(--cs-radius) 0 0 var(--cs-radius) !important;
}

/* Darkshadow search bar */
.darkshadow {
  background:       var(--cs-surface) !important;
  background-image: none !important;
  border:           1px solid var(--cs-border) !important;
  border-radius:    var(--cs-radius) !important;
  box-shadow:       var(--cs-shadow-xs) !important;
}


/* ---------------------------------------------------------------
   14.  Ribbon  (action toolbar above/below tables)
--------------------------------------------------------------- */
.ribbon {
  background:    var(--cs-surface-2) !important;
  background-image: none !important;
  border:        none !important;
  border-bottom: 1px solid var(--cs-border) !important;
  border-top:    1px solid var(--cs-border) !important;
  margin:        0 !important;
  padding:       12px 20px !important;
  font-size:     13px !important;
  font-weight:   normal !important;
  min-height:    auto !important;
}
.ribbon form, .ribbon .control-group { margin: 0 !important; }
.ribbon .control-label { padding-top: 8px !important; }

/* Remove old ribbon corner triangles */
.ribbon-shadow-l,
.ribbon-shadow-r { display: none !important; }

/* Divider between ribbon and table */
div.divider {
  height:     1px !important;
  background: var(--cs-border) !important;
  clear:      both;
  margin:     0 !important;
}


/* ---------------------------------------------------------------
   15.  Bordered Section  (.bordered-section.article)
   Main content wrapper for inner pages
--------------------------------------------------------------- */
.bordered-section {
  border:        1px solid var(--cs-border) !important;
  background:    var(--cs-surface) !important;
  border-radius: var(--cs-radius-xl) !important;
  box-shadow:    var(--cs-shadow-sm) !important;
  overflow:      hidden;
}

.bordered-section.article h2,
.article h2 {
  font-size:     18px !important;
  font-weight:   700 !important;
  color:         var(--cs-text) !important;
  padding:       18px 20px 16px !important;
  margin:        0 !important;
  border-bottom: 1px solid var(--cs-border);
}
.article h2.bbottom { border-bottom: 1px solid var(--cs-border) !important; }

/* Breadcrumb strip */
.brcrm {
  background:    var(--cs-surface-2) !important;
  border-top:    none !important;
  border-bottom: 1px solid var(--cs-border) !important;
  padding:       10px 20px !important;
  font-size:     12px !important;
  color:         var(--cs-muted) !important;
}
.brcrm .breadcrumb {
  background: none !important;
  border:     none !important;
  padding:    0 !important;
  margin:     0 !important;
  box-shadow: none !important;
  font-size:  12px !important;
}
.brcrm .breadcrumb li   { color: var(--cs-muted) !important; }
.brcrm .breadcrumb a    { color: var(--cs-primary) !important; }
.brcrm .breadcrumb .active { color: var(--cs-text) !important; }
.brcrm .breadcrumb .divider { color: var(--cs-light) !important; }

#clientarea .brcrm { border-top: 0 !important; }

.p19 { padding: 20px !important; }


/* ---------------------------------------------------------------
   16.  Box Features  (homepage icons + account sidebar nav)
--------------------------------------------------------------- */
.box-feature {
  padding:         16px 12px !important;
  border-radius:   var(--cs-radius-xl) !important;
  text-align:      center !important;
  font-size:       13px !important;
  background:      var(--cs-surface) !important;
  border:          1px solid var(--cs-border) !important;
  transition:      box-shadow 0.2s, border-color 0.2s, background 0.2s;
  margin:          4px !important;
  /* Vertical stack: icon above text */
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
}
.box-feature:hover {
  border-color: var(--cs-primary) !important;
  background:   #eff6ff !important;
  border-radius: var(--cs-radius-xl) !important;
  box-shadow:   var(--cs-shadow) !important;
  padding:      16px 12px !important; /* override main.css padding change */
}
.box-feature h1 {
  font-size:     15px !important;
  font-weight:   600 !important;
  color:         var(--cs-text) !important;
  line-height:   1.4 !important;
  margin-bottom: 4px !important;
}
.box-feature h4 {
  font-size:   13px !important;
  font-weight: 600 !important;
  color:       var(--cs-text) !important;
}
.box-feature p  { color: var(--cs-muted) !important; font-size: 12px !important; }
.box-feature > a {
  display:     block !important;
  height:      64px !important;   /* fixed height counters iconfont -4.5em margin collapse */
  width:       64px !important;
  margin:      0 auto 12px !important;
  overflow:    visible !important;
  line-height: 64px !important;
  text-align:  center !important;
}

/* Homepage feature boxes: circular icon chip */
.box-feature-divider .box-feature > a {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           80px !important;
  height:          80px !important;
  line-height:     1 !important;
  background:      #dbeafe !important;
  border-radius:   50% !important;
  margin:          0 auto 16px !important;
  overflow:        visible !important;
  transition:      background 0.2s !important;
}

.box-feature-divider .box-feature:hover > a {
  background: rgba(0,102,204,0.14) !important;
}

.box-feature a:hover { text-decoration: none !important; }

/* Icon colour */
.box-feature .silver,
.box-feature .iconfont-silver:before      { color: var(--cs-primary) !important; }
.box-feature:hover .silver,
.box-feature:hover .iconfont-silver:before { color: var(--cs-navy) !important; }

/* Active panel in account sidebar */
.box-feature-small .box-feature.active,
.box-feature-small .box-feature.active:hover {
  border:        1px solid var(--cs-primary) !important;
  background:    #eff6ff !important;
  border-right:  none !important;
  border-radius: var(--cs-radius) 0 0 var(--cs-radius) !important;
  box-shadow:    none !important;
  margin-right:  -1px !important;
  padding:       15px 11px !important;
  /* keep flex column in sidebar too */
  display:       flex !important;
  flex-direction: column !important;
  align-items:   center !important;
}

/* Homepage spacing */
.box-feature-divider { margin-top: 32px !important; }

/* sh-icon container in leftnavigation */
.sh-icon { margin-bottom: 4px; }


/* ---------------------------------------------------------------
   17.  Sidebar — Quick Links + Left Navigation
--------------------------------------------------------------- */
.nice-sidemenu          { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.nice-sidemenu li       { border-bottom: 1px solid var(--cs-border) !important; padding: 10px 0 !important; font-size: 13px !important; }
.nice-sidemenu li:last-child { border-bottom: none !important; }
.nice-sidemenu li a     { font-weight: 500 !important; color: var(--cs-primary) !important; display: block; }
.nice-sidemenu li a:hover { color: var(--cs-primary-dk) !important; text-decoration: none !important; }
.nice-sidemenu li small { color: var(--cs-muted) !important; font-size: 11px !important; display: block; margin-top: 2px; }
.nice-sidemenu li i     { color: var(--cs-primary) !important; margin-right: 6px !important; }

/* "Quick Links" heading */
.darkheader {
  font-size:      12px !important;
  font-weight:    700 !important;
  color:          var(--cs-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  margin-bottom:  8px !important;
  margin-top:     4px !important;
}

/* Credit balance box */
.greenbox {
  background:    var(--cs-success-bg) !important;
  border:        1px solid var(--cs-success-bdr) !important;
  border-radius: var(--cs-radius) !important;
  color:         #065f46 !important;
  padding:       10px 14px !important;
  font-size:     13px !important;
  font-weight:   500 !important;
  margin-bottom: 12px !important;
}

/* Sidebar block (service detail) */
.sidebar-block                { border-bottom: 1px solid var(--cs-border) !important; border-top: none !important; padding: 20px !important; }
.sidebar-block:first-child    { border-top: none !important; }

/* Flex container: sidebar + content */
.flex-container {
  display:       flex !important;
  -webkit-box-orient: horizontal;
  align-items:   stretch !important;
  gap:           0;
  margin-bottom: 24px !important;
}
.flex-box-1    { position: relative; }
.left-content  {
  background:    var(--cs-surface-2) !important;
  border-radius: var(--cs-radius-xl) 0 0 var(--cs-radius-xl) !important;
  border-right:  1px solid var(--cs-border) !important;
}
.right-content {
  background:    var(--cs-surface) !important;
  border-radius: 0 var(--cs-radius-xl) var(--cs-radius-xl) 0 !important;
  box-shadow:    none !important;
  border-left:   none !important;
}

/* Dark header bar (service/domain detail pages) */
.header-title {
  background:       linear-gradient(135deg, var(--cs-navy) 0%, var(--cs-navy-mid) 100%) !important;
  background-image: none;
  border-bottom:    none !important;
  border-radius:    var(--cs-radius-xl) var(--cs-radius-xl) 0 0 !important;
  box-shadow:       none !important;
  text-shadow:      none !important;
  padding:          18px 24px !important;
}
.header-title h2  { color: #ffffff !important; font-size: 18px !important; font-weight: 700 !important; }
.header-title h3  { color: rgba(255,255,255,0.70) !important; font-size: 14px !important; line-height: 1.5; }
.header-title + .bordered-section { border-radius: 0 0 var(--cs-radius-xl) var(--cs-radius-xl) !important; border-top: none !important; }

.header-title .backbtn {
  background: rgba(255,255,255,0.12) !important;
  border:     2px solid rgba(255,255,255,0.20) !important;
  box-shadow: none !important;
}


/* ---------------------------------------------------------------
   18.  Login Box  (#loginbox_container)
--------------------------------------------------------------- */
#loginbox_container {
  width:    460px !important;
  margin:   48px auto !important;
  position: relative;
}

/* Remove CSS-rotation stacked card effect */
#loginbox_container::before,
#loginbox_container::after { display: none !important; }

#loginbox_container .wbox {
  border-radius: var(--cs-radius-xl) !important;
  box-shadow:    var(--cs-shadow-2xl) !important;
  border:        1px solid var(--cs-border) !important;
  overflow:      hidden;
}

#loginbox_container .wbox_header {
  background:       linear-gradient(135deg, var(--cs-navy) 0%, var(--cs-navy-mid) 100%) !important;
  background-image: none;
  color:            #ffffff !important;
  border-radius:    var(--cs-radius-xl) var(--cs-radius-xl) 0 0 !important;
  border-bottom:    none !important;
  font-size:        17px !important;
  font-weight:      700 !important;
  padding:          22px 24px !important;
}

#loginbox_container .wbox_header .right.btn { background: rgba(255,255,255,0.12) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.20) !important; }
#loginbox_container .wbox_content { padding: 24px !important; box-shadow: none !important; }

/* Login form inputs */
#loginbox_container input.styled { width: 100% !important; box-sizing: border-box; margin-bottom: 4px !important; }
#loginbox_container .form-actions { margin: 16px -24px -24px !important; padding: 16px 24px !important; }

/* "Forgot password" + "Create account" links */
#loginbox_container .list_item { color: var(--cs-primary) !important; font-size: 12px !important; text-decoration: none !important; }
#loginbox_container .list_item:hover { color: var(--cs-primary-dk) !important; text-decoration: underline !important; }

/* Table-based login form */
#loginbox_container table { width: 100% !important; }
#loginbox_container table td { padding: 6px 0 !important; border: none !important; vertical-align: top !important; }

/* Alert inside login */
#loginbox_container .alert { margin-bottom: 12px !important; }


/* ---------------------------------------------------------------
   19.  Dashboard  (#clientarea, .dashrow, .dashboardblock)
--------------------------------------------------------------- */
#welcomeback h3 {
  font-size:   20px !important;
  font-weight: 700 !important;
  color:       var(--cs-text) !important;
  line-height: 1.4 !important;
}

/* Service stat blocks */
.dashrow { margin-bottom: 4px; }

.dashboardblock .internal {
  background:    var(--cs-surface) !important;
  border:        1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-xl) !important;
  padding:       16px !important;
  box-shadow:    var(--cs-shadow-sm) !important;
  margin-bottom: 12px;
  transition:    box-shadow 0.2s, border-color 0.2s;
}
.dashboardblock .internal:hover {
  border-color: var(--cs-primary) !important;
  box-shadow:   var(--cs-shadow) !important;
}

.dashboardblock h4 {
  font-size:      12px !important;
  font-weight:    700 !important;
  color:          var(--cs-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom:  10px !important;
}
.dashboardblock h4 a { color: var(--cs-muted) !important; }
.dashboardblock h4 a:hover { color: var(--cs-primary) !important; text-decoration: none !important; }

/* "Order More" dashed offer block */
.dashboardblock.offer .internal {
  border:     2px dashed var(--cs-border) !important;
  background: var(--cs-surface-2) !important;
  text-align: center;
}
.dashboardblock.offer .internal:hover {
  border-color: var(--cs-primary) !important;
  background:   #eff6ff !important;
}
.dashboardblock.offer .hlink .silver { color: var(--cs-primary) !important; }
.dashboardblock.offer .stripe        { display: block; color: var(--cs-primary) !important; font-weight: 500 !important; font-size: 13px !important; margin-top: 6px !important; text-decoration: none !important; }

/* Service count pill (btn-mini.btn-success inside dashblock) */
.dashboardblock .btn-mini.btn-success { font-weight: 700 !important; font-size: 12px !important; min-width: 28px; }

/* Dropup menus in dashboard blocks */
.dashboardblock .dropdown-menu {
  border-radius: var(--cs-radius-xl) !important;
  border:        1px solid var(--cs-border) !important;
  box-shadow:    var(--cs-shadow-lg) !important;
  padding:       6px 0 !important;
}
.dashboardblock .dropdown-menu li a { font-size: 13px !important; color: var(--cs-text-body) !important; padding: 7px 14px !important; }
.dashboardblock .dropdown-menu li a:hover { background: var(--cs-surface-2) !important; color: var(--cs-primary) !important; }


/* ---------------------------------------------------------------
   20.  Root / Homepage  (#root section)
--------------------------------------------------------------- */
#root > #cont { padding-top: 32px; }

/* Welcome heading on homepage */
#root h3.left {
  font-size:   24px !important;
  font-weight: 700 !important;
  color:       var(--cs-text) !important;
}

/* Feature box grid spacing */
.box-feature-divider { margin-top: 32px !important; margin-bottom: 8px !important; }

/* Announcements section */
#announcements, div#announcements { margin-top: 40px !important; }
#announcements h3         { font-size: 17px !important; font-weight: 600 !important; color: var(--cs-text) !important; margin-bottom: 4px; }
#announcements h3 a       { color: var(--cs-text) !important; }
#announcements h3 a:hover { color: var(--cs-primary) !important; }
.annoucement_date         { color: var(--cs-muted) !important; font-size: 12px !important; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; }
#announcements p          { color: var(--cs-muted) !important; font-size: 14px !important; line-height: 1.7 !important; }
/* Announcement tag pills */
#announcements span[style*="background-color"] {
  border-radius: var(--cs-radius-pill) !important;
  font-size:     10px !important;
  font-weight:   600 !important;
  letter-spacing: 0.3px !important;
}


/* ---------------------------------------------------------------
   21.  Support Ticket Thread  (.com-con)
--------------------------------------------------------------- */
.com-con                  { margin-top: 16px; }
.com-con .cticket,
.com-con .aticket {
  border:        1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-xl) !important;
  padding:       14px 18px !important;
  background:    var(--cs-surface) !important;
  margin-bottom: 12px !important;
}
.com-con .aticket {
  background:  #fff5f5 !important;
  border-left: 4px solid var(--cs-danger) !important;
}
.com-con .aticket strong  { color: var(--cs-danger) !important; }
.com-con .byline          { color: var(--cs-muted) !important; font-size: 12px !important; }
.com-con .comment         { color: var(--cs-text-body) !important; font-size: 13px !important; line-height: 1.7 !important; padding-top: 8px !important; }


/* ---------------------------------------------------------------
   22.  Pagination / Page switcher
--------------------------------------------------------------- */
.pagelabel { color: var(--cs-muted) !important; font-size: 12px !important; padding: 6px 8px !important; line-height: 1.5 !important; }

/* "view" link in table rows */
a.view3 { color: var(--cs-primary) !important; font-size: 12px !important; font-weight: 500 !important; }
a.view3:hover { color: var(--cs-primary-dk) !important; }


/* ---------------------------------------------------------------
   23.  Cart / Order flow
   Targets HostBill's #onestepcontainer (category product grid),
   .customizer2 (configurator step), and cart.tpl (summary/checkout).
--------------------------------------------------------------- */

/* ── Base container ─────────────────────────────────────────── */
#onestepcontainer {
  padding: 8px 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--cs-text-body) !important;
}

/* ── Currency bar (cart.currencies.tpl) ─────────────────────── */
/* Selector commented out in template — nothing to style here.
   Restore if currency selector is re-enabled. */

/* ── Category / section headings inside the cart ────────────── */
.serv_head1,
.add_group_title {
  background:    var(--cs-navy) !important;
  background-image: none !important;
  color:         #ffffff !important;
  font-family:   var(--cs-font) !important;
  font-size:     13px !important;
  font-weight:   600 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  padding:       10px 18px !important;
  border-radius: var(--cs-radius-xl) var(--cs-radius-xl) 0 0 !important;
  text-shadow:   none !important;
}

.add_group {
  border:        1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-xl) !important;
  margin-bottom: 20px !important;
  padding:       0 !important;
  background:    var(--cs-surface) !important;
  overflow:      hidden;
}

p.add_descr {
  color:     var(--cs-muted) !important;
  font-size: 13px !important;
  padding:   8px 18px !important;
}

/* ── Plan card (newbox1) ─────────────────────────────────────── */
.newbox1 {
  background:    var(--cs-surface) !important;
  background-image: none !important;
  border:        1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-xl) !important;
  box-shadow:    var(--cs-shadow-sm) !important;
  padding:       0 !important;
  margin-bottom: 20px !important;
  color:         var(--cs-text-body) !important;
  transition:    box-shadow 0.2s, border-color 0.2s;
  overflow:      hidden;
}

.newbox1:hover {
  border-color: var(--cs-primary) !important;
  box-shadow:   var(--cs-shadow) !important;
}

.newbox1 small {
  font-size: 12px !important;
  color:     var(--cs-muted) !important;
}

/* Plan card header bar */
.newbox1header {
  background:    var(--cs-surface-2) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--cs-border) !important;
  padding:       14px 18px !important;
  position:      relative;
}

.newbox1header h3.modern {
  font-family:    var(--cs-font) !important;
  font-size:      16px !important;
  font-weight:    700 !important;
  color:          var(--cs-text) !important;
  text-transform: none !important;
  letter-spacing: -0.2px !important;
  margin:         0 !important;
  padding:        0 !important;
}

/* Tab/pill plan selector (ul.tabbme) */
ul.tabbme {
  background:       var(--cs-surface-2) !important;
  background-image: none !important;
  border-bottom:    1px solid var(--cs-border) !important;
  margin:           0 !important;
  padding:          0 8px !important;
  display:          flex;
  flex-wrap:        wrap;
  gap:              2px;
}

ul.tabbme li {
  background:       transparent !important;
  background-image: none !important;
  border:           none !important;
  border-bottom:    3px solid transparent !important;
  border-radius:    0 !important;
  color:            var(--cs-muted) !important;
  font-family:      var(--cs-font) !important;
  font-size:        13px !important;
  font-weight:      500 !important;
  padding:          10px 14px !important;
  cursor:           pointer;
  transition:       color 0.15s, border-color 0.15s;
}

ul.tabbme li:hover {
  color:        var(--cs-primary) !important;
  border-bottom: 3px solid var(--cs-primary) !important;
}

ul.tabbme li.on {
  color:         var(--cs-primary) !important;
  font-weight:   600 !important;
  border-bottom: 3px solid var(--cs-primary) !important;
}

ul.tabbme li a {
  color:           inherit !important;
  text-decoration: none !important;
  font-weight:     inherit !important;
}

/* ── Plan body / slidebg ─────────────────────────────────────── */
.slidebg {
  background:       var(--cs-surface) !important;
  background-image: none !important;
  border:           none !important;
  border-radius:    0 !important;
  margin-bottom:    0 !important;
}

.slidebg .innerx {
  padding: 18px !important;
}

.slidebg .descbox {
  border-top:  1px solid var(--cs-border) !important;
  padding:     14px 18px !important;
  color:       var(--cs-muted) !important;
  font-size:   13px !important;
  line-height: 1.6 !important;
}

#onestepcontainer .descbox {
  border:      1px solid var(--cs-border) !important;
  background:  var(--cs-surface) !important;
  border-radius: var(--cs-radius) !important;
  color:       var(--cs-muted) !important;
  font-size:   13px !important;
  line-height: 1.6 !important;
  padding:     14px 18px !important;
}

/* Plan name heading inside body */
.customizer2 h1 {
  font-family:    var(--cs-font) !important;
  font-size:      20px !important;
  font-weight:    700 !important;
  color:          var(--cs-text) !important;
  letter-spacing: -0.3px !important;
  margin-bottom:  8px !important;
}

/* ── Price tag ───────────────────────────────────────────────── */
.pricebg {
  background:  none !important;
  width:       auto !important;
  height:      auto !important;
  padding:     0 !important;
  float:       none !important;
}

.pricetag .price {
  font-family:    var(--cs-font) !important;
  font-size:      36px !important;
  font-weight:    800 !important;
  color:          var(--cs-primary) !important;
  line-height:    1 !important;
  letter-spacing: -1px !important;
  text-align:     left !important;
  width:          auto !important;
}

.pricetag .period {
  font-family:    var(--cs-font) !important;
  font-size:      12px !important;
  font-weight:    500 !important;
  color:          var(--cs-muted) !important;
  text-transform: lowercase !important;
  text-align:     left !important;
  height:         auto !important;
  line-height:    1.5 !important;
}

/* Price tag variant backgrounds → flatten all to brand style */
#onestepcontainer .bigbluepricetag {
  background:    var(--cs-navy) !important;
  background-image: none !important;
  border-radius: var(--cs-radius-xl) !important;
  padding:       18px 20px !important;
  color:         #ffffff !important;
}

#onestepcontainer .bigbluepricetag .cart_total {
  color:          #ffffff !important;
  font-size:      36px !important;
  font-weight:    800 !important;
  letter-spacing: -1px !important;
}

#onestepcontainer .graypricetag {
  background:    var(--cs-surface-2) !important;
  border:        1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-xl) !important;
  padding:       18px 20px !important;
}

#onestepcontainer .graypricetag .cart_total_light {
  font-size:   28px !important;
  font-weight: 700 !important;
  color:       var(--cs-text) !important;
}

#onestepcontainer .infopricetag {
  padding: 18px 20px !important;
}

/* ── VPS product grid container ──────────────────────────────── */
.vps_cart_products {
  display:   flex !important;
  flex-wrap: wrap !important;
  gap:       16px !important;
}

/* Each <form> inside the product grid is a flex item.
   HostBill emits width:48%;float:left as inline styles on .orderbox —
   those only work in the original float layout, not in flex. */
.vps_cart_products > form {
  flex:      0 0 calc(50% - 8px) !important;
  max-width: calc(50% - 8px) !important;
  min-width: 0 !important;
}

/* Override the inline width:48%;float:left;margin-right:10px on .orderbox */
.vps_cart_products form .orderbox {
  width:        100% !important;
  float:        none !important;
  margin-right: 0 !important;
  margin-top:   0 !important;
  box-sizing:   border-box !important;
}

/* Table inside orderboxpadding: fill width, let cells size naturally */
.orderboxpadding > table,
.orderboxpadding table {
  width:        100% !important;
  table-layout: auto !important;
}

/* Cycle select in the table: fill its cell, respect border-box */
.orderboxpadding select[name=cycle] {
  width:      100% !important;
  max-width:  100% !important;
  box-sizing: border-box !important;
}

/* Button column shrinks to its content */
.orderboxpadding table tr:last-child td:last-child {
  white-space: nowrap !important;
  width:       1% !important;
  padding-left: 8px !important;
}

.vps_cart_products .clear { display: none !important; }

/* ── Spec table (td.cf_* rows in plan configurator) ──────────── */
/* Replace PNG icon backgrounds with a clean text-only list */
.newbox1 .ttable {
  width:       100% !important;
  border:      none !important;
  font-size:   13px !important;
  line-height: 1.6 !important;
}

.newbox1 .ttable td,
.newbox1 .ttable th {
  border-bottom:   1px solid var(--cs-border) !important;
  padding:         8px 4px !important;
  color:           var(--cs-text-body) !important;
  vertical-align:  middle !important;
}

.newbox1 .ttable td:first-child,
.newbox1 .ttable th:first-child {
  color:       var(--cs-muted) !important;
  font-size:   12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  padding-left: 18px !important;
  width:        40% !important;
}

.newbox1 .ttable td:last-child { padding-right: 18px !important; }

/* Spec icon cells — suppress background image, clean up padding */
td.cf_cpu, td.cf_hdd, td.cf_memory, td.cf_bandwidth,
td.cf_ip,  td.cf_cp,  td.cf_os,    td.cf_mainboard,
td.cf_raid, td.cf_option {
  background-image: none !important;
  background:       transparent !important;
  padding-left:     18px !important;
  font-size:        13px !important;
  color:            var(--cs-text-body) !important;
}

td.cf_option {
  padding-left: 18px !important;
  padding-bottom: 4px !important;
}

/* ── "Order Now" / "Add to Order" CTA (a.checksubmit) ───────── */
a#checksubmit,
a.checksubmit,
input.checksubmit {
  display:          inline-block !important;
  background:       var(--cs-primary) !important;
  background-image: none !important;
  border:           1px solid var(--cs-primary) !important;
  color:            #ffffff !important;
  font-family:      var(--cs-font) !important;
  font-size:        15px !important;
  font-weight:      600 !important;
  padding:          12px 28px !important;
  border-radius:    var(--cs-radius) !important;
  text-decoration:  none !important;
  text-shadow:      none !important;
  box-shadow:       none !important;
  cursor:           pointer;
  transition:       background 0.15s, border-color 0.15s, box-shadow 0.15s;
  line-height:      1.4 !important;
  letter-spacing:   0.1px;
}

a#checksubmit:hover, a.checksubmit:hover, input.checksubmit:hover {
  background:   var(--cs-primary-dk) !important;
  border-color: var(--cs-primary-dk) !important;
  color:        #ffffff !important;
  box-shadow:   var(--cs-shadow) !important;
}

a#checksubmit:focus, a.checksubmit:focus, input.checksubmit:focus {
  outline:        2px solid var(--cs-primary) !important;
  outline-offset: 3px !important;
  box-shadow:     none !important;
}

a#checksubmit:active, a.checksubmit:active, input.checksubmit:active {
  background:   var(--cs-primary-dk) !important;
  border-color: var(--cs-primary-dk) !important;
}

/* ── .pricetag .order wrapper ────────────────────────────────── */
.pricetag .order {
  padding:    12px 0 4px !important;
  text-align: left !important;
}

.pricetag .order a {
  /* Inherits from a.checksubmit above */
  font-weight:     600 !important;
  font-size:       14px !important;
  color:           #ffffff !important;
  text-decoration: none !important;
}

/* ── Order box (plan selection footer / checkout bar) ────────── */
.orderbox {
  background:    var(--cs-surface-2) !important;
  background-image: none !important;
  border:        1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-xl) !important;
  box-shadow:    none !important;
  padding:       0 !important;
  margin-top:    20px !important;
}

.orderbox.sh1a {
  background:    var(--cs-info-bg) !important;
  border:        1px solid var(--cs-info-bdr) !important;
  border-radius: var(--cs-radius) !important;
  border-top:    none !important;
}

.orderbox .orderboxpadding {
  background:       var(--cs-surface-2) !important;
  background-image: none !important;
  border:           none !important;
  border-radius:    var(--cs-radius-xl) !important;
  box-shadow:       none !important;
  padding:          20px 24px !important;
}

.orderbox.sh1a .orderboxpadding {
  background:   var(--cs-info-bg) !important;
  border-radius: var(--cs-radius) !important;
  padding:       10px 16px !important;
}

/* ── Plan tile / boxorder (alternative layout) ───────────────── */
div.boxorder {
  background:    var(--cs-surface) !important;
  border:        1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-xl) !important;
  box-shadow:    var(--cs-shadow-sm) !important;
  padding:       20px 16px !important;
  margin:        8px !important;
  text-align:    center;
  transition:    box-shadow 0.2s, border-color 0.2s;
}

div.boxorder:hover {
  border-color: var(--cs-primary) !important;
  box-shadow:   var(--cs-shadow) !important;
}

div.boxorder h3 {
  font-family:    var(--cs-font) !important;
  font-size:      16px !important;
  font-weight:    700 !important;
  color:          var(--cs-text) !important;
  letter-spacing: -0.2px !important;
  margin-bottom:  6px !important;
}

div.box_active {
  border:        2px solid var(--cs-primary) !important;
  background:    #eff6ff !important;
  box-shadow:    var(--cs-shadow) !important;
}

div.boxorder .headpart { margin-bottom: 12px !important; height: auto !important; }
div.boxorder .bodpart  { height: auto !important; border-top: 1px solid var(--cs-border) !important; padding: 10px 0 !important; margin-bottom: 12px !important; }

/* ── Cart page sub-section headings ──────────────────────────── */
.spicked {
  background:    var(--cs-surface) !important;
  border:        1px solid var(--cs-border) !important;
  border-bottom: none !important;
  border-radius: var(--cs-radius) var(--cs-radius) 0 0 !important;
  padding:       10px 16px !important;
  font-family:   var(--cs-font) !important;
  font-size:     14px !important;
  font-weight:   600 !important;
  color:         var(--cs-primary) !important;
  float:         left;
  margin-right:  6px !important;
}

.snpicked {
  padding:   8px 12px !important;
  color:     var(--cs-muted) !important;
  font-size: 13px !important;
  float:     left;
}

/* ── Cart summary total (cart.tpl) ───────────────────────────── */
.cart_total {
  font-family:    var(--cs-font) !important;
  color:          var(--cs-text) !important;
  font-size:      36px !important;
  font-weight:    800 !important;
  letter-spacing: -1px !important;
  text-align:     right !important;
}

/* ── Cycle selector in plan card ─────────────────────────────── */
#cart .sh1a select,
#cart .sh1a select[name=cycle] {
  width:         auto !important;
  font-size:     13px !important;
  padding:       6px 10px !important;
  border-radius: var(--cs-radius) !important;
  border:        1px solid var(--cs-border-dark) !important;
  background:    var(--cs-surface) !important;
  color:         var(--cs-text) !important;
}

/* ── Selectize widget override for cycle/billing-period selects ── */
/* Selectize.js replaces <select name=cycle> with .selectize-control */
#cart .selectize-control .selectize-input,
#onestepcontainer .selectize-control .selectize-input {
  background:    var(--cs-surface) !important;
  background-image: none !important;
  border:        1px solid var(--cs-border-dark) !important;
  border-radius: var(--cs-radius) !important;
  box-shadow:    var(--cs-shadow-xs) !important;
  color:         var(--cs-text) !important;
  font-family:   var(--cs-font) !important;
  font-size:     13px !important;
  padding:       6px 10px !important;
  min-height:    unset !important;
}

/* Text inside closed (collapsed) selectize input */
#cart .selectize-control .selectize-input > *,
#onestepcontainer .selectize-control .selectize-input > * {
  color: var(--cs-text) !important;
}

/* Selectize dropdown panel */
#cart .selectize-dropdown,
#onestepcontainer .selectize-dropdown {
  background:    var(--cs-surface) !important;
  border:        1px solid var(--cs-border-dark) !important;
  border-radius: 0 0 var(--cs-radius) var(--cs-radius) !important;
  box-shadow:    var(--cs-shadow) !important;
  color:         var(--cs-text) !important;
  font-family:   var(--cs-font) !important;
  font-size:     13px !important;
}

#cart .selectize-dropdown .option,
#onestepcontainer .selectize-dropdown .option {
  color:   var(--cs-text) !important;
  padding: 8px 12px !important;
}

#cart .selectize-dropdown .option:hover,
#cart .selectize-dropdown .option.active,
#onestepcontainer .selectize-dropdown .option:hover,
#onestepcontainer .selectize-dropdown .option.active {
  background: var(--cs-info-bg) !important;
  color:      var(--cs-primary) !important;
}

/* ── Cart label ──────────────────────────────────────────────── */
#cart label,
#cart .newbox1 label.styled {
  font-weight: 500 !important;
  font-size:   13px !important;
  color:       var(--cs-text) !important;
}

/* ── newbox1 in cart context ─────────────────────────────────── */
#cart .newbox1 {
  border:        1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-xl) !important;
  background:    var(--cs-surface) !important;
  box-shadow:    var(--cs-shadow-sm) !important;
}

/* ── Progress bar in configurator ────────────────────────────── */
div.prog_cnt {
  background:    var(--cs-surface-2) !important;
  border:        1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius) !important;
  padding:       4px !important;
  font-size:     11px !important;
  margin:        10px 0 !important;
}

/* ── Cart step progress images (container only — PNGs stay) ──── */
/* Progress step images get faded — override with CSS steps when possible */
/* (progress_1_on.gif etc. are PNG — we can only style their containers) */

/* ── Cart responsive: stack plan cards at mobile widths ──────── */
@media (max-width: 767px) {
  .vps_cart_products {
    flex-direction: column !important;
  }

  .newbox1 {
    margin-bottom: 16px !important;
  }

  .pricetag .price {
    font-size: 28px !important;
  }

  a#checksubmit, a.checksubmit, input.checksubmit {
    width:    100% !important;
    display:  block !important;
    padding:  14px !important;
    text-align: center !important;
  }

  .orderbox .orderboxpadding {
    padding: 16px !important;
  }

  div.boxorder {
    margin: 8px 0 !important;
    width:  100% !important;
  }

  td.cf_cpu, td.cf_hdd, td.cf_memory, td.cf_bandwidth,
  td.cf_ip,  td.cf_cp,  td.cf_os,    td.cf_mainboard,
  td.cf_raid, td.cf_option {
    padding-left: 8px !important;
  }
}


/* ---------------------------------------------------------------
   24.  Footer
--------------------------------------------------------------- */
footer {
  border-top:  1px solid var(--cs-border) !important;
  background:  transparent !important;
  margin-top:  40px !important;
  padding:     0 !important;
  color:       var(--cs-muted) !important;
  font-size:   12px !important;
  text-shadow: none !important;
}

.cs-footer-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 0;
  flex-wrap:       wrap;
  gap:             8px;
}

.cs-footer-inner .left,
.cs-footer-inner .right {
  float: none !important;
}

footer a             { color: var(--cs-muted) !important; text-decoration: none !important; transition: color 0.15s; margin-left: 12px; }
footer a:first-child { margin-left: 0; }
footer a:hover       { color: var(--cs-primary) !important; }

/* Remove the Bootstrap 2 clear div inside footer */
footer .clear { display: none; }


/* ---------------------------------------------------------------
   25.  Responsive
--------------------------------------------------------------- */
@media (max-width: 979px) {
  #mainmenu.nav-fixed .nav { width: auto !important; }
}

@media (max-width: 767px) {
  /* Headpart and mainmenu bleed adjustments */
  #headpart,
  #mainmenu-container,
  #submenu {
    margin-left:   -10px !important;
    margin-right:  -10px !important;
    padding-left:  14px !important;
    padding-right: 14px !important;
  }

  #mainpart {
    height:     auto !important;
    min-height: 56px;
    flex-wrap:  wrap;
    padding:    8px 0;
  }

  #headpart h1 {
    font-size:   17px !important;
    line-height: 1.4 !important;
  }

  .headersection {
    height:     auto !important;
    flex-wrap:  wrap;
    padding:    4px 0 !important;
    gap:        4px;
  }

  #mainmenu-container { height: auto !important; }

  #mainmenu .nav-tabs       { display: flex; flex-wrap: wrap; }
  #mainmenu .nav-tabs > li > a {
    line-height: 38px !important;
    padding:     0 10px !important;
    font-size:   12px !important;
  }

  /* Login */
  #loginbox_container {
    width:  calc(100% - 24px) !important;
    margin: 24px auto !important;
  }

  /* Flex layout for account pages */
  .flex-container { flex-direction: column !important; }
  .left-content,
  .right-content  {
    border-radius: var(--cs-radius-xl) !important;
    width:         100% !important;
    margin-left:   0 !important;
  }
  .right-content  { box-shadow: none !important; }

  /* Ribbon action bar */
  .ribbon .right  { float: none !important; margin-top: 8px !important; width: 100%; }

  /* Footer */
  .cs-footer-inner { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Overflow tables on small screens */
  .table-responsive { overflow-x: auto; }
  .bordered-section { overflow-x: auto; }
}


/* ---------------------------------------------------------------
   26.  Misc overrides / utilities
--------------------------------------------------------------- */
/* Remove old Bootstrap 2 gradient + shadow patterns */
.wbox, .wbox_header, .wbox_content,
#mainmenu, .nav-tabs, .nav-pills,
.btn, .label, .badge, .alert {
  background-image: none !important;
  text-shadow:      none !important;
}

/* Section ID context for content padding */
#cont                   { min-height: 400px; padding-bottom: 40px; }
section#cont > #cont    { padding-top: 20px; }

/* Margins */
.mb15 { margin-bottom: 16px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb40 { margin-bottom: 40px !important; }
.fs11 { font-size: 11px !important; color: var(--cs-muted) !important; }

/* Float utilities (unchanged — Bootstrap 2 layout depends on these) */
.left  { float: left; }
.right { float: right; }
.clear { clear: both; }

/* Focus rings — accessibility */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.btn:focus {
  outline:        2px solid var(--cs-primary) !important;
  outline-offset: 2px !important;
}

/* Smooth micro-transitions */
.wbox, .bordered-section, .box-feature,
.dashboardblock .internal, .btn { transition: all 0.15s ease; }

/* paymenetfailed (typo preserved) */
#paymenetfailed { /* styled by wbox — no extra rules needed */ }

/* Domain icon images — keep visible but sized consistently */
.img-rounded { border-radius: var(--cs-radius) !important; }

/* VTip (info tooltip) */
.vtip_description {
  background:  url("../img/fugue/information-white.png") no-repeat right center;
  width:       16px;
  height:      16px;
  padding-left: 22px;
  display:     inline-block;
  opacity:     0.6;
}
.vtip_description:hover { opacity: 1; }

/* "Back" button circles on service detail */
.header-title .backbtn {
  border-radius: 50% !important;
  width:         34px !important;
  height:        34px !important;
  padding:       0 !important;
  display:       flex !important;
  align-items:   center !important;
  justify-content: center !important;
}

/* Suppress old tabbme / slides backgrounds */
.tabbme_bg { background: none !important; }