/* =========================================
   Cybix — WHMCS Twenty-One Overrides
   Single drop-in file: /templates/twenty-one/css/overrides.css
   ========================================= */

/* ---------- Brand tokens ---------- */
:root{
  --cxbx-primary: #831e79;         /* purple-ish */
  --cxbx-secondary: #1d70b7;       /* blue-ish */
  --cxbx-grad: linear-gradient(90deg, #831e79 0%, #1d70b7 100%);
  --cxbx-pageband: #eef6fd;        /* solid light blue band below menu */
  --cxbx-radius-lg: 14px;
  --cxbx-radius-md: 10px;
  --cxbx-radius-sm: 8px;
  --cxbx-shadow-1: 0 6px 24px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.06);
  --cxbx-shadow-2: 0 10px 30px rgba(16,24,40,.12), 0 4px 12px rgba(16,24,40,.10);
}

/* ---------- Global polish ---------- */
a { color: var(--cxbx-secondary); }
a:hover, a:focus { color: var(--cxbx-primary); text-decoration: none; }

/* Thin brand line under header */
.header::after{
  content:"";
  display:block;
  height:3px;
  background: var(--cxbx-grad);
}

/* SOLID band below menu (breadcrumb area) */
.header-lined{
  background: var(--cxbx-pageband) !important;
  border: 0 !important;
}
.header-lined .breadcrumb,
.breadcrumb{
  background: transparent !important;
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Cards / panels */
.panel,
.client-home-panels .panel,
.home-panels .panel,
.dashboard-panels .panel{
  border-radius: var(--cxbx-radius-lg) !important;
  border: 1px solid #e9ecf5 !important;
  box-shadow: var(--cxbx-shadow-1);
  overflow: hidden;
}
.panel-heading,
.client-home-panels .panel .panel-heading{
  border-top-left-radius: var(--cxbx-radius-lg) !important;
  border-top-right-radius: var(--cxbx-radius-lg) !important;
  background: #fff !important;
  border-bottom: 1px solid #eef1f7 !important;
}

/* Top stat tiles spacing/rounding */
.client-home-panels .panel .panel-body{
  padding: 18px 18px 16px 18px;
}

/* Tables */
.table > thead > tr > th {
  background: #f7f8fc;
  border-bottom: 1px solid #e9ecf5;
  color: #111827;
}

/* Tabs */
.nav-tabs > li > a { border-radius: var(--cxbx-radius-sm); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{
  border-color: var(--cxbx-primary) !important;
  color: var(--cxbx-primary) !important;
}

/* Alerts */
.alert-info { background: rgba(29,112,183,.10); border-color: rgba(29,112,183,.28); color:#0b3a99; }
.alert-success { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.28); }
.alert-warning { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.30); }
.alert-danger  { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.30); }

/* Badges / labels */
.label-primary, .badge-primary,
.label-info, .badge-info{
  background: var(--cxbx-secondary) !important;
}
.label-default, .badge-default{
  background: #e9ecf5; color:#111827;
}

/* Forms */
.form-control{
  border-radius: var(--cxbx-radius-sm);
  border-color: #e1e6f2;
  box-shadow: none;
}
.form-control:focus{
  border-color: var(--cxbx-secondary) !important;
  box-shadow: 0 0 0 .2rem rgba(29,112,183,.18) !important;
}

/* Buttons */
.btn{
  border-radius: var(--cxbx-radius-sm);
  transition: all .2s ease;
}
.btn-primary{
  background: var(--cxbx-primary) !important;
  border-color: var(--cxbx-primary) !important;
}
.btn-primary:hover, .btn-primary:focus{
  background: var(--cxbx-secondary) !important;
  border-color: var(--cxbx-secondary) !important;
}
.btn-default{
  background: #ffffff;
  border-color: #dfe4f1;
  color: #111827;
}
.btn-default:hover{
  border-color: var(--cxbx-secondary);
  color: var(--cxbx-secondary);
}

/* Pagination */
.pagination > li > a, .pagination > li > span{
  border-radius: var(--cxbx-radius-sm) !important;
  border-color: #e1e6f2;
}
.pagination > .active > a, .pagination > .active > span{
  background: var(--cxbx-secondary) !important;
  border-color: var(--cxbx-secondary) !important;
}

/* Breadcrumb chip look */
.breadcrumb{ border-radius: var(--cxbx-radius-sm); }

/* Dropdown menus */
.dropdown-menu{
  border-radius: var(--cxbx-radius-md);
  border-color: #e6eaf5;
  box-shadow: var(--cxbx-shadow-1);
}
.dropdown-menu > li > a:hover{ background: rgba(29,112,183,.10); }

/* ---------- Header / Navbar ---------- */
.navbar.navbar-default{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: 0 !important;
  border: none;
  box-shadow: 0 1px 0 #eef1f7;
  background: #fff;
}
#Primary_Navbar .nav > li > a { color: #0f172a; }
#Primary_Navbar .nav > li > a:hover,
#Primary_Navbar .nav > li.open > a,
#Primary_Navbar .nav > li.active > a{
  color: var(--cxbx-primary) !important;
  background: transparent !important;
}
.navbar-brand img{
  max-height: 45px !important;
  height: auto !important;
  width: auto !important;
  max-width: 220px !important;
}
@media (max-width:576px){
  .navbar-brand img{ max-height: 32px !important; }
}

/* Cart badge color */
.header .navbar .cart-badge,
#Primary_Navbar .cart .badge{
  background: var(--cxbx-secondary) !important;
}

/* ---------- FOOTER ---------- */
.footer, .copyright{
  background: #0F428B !important;
  color: #fff !important;
  border-top: none !important;
}
.footer::before{
  content:"";
  display:block;
  height:4px;
  background: linear-gradient(90deg, #7C237D 0%, #1D70B7 50%, #61398E 100%) !important;
  opacity: .9;
}
.footer a, .copyright a{ color: #ffffff !important; opacity: .95; }
.footer a:hover, .copyright a:hover{ color:#ffffff !important; opacity:1; text-decoration:none; }
.footer .btn, .footer .dropdown-toggle{
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  border-radius: 999px !important;
}
.footer .btn:hover, .footer .dropdown-toggle:hover{
  background: rgba(255,255,255,.22) !important;
  color:#ffffff !important;
}

/* ---------- Page-specific niceties ---------- */
#main-body .panel.login, #main-body .panel.login .panel-body,
#main-body .panel.register, #main-body .panel.register .panel-body{
  border-radius: var(--cxbx-radius-lg) !important;
  box-shadow: var(--cxbx-shadow-2);
}
.input-group .input-group-addon{
  background: #f2f4fa;
  border-color: #e1e6f2;
}
.steps li.active .step, .steps li.completed .step{
  background: var(--cxbx-secondary) !important;
  border-color: var(--cxbx-secondary) !important;
}
.panel-pricing .price{ color: var(--cxbx-primary); }
.panel-pricing .btn{ box-shadow: var(--cxbx-shadow-1); }
::selection{ background: rgba(131,30,121,.18); }

/* ===========================================================
   CYBIX SIDE-CARDS – NORMALIZED (NO GRADIENTS ANYWHERE)
   Applies to Services/Billing/Support/Domains/Invoices/Tickets/Account/Cart
   =========================================================== */
:root{ --cxbx-sidecard-radius: 8px; }

#Secondary_Sidebar .panel,
#Primary_Sidebar .panel,
[id$="_Sidebar"] .panel,
.sidebar .panel,
.sidebar-left .panel,
.sidebar-right .panel,
.panel-sidebar,
.cart-sidebar .panel,
#orderSummary .panel{
  border-radius: var(--cxbx-sidecard-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--cxbx-shadow-1);
}

/* Plain, consistent header on every sidecard (no gradients) */
#Secondary_Sidebar .panel > .panel-heading,
#Primary_Sidebar .panel > .panel-heading,
[id$="_Sidebar"] .panel > .panel-heading,
.sidebar .panel > .panel-heading,
.sidebar-left .panel > .panel-heading,
.sidebar-right .panel > .panel-heading,
.panel-sidebar > .panel-heading,
.cart-sidebar .panel > .panel-heading,
#orderSummary .panel > .panel-heading{
  background: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
  border: 1px solid #e9ecf5 !important;
  border-bottom-color: #eef1f7 !important;
  border-top-left-radius: var(--cxbx-sidecard-radius) !important;
  border-top-right-radius: var(--cxbx-sidecard-radius) !important;
}

/* Kill any overlay/pseudo-element that might add color */
#Secondary_Sidebar .panel > .panel-heading::before,
#Primary_Sidebar .panel > .panel-heading::before,
[id$="_Sidebar"] .panel > .panel-heading::before,
.sidebar .panel > .panel-heading::before,
.panel-sidebar > .panel-heading::before,
.cart-sidebar .panel > .panel-heading::before,
#orderSummary .panel > .panel-heading::before{
  content: none !important;
  display: none !important;
}

/* List items inside sidecards (keep your hover/active styling) */
#Secondary_Sidebar .list-group-item,
#Primary_Sidebar .list-group-item,
[id$="_Sidebar"] .list-group-item,
.sidebar .list-group-item,
.panel-sidebar .list-group-item,
.cart-sidebar .list-group-item{
  border-color: #e6eaf5 !important;
}
#Secondary_Sidebar .list-group-item:hover,
#Primary_Sidebar .list-group-item:hover,
[id$="_Sidebar"] .list-group-item:hover,
.sidebar .list-group-item:hover,
.panel-sidebar .list-group-item:hover,
.cart-sidebar .list-group-item:hover{
  background: rgba(29,112,183,.10) !important;
  color: #1d70b7 !important;
}
#Secondary_Sidebar .list-group-item.active,
#Primary_Sidebar .list-group-item.active,
[id$="_Sidebar"] .list-group-item.active,
.sidebar .list-group-item.active,
.panel-sidebar .list-group-item.active,
.cart-sidebar .list-group-item.active{
  background: #0F428B !important;       /* matches your footer blue */
  border-color: #0F428B !important;
  color: #fff !important;
}
#Secondary_Sidebar .list-group-item .badge,
#Primary_Sidebar .list-group-item .badge,
[id$="_Sidebar"] .list-group-item .badge,
.sidebar .list-group-item .badge,
.panel-sidebar .list-group-item .badge,
.cart-sidebar .list-group-item .badge{
  background: #0F428B !important;
  color: #fff !important;
  border: none !important;
}

/* Cybix sidecards (applies after hook adds the class) */
.cxbx-sidecard{
  border-radius: 8px !important;       /* your preferred corner size */
  overflow: hidden !important;
  box-shadow: var(--cxbx-shadow-1);
}
.cxbx-sidecard > .panel-heading{
  background-image: linear-gradient(135deg, #9B3AA0 0%, #5EA1D6 100%) !important;  /* softer purple ? blue */
  background-color: transparent !important;
  color: #fff !important;
  border: none !important;
}

/* Cybix – card style for main data tables (Services, Domains, Invoices, etc.) */
#main-body .table-list,
#main-body table.table {
  background: #fff;
  border: 1px solid #e9ecf5;
  border-radius: 12px;
  box-shadow: var(--cxbx-shadow-1);
  overflow: hidden;                  /* keeps corners crisp */
  border-collapse: separate;         /* keeps radius visible */
}

/* Header + cell spacing */
#main-body table.table > thead > tr > th {
  background: #f7f8fc;
  border-bottom: 1px solid #e9ecf5;
}
#main-body table.table > thead > tr > th,
#main-body table.table > tbody > tr > td {
  padding: 12px 16px;
}

/* Subtle row hover */
#main-body table.table > tbody > tr:hover {
  background: rgba(29,112,183,.06);
}

/* Datatables controls (search + page length) to match inputs */
#main-body .dataTables_wrapper .dataTables_filter input,
#main-body .dataTables_wrapper .dataTables_length select {
  border-radius: 8px;
  border-color: #e1e6f2;
  box-shadow: none;
}

/* Cybix — colored accents for the 4 dashboard tiles */
:root{
  --tile-services:#831e79;   /* purple */
  --tile-domains:#1d70b7;    /* blue   */
  --tile-tickets:#0ea5a7;    /* teal   */
  --tile-invoices:#f59e0b;   /* amber  */
}

/* top border accent + light lift on hover (optional) */
.cxbx-tile-services{ border-top:4px solid var(--tile-services); }
.cxbx-tile-domains { border-top:4px solid var(--tile-domains);  }
.cxbx-tile-tickets { border-top:4px solid var(--tile-tickets);  }
.cxbx-tile-invoices{ border-top:4px solid var(--tile-invoices); }

.cxbx-tile-services,
.cxbx-tile-domains,
.cxbx-tile-tickets,
.cxbx-tile-invoices{
  transition: transform .15s ease, box-shadow .15s ease;
}
.cxbx-tile-services:hover,
.cxbx-tile-domains:hover,
.cxbx-tile-tickets:hover,
.cxbx-tile-invoices:hover{
  transform: translateY(-2px);
  box-shadow: var(--cxbx-shadow-2);
}

/* color the big icon using currentColor (works for FA + inline SVG) */
.cxbx-tile-services .panel-body,
.cxbx-tile-domains  .panel-body,
.cxbx-tile-tickets  .panel-body,
.cxbx-tile-invoices .panel-body{
  color: inherit;
}
.cxbx-tile-services .panel-body i,
.cxbx-tile-domains  .panel-body i,
.cxbx-tile-tickets  .panel-body i,
.cxbx-tile-invoices .panel-body i,
.cxbx-tile-services .panel-body .fa,
.cxbx-tile-domains  .panel-body .fa,
.cxbx-tile-tickets  .panel-body .fa,
.cxbx-tile-invoices .panel-body .fa,
.cxbx-tile-services .panel-body svg,
.cxbx-tile-domains  .panel-body svg,
.cxbx-tile-tickets  .panel-body svg,
.cxbx-tile-invoices .panel-body svg{
  color: inherit;
}
.cxbx-tile-services .panel-body svg *,
.cxbx-tile-domains  .panel-body svg *,
.cxbx-tile-tickets  .panel-body svg *,
.cxbx-tile-invoices .panel-body svg *{
  fill: currentColor;
}

/* assign brand colors to each tile’s content */
.cxbx-tile-services .panel-body{ color: var(--tile-services); }
.cxbx-tile-domains  .panel-body{ color: var(--tile-domains);  }
.cxbx-tile-tickets  .panel-body{ color: var(--tile-tickets);  }
.cxbx-tile-invoices .panel-body{ color: var(--tile-invoices); }

/* Make stat-tile icons follow the text color (Font Awesome + inline SVG) */
.client-home-panels .panel .panel-body i,
.client-home-panels .panel .panel-body .fa,
.client-home-panels .panel .panel-body svg { color: currentColor; }
.client-home-panels .panel .panel-body svg * { fill: currentColor; }

/* ===== Cybix — color the 4 dashboard tiles (services/domains/tickets/invoices) ===== */

/* Rebrand the built-in highlight bar colors only inside the tiles component */
.tiles .bg-color-blue  { background: #831e79 !important; } /* Services */
.tiles .bg-color-green { background: #1d70b7 !important; } /* Domains  */
.tiles .bg-color-red   { background: #0ea5a7 !important; } /* Tickets   */
.tiles .bg-color-gold  { background: #f59e0b !important; } /* Invoices  */

/* Color each tile’s big number + icon via position (order is Services, Domains, Tickets, Invoices) */
.tiles .row.no-gutters > [class*="col-"]:nth-child(1) .tile i,
.tiles .row.no-gutters > [class*="col-"]:nth-child(1) .tile .stat { color: #831e79 !important; }

.tiles .row.no-gutters > [class*="col-"]:nth-child(2) .tile i,
.tiles .row.no-gutters > [class*="col-"]:nth-child(2) .tile .stat { color: #1d70b7 !important; }

.tiles .row.no-gutters > [class*="col-"]:nth-child(3) .tile i,
.tiles .row.no-gutters > [class*="col-"]:nth-child(3) .tile .stat { color: #0ea5a7 !important; }

.tiles .row.no-gutters > [class*="col-"]:nth-child(4) .tile i,
.tiles .row.no-gutters > [class*="col-"]:nth-child(4) .tile .stat { color: #f59e0b !important; }

/* Small polish: lift on hover */
.tiles .tile { transition: transform .15s ease, box-shadow .15s ease; }
.tiles .tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(16,24,40,.12), 0 4px 12px rgba(16,24,40,.10);
}

/* --- Cybix: bring back the thin brand accent line on home cards --- */
.client-home-cards .card{
  border:1px solid #e9ecf5 !important;
  border-radius:12px !important;
  box-shadow:0 2px 6px rgba(16,24,40,.04) !important; /* light, not floaty */
  background:#fff !important;
}

/* Make any “accent” card show a colored top border */
.client-home-cards .card[class*="card-accent-"]{
  border-top-width:4px !important;
  border-top-style:solid !important;
}

/* Map common accent class names to Cybix palette */
.client-home-cards .card[class*="card-accent-primary"],
.client-home-cards .card[class*="card-accent-purple"]{ border-top-color:#831e79 !important; }  /* Cybix purple */
.client-home-cards .card[class*="card-accent-info"],
.client-home-cards .card[class*="card-accent-blue"]{    border-top-color:#1d70b7 !important; }  /* Cybix blue */
.client-home-cards .card[class*="card-accent-success"],
.client-home-cards .card[class*="card-accent-green"]{   border-top-color:#10b981 !important; }  /* soft green */
.client-home-cards .card[class*="card-accent-warning"],
.client-home-cards .card[class*="card-accent-gold"]{    border-top-color:#f59e0b !important; }  /* gold */

/* Keep headers/footers clean to match the sidecards */
.client-home-cards .card-header{
  background:#fff !important;
  border-bottom:1px solid #eef1f7 !important;
  font-weight:600;
}
.client-home-cards .card-footer{
  background:#fff !important;
  border-top:1px solid #eef1f7 !important;
}

/* Lift each tile (not the whole row) — keeps underline colors */
#main-body .tiles.mb-4 .tile{
  background:#fff !important;
  border-radius:12px !important;
  box-shadow: 0 6px 24px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.06), 0 0 0 1px #e9ecf5 inset !important;
  overflow: hidden !important;
}

#main-body .tiles.mb-4 .tile .highlight{ position:absolute; left:0; right:0; bottom:0; height:6px; }
/* Keep each tile itself flat and let the colored .highlight bar sit flush */
#main-body .tiles.mb-4 .tile{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;               /* ensures the color bar clips cleanly */
}
#main-body .tiles.mb-4 .tile .highlight{
  position: absolute; left:0; right:0; bottom:0; height:6px;   /* preserve the accent bar */
}

/* Cybix – stat tiles as individual white cards */
#main-body .tiles.mb-4 .tile{
  position: relative;
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 24px rgba(16,24,40,.08), 0 2px 2px rgba(16,24,40,.06) !important;
  border: 3px solid #e9ecf5 !important;
  overflow: hidden !important;            /* lets the accent bar round with the card */
  transition: box-shadow .18s ease, transform .18s ease;
}

/* subtle hover lift (optional) */
#main-body .tiles.mb-4 .tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(16,24,40,.12), 0 4px 12px rgba(16,24,40,.10) !important;
}

/* keep the colored underline and round it to match corners */
#main-body .tiles.mb-4 .tile .highlight{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: px;
}

/* make sure the inner content isn’t cramped */
#main-body .tiles.mb-4 .tile .stat,
#main-body .tiles.mb-4 .tile .title{
  padding-left: 8px;
  padding-right: 8px;
}

/* ===== Cybix — Ticket department cards ===== */
.cxbx-dept-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  margin-top:8px;
}
.cxbx-dept-card{
  position:relative;
  display:block;
  background:#fff;
  border:1px solid #e6eaf5;
  border-radius:12px;
  padding:18px 56px 16px 58px; /* space for icon + chevron */
  color:#0f172a; text-decoration:none;
  box-shadow:0 6px 24px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cxbx-dept-card:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 30px rgba(16,24,40,.12), 0 4px 12px rgba(16,24,40,.10);
  border-color:#d7deef;
}
.cxbx-dept-card > i{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:999px; display:grid; place-items:center;
  background:rgba(29,112,183,.12); color:#1d70b7; font-size:14px;
}
.cxbx-dept-card > span{ font-weight:600; }
.cxbx-dept-card small{ display:block; margin-top:6px; color:#64748b; }

/* Right chevron (no Font Awesome required) */
.cxbx-dept-card::after{
  content: "›";               /* simple arrow */
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 700;
  color: #94a3b8;
  transition: right .15s ease, color .15s ease;
}
.cxbx-dept-card:hover::after{ right: 12px; color: #1d70b7; }

/* optional brand accents on first four cards */
.cxbx-dept-card:nth-child(1){ box-shadow:inset 4px 0 0 #831e79, 0 6px 24px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.06); }
.cxbx-dept-card:nth-child(2){ box-shadow:inset 4px 0 0 #1d70b7, 0 6px 24px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.06); }
.cxbx-dept-card:nth-child(3){ box-shadow:inset 4px 0 0 #10b981, 0 6px 24px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.06); }
.cxbx-dept-card:nth-child(4){ box-shadow:inset 4px 0 0 #f59e0b, 0 6px 24px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.06); }

/* Cybix — ticket dept cards: draw right chevron with borders (no fonts) */
.cxbx-dept-card{
  position: relative;
  padding-right: 44px;                 /* room for the arrow */
}

.cxbx-dept-card::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  border-right: 3px solid #94a3b8;     /* arrow color (idle) */
  border-bottom: 3px solid #94a3b8;
  transform: translateY(-50%) rotate(-45deg); /* makes a chevron ? */
  transition: right .15s ease, border-color .15s ease;
}

.cxbx-dept-card:hover::after{
  right: 14px;
  border-color: #1d70b7;               /* on hover */
}

/* Safety: if anything injected a right icon, hide it */
.cxbx-dept-card i.fa-chevron-right,
.cxbx-dept-card .right-icon{
  display: none !important;
}

/* === Cybix: Order Summary panel (match sidecards) === */
#orderSummary .panel,
.cart-sidebar .panel {
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #e9ecf5 !important;
  box-shadow: var(--cxbx-shadow-1);
}

/* Header */
#orderSummary .panel > .panel-heading,
.cart-sidebar .panel > .panel-heading {
  background: #fff !important;
  color: #0f172a !important;
  border-bottom: 1px solid #eef1f7 !important;
  font-weight: 600;
}

/* Body rows / list items */
#orderSummary .list-group-item,
.cart-sidebar .list-group-item {
  background: #fff !important;
  border-color: #e6eaf5 !important;
}

/* Footer (Total Due Today area) */
#orderSummary .panel-footer,
.cart-sidebar .panel-footer {
  background: #fff !important;
  border-top: 1px solid #eef1f7 !important;
}

/* === Cybix: Order Summary (secondary-cart-sidebar variant) === */
.secondary-cart-sidebar .order-summary{
  background:#fff !important;
  border:1px solid #e9ecf5 !important;
  border-radius:8px !important;
  box-shadow:var(--cxbx-shadow-1);
  overflow:hidden;
}

/* Header */
.secondary-cart-sidebar .order-summary > h2{
  margin:0 !important;
  padding:12px 16px !important;
  background:#fff !important;
  color:#0f172a !important;
  border-bottom:1px solid #eef1f7 !important;
  font-weight:600;
}

/* Body */
.secondary-cart-sidebar .order-summary .summary-container{
  padding:12px 16px !important;
  background:#fff !important;
}

/* Footer (Total Due Today) */
.secondary-cart-sidebar .order-summary .text-center{
  padding:14px 16px !important;
  background:#fff !important;
  border-top:1px solid #eef1f7 !important;
}

/* Order Summary – top gradient band only */
.secondary-cart-sidebar .order-summary{
  position: relative;
}
.secondary-cart-sidebar .order-summary::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(135deg, var(--cxbx-primary), var(--cxbx-secondary));
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* === Cybix: elevate page titles (all screens that use .header-lined) === */
.header-lined h1,
.header-lined .h1,
.header-lined .h2,
.header-lined .page-title {
  position: relative;
  display: block;                 /* full-width like your screenshots */
  background: #fff;               /* card, not the pale blue */
  border: 1px solid #e6eaf5;
  border-radius: 7px;
  box-shadow: var(--cxbx-shadow-1);
  padding: 12px 14px;
  margin: 5px 0 10px;            /* breathing room inside the band */
  line-height: 1.2;
}

/* brand accent at the top edge (matches your other cards) */
.header-lined h1::before,
.header-lined .h1::before,
.header-lined .h2::before,
.header-lined .page-title::before {
  content: "";
  position: absolute;
  left: -1px;                     /* cover the 1px border nicely */
  right: -1px;
  top: -1px;
  height: 6px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, var(--cxbx-primary) 0%, var(--cxbx-secondary) 100%);
}

/* keep the light-blue band behind the title (you already set this) */
.header-lined { background: var(--cxbx-pageband) !important; }

/* ===== Standard Cart: lift the domain options panel (no layout changes) ===== */
#order-standard_cart #frmProductDomain .domain-selection-options,
#order-standard_cart .domain-selection-options {
  background: #fff;
  border: 1px solid #e6eaf5;               /* same border tone as other panels */
  border-radius: var(--cxbx-radius-lg);     /* keep your global radius */
  box-shadow: var(--cxbx-shadow-1);         /* subtle elevation */
  padding: 16px 18px;                       /* light inner breathing room */
  margin-top: 8px;                          /* small offset from title bar */
  overflow: hidden;                         /* clip rounded corners cleanly */
}

/* === Product tiles — bring back the gradient bar + better type/spacing === */

/* 1) Card container (keep your lift & radius) */
#order-standard_cart #products .row > [class*="col-"] > div{
  position: relative;
  border-radius: 14px;
  background:#fff;
  border:1px solid #e9ecf5;
  box-shadow: var(--cxbx-shadow-1,0 6px 20px rgba(22,34,51,.06));
  padding:18px 18px 14px;
}

/* 2) Skinny gradient bar on top of each tile */
#order-standard_cart #products .row > [class*="col-"] > div::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:6px;
  border-top-left-radius:14px; border-top-right-radius:14px;
  background-image: linear-gradient(90deg,
    var(--cxbx-primary,#8f39a9) 0%,
    var(--cxbx-secondary,#2a74cf) 100%);
}

/* 3) Headings — a bit bigger, tighter */
#order-standard_cart #products .row > [class*="col-"] > div h3,
#order-standard_cart #products .row > [class*="col-"] > div h4{
  margin:8px 0 10px !important;
  font-size:20px;                 /* bump up */
  font-weight:700;
}

/* If your theme shows a grey strip behind the title, make it subtle/flat */
#order-standard_cart #products .row > [class*="col-"] > div .panel-heading{
  background:#f5f7fb !important;
  border:0 !important;
  padding:10px 12px !important;
  border-radius:8px;
}

/* 4) Body text rhythm */
#order-standard_cart #products .row > [class*="col-"] > div p{
  margin:6px 0;                   /* reduce big gaps */
  font-size:15.5px;               /* slightly larger */
  color:#4b5563;
}

/* 5) Price/CTA block spacing */
#order-standard_cart #products .row > [class*="col-"] > div .btn{
  margin-top:12px;
  display:inline-flex; align-items:center; gap:.5rem;
}

/* 6) Clean bullet list for features (no fonts/emojis needed) */
#order-standard_cart #products .cxbx-feats{      /* use this class in descriptions */
  margin:8px 0 6px; padding:0; list-style:none;
}
#order-standard_cart #products .cxbx-feats li{
  position:relative; padding-left:18px; margin:6px 0;
  font-size:15.5px; color:#4b5563;
}
/* solid dot bullet so nothing renders as ? */
#order-standard_cart #products .cxbx-feats li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:7px; height:7px; border-radius:50%;
  background:var(--cxbx-secondary,#2a74cf);
  transform:translateY(-50%);
}

/* Mobile: full-width CTA for easier tapping */
@media (max-width:575.98px){
  #order-standard_cart #products .row > [class*="col-"] > div .btn{
    width:100%; justify-content:center;
  }
}

/* --- Product tiles: tighter spacing + clean title --- */

/* Card padding a bit tighter */
#order-standard_cart #products .row > [class*="col-"] > div{
  padding:12px 12px 12px;
}

/* Paragraph spacing inside tiles */
#order-standard_cart #products .row > [class*="col-"] > div p{
  margin:4px 0;
  font-size:15.5px;
}

/* Feature list spacing */
#order-standard_cart #products .cxbx-feats{    /* <ul class="cxbx-feats">… */
  margin:4px 0 2px;
  padding:0;
}
#order-standard_cart #products .cxbx-feats li{
  margin:3px 0;                /* less gap between items */
  line-height:1;
}

/* CTA button – a touch closer to the list */
#order-standard_cart #products .row > [class*="col-"] > div .btn{
  margin-top:10px;
}

/* Title strip: remove the grey box and use a crisp underline instead */
#order-standard_cart #products .row > [class*="col-"] > div .panel-heading{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  margin:0 0 10px !important;
}
#order-standard_cart #products .row > [class*="col-"] > div .panel-heading h3,
#order-standard_cart #products .row > [class*="col-"] > div h3.panel-title{
  margin:0 !important;
  font-size:20px;
  font-weight:700;
  color:#111827;
}
/* short gradient underline below the plan name */
#order-standard_cart #products .row > [class*="col-"] > div .panel-heading::after{
  content:"";
  display:block;
  height:4px; width:90px; margin-top:8px;
  border-radius:6px;
  background-image:linear-gradient(90deg,
    var(--cxbx-primary,#8f39a9), var(--cxbx-secondary,#2a74cf));
}

/* =========================
   Standard Cart – product tiles
   Bigger price + purple CTA
   ========================= */

/* 1) Price: bold, larger, tight line-height */
#order-standard_cart #products .price,
#order-standard_cart #products .product-pricing .price,
#order-standard_cart #products [class*="pricing"] .price {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.05;
  color: #0f172a; /* near-black for contrast */
  letter-spacing: .2px;
}

/* Small helpers for the little labels around the price
   These hit common class names WHMCS uses; harmless if absent */
#order-standard_cart #products .price-prefix,
#order-standard_cart #products .starting-from,
#order-standard_cart #products .price-term,
#order-standard_cart #products .cycle,
#order-standard_cart #products .term {
  display: block;
  font-size: 12px;
  color: #6b7280;               /* subtle gray */
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 2px;
}

/* 2) CTA button: brand purple (#722B83) */
#order-standard_cart #products .btn-success {
  background-color: #722B83 !important;
  border-color: #722B83 !important;
}
#order-standard_cart #products .btn-success:hover,
#order-standard_cart #products .btn-success:focus {
  background-color: #5f236c !important;   /* darker on hover */
  border-color: #5f236c !important;
}
#order-standard_cart #products .btn-success:focus {
  box-shadow: 0 0 0 .2rem rgba(114, 43, 131, .25);
}

/* ============== Cybix – Domain Map polish ============== */
#cxbx-domainmap .panel,
#cxbx-domainmap .well,
#cxbx-domainmap .alert,
#cxbx-domainmap .list-group-item,
#cxbx-domainmap .btn,
#cxbx-domainmap .form-control {
  border-radius: 10px !important;         /* soften corners (less pill) */
}

/* Card shells (left+right boxes) */
#cxbx-domainmap .panel,
#cxbx-domainmap .well {
  background: #fff;
  border: 1px solid #e7ebf3;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}

/* Card headers */
#cxbx-domainmap .panel-heading {
  background: #fff;
  border-bottom: 1px solid #eef1f6;
  border-radius: 10px 10px 0 0 !important;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 18px;
  color: #202939;
}

/* Default “info” strip at the top */
#cxbx-domainmap .alert-info {
  background: #f3f7ff;
  border: 1px solid #e1e9ff;
  color: #223354;
}

/* DNS reminder */
#cxbx-domainmap .alert-warning {
  background: #fff8e6;
  border: 1px solid #ffe4a8;
  border-left: 4px solid #f2c94c;
  color: #5b4a1f;
}

/* Inputs */
#cxbx-domainmap .form-control {
  height: 46px;
  border: 1px solid #dfe3ec;
  box-shadow: none;
}
#cxbx-domainmap .form-control:focus {
  border-color: #722B83;
  box-shadow: 0 0 0 3px rgba(114, 43, 131, 0.15);
}

/* Buttons */
#cxbx-domainmap .btn {
  padding: 10px 16px;
}
#cxbx-domainmap .btn-primary {
  background: #722B83;
  border-color: #722B83;
}
#cxbx-domainmap .btn-primary:hover,
#cxbx-domainmap .btn-primary:focus {
  background: #5d216a;
  border-color: #5d216a;
}

/* Connected-domain list */
#cxbx-domainmap .list-group-item {
  border: 1px solid #e7ebf3;
  border-radius: 12px !important;
}
#cxbx-domainmap .label-success,
#cxbx-domainmap .badge-success {
  background: #1dbf73;
}

/* Panel body spacing (tightens things slightly) */
#cxbx-domainmap .panel-body { padding: 18px 16px; }

/* Remove any heavy rounding carried by base theme */
#cxbx-domainmap .panel,
#cxbx-domainmap .well,
#cxbx-domainmap .alert { -webkit-mask-image: none; mask-image: none; }

/* ===========================
   Standard Cart – center panel polish
   Targets: Configure, View Cart, Checkout
   =========================== */

/* 1) Lift the center content blocks */
#order-standard_cart .secondary-cart-body,
#order-standard_cart form#frmCheckout {
  background: #fff;
  border: 1px solid #e9edf5;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.04);
  position: relative;
  overflow: hidden;             /* keep the rounded corners crisp */
  padding: 18px 20px 22px;
}

/* 2) Gradient accent bar on top (to match your other cards) */
#order-standard_cart .secondary-cart-body::before,
#order-standard_cart form#frmCheckout::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #7E2EA7 0%, #2E77C6 100%);
  border-radius: 14px 14px 0 0;
  position: absolute;
  top: 0; left: 0; right: 0;
}

/* 3) Headings & micro-structure in the center panel */
#order-standard_cart .product-info .product-title,
#order-standard_cart .section-title,
#order-standard_cart h2,
#order-standard_cart h3 {
  font-weight: 700;
  color: #1f2937;
  letter-spacing: .2px;
  margin: 6px 0 10px;
}

/* Sub-head lines (e.g., “Metrics”, “Configurable Options”) */
#order-standard_cart .secondary-cart-body .sub-heading,
#order-standard_cart .secondary-cart-body .product-title {
  border-bottom: 1px solid #eef1f6;
  padding-bottom: 6px;
  margin-bottom: 12px;
}

/* 4) Tighten list spacing so features don’t look too airy */
#order-standard_cart .secondary-cart-body ul li {
  margin: 4px 0;
}

/* 5) Inputs look cleaner inside the lifted card */
#order-standard_cart .secondary-cart-body .form-control,
#order-standard_cart form#frmCheckout .form-control,
#order-standard_cart .selectize-control.single .selectize-input {
  border-radius: 10px;
  border-color: #dfe3ea;
  box-shadow: none;
}

/* 6) Brand your primary action button here as well */
#order-standard_cart .btn-primary {
  background: #722B83;
  border-color: #722B83;
}
#order-standard_cart .btn-primary:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(114,43,131,.25);
}

/* ===========================
   Configure step: compact the plan description
   =========================== */

/* Target the features list right under the plan title.
   Works for both ".cxbx-feats" and the generic "product-info + ul". */
#order-standard_cart .secondary-cart-body ul.cxbx-feats,
#order-standard_cart .secondary-cart-body .product-info + ul {
  max-width: 760px;           /* don't let it span the whole card */
  columns: 2;                 /* two columns on desktop */
  column-gap: 32px;
  margin: 8px 0 6px;
  padding: 0;
  list-style: none;           /* we'll draw our own bullets */
}

/* List items: tighter spacing and custom dot */
#order-standard_cart .secondary-cart-body ul.cxbx-feats li,
#order-standard_cart .secondary-cart-body .product-info + ul li {
  position: relative;
  padding-left: 16px;
  margin: 4px 0 8px;          /* much tighter than default */
  line-height: 1.35;
  break-inside: avoid;        /* keep items intact across columns */
}
#order-standard_cart .secondary-cart-body ul.cxbx-feats li::before,
#order-standard_cart .secondary-cart-body .product-info + ul li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2E77C6;        /* brand accent dot */
  position: absolute;
  left: 0; top: 0.6em;
}

/* Kill the stray line breaks that create big vertical gaps */
#order-standard_cart .secondary-cart-body ul.cxbx-feats br,
#order-standard_cart .secondary-cart-body .product-info + ul br {
  display: none;
}

/* Mobile: fall back to a single column for readability */
@media (max-width: 991px) {
  #order-standard_cart .secondary-cart-body ul.cxbx-feats,
  #order-standard_cart .secondary-cart-body .product-info + ul {
    columns: 1;
    max-width: none;
  }
}

/* Standard Cart – remove the useless "Apply Promo Code" tab header */
#order-standard_cart .view-cart-tabs > .nav.nav-tabs {
  display: none !important;
}

/* Tighten the area since the tab header is gone */
#order-standard_cart .view-cart-tabs .tab-content {
  padding-top: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* MOBILE tidy for the two sidebars */
@media (max-width: 991px) {
  /* Add spacing after main content once sidebars move below */
  #order-standard_cart { margin-bottom: 16px; }

  /* Make the sidebars feel secondary */
  .sidebar-collapsed .panel {
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(24,38,62,.06);
    border: 1px solid rgba(27,31,59,.08);
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden;
  }

  .sidebar-collapsed .panel-heading {
    padding: 12px 14px;
    font-weight: 600;
    background: #f7f9fc;
  }

  /* Accordion: content hidden by default */
  .sidebar-collapsed .panel .panel-body,
  .sidebar-collapsed .panel .list-group,
  .sidebar-collapsed .panel .panel-collapse,
  .sidebar-collapsed .panel .form-group,
  .sidebar-collapsed .panel .panel-card-body {
    display: none;
  }
  .sidebar-collapsed .panel.is-open .panel-body,
  .sidebar-collapsed .panel.is-open .list-group,
  .sidebar-collapsed .panel.is-open .panel-collapse,
  .sidebar-collapsed .panel.is-open .form-group,
  .sidebar-collapsed .panel.is-open .panel-card-body {
    display: block;
  }

  /* Tiny chevron affordance */
  .sidebar-collapsed .panel-heading {
    position: relative;
  }
  .sidebar-collapsed .panel-heading::after {
    content: '?';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform .18s ease;
    opacity: .6;
  }
  .sidebar-collapsed .panel.is-open .panel-heading::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* Compact inner controls when expanded */
  .sidebar-collapsed .panel .form-control {
    height: 38px;
    font-size: .95rem;
  }
}


/* Replace the arrow character with a pure-CSS chevron (works in all fonts) */
@media (max-width: 991px) {
  /* Give a little room for the chevron, so tapping that area toggles too */
  .sidebar-collapsed .panel-heading {
    position: relative;
    padding-right: 36px; /* bigger tap target on the right */
  }

  /* Draw the chevron using borders */
  .sidebar-collapsed .panel-heading::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(0,0,0,.55);
    border-bottom: 2px solid rgba(0,0,0,.55);
    transform: translateY(-60%) rotate(45deg);   /* ? */
    transition: transform .18s ease, opacity .18s ease;
    opacity: .6;
  }

  /* Rotate up when the panel is open */
  .sidebar-collapsed .panel.is-open .panel-heading::after {
    transform: translateY(-60%) rotate(-135deg); /* ? */
  }
}

/* --- Topbar brand color --- */
div.topbar {
  background: #3B529F !important;   /* pick your logo blue here */
  color: #fff !important;
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}

/* Make all links/icons in the topbar white */
div.topbar a,
div.topbar .navbar-light .navbar-nav .nav-link,
div.topbar .navbar-text {
  color: #fff !important;
}

/* Hover/focus state */
div.topbar a:hover,
div.topbar .navbar-light .navbar-nav .nav-link:hover,
div.topbar a:focus {
  color: #E9F4FF !important;
}

/* Cart bubble / badges in topbar */
div.topbar .badge,
div.topbar .label {
  background: #ffffff !important;
  color: #2D87C9 !important;
}

/* If your user menu opens from the topbar, keep the dropdown readable */
div.topbar .dropdown-menu {
  background: #2D87C9;
  border: none;
}
div.topbar .dropdown-item {
  color: #fff;
}
div.topbar .dropdown-item:hover {
  background: rgba(255,255,255,.12);
}