/* =====================================================================
   Cloudesta — Client Area modern restyle (VISUAL ONLY)
   Scoped under body.cds-ca (added on client-area templates only).
   No markup / data / logic changed. Revert = remove the <link> in
   includes/head.tpl and the body class in header.tpl.
   ===================================================================== */

.cds-ca{--b:#1697bf;--b2:#55bde5;--bd:#0f7ea0;--ink:#212122;--mut:#6b7480;--line:#e6ebf2;}

/* ---------- dashboard header card (home) ---------- */
.cds-ca .container-clientarea{
  position:relative;background:linear-gradient(135deg,#123d4d 0%,#1697bf 100%);
  border-radius:20px;padding:28px 32px;margin:18px 0 30px;overflow:hidden;
  box-shadow:0 18px 42px rgba(22,151,191,.20);}
.cds-ca .container-clientarea-bg{display:none;}
.cds-ca .clientarea-new-header .username,
.cds-ca .clientarea-new-header .adress,
.cds-ca .clientarea-new-header h5,
.cds-ca .clientarea-new-header .mergecolor,
.cds-ca .clientarea-new-header b{color:#fff!important;}
.cds-ca .clientarea-new-header .adress{opacity:.9;font-weight:500;}
.cds-ca .clientarea-new-header .profile-photo img{border:3px solid rgba(255,255,255,.65);box-shadow:0 6px 16px rgba(0,0,0,.18);}
.cds-ca .clientarea-new-header .profile-photo a{color:rgba(255,255,255,.85)!important;font-size:12px;}
.cds-ca .header-features-icons .badge.feat{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:13px;font-size:17px;margin-left:8px;background:rgba(255,255,255,.16)!important;
  color:#fff!important;transition:transform .2s,box-shadow .2s;}
.cds-ca .header-features-icons .badge.feat:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.18);}

/* ---------- overview cards (home) — glass + gradient accent ---------- */
.cds-ca .overview-services:not(.bg-yellow) .service-section{
  position:relative;background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(22,151,191,.16);border-radius:18px;padding:34px 22px 28px;
  text-align:center;height:100%;overflow:hidden;box-shadow:0 12px 32px rgba(20,40,60,.07);
  transition:transform .25s,box-shadow .25s,border-color .25s;}
.cds-ca .overview-services:not(.bg-yellow) .service-section::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--b),var(--b2));}
.cds-ca .overview-services:not(.bg-yellow) .service-section:hover{
  transform:translateY(-6px);box-shadow:0 26px 50px rgba(22,151,191,.20);border-color:rgba(22,151,191,.38);}
.cds-ca .overview-services:not(.bg-yellow) .service-section img.svg,
.cds-ca .overview-services:not(.bg-yellow) .service-section svg{height:54px;width:auto;margin-bottom:14px;
  filter:drop-shadow(0 6px 12px rgba(22,151,191,.28));}
.cds-ca .overview-services:not(.bg-yellow) .service-section .title{font-size:20px;font-weight:800;color:var(--ink);margin-top:4px;}
.cds-ca .overview-services:not(.bg-yellow) .service-section .subtitle{font-size:13.5px;color:var(--mut);line-height:1.5;}
.cds-ca .overview-services .service-section .plans.badge.feat{
  background:linear-gradient(90deg,var(--b),var(--b2))!important;color:#fff!important;border-radius:999px;font-weight:700;}
/* ---------- Account Overview (home) — compact masonry, light bg, no yellow ---------- */
.cds-ca .overview-services.bg-yellow{background:#f5f8fb!important;border-radius:0!important;padding:52px 0!important;}
.cds-ca .overview-services.bg-yellow .section-heading{color:var(--ink)!important;font-weight:800;}
.cds-ca .overview-services.bg-yellow .section-subheading{color:var(--mut)!important;}
/* multi-column masonry: heading spans full width, panels flow into balanced columns */
.cds-ca .overview-services.bg-yellow .service-wrap > .row{column-count:3;column-gap:20px;margin:0;display:block;}
.cds-ca .overview-services.bg-yellow .service-wrap > .row::before,
.cds-ca .overview-services.bg-yellow .service-wrap > .row::after{content:none!important;display:none!important;}
.cds-ca .overview-services.bg-yellow .service-wrap > .row > div{float:none!important;width:100%!important;max-width:100%!important;padding:0!important;}
.cds-ca .overview-services.bg-yellow .service-wrap > .row > .col-md-12.text-center{
  -webkit-column-span:all;column-span:all;margin-bottom:20px;}
.cds-ca .overview-services.bg-yellow .rockbox{
  display:inline-block;width:100%;margin:0 0 20px;
  -webkit-column-break-inside:avoid;break-inside:avoid;page-break-inside:avoid;}
/* white gradient-accent cards */
.cds-ca .overview-services.bg-yellow .rockbox .service-section{
  position:relative;background:#fff!important;border:1px solid var(--line);border-radius:16px;
  padding:22px 20px;text-align:left;overflow:hidden;box-shadow:0 10px 26px rgba(20,40,60,.06);
  transition:transform .2s,box-shadow .2s;}
.cds-ca .overview-services.bg-yellow .rockbox .service-section::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--b),var(--b2));}
.cds-ca .overview-services.bg-yellow .rockbox .service-section:hover{
  transform:translateY(-4px);box-shadow:0 18px 38px rgba(22,151,191,.14);}
.cds-ca .overview-services.bg-yellow .rockbox .service-section .title{
  font-size:15.5px;font-weight:800;color:var(--ink);padding-bottom:11px;margin-bottom:12px;
  border-bottom:2px solid #eef2f7;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.cds-ca .overview-services.bg-yellow .rockbox .service-section .title .badge{
  background:linear-gradient(90deg,var(--b),var(--b2))!important;color:#fff!important;border-radius:999px;font-weight:700;}
.cds-ca .overview-services.bg-yellow .list-group{gap:6px;}
.cds-ca .overview-services.bg-yellow .list-group-item{
  background:#fff!important;border:1px solid #eef2f7!important;border-radius:10px!important;
  margin-bottom:0;padding:10px 13px;font-size:13px;color:#33414d;
  transition:background .15s,color .15s,border-color .15s,transform .15s;}
.cds-ca .overview-services.bg-yellow .list-group-item:hover{
  background:#f3f9fb!important;border-color:var(--b2)!important;color:var(--b)!important;transform:translateX(3px);}
.cds-ca .overview-services.bg-yellow .list-group-item i{color:var(--b);}
.cds-ca .overview-services.bg-yellow .list-group-item .badge{
  background:var(--b)!important;color:#fff!important;border-radius:999px;font-weight:700;}
.cds-ca .overview-services.bg-yellow .btn-default-yellow-fill{border-radius:11px;font-weight:700;margin-top:14px;}
@media (max-width:1100px){.cds-ca .overview-services.bg-yellow .service-wrap > .row{column-count:2;}}
@media (max-width:680px){.cds-ca .overview-services.bg-yellow .service-wrap > .row{column-count:1;}}

/* ---------- data tables (invoices / services / domains / tickets) ---------- */
.cds-ca .table-container{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:6px 12px;
  box-shadow:0 10px 28px rgba(20,40,60,.05);}
.cds-ca .table-list{margin-bottom:4px;}
.cds-ca .table-list thead th{
  background:transparent;color:var(--mut);font-weight:700;font-size:12px;text-transform:uppercase;
  letter-spacing:.04em;border:none;border-bottom:2px solid #eef2f7;padding:14px 12px;}
.cds-ca .table-list tbody td{border-color:#f0f3f7;vertical-align:middle;padding:14px 12px;color:#33414d;}
.cds-ca .table-list tbody tr{transition:background .15s;}
.cds-ca .table-list tbody tr:hover{background:#f6fbfd;}

/* ---------- status badges ---------- */
.cds-ca .label.status{border-radius:999px;padding:5px 13px;font-weight:700;font-size:11.5px;letter-spacing:.02em;}
.cds-ca .status-active,.cds-ca .status-paid,.cds-ca .status-completed{background:#e7f7ee!important;color:#15924f!important;}
.cds-ca .status-unpaid,.cds-ca .status-overdue,.cds-ca .status-cancelled,
.cds-ca .status-suspended,.cds-ca .status-terminated,.cds-ca .status-fraud,
.cds-ca .status-expired,.cds-ca .status-refunded{background:#fdeaea!important;color:#d22d2d!important;}
.cds-ca .status-pending,.cds-ca .status-draft,.cds-ca .status-open{background:#fff5e6!important;color:#c9760a!important;}

/* ---------- panels / sidebars ---------- */
.cds-ca .panel{border:1px solid var(--line)!important;border-radius:16px!important;
  box-shadow:0 8px 24px rgba(20,40,60,.05);overflow:hidden;}
.cds-ca .panel-heading{background:#fff!important;border-bottom:1px solid #eef2f7!important;padding:16px 18px;}
.cds-ca .panel-title{font-weight:800;color:var(--ink);font-size:15px;}
.cds-ca .panel-body{padding:18px;}
.cds-ca .list-group-item{border-color:#f0f3f7!important;transition:background .15s,color .15s;}
.cds-ca .sidebar .list-group-item.active,
.cds-ca .list-group-item.active{
  background:linear-gradient(90deg,var(--b),var(--b2))!important;border-color:transparent!important;color:#fff!important;}
.cds-ca .sidebar .list-group-item:hover:not(.active){background:#f3f9fb!important;color:var(--b)!important;}

/* ---------- buttons ---------- */
.cds-ca .btn-info{background:var(--b)!important;border-color:var(--b)!important;border-radius:10px;font-weight:600;}
.cds-ca .btn-info:hover{background:var(--bd)!important;border-color:var(--bd)!important;}
.cds-ca .btn-default{border-radius:10px;border-color:#dde4ec;}
.cds-ca .btn-default-yellow-fill{border-radius:11px;font-weight:700;padding:11px 24px;}
.cds-ca .btn-group .btn{border-radius:9px;}

/* ---------- forms (submit ticket / account details) ---------- */
.cds-ca .form-control,.cds-ca .selectpicker,.cds-ca select.form-control{
  border-radius:10px;border-color:#dde4ec;box-shadow:none;}
.cds-ca .form-control:focus{border-color:var(--b);box-shadow:0 0 0 3px rgba(22,151,191,.12);}
.cds-ca .form-group label,.cds-ca label.control-label{font-weight:600;color:#33414d;}
.cds-ca .card,.cds-ca .well{border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(20,40,60,.05);}

/* =====================================================================
   Cloudesta restyle — pass 2 (2026-08-25)
   Unifies the palette on the cyan brand and fixes contrast/scale bugs.
   VISUAL ONLY. Revert = delete everything below this banner.
   ===================================================================== */

/* ---------- FIX: active sidebar item was blue-on-blue ----------
   The gradient set color:#fff on .list-group-item.active, but the label is a
   nested <a> that kept the theme's link colour. Force every descendant. */
.cds-ca .list-group-item.active,
.cds-ca .list-group-item.active a,
.cds-ca .list-group-item.active i,
.cds-ca .list-group-item.active span,
.cds-ca .sidebar .list-group-item.active a{color:#fff!important;}
.cds-ca .list-group-item.active a:hover{color:#fff!important;text-decoration:none;}

/* ---------- product card: purple radial -> Cloudesta cyan ---------- */
.cds-ca .product-overbox{
  background:linear-gradient(135deg,#0f7ea0 0%,#1697bf 55%,#55bde5 100%)!important;
  border-radius:18px!important;
  box-shadow:0 18px 42px rgba(22,151,191,.22);}
.cds-ca .product-overbox .prod-info-abso i{
  background:rgba(255,255,255,.18);border-radius:50%;padding:18px;color:#fff;}
.cds-ca .product-overbox .prod-info-abso h3{
  display:inline-block;border:2px solid rgba(255,255,255,.7);border-radius:999px;
  padding:7px 22px;font-size:16px;font-weight:700;color:#fff;}
.cds-ca .product-overbox .prod-info-abso h4{color:rgba(255,255,255,.92);font-weight:400;}
/* status bar keeps semantic colour, just squares up with the card */
.cds-ca .product-overbox .product-status-text{border-radius:10px;font-weight:700;letter-spacing:.4px;}

/* ---------- yellow CTA -> brand cyan (35 usages) ---------- */
.cds-ca .btn-default-yellow-fill{
  background:linear-gradient(90deg,var(--b),var(--b2))!important;
  border-color:transparent!important;color:#fff!important;
  box-shadow:0 6px 16px rgba(22,151,191,.28);}
.cds-ca .btn-default-yellow-fill:hover,
.cds-ca .btn-default-yellow-fill:focus{
  background:var(--bd)!important;color:#fff!important;
  box-shadow:0 10px 22px rgba(22,151,191,.34);}

/* ---------- page title was oversized ("Manage Product") ---------- */
.cds-ca .section-heading{
  font-size:34px!important;line-height:1.2;font-weight:800;margin:26px 0 6px;color:var(--ink);}
.cds-ca .section-subheading{font-size:15px;color:var(--mut);margin-bottom:22px;}
@media (max-width:767px){.cds-ca .section-heading{font-size:26px!important;}}

/* ---------- tables: invoices / services / domains / tickets ---------- */
.cds-ca .table{border-collapse:separate;border-spacing:0;}
.cds-ca .table > thead > tr > th{
  background:#f5f8fb;border-bottom:2px solid #e6ebf2!important;
  font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  color:var(--mut);padding:13px 14px;}
.cds-ca .table > tbody > tr > td{
  padding:13px 14px;border-top:1px solid #f0f3f7!important;vertical-align:middle;color:#33414d;}
.cds-ca .table > tbody > tr:hover > td{background:#f7fbfd;}
.cds-ca .table-responsive{border:0;}

/* status pills — semantic colours kept, shape unified */
.cds-ca .label,.cds-ca .badge{border-radius:999px;font-weight:700;padding:5px 12px;font-size:11.5px;letter-spacing:.3px;}
.cds-ca .label-success,.cds-ca .badge-success{background:#16a34a!important;color:#fff!important;}
.cds-ca .label-danger,.cds-ca .badge-danger{background:#dc2626!important;color:#fff!important;}
.cds-ca .label-info,.cds-ca .badge-info{background:var(--b)!important;color:#fff!important;}
.cds-ca .label-warning,.cds-ca .badge-warning{background:#b45309!important;color:#fff!important;}

/* ---------- pagination / datatables controls ---------- */
.cds-ca .pagination > li > a,.cds-ca .pagination > li > span{
  border-color:#e6ebf2;color:var(--b);}
.cds-ca .pagination > .active > a,.cds-ca .pagination > .active > span,
.cds-ca .pagination > .active > a:hover{
  background:var(--b)!important;border-color:var(--b)!important;color:#fff!important;}
.cds-ca .dataTables_filter input,.cds-ca .dataTables_length select{
  border:1px solid #e2e8f0;border-radius:9px;padding:6px 10px;}

/* ---------- links ---------- */
.cds-ca a{color:var(--b);}
.cds-ca a:hover,.cds-ca a:focus{color:var(--bd);}

/* ---------- invoice / alert boxes ---------- */
.cds-ca .alert{border-radius:12px;border-width:0;border-left:4px solid;padding:14px 18px;}
.cds-ca .alert-success{background:#ecfdf3;border-left-color:#16a34a;color:#14532d;}
.cds-ca .alert-danger{background:#fef2f2;border-left-color:#dc2626;color:#7f1d1d;}
.cds-ca .alert-warning{background:#fffbeb;border-left-color:#b45309;color:#78350f;}
.cds-ca .alert-info{background:#eff9fc;border-left-color:var(--b);color:#0c4a5e;}

/* =====================================================================
   Pass 3 (2026-08-25) — calm the product page palette.
   Was: cyan card + 6 green value pills + solid red block + grey labels.
   Now: cyan brand, ONE green (real status), red only as a quiet outline.
   ===================================================================== */

/* ---------- data values were green "success" pills for no reason ----------
   main.css:5801 sets background:#4CAF50 on every <strong>. These are plain
   data (dates, amount, cycle), not statuses — make them neutral text. */
.cds-ca .overview-box.products-details strong{
  background:#f1f5f9!important;color:var(--ink)!important;
  font-size:13px!important;font-weight:700;
  padding:6px 12px!important;border-radius:8px;border:1px solid #e6ebf2;}
.cds-ca .overview-box.products-details span{
  color:var(--mut);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.4px;}

/* ---------- the ONE legitimate green: service status ---------- */
.cds-ca .product-overbox .product-status-text{
  background:rgba(255,255,255,.18)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px!important;padding:6px 20px!important;
  font-size:12px;font-weight:700;letter-spacing:.6px;width:auto!important;}
/* keep semantic meaning for non-active states */
.cds-ca .product-overbox.suspended .product-status-text,
.cds-ca .product-overbox.terminated .product-status-text,
.cds-ca .product-overbox.cancelled .product-status-text,
.cds-ca .product-overbox.fraud .product-status-text{
  background:rgba(220,38,38,.92)!important;border-color:transparent;}
.cds-ca .product-overbox.pending .product-status-text{
  background:rgba(180,83,9,.92)!important;border-color:transparent;}

/* ---------- cancellation: destructive, so quiet not dominant ---------- */
.cds-ca a.btn-danger.btn-block,
.cds-ca .product-actions-wrapper .btn-danger{
  background:transparent!important;color:#dc2626!important;
  border:1.5px solid #f0b4b4!important;box-shadow:none!important;
  font-weight:700;border-radius:11px;padding:11px 18px;}
.cds-ca a.btn-danger.btn-block:hover,
.cds-ca .product-actions-wrapper .btn-danger:hover{
  background:#fef2f2!important;border-color:#dc2626!important;color:#b91c1c!important;}

/* ---------- primary actions stay on brand ---------- */
.cds-ca .product-actions-wrapper .btn-primary,
.cds-ca .product-actions-wrapper .btn-success{
  background:linear-gradient(90deg,var(--b),var(--b2))!important;
  border-color:transparent!important;color:#fff!important;border-radius:11px;font-weight:700;}

/* ---------- neutral greys unified onto one scale ---------- */
.cds-ca .overview-box{background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 8px 24px rgba(20,40,60,.05);padding:20px 22px;}
.cds-ca .nav-tabs{border-bottom:2px solid #eef2f7;}
.cds-ca .nav-tabs > li > a{color:var(--mut);font-weight:700;border:0;border-radius:0;}
.cds-ca .nav-tabs > li.active > a,
.cds-ca .nav-tabs > li.active > a:focus,
.cds-ca .nav-tabs > li.active > a:hover{
  color:var(--b)!important;background:transparent!important;border:0!important;
  box-shadow:inset 0 -3px 0 var(--b);}
.cds-ca .nav-tabs > li > a:hover{background:#f7fbfd;color:var(--b);}

/* =====================================================================
   Pass 4 (2026-08-25) — docked sidebar column.
   The Overview/Information/Actions panel used to be a Bootstrap dropdown
   (pageheader.tpl) that floated over the page and clipped the details
   table. It is now a real .cds-sidebar-col rendered from footer.tpl.
   ===================================================================== */

.cds-ca .cds-sidebar-col{margin-top:22px;}
@media (min-width:992px){
  /* track the page as the client scrolls a long service page */
  .cds-ca .cds-sidebar-col{position:sticky;top:24px;align-self:flex-start;}
}
.cds-ca .cds-sidebar-col .panel,
.cds-ca .cds-sidebar-col .sidebar{
  border:1px solid var(--line)!important;border-radius:16px;background:#fff;
  box-shadow:0 8px 24px rgba(20,40,60,.05);margin-bottom:18px;overflow:hidden;}
.cds-ca .cds-sidebar-col .panel-heading,
.cds-ca .cds-sidebar-col .list-group-item.header{
  background:#f5f8fb!important;border-bottom:1px solid #eef2f7!important;
  font-weight:800;color:var(--ink);font-size:13px;
  text-transform:uppercase;letter-spacing:.5px;padding:13px 16px;}
.cds-ca .cds-sidebar-col .list-group{margin-bottom:0;}
.cds-ca .cds-sidebar-col .list-group-item{
  border:0!important;border-top:1px solid #f4f7fa!important;border-radius:0!important;
  padding:11px 16px;font-size:13.5px;font-weight:600;background:#fff;}
.cds-ca .cds-sidebar-col .list-group-item:first-child{border-top:0!important;}
.cds-ca .cds-sidebar-col .list-group-item i{width:18px;margin-right:7px;color:var(--b);}
.cds-ca .cds-sidebar-col .list-group-item.active i{color:#fff;}

/* the old dropdown trigger no longer exists — kill any orphan styling */
.cds-ca .dropnav-header-lined,
.cds-ca .drop-down-btn.dropside-content{display:none!important;}

/* keep the row a flex context so the sticky column has a height to work against */
@media (min-width:992px){
  .cds-ca .main-content > .row{display:flex;flex-wrap:wrap;align-items:flex-start;}
  .cds-ca .main-content > .row > .clearfix{display:none;}
}

/* =====================================================================
   Pass 5 (2026-08-25) — list tables (invoices, services, domains,
   tickets, quotes, emails). Shared markup: .table-container > table.table-list
   driven by DataTables, with .view-filter-btns above it.
   ===================================================================== */

/* ---------- the table becomes a card ---------- */
.cds-ca .table-container{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 8px 24px rgba(20,40,60,.05);padding:6px 6px 2px;margin-bottom:26px;}
.cds-ca .table-container .table-responsive{border:0;margin:0;}

.cds-ca table.table-list{margin:0;border:0;width:100%;}
.cds-ca table.table-list thead th,
.cds-ca table.table-list thead th:nth-child(even){
  background:transparent!important;border:0!important;
  border-bottom:2px solid #eef2f7!important;
  color:var(--mut)!important;font-size:11.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.6px;padding:15px 16px!important;
  white-space:nowrap;}
.cds-ca table.table-list tbody td{
  border:0!important;border-top:1px solid #f4f7fa!important;
  padding:15px 16px!important;font-size:13.5px;color:#33414d;vertical-align:middle;}
.cds-ca table.table-list tbody tr:first-child td{border-top:0!important;}
.cds-ca table.table-list tbody tr{transition:background .14s;}
.cds-ca table.table-list tbody tr:hover td{background:#f7fbfd!important;}
.cds-ca table.table-list tbody td strong{font-weight:700;color:var(--ink);}
.cds-ca table.table-list tbody td a{font-weight:600;}
.cds-ca .table-list > tbody > tr:last-child > td{border-bottom:0!important;}

/* first column carries the identity — give it weight */
.cds-ca table.table-list tbody td:first-child{font-weight:700;color:var(--ink);}

/* ---------- sort arrows ---------- */
.cds-ca table.table-list thead th.sorting,
.cds-ca table.table-list thead th.sorting_asc,
.cds-ca table.table-list thead th.sorting_desc{cursor:pointer;}
.cds-ca table.table-list thead th.sorting_asc,
.cds-ca table.table-list thead th.sorting_desc{color:var(--b)!important;}

/* ---------- status filter pills above the table ---------- */
.cds-ca .view-filter-btns{margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px;}
.cds-ca .view-filter-btns a{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--mut);font-size:13px;font-weight:700;
  text-decoration:none;transition:all .16s;}
.cds-ca .view-filter-btns a:hover{border-color:var(--b);color:var(--b);background:#f3f9fb;}
.cds-ca .view-filter-btns a.active,
.cds-ca .view-filter-btns a.selected{
  background:linear-gradient(90deg,var(--b),var(--b2));border-color:transparent;color:#fff;}
.cds-ca .view-filter-btns a .badge{
  background:#eef2f7;color:var(--mut);font-size:11px;padding:2px 9px;}
.cds-ca .view-filter-btns a.active .badge,
.cds-ca .view-filter-btns a.selected .badge{background:rgba(255,255,255,.26);color:#fff;}

/* ---------- DataTables chrome ---------- */
.cds-ca .dataTables_wrapper{padding:0;}
.cds-ca .dataTables_filter{float:right;margin:10px 10px 14px;}
.cds-ca .dataTables_filter label{color:var(--mut);font-size:13px;font-weight:600;display:flex;align-items:center;gap:9px;}
.cds-ca .dataTables_filter input{
  border:1px solid #e2e8f0!important;border-radius:10px;padding:9px 14px!important;
  font-size:13.5px;min-width:230px;margin-left:0;background:#fff;transition:border-color .15s,box-shadow .15s;}
.cds-ca .dataTables_filter input:focus{
  outline:0;border-color:var(--b)!important;box-shadow:0 0 0 3px rgba(22,151,191,.14);}
.cds-ca .dataTables_length{float:left;margin:10px 10px 14px;color:var(--mut);font-size:13px;}
.cds-ca .dataTables_length select{
  border:1px solid #e2e8f0;border-radius:9px;padding:7px 10px;font-size:13px;background:#fff;}
.cds-ca .dataTables_info{color:var(--mut);font-size:12.5px;padding:14px 16px!important;}
.cds-ca .dataTables_paginate{padding:10px 12px!important;}
.cds-ca .dataTables_empty{text-align:center;color:var(--mut);padding:38px 16px!important;font-size:14px;}

/* ---------- loading spinner block ---------- */
.cds-ca #tableLoading{padding:34px 0;color:var(--mut);}

/* ---------- responsive: cards on small screens ---------- */
@media (max-width:767px){
  .cds-ca .table-container{padding:4px;border-radius:14px;}
  .cds-ca table.table-list thead th,
  .cds-ca table.table-list tbody td{padding:12px 11px!important;font-size:13px;}
  .cds-ca .dataTables_filter,.cds-ca .dataTables_length{float:none;margin:10px 6px;}
  .cds-ca .dataTables_filter input{width:100%;min-width:0;}
  .cds-ca .view-filter-btns a{padding:7px 13px;font-size:12.5px;}
}

/* =====================================================================
   Pass 6 (2026-08-25) — order form / addon cards (cart.php?gid=addons).
   Cart pages never get body.cds-ca, so these are scoped to the order
   form's own wrapper: #order-standard_cart. The stylesheet is loaded
   unconditionally (head.tpl:11), so no template change is needed.
   ===================================================================== */

#order-standard_cart{--b:#1697bf;--b2:#55bde5;--bd:#0f7ea0;--ink:#212122;--mut:#6b7480;--line:#e6ebf2;}

/* ---------- page heading (the .cds-ca rule can't reach here) ---------- */
#order-standard_cart .section-heading{
  font-size:34px!important;line-height:1.2;font-weight:800;margin:26px 0 24px;color:var(--ink);}
@media (max-width:767px){#order-standard_cart .section-heading{font-size:26px!important;}}

/* ---------- equal-height card grid ---------- */
#order-standard_cart .row-eq-height{display:flex;flex-wrap:wrap;margin-bottom:0;}
#order-standard_cart .row-eq-height > [class*="col-"]{display:flex;margin-bottom:24px;}
#order-standard_cart .products .product.addons{
  position:relative;display:flex;flex-direction:column;width:100%;
  background:#fff!important;border:1px solid var(--line);border-radius:18px;
  padding:26px 26px 22px;box-shadow:0 10px 28px rgba(20,40,60,.06);
  transition:transform .22s,box-shadow .22s,border-color .22s;overflow:hidden;}
#order-standard_cart .products .product.addons::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--b),var(--b2));}
#order-standard_cart .products .product.addons:hover{
  transform:translateY(-5px);box-shadow:0 24px 48px rgba(22,151,191,.16);
  border-color:rgba(22,151,191,.34);}
#order-standard_cart .products .product.addons form{
  display:flex;flex-direction:column;flex:1;width:100%;}

/* ---------- name + price ---------- */
#order-standard_cart .addon-name{
  display:block;font-size:19px;font-weight:800;color:var(--ink);
  line-height:1.3;margin-bottom:10px;}
#order-standard_cart .product-pricing{margin-bottom:16px;}
#order-standard_cart .product-pricing .price{
  font-size:26px;font-weight:800;color:var(--b);letter-spacing:-.4px;}
#order-standard_cart .product-pricing .price .f-13{
  font-size:13px!important;font-weight:600;color:var(--mut)!important;letter-spacing:0;}

/* ---------- description ---------- */
#order-standard_cart .product-desc{
  flex:1;margin:0 0 18px;padding-top:14px;border-top:1px solid #f0f3f7;}
#order-standard_cart .product-desc p{
  font-size:13.5px;line-height:1.6;color:var(--mut);margin:0;}

/* the tooltip badge was bg-danger (red) for an INFO icon — neutralise it */
#order-standard_cart .product.addons .badge.bg-danger.feat{
  position:absolute;top:18px;right:18px;margin:0!important;
  background:#eef6fa!important;color:var(--b)!important;
  width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(22,151,191,.24);cursor:help;}

/* ---------- product selector ---------- */
#order-standard_cart .product.addons select.form-control{
  width:100%;height:auto;border:1px solid #e2e8f0;border-radius:11px;
  padding:11px 14px;font-size:13.5px;color:var(--ink);background:#fff;
  margin-bottom:14px!important;transition:border-color .15s,box-shadow .15s;}
#order-standard_cart .product.addons select.form-control:focus{
  outline:0;border-color:var(--b);box-shadow:0 0 0 3px rgba(22,151,191,.14);}
#order-standard_cart .product.addons .form-group{margin-bottom:0;width:100%;}

/* ---------- CTA: yellow -> brand cyan ---------- */
#order-standard_cart .product.addons .btn-default-yellow-fill{
  width:100%;background:linear-gradient(90deg,var(--b),var(--b2))!important;
  border:0!important;color:#fff!important;border-radius:12px;
  padding:13px 20px;font-weight:800;font-size:14px;letter-spacing:.3px;
  box-shadow:0 8px 18px rgba(22,151,191,.26);transition:all .18s;}
#order-standard_cart .product.addons .btn-default-yellow-fill:hover{
  background:var(--bd)!important;box-shadow:0 12px 24px rgba(22,151,191,.34);
  transform:translateY(-1px);}

/* ---------- empty state ---------- */
#order-standard_cart .alert-warning{
  border-radius:12px;border:0;border-left:4px solid #b45309;
  background:#fffbeb;color:#78350f;padding:16px 20px;}

@media (max-width:767px){
  #order-standard_cart .products .product.addons{padding:22px 20px 18px;}
  #order-standard_cart .product-pricing .price{font-size:23px;}
}

/* =====================================================================
   Pass 7 (2026-08-25)
   a) addon cards were too large — 2-up (col-md-6) with generous padding
   b) too much blue inside tables
   c) tables NOT using .table-list (viewinvoice, addfunds, domaindns,
      emailforwarding, usagebilling) missed pass 5 — give them the card too
   ===================================================================== */

/* ---------- (a) addon cards: 3-up and tighter ----------
   addons.tpl closes the .row every 2 items, so a plain width override would
   still yield 2 per row. display:contents dissolves those inner rows into the
   .products flex flow, letting all cards share one grid. */
@media (min-width:992px){
  #order-standard_cart .products{display:flex;flex-wrap:wrap;margin:0 -11px;}
  #order-standard_cart .products .row-eq-height{display:contents;}
  #order-standard_cart .products .row-eq-height > .col-md-6{
    flex:0 0 33.333%;max-width:33.333%;width:33.333%;padding:0 11px;}
}
/* tighter card regardless of column count */
#order-standard_cart .products .product.addons{padding:20px 20px 17px;border-radius:15px;}
#order-standard_cart .addon-name{font-size:16px;margin-bottom:7px;}
#order-standard_cart .product-pricing{margin-bottom:12px;}
#order-standard_cart .product-pricing .price{font-size:21px;}
#order-standard_cart .product-desc{margin-bottom:14px;padding-top:11px;}
#order-standard_cart .product-desc p{font-size:12.5px;line-height:1.55;}
#order-standard_cart .product.addons select.form-control{padding:9px 12px;font-size:13px;}
#order-standard_cart .product.addons .btn-default-yellow-fill{padding:11px 16px;font-size:13.5px;}
#order-standard_cart .product.addons .badge.bg-danger.feat{
  top:14px;right:14px;width:26px;height:26px;}

/* ---------- (b) calm the blue inside tables ----------
   .cds-ca a is cyan globally, which made every invoice no. / product name in a
   table cyan. Keep links ink-coloured; reveal the brand colour on hover only. */
.cds-ca .table-container table.table-list tbody td a,
.cds-ca table.table-list tbody td a,
.cds-ca .table tbody td a{color:var(--ink)!important;font-weight:700;}
.cds-ca .table-container table.table-list tbody td a:hover,
.cds-ca table.table-list tbody td a:hover,
.cds-ca .table tbody td a:hover{color:var(--b)!important;text-decoration:underline;}
/* neutral hover instead of a cyan wash */
.cds-ca table.table-list tbody tr:hover td,
.cds-ca .table > tbody > tr:hover > td{background:#f8fafc!important;}
/* sorted column: weight, not colour */
.cds-ca table.table-list thead th.sorting_asc,
.cds-ca table.table-list thead th.sorting_desc{color:var(--ink)!important;}
.cds-ca table.table-list tbody td.sorting_1{background:transparent!important;}
.cds-ca table.table-list tbody td.sorting_1 a{color:var(--ink)!important;}

/* ---------- (c) tables outside .table-list get the same card ---------- */
.cds-ca .card-body > .table-responsive,
.cds-ca .panel > .table-responsive,
.cds-ca #invoiceItemsTable,
.cds-ca .table-bordered{
  background:#fff;border-radius:14px;overflow:hidden;}
.cds-ca .table-bordered,
.cds-ca .table-bordered > thead > tr > th,
.cds-ca .table-bordered > tbody > tr > td{border-color:#eef2f7!important;}
.cds-ca .table-bordered > thead > tr > th{
  background:#f5f8fb!important;color:var(--mut)!important;
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;}
/* invoice line items — the page clients pay from */
.cds-ca #invoiceItemsTable tbody td{font-size:13.5px;color:#33414d;padding:13px 15px!important;}
.cds-ca #invoiceItemsTable tfoot td,
.cds-ca .table > tfoot > tr > td{font-weight:800;color:var(--ink);background:#f8fafc;}

/* =====================================================================
   Pass 8 (2026-08-25)
   a) /announcements — was outside the .cds-ca scope entirely; now gated by
      the cds-ann body class added in header.tpl:56
   b) Account Overview on clientarea.php — replaces the pass-1 column-count
      masonry with a real grid (masonry reordered reading flow and could
      split a panel across columns)
   ===================================================================== */

.cds-ann{--b:#1697bf;--b2:#55bde5;--bd:#0f7ea0;--ink:#212122;--mut:#6b7480;--line:#e6ebf2;}

/* ---------- (a) announcement cards ---------- */
.cds-ann .overview-services{background:transparent!important;padding:10px 0 60px!important;}
.cds-ann .overview-services .service-wrap > .row{display:flex;flex-wrap:wrap;margin:0 -12px;}
.cds-ann .overview-services .service-wrap > .row > [class*="col-"]{
  display:flex;padding:0 12px;margin-bottom:24px;}
.cds-ann .service-section{
  position:relative;display:flex;flex-direction:column;width:100%;
  background:#fff!important;border:1px solid var(--line)!important;border-radius:16px;
  padding:26px 24px 22px;text-align:left;
  box-shadow:0 10px 26px rgba(20,40,60,.06)!important;
  transition:transform .22s,box-shadow .22s,border-color .22s;}
.cds-ann .service-section:hover{
  transform:translateY(-5px);box-shadow:0 22px 44px rgba(22,151,191,.15)!important;
  border-color:rgba(22,151,191,.32)!important;}
/* date badge: REVERTED 2026-08-25 to the theme's original pink, to match
   web.cloudesta.com. Layout only below — no colour override. */
.cds-ann .service-section .badge.feat.bg-pink,
.cds-ann .service-section .badge.bg-pink{
  align-self:flex-start;margin-bottom:13px;}
.cds-ann .service-section .title{
  font-size:18px!important;font-weight:800;color:var(--ink)!important;
  line-height:1.35;margin-bottom:10px;}
.cds-ann .service-section .subtitle{
  font-size:13.5px!important;line-height:1.65;color:var(--mut)!important;
  flex:1;margin-bottom:16px;}
.cds-ann .service-section .btn-default-yellow-fill{
  align-self:flex-start;background:linear-gradient(90deg,var(--b),var(--b2))!important;
  border:0!important;color:#fff!important;border-radius:11px;
  padding:10px 22px;font-weight:700;font-size:13.5px;
  box-shadow:0 7px 16px rgba(22,151,191,.24);transition:all .18s;}
.cds-ann .service-section .btn-default-yellow-fill:hover{
  background:var(--bd)!important;transform:translateY(-1px);}
.cds-ann .section-heading{font-size:34px!important;font-weight:800;color:var(--ink);margin:26px 0 8px;}
.cds-ann .section-subheading{color:var(--mut);margin-bottom:26px;}
.cds-ann .fb-like{margin-bottom:12px;}
@media (max-width:767px){.cds-ann .section-heading{font-size:26px!important;}}

/* ---------- (b) Account Overview: masonry -> grid ----------
   Pass 1 used column-count, which reads top-to-bottom per column and can
   break a panel mid-card. A grid keeps reading order and card integrity. */
@media (min-width:992px){
  .cds-ca .overview-services.bg-yellow .service-wrap > .row{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;column-count:auto!important;}
  .cds-ca .overview-services.bg-yellow .service-wrap > .row > .col-md-12.text-center{
    grid-column:1 / -1;}
  .cds-ca .overview-services.bg-yellow .rockbox{
    margin:0!important;display:flex;break-inside:auto;}
  .cds-ca .overview-services.bg-yellow .rockbox .service-section{width:100%;}
}
@media (min-width:768px) and (max-width:991px){
  .cds-ca .overview-services.bg-yellow .service-wrap > .row{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;column-count:auto!important;}
  .cds-ca .overview-services.bg-yellow .service-wrap > .row > .col-md-12.text-center{grid-column:1 / -1;}
  .cds-ca .overview-services.bg-yellow .rockbox{margin:0!important;display:flex;}
  .cds-ca .overview-services.bg-yellow .rockbox .service-section{width:100%;}
}
.cds-ca .overview-services.bg-yellow{padding:46px 0!important;}
.cds-ca .overview-services.bg-yellow .rockbox .service-section{
  display:flex;flex-direction:column;padding:20px 20px 16px;border-radius:15px;}
.cds-ca .overview-services.bg-yellow .rockbox .service-section .title{
  font-size:14.5px;letter-spacing:.2px;}
.cds-ca .overview-services.bg-yellow .list-group{margin-bottom:0;}
.cds-ca .overview-services.bg-yellow .list-group-item{
  display:flex;align-items:center;gap:9px;font-size:13px;padding:9px 12px;}
.cds-ca .overview-services.bg-yellow .list-group-item i{color:var(--b);width:17px;text-align:center;}
.cds-ca .overview-services.bg-yellow .list-group-item:hover{
  background:#f3f9fb!important;border-color:rgba(22,151,191,.28)!important;}
.cds-ca .overview-services.bg-yellow .list-group-item .badge{
  margin-left:auto;background:#eef2f7;color:var(--mut);font-size:11px;}

/* =====================================================================
   Pass 9 (2026-08-25) — navigation palette consistency.
   The header renders on EVERY page, so its 5 yellow CTAs turned cyan on
   client-area pages (via .cds-ca) but stayed yellow on public ones — the
   same menu in two palettes. Scoped to nav containers only, so marketing
   page BODY content keeps its own styling.
   ===================================================================== */

.secnav,.sub-menu,.start-offer,.megamenu-list,.infonews{
  --b:#1697bf;--b2:#55bde5;--bd:#0f7ea0;--mut:#6b7480;}

/* ---------- nav CTAs: yellow -> brand cyan, everywhere ---------- */
.sub-menu .btn-default-yellow-fill,
.start-offer .btn-default-yellow-fill,
.megamenu-list .btn-default-yellow-fill,
.secnav .btn-default-yellow-fill,
.offcanvas .btn-default-yellow-fill{
  background:linear-gradient(90deg,#1697bf,#55bde5)!important;
  border:0!important;color:#fff!important;border-radius:11px;font-weight:700;
  box-shadow:0 7px 16px rgba(22,151,191,.25);transition:all .18s;}
.sub-menu .btn-default-yellow-fill:hover,
.start-offer .btn-default-yellow-fill:hover,
.megamenu-list .btn-default-yellow-fill:hover,
.secnav .btn-default-yellow-fill:hover,
.offcanvas .btn-default-yellow-fill:hover{
  background:#0f7ea0!important;color:#fff!important;transform:translateY(-1px);}

/* ---------- nav badges: REVERTED 2026-08-25 ----------
   These recoloured the theme's bg-pink / bg-purple badges (news, welcome,
   FILTER, NEW) to brand cyan. Reverted so cloudesta.com matches
   web.cloudesta.com, which renders the theme's original badge colours.
   Nothing here now — the theme's own CSS applies. ------------------ */

/* ---------- mega-menu promo column ---------- */
.start-offer{background:#f5f8fb!important;border-radius:14px;}
.start-offer .title{font-weight:800;color:#212122;}

/* =====================================================================
   Pass 10 (2026-08-25) — remove the remaining blue from tables.
   Pass 7 already neutralised links, row hover and the sorted column.
   Still blue: filter pills, pagination, the search focus ring and the
   link hover. States now use dark slate so they stay visible without
   the brand colour. Green/red status pills keep their meaning.
   ===================================================================== */

.cds-ca{--slate:#334155;--slate-soft:#e2e8f0;}

/* ---------- status filter pills ---------- */
.cds-ca .view-filter-btns a:hover{
  border-color:var(--slate)!important;color:var(--slate)!important;background:#f1f5f9!important;}
.cds-ca .view-filter-btns a.active,
.cds-ca .view-filter-btns a.selected{
  background:var(--slate)!important;border-color:var(--slate)!important;color:#fff!important;}
.cds-ca .view-filter-btns a.active .badge,
.cds-ca .view-filter-btns a.selected .badge{background:rgba(255,255,255,.22)!important;color:#fff!important;}

/* ---------- pagination ---------- */
.cds-ca .dataTables_paginate .paginate_button,
.cds-ca .pagination > li > a,.cds-ca .pagination > li > span{
  color:var(--slate)!important;border-color:var(--slate-soft)!important;}
.cds-ca .dataTables_paginate .paginate_button:hover,
.cds-ca .pagination > li > a:hover{background:#f1f5f9!important;color:var(--slate)!important;}
.cds-ca .dataTables_paginate .paginate_button.current,
.cds-ca .dataTables_paginate .paginate_button.active,
.cds-ca .pagination > .active > a,.cds-ca .pagination > .active > span,
.cds-ca .pagination > .active > a:hover,.cds-ca .pagination > .active > span:hover{
  background:var(--slate)!important;border-color:var(--slate)!important;color:#fff!important;}

/* ---------- search field focus ---------- */
.cds-ca .dataTables_filter input:focus{
  border-color:var(--slate)!important;box-shadow:0 0 0 3px rgba(51,65,85,.12)!important;}

/* ---------- links inside tables: no blue at all ---------- */
.cds-ca .table-container table.table-list tbody td a,
.cds-ca table.table-list tbody td a,
.cds-ca .table tbody td a,
.cds-ca table.table-list tbody td.sorting_1 a{color:var(--ink)!important;}
.cds-ca .table-container table.table-list tbody td a:hover,
.cds-ca table.table-list tbody td a:hover,
.cds-ca .table tbody td a:hover,
.cds-ca table.table-list tbody td.sorting_1 a:hover{
  color:var(--slate)!important;text-decoration:underline;}

/* informational pills inside tables were brand-cyan */
.cds-ca .table-container .label-info,.cds-ca table.table-list .label-info,
.cds-ca .table-container .badge-info,.cds-ca table.table-list .badge-info{
  background:var(--slate)!important;color:#fff!important;}

/* row hover stays neutral (belt and braces over the earlier #f7fbfd) */
.cds-ca table.table-list tbody tr:hover td,
.cds-ca .table > tbody > tr:hover > td{background:#f8fafc!important;}

/* =====================================================================
   Pass 11 (2026-08-25) — kill the theme's scheme-driven blue table header.
   antler ships a colour-scheme switcher: scripts.js writes data-color to
   the document and stores it in a cookie for 365 days. This site is on
   "blue", so main.css:8472 painted every table header solid #55bde5:
       [data-color="blue"] table.table-list thead th{
           background-color:#55bde5!important; color:#fff!important; }
   That selector is (0,2,3)+!important and applies on EVERY page, so it
   beat / bypassed the .cds-ca rules outside the client area.
   These selectors add one element (html) -> (0,2,4), winning on all four
   schemes, scoped to nothing so cart / kb / public pages match too.
   ===================================================================== */

html [data-color] table.table-list thead th,
html [data-color="blue"] table.table-list thead th,
html [data-color="pink"] table.table-list thead th,
html [data-color="green"] table.table-list thead th,
html [data-color="black"] table.table-list thead th{
  background-color:#f5f8fb!important;
  color:#6b7480!important;
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  border-bottom:2px solid #eef2f7!important;}

html [data-color] table.table-list tbody td.sorting_1 a,
html [data-color="blue"] table.table-list tbody td.sorting_1 a,
html [data-color="pink"] table.table-list tbody td.sorting_1 a,
html [data-color="green"] table.table-list tbody td.sorting_1 a,
html [data-color="black"] table.table-list tbody td.sorting_1 a{
  color:#212122!important;}
html [data-color] table.table-list tbody td.sorting_1 a:hover{
  color:#334155!important;text-decoration:underline;}

/* the sorted column also got a tinted cell background from the theme */
html [data-color] table.table-list tbody td.sorting_1{background:transparent!important;}

/* =====================================================================
   Pass 12 (2026-08-25)
   a) sidebar dropped BELOW the content on /announcements — footer.tpl
      renders .cds-sidebar-col on every page with sidebars, but pass 4's
      flex layout + panel styling were scoped to .cds-ca only. Generalised.
   b) announcement cards were too large.
   ===================================================================== */

/* ---------- (a) layout applies wherever the column exists ---------- */
@media (min-width:992px){
  .cds-ca .main-content > .row,
  .cds-ann .main-content > .row{
    display:flex;flex-wrap:wrap;align-items:flex-start;}
  .cds-ca .main-content > .row > .clearfix,
  .cds-ann .main-content > .row > .clearfix{display:none;}
  .cds-sidebar-col{position:sticky;top:24px;align-self:flex-start;}
}
/* panel styling unscoped so the column matches everywhere */
.cds-sidebar-col{margin-top:22px;}
.cds-sidebar-col .panel,
.cds-sidebar-col .sidebar{
  border:1px solid #e6ebf2!important;border-radius:16px;background:#fff;
  box-shadow:0 8px 24px rgba(20,40,60,.05);margin-bottom:18px;overflow:hidden;}
.cds-sidebar-col .panel-heading,
.cds-sidebar-col .list-group-item.header{
  background:#f5f8fb!important;border-bottom:1px solid #eef2f7!important;
  font-weight:800;color:#212122;font-size:13px;
  text-transform:uppercase;letter-spacing:.5px;padding:13px 16px;}
.cds-sidebar-col .list-group{margin-bottom:0;}
.cds-sidebar-col .list-group-item{
  border:0!important;border-top:1px solid #f4f7fa!important;border-radius:0!important;
  padding:11px 16px;font-size:13.5px;font-weight:600;background:#fff;}
.cds-sidebar-col .list-group-item:first-child{border-top:0!important;}
.cds-sidebar-col .list-group-item i{width:18px;margin-right:7px;color:#1697bf;}
.cds-sidebar-col .list-group-item a{color:#212122;}
.cds-sidebar-col .list-group-item:hover{background:#f7fbfd;}
.cds-sidebar-col .list-group-item.active,
.cds-sidebar-col .list-group-item.active a,
.cds-sidebar-col .list-group-item.active i{
  background:linear-gradient(90deg,#1697bf,#55bde5)!important;color:#fff!important;}

/* ---------- (b) smaller announcement cards ---------- */
.cds-ann .overview-services .service-wrap > .row{margin:0 -9px;}
.cds-ann .overview-services .service-wrap > .row > [class*="col-"]{
  padding:0 9px;margin-bottom:18px;}
.cds-ann .service-section{padding:19px 19px 16px;border-radius:14px;}
.cds-ann .service-section .badge.feat.bg-pink,
.cds-ann .service-section .badge.bg-pink{font-size:10.5px;padding:4px 11px;margin-bottom:10px;}
.cds-ann .service-section .title{font-size:15.5px!important;margin-bottom:8px;line-height:1.35;}
.cds-ann .service-section .subtitle{
  font-size:12.5px!important;line-height:1.55;margin-bottom:13px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.cds-ann .service-section .btn-default-yellow-fill{padding:8px 17px;font-size:12.5px;border-radius:9px;}
.cds-ann .section-heading{font-size:28px!important;margin:20px 0 6px;}
@media (max-width:767px){.cds-ann .section-heading{font-size:23px!important;}}

/* =====================================================================
   Pass 13 (2026-08-25) — domain registration / search
   (cart.php?a=add&domain=register -> orderforms/antler/adddomain.tpl).
   Shares the #order-standard_cart wrapper with the addon cards, so the
   pass-6 heading rules already apply; this styles the search form,
   TLD selector, results list and the floating category dropdown.
   ===================================================================== */

#order-standard_cart .header-lined{margin-bottom:26px;}
#order-standard_cart h1.section-heading{
  font-size:32px!important;font-weight:800;color:var(--ink);margin:22px 0 6px;}
@media (max-width:767px){#order-standard_cart h1.section-heading{font-size:25px!important;}}

/* ---------- the search bar becomes one clean control ---------- */
#order-standard_cart .domain-add-domain{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:22px;box-shadow:0 10px 28px rgba(20,40,60,.06);margin:0 0 26px;}
#order-standard_cart .domains-row{margin:0 -6px;}
#order-standard_cart .domains-row > [class*="col-"]{padding:0 6px;}

#order-standard_cart .input-group{width:100%;}
#order-standard_cart .input-group-addon{
  background:#f5f8fb!important;border:1px solid #e2e8f0!important;border-right:0!important;
  color:var(--mut)!important;font-size:13.5px;font-weight:700;
  border-radius:11px 0 0 11px;padding:0 14px;}
#order-standard_cart #inputDomain{
  height:48px;border:1px solid #e2e8f0!important;border-left:0!important;
  border-radius:0 11px 11px 0;font-size:15px;color:var(--ink);
  box-shadow:none!important;transition:border-color .15s,box-shadow .15s;}
#order-standard_cart #inputDomain:focus{
  border-color:var(--b)!important;box-shadow:0 0 0 3px rgba(22,151,191,.14)!important;}
#order-standard_cart .input-group:focus-within .input-group-addon{border-color:var(--b)!important;}

#order-standard_cart select[name="tld"].form-control{
  height:48px;border:1px solid #e2e8f0;border-radius:11px;
  font-size:14.5px;font-weight:700;color:var(--ink);background:#fff;padding:0 12px;}
#order-standard_cart select[name="tld"].form-control:focus{
  outline:0;border-color:var(--b);box-shadow:0 0 0 3px rgba(22,151,191,.14);}

#order-standard_cart #btnCheckAvailability{
  height:48px;width:100%;
  background:linear-gradient(90deg,var(--b),var(--b2))!important;
  border:0!important;color:#fff!important;border-radius:12px;
  font-size:14.5px!important;font-weight:800;letter-spacing:.3px;
  box-shadow:0 8px 18px rgba(22,151,191,.26);transition:all .18s;}
#order-standard_cart #btnCheckAvailability:hover{
  background:var(--bd)!important;transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(22,151,191,.34);}

/* ---------- spinner + results ---------- */
#order-standard_cart #domainLoadingSpinner{padding:34px 0;text-align:center;color:var(--b);}
#order-standard_cart .domain-search-results{margin-top:6px;}
#order-standard_cart .domain-search-results .domain-lookup-result,
#order-standard_cart .domain-search-results > div{border-radius:13px;}
#order-standard_cart .domain-lookup-result{
  background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:15px 18px;margin-bottom:11px;
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  box-shadow:0 6px 18px rgba(20,40,60,.05);transition:border-color .16s,box-shadow .16s;}
#order-standard_cart .domain-lookup-result:hover{
  border-color:rgba(22,151,191,.34);box-shadow:0 12px 26px rgba(22,151,191,.13);}
#order-standard_cart .domain-lookup-result .domain{
  font-size:15.5px;font-weight:800;color:var(--ink);}
#order-standard_cart .domain-lookup-result .price{
  margin-left:auto;font-size:17px;font-weight:800;color:var(--b);}
#order-standard_cart .domain-lookup-result.unavailable{opacity:.62;}
#order-standard_cart .domain-lookup-result .btn{border-radius:10px;font-weight:700;}

/* ---------- the ⋮ category dropdown floats over content here too ---------- */
#order-standard_cart .dropnav-header-lined .dropdown-menu{
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 42px rgba(20,40,60,.14);padding:6px;}
#order-standard_cart .dropnav-header-lined .drop-down-btn{
  background:#fff;border:1px solid var(--line);border-radius:50%;
  width:38px;height:38px;color:var(--mut);}

@media (max-width:767px){
  #order-standard_cart .domain-add-domain{padding:16px;border-radius:15px;}
  #order-standard_cart .domains-row > [class*="col-"]{margin-bottom:10px;}
  #order-standard_cart .domain-lookup-result .price{margin-left:0;}
}

/* =====================================================================
   Pass 14 (2026-08-25) — centre the domain search bar.
   adddomain.tpl lays it out as .col-sm-8.col-sm-offset-1 + .col-sm-2
   = 11 of 12 columns, so the whole unit sits off-centre and the button
   hangs to the right. Pass 13 also put padding+background on a Bootstrap
   .row, which carries -15px margins — that fought the grid. Rebuilt as
   a centred flex row with the grid offsets neutralised.
   ===================================================================== */

#order-standard_cart .domain-add-domain{
  display:flex;align-items:stretch;justify-content:center;gap:10px;
  max-width:900px;margin:0 auto 28px!important;
  padding:20px!important;}
#order-standard_cart .domain-add-domain::before,
#order-standard_cart .domain-add-domain::after{content:none!important;display:none!important;}

/* neutralise the Bootstrap column offsets/floats inside the bar */
#order-standard_cart .domain-add-domain > [class*="col-"]{
  float:none!important;margin-left:0!important;margin-right:0!important;
  padding-left:0!important;padding-right:0!important;
  width:auto!important;max-width:none!important;}
#order-standard_cart .domain-add-domain > .col-sm-8{flex:1 1 auto;min-width:0;}
#order-standard_cart .domain-add-domain > .col-sm-2{flex:0 0 175px;}

/* the inner row holding [www.][input][tld] */
#order-standard_cart .domains-row{
  display:flex;align-items:stretch;gap:8px;margin:0!important;}
#order-standard_cart .domains-row::before,
#order-standard_cart .domains-row::after{content:none!important;display:none!important;}
#order-standard_cart .domains-row > [class*="col-"]{
  float:none!important;padding:0!important;width:auto!important;max-width:none!important;}
#order-standard_cart .domains-row > .col-xs-9{flex:1 1 auto;min-width:0;}
#order-standard_cart .domains-row > .col-xs-3{flex:0 0 130px;}

/* keep every control the same height so the unit reads as one */
#order-standard_cart .domain-add-domain .input-group,
#order-standard_cart .domain-add-domain #inputDomain,
#order-standard_cart .domain-add-domain select[name="tld"].form-control,
#order-standard_cart .domain-add-domain #btnCheckAvailability{height:48px;}
#order-standard_cart .domain-add-domain #btnCheckAvailability{margin:0;}

@media (max-width:767px){
  #order-standard_cart .domain-add-domain{
    flex-direction:column;gap:9px;padding:16px!important;}
  #order-standard_cart .domain-add-domain > .col-sm-2{flex:0 0 auto;width:100%!important;}
  #order-standard_cart .domains-row > .col-xs-3{flex:0 0 110px;}
}

/* =====================================================================
   Pass 15 (2026-08-25) — vertically centre the search button.
   Pass 14 used align-items:stretch, so the button's .col-sm-2 grew to the
   height of the input column and the 48px button sat at the TOP of it.
   Centre both the flex row and the button's own column, and clear the
   margins btn-block/btn-sm bring with them.
   ===================================================================== */

#order-standard_cart .domain-add-domain{align-items:center!important;}

#order-standard_cart .domain-add-domain > .col-sm-2{
  display:flex!important;align-items:center!important;justify-content:center;
  align-self:center!important;}

#order-standard_cart .domain-add-domain #btnCheckAvailability{
  margin:0!important;padding:0 18px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center;
  width:100%;height:48px!important;line-height:1!important;align-self:center!important;
  white-space:nowrap;}

/* the input column shouldn't grow taller than its control either */
#order-standard_cart .domain-add-domain > .col-sm-8{align-self:center!important;}
#order-standard_cart .domains-row{align-items:center!important;}
#order-standard_cart .domains-row > [class*="col-"]{align-self:center!important;}

/* the addon/input/select all share one baseline */
#order-standard_cart .domain-add-domain .input-group-addon{
  display:flex!important;align-items:center!important;height:48px;}
#order-standard_cart .domain-add-domain #inputDomain,
#order-standard_cart .domain-add-domain select[name="tld"].form-control{
  margin:0!important;line-height:normal;}

@media (max-width:767px){
  #order-standard_cart .domain-add-domain > .col-sm-2{width:100%!important;}
}

/* =====================================================================
   Pass 16 (2026-08-25) — nudge the search button down onto the bar's
   centreline. Single tunable value: change --cds-btn-nudge if it needs
   more or less (positive = down, negative = up).
   ===================================================================== */

#order-standard_cart{--cds-btn-nudge:6px;}

#order-standard_cart .domain-add-domain #btnCheckAvailability{
  position:relative;
  top:var(--cds-btn-nudge);}

@media (max-width:767px){
  /* stacked on mobile — no nudge needed there */
  #order-standard_cart .domain-add-domain #btnCheckAvailability{top:0;}
}

/* =====================================================================
   Pass 17 (2026-08-25) — domain search, CORRECT selectors.
   Passes 13-16 targeted .domain-add-domain from orderforms/antler/
   adddomain.tpl, but cart.php?a=add&domain=register actually renders
   orderforms/antler/domainregister.tpl, whose classic branch is:
     .domain-checker-bg > form > .row > .col-md-8.col-md-offset-2
       > .input-group.input-group-lg.input-group-box
           > input#inputDomain.form-control
           > span.input-group-btn.input-group-append > button#btnCheckAvailability
   Those earlier rules matched nothing, which is why nothing moved.
   The column is already centred (8 + offset-2); the real problem is that
   Bootstrap's table-cell input-group left the button off the centreline.
   Flex fixes the alignment properly, with no nudge hack.
   ===================================================================== */

#order-standard_cart .domain-checker-bg{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:26px 22px;margin-bottom:28px;
  box-shadow:0 10px 28px rgba(20,40,60,.06);}

/* one flex row => input and button share a centreline automatically */
#order-standard_cart .input-group-box{
  display:flex!important;align-items:stretch!important;width:100%;}
#order-standard_cart .input-group-box > #inputDomain,
#order-standard_cart .input-group-box > .form-control{
  flex:1 1 auto;min-width:0;width:auto!important;float:none!important;
  height:54px!important;font-size:15.5px;color:var(--ink);
  border:1px solid #e2e8f0!important;border-right:0!important;
  border-radius:12px 0 0 12px!important;
  padding:0 16px;box-shadow:none!important;
  transition:border-color .15s,box-shadow .15s;}
#order-standard_cart .input-group-box > #inputDomain:focus{
  border-color:var(--b)!important;box-shadow:0 0 0 3px rgba(22,151,191,.14)!important;}

#order-standard_cart .input-group-box > .input-group-btn,
#order-standard_cart .input-group-box > .input-group-append{
  display:flex!important;align-items:stretch!important;
  width:auto!important;float:none!important;font-size:inherit;vertical-align:middle;}

#order-standard_cart #btnCheckAvailability{
  height:54px!important;min-width:150px;margin:0!important;top:0!important;
  display:inline-flex!important;align-items:center!important;justify-content:center;
  background:linear-gradient(90deg,var(--b),var(--b2))!important;
  border:0!important;color:#fff!important;
  border-radius:0 12px 12px 0!important;
  font-size:15px!important;font-weight:800;letter-spacing:.3px;line-height:1!important;
  padding:0 26px!important;white-space:nowrap;
  box-shadow:0 8px 18px rgba(22,151,191,.24);transition:all .18s;}
#order-standard_cart #btnCheckAvailability:hover{
  background:var(--bd)!important;box-shadow:0 12px 24px rgba(22,151,191,.32);}

/* heading above the search bar */
#order-standard_cart .header-lined .section-heading{
  font-size:32px!important;font-weight:800;color:var(--ink);margin:22px 0 6px;}
#order-standard_cart .header-lined .section-subheading{color:var(--mut);font-size:15px;}

@media (max-width:767px){
  #order-standard_cart .domain-checker-bg{padding:18px 15px;border-radius:15px;}
  #order-standard_cart .input-group-box{flex-direction:column;gap:9px;}
  #order-standard_cart .input-group-box > #inputDomain{
    border-right:1px solid #e2e8f0!important;border-radius:12px!important;width:100%!important;}
  #order-standard_cart .input-group-box > .input-group-btn{width:100%!important;}
  #order-standard_cart #btnCheckAvailability{width:100%;border-radius:12px!important;}
  #order-standard_cart .header-lined .section-heading{font-size:25px!important;}
}

/* =====================================================================
   Pass 18 (2026-08-25) — correct pass 17 on the domain search.
   (a) Pass 17 painted .domain-checker-bg white. The dark charcoal panel
       with a white pill input is the theme's intended hero design — keep it.
   (b) The button overhung the pill's bottom edge: .input-group-btn is a
       table-cell in Bootstrap 3 and the button carried its own height +
       margins, so it never shared the input's box. Both are now flex
       children of the same row at one fixed height, so they cannot drift.
   ===================================================================== */

/* (a) restore the theme's dark search panel */
#order-standard_cart .domain-checker-bg{
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0!important;border-radius:0!important;}

/* (b) input + button as one flush pill */
#order-standard_cart .input-group-box{
  display:flex!important;align-items:center!important;
  width:100%;height:58px;}

#order-standard_cart .input-group-box > #inputDomain,
#order-standard_cart .input-group-box > .form-control{
  flex:1 1 auto;min-width:0;width:auto!important;float:none!important;
  height:58px!important;line-height:58px;margin:0!important;
  font-size:16px;color:var(--ink);background:#fff!important;
  border:0!important;border-radius:999px 0 0 999px!important;
  padding:0 26px!important;box-shadow:none!important;outline:0!important;}

#order-standard_cart .input-group-box > .input-group-btn,
#order-standard_cart .input-group-box > .input-group-append{
  display:flex!important;align-items:center!important;
  height:58px!important;width:auto!important;float:none!important;
  margin:0!important;padding:0!important;vertical-align:top;}

#order-standard_cart #btnCheckAvailability{
  height:58px!important;min-width:150px;
  margin:0!important;top:0!important;position:static!important;
  display:inline-flex!important;align-items:center!important;justify-content:center;
  background:linear-gradient(90deg,var(--b),var(--b2))!important;
  border:0!important;color:#fff!important;
  border-radius:0 999px 999px 0!important;
  font-size:15.5px!important;font-weight:800;line-height:1!important;
  padding:0 30px!important;white-space:nowrap;box-shadow:none!important;
  transition:background .18s;}
#order-standard_cart #btnCheckAvailability:hover{background:var(--bd)!important;}

@media (max-width:767px){
  #order-standard_cart .input-group-box{height:auto;flex-direction:column;gap:9px;}
  #order-standard_cart .input-group-box > #inputDomain{
    width:100%!important;border-radius:999px!important;padding:0 20px!important;}
  #order-standard_cart .input-group-box > .input-group-btn{width:100%!important;}
  #order-standard_cart #btnCheckAvailability{width:100%;border-radius:999px!important;}
}

/* =====================================================================
   Pass 19 (2026-08-25) — force search field FIRST, button immediately
   after it, with no gap. Reported symptom: button rendering first and
   detached from the field. Rather than chase whichever rule reverses it
   (RTL sheet, float, or table-cell fallback), pin it explicitly with
   flex `order` and kill every margin/gap between the two.
   ===================================================================== */

#order-standard_cart .input-group-box{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:0!important;
  direction:ltr!important;
  width:100%!important;height:58px;}

/* 1) the text field */
#order-standard_cart .input-group-box > #inputDomain,
#order-standard_cart .input-group-box > .form-control{
  order:1!important;
  flex:1 1 auto!important;min-width:0!important;width:auto!important;
  margin:0!important;margin-right:0!important;float:none!important;
  height:58px!important;font-size:16px;color:var(--ink);
  background:#fff!important;border:0!important;
  border-radius:999px 0 0 999px!important;
  padding:0 26px!important;box-shadow:none!important;}

/* 2) the button, flush against it */
#order-standard_cart .input-group-box > .input-group-btn,
#order-standard_cart .input-group-box > .input-group-append{
  order:2!important;
  flex:0 0 auto!important;width:auto!important;
  margin:0!important;margin-left:0!important;padding:0!important;
  float:none!important;left:auto!important;right:auto!important;
  display:flex!important;align-items:center!important;height:58px!important;}

#order-standard_cart .input-group-box #btnCheckAvailability{
  order:2!important;
  margin:0!important;position:static!important;top:0!important;
  height:58px!important;min-width:150px;
  border-radius:0 999px 999px 0!important;
  padding:0 30px!important;}

@media (max-width:767px){
  #order-standard_cart .input-group-box{
    flex-direction:column!important;height:auto;gap:9px!important;}
  #order-standard_cart .input-group-box > #inputDomain{
    width:100%!important;border-radius:999px!important;}
  #order-standard_cart .input-group-box > .input-group-btn{width:100%!important;}
  #order-standard_cart .input-group-box #btnCheckAvailability{
    width:100%;border-radius:999px!important;}
}

/* =====================================================================
   Pass 20 (2026-08-25) — make the domain search DIRECTION-AWARE.
   Pass 19 forced direction:ltr on every page, which would have broken
   the Arabic layout (correct there as button-then-field). The theme
   signals RTL from head.tpl:44 — arabic/farsi/hebrew emit <html dir="rtl">,
   whose attribute the HTML parser merges onto the root element.
   So: field-then-button in LTR, mirrored in RTL, with the pill's rounded
   ends following the reading direction in both.
   ===================================================================== */

/* ---------- LTR (English): field first, button after ---------- */
html:not([dir="rtl"]) #order-standard_cart .input-group-box{
  direction:ltr!important;flex-direction:row!important;}
html:not([dir="rtl"]) #order-standard_cart .input-group-box > #inputDomain,
html:not([dir="rtl"]) #order-standard_cart .input-group-box > .form-control{
  order:1!important;border-radius:999px 0 0 999px!important;text-align:left;}
html:not([dir="rtl"]) #order-standard_cart .input-group-box > .input-group-btn,
html:not([dir="rtl"]) #order-standard_cart .input-group-box > .input-group-append{
  order:2!important;}
html:not([dir="rtl"]) #order-standard_cart .input-group-box #btnCheckAvailability{
  border-radius:0 999px 999px 0!important;}

/* ---------- RTL (Arabic/Farsi/Hebrew): mirrored, as the theme intends ---------- */
html[dir="rtl"] #order-standard_cart .input-group-box{
  direction:rtl!important;flex-direction:row!important;}
html[dir="rtl"] #order-standard_cart .input-group-box > #inputDomain,
html[dir="rtl"] #order-standard_cart .input-group-box > .form-control{
  order:1!important;border-radius:0 999px 999px 0!important;text-align:right;}
html[dir="rtl"] #order-standard_cart .input-group-box > .input-group-btn,
html[dir="rtl"] #order-standard_cart .input-group-box > .input-group-append{
  order:2!important;}
html[dir="rtl"] #order-standard_cart .input-group-box #btnCheckAvailability{
  border-radius:999px 0 0 999px!important;}

/* mobile: stacked, full pill both directions */
@media (max-width:767px){
  html:not([dir="rtl"]) #order-standard_cart .input-group-box > #inputDomain,
  html[dir="rtl"] #order-standard_cart .input-group-box > #inputDomain,
  html:not([dir="rtl"]) #order-standard_cart .input-group-box #btnCheckAvailability,
  html[dir="rtl"] #order-standard_cart .input-group-box #btnCheckAvailability{
    border-radius:999px!important;}
}

/* =====================================================================
   Pass 21 (2026-08-25) — belt-and-braces LTR ordering for the domain
   search. head.tpl emits <html dir="ltr"> on English pages (parser merges
   it onto the root), so match that explicitly as well as :not([dir="rtl"]).
   Highest specificity + last in file, so nothing later can flip it.
   ===================================================================== */

html[dir="ltr"] #order-standard_cart .input-group-box,
html:not([dir="rtl"]) #order-standard_cart .input-group-box{
  display:flex!important;flex-direction:row!important;
  direction:ltr!important;unicode-bidi:normal!important;
  justify-content:flex-start!important;align-items:center!important;
  flex-wrap:nowrap!important;gap:0!important;}

html[dir="ltr"] #order-standard_cart .input-group-box > #inputDomain,
html[dir="ltr"] #order-standard_cart .input-group-box > .form-control,
html:not([dir="rtl"]) #order-standard_cart .input-group-box > #inputDomain{
  order:0!important;-webkit-order:0!important;
  flex:1 1 auto!important;float:none!important;margin:0!important;
  border-radius:999px 0 0 999px!important;}

html[dir="ltr"] #order-standard_cart .input-group-box > .input-group-btn,
html[dir="ltr"] #order-standard_cart .input-group-box > .input-group-append,
html:not([dir="rtl"]) #order-standard_cart .input-group-box > .input-group-btn{
  order:9!important;-webkit-order:9!important;
  flex:0 0 auto!important;float:none!important;margin:0!important;}

html[dir="ltr"] #order-standard_cart .input-group-box #btnCheckAvailability{
  border-radius:0 999px 999px 0!important;margin:0!important;position:static!important;}

/* =====================================================================
   Pass 22 (2026-08-25) — domain search: pin with PHYSICAL positioning.
   flex `order` is resolved along the inline axis, so any surviving
   direction:rtl on an ancestor flips it no matter how high the
   specificity of the order rule. left/right offsets are physical and
   direction-proof, so this cannot mirror.
   LTR: field fills the bar, button pinned to the RIGHT edge.
   RTL: mirrored, button pinned LEFT (Arabic stays as it is today).
   ===================================================================== */

/* ---------- LTR: field left, button right ---------- */
html[dir="ltr"] #order-standard_cart .input-group-box,
html:not([dir="rtl"]) #order-standard_cart .input-group-box{
  display:block!important;position:relative!important;
  width:100%!important;height:58px!important;}

html[dir="ltr"] #order-standard_cart .input-group-box > #inputDomain,
html:not([dir="rtl"]) #order-standard_cart .input-group-box > #inputDomain{
  position:absolute!important;left:0!important;right:auto!important;top:0!important;
  width:100%!important;height:58px!important;margin:0!important;float:none!important;
  padding:0 172px 0 26px!important;
  border:0!important;border-radius:999px!important;background:#fff!important;
  font-size:16px;color:var(--ink);text-align:left!important;direction:ltr!important;
  box-shadow:none!important;z-index:1;}

html[dir="ltr"] #order-standard_cart .input-group-box > .input-group-btn,
html[dir="ltr"] #order-standard_cart .input-group-box > .input-group-append,
html:not([dir="rtl"]) #order-standard_cart .input-group-box > .input-group-btn{
  position:absolute!important;right:0!important;left:auto!important;top:0!important;
  width:auto!important;height:58px!important;margin:0!important;padding:0!important;
  float:none!important;display:block!important;z-index:2;}

html[dir="ltr"] #order-standard_cart .input-group-box #btnCheckAvailability,
html:not([dir="rtl"]) #order-standard_cart .input-group-box #btnCheckAvailability{
  height:58px!important;min-width:150px;margin:0!important;position:static!important;
  border-radius:0 999px 999px 0!important;padding:0 30px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center;}

/* ---------- RTL: mirrored ---------- */
html[dir="rtl"] #order-standard_cart .input-group-box{
  display:block!important;position:relative!important;width:100%!important;height:58px!important;}
html[dir="rtl"] #order-standard_cart .input-group-box > #inputDomain{
  position:absolute!important;right:0!important;left:auto!important;top:0!important;
  width:100%!important;height:58px!important;margin:0!important;
  padding:0 26px 0 172px!important;border-radius:999px!important;
  text-align:right!important;direction:rtl!important;z-index:1;}
html[dir="rtl"] #order-standard_cart .input-group-box > .input-group-btn{
  position:absolute!important;left:0!important;right:auto!important;top:0!important;
  width:auto!important;height:58px!important;margin:0!important;z-index:2;}
html[dir="rtl"] #order-standard_cart .input-group-box #btnCheckAvailability{
  border-radius:999px 0 0 999px!important;}

/* ---------- mobile: stack, no absolute positioning ---------- */
@media (max-width:767px){
  #order-standard_cart .input-group-box{height:auto!important;}
  #order-standard_cart .input-group-box > #inputDomain{
    position:static!important;padding:0 20px!important;margin-bottom:9px!important;}
  #order-standard_cart .input-group-box > .input-group-btn{
    position:static!important;width:100%!important;}
  #order-standard_cart .input-group-box #btnCheckAvailability{
    width:100%;border-radius:999px!important;}
}

/* =====================================================================
   Pass 23 (2026-08-25) — deepen the domain search panel.
   The theme ships .domain-checker-container with a globe photo and
   .domain-checker-bg as a flat charcoal slab. Deepen it toward the brand
   teal (#123d4d, the same tone used on the KB hero and the product card)
   so the white pill and cyan button sit on a darker, richer ground.
   ===================================================================== */

#order-standard_cart .domain-checker-container,
.domain-checker-container{
  background-image:none!important;
  background:linear-gradient(135deg,#0b1a22 0%,#123d4d 55%,#0f5e78 100%)!important;
  border-radius:18px!important;
  box-shadow:0 18px 46px rgba(11,26,34,.30);}

/* the photo overlay would lighten it back up */
#order-standard_cart .domain-checker-container.overlay:before,
.domain-checker-container.overlay:before{
  background:rgba(7,18,24,.42)!important;border-radius:18px!important;}

#order-standard_cart .domain-checker-bg,
.domain-checker-bg{
  background:transparent!important;background-image:none!important;
  padding:104px 0!important;}

/* heading/subheading sit on the dark panel now */
#order-standard_cart .domain-checker-container .section-heading,
#order-standard_cart .domain-checker-container .section-subheading{color:#fff!important;}

/* lift the pill off the dark ground */
#order-standard_cart .input-group-box > #inputDomain{
  box-shadow:0 10px 30px rgba(0,0,0,.28)!important;}
#order-standard_cart .input-group-box #btnCheckAvailability{
  box-shadow:0 10px 26px rgba(0,0,0,.26)!important;}

@media (max-width:767px){
  #order-standard_cart .domain-checker-bg,
  .domain-checker-bg{padding:52px 0!important;}
  #order-standard_cart .domain-checker-container,
  .domain-checker-container{border-radius:14px!important;}
}

/* =====================================================================
   Pass 24 (2026-08-25)
   a) domain search panel: darker still
   b) table header ("title") row: dark text instead of mid-grey
   ===================================================================== */

/* ---------- (a) deeper panel ---------- */
#order-standard_cart .domain-checker-container,
.domain-checker-container{
  background:linear-gradient(135deg,#050f14 0%,#0d2a35 55%,#0f4a5e 100%)!important;}
#order-standard_cart .domain-checker-container.overlay:before,
.domain-checker-container.overlay:before{
  background:rgba(3,10,14,.58)!important;}

/* ---------- (b) table header row, all list pages ---------- */
html [data-color] table.table-list thead th,
html [data-color="blue"] table.table-list thead th,
html [data-color="pink"] table.table-list thead th,
html [data-color="green"] table.table-list thead th,
html [data-color="black"] table.table-list thead th,
.cds-ca table.table-list thead th,
.cds-ca .table > thead > tr > th,
.cds-ca .table-bordered > thead > tr > th{
  background-color:#eef1f5!important;
  color:#14181c!important;
  font-weight:800;border-bottom:2px solid #dbe2ea!important;}

/* sorted column stays dark, indicated by weight not colour */
.cds-ca table.table-list thead th.sorting_asc,
.cds-ca table.table-list thead th.sorting_desc,
html [data-color] table.table-list thead th.sorting_asc,
html [data-color] table.table-list thead th.sorting_desc{color:#000!important;}

/* =====================================================================
   Pass 25 (2026-08-25) — match the domain search panel to the KB hero.
   The knowledgebase hero is the reference design; copy its exact
   gradient, radius and the two blurred radial glows so the two heroes
   are visually identical. Supersedes the darker gradients of passes 23/24.
   Reference (knowledgebase.tpl inline <style>):
     background: linear-gradient(135deg,#0e2740 0%,#123d4d 45%,#1697bf 120%)
     ::before  radial rgba(85,189,229,.45)  420px, right:-130px top:-170px
     ::after   radial rgba(22,151,191,.40)  360px, left:-120px bottom:-180px
     border-radius: 24px
   ===================================================================== */

#order-standard_cart .domain-checker-container,
.domain-checker-container{
  position:relative!important;overflow:hidden!important;
  background-image:none!important;
  background:linear-gradient(135deg,#0e2740 0%,#123d4d 45%,#1697bf 120%)!important;
  border-radius:24px!important;
  box-shadow:0 18px 46px rgba(14,39,64,.28);}

/* the theme's photo overlay would mute the gradient */
#order-standard_cart .domain-checker-container.overlay:before,
.domain-checker-container.overlay:before{
  content:""!important;position:absolute!important;
  width:420px!important;height:420px!important;border-radius:50%!important;
  right:-130px!important;top:-170px!important;left:auto!important;bottom:auto!important;
  background:radial-gradient(circle,rgba(85,189,229,.45),transparent 70%)!important;
  filter:blur(20px)!important;z-index:0!important;}

#order-standard_cart .domain-checker-container:after,
.domain-checker-container:after{
  content:""!important;position:absolute!important;
  width:360px!important;height:360px!important;border-radius:50%!important;
  left:-120px!important;bottom:-180px!important;right:auto!important;top:auto!important;
  background:radial-gradient(circle,rgba(22,151,191,.40),transparent 70%)!important;
  filter:blur(20px)!important;z-index:0!important;}

/* keep the form above the glows */
#order-standard_cart .domain-checker-bg,
.domain-checker-bg{
  position:relative!important;z-index:1!important;
  background:transparent!important;background-image:none!important;
  padding:78px 0!important;}

#order-standard_cart .domain-checker-container .section-heading{color:#fff!important;}
#order-standard_cart .domain-checker-container .section-subheading{
  color:rgba(255,255,255,.85)!important;}

/* pill shadow matched to the KB search box */
#order-standard_cart .input-group-box > #inputDomain{
  box-shadow:0 12px 30px rgba(0,0,0,.18)!important;}
#order-standard_cart .input-group-box #btnCheckAvailability{
  box-shadow:none!important;}

@media (max-width:767px){
  #order-standard_cart .domain-checker-bg,
  .domain-checker-bg{padding:46px 0!important;}
  #order-standard_cart .domain-checker-container,
  .domain-checker-container{border-radius:18px!important;}
}

/* =====================================================================
   Pass 28 (2026-08-25) — "Order New Services" category index (/order.php).
   WHMCS has no all-categories landing: cart.php redirects to the first
   visible group, so a VPS buyer landed in Shared Hosting. This page lists
   every group that has products; groups with none are omitted server-side.
   ===================================================================== */

.cds-order-index{--b:#1697bf;--b2:#55bde5;--bd:#0f7ea0;--ink:#212122;--mut:#6b7480;--line:#e6ebf2;}
.cds-order-index .section-heading{font-size:32px!important;font-weight:800;color:var(--ink);margin:24px 0 6px;}
.cds-order-index .section-subheading{color:var(--mut);font-size:15px;margin-bottom:30px;}

.cds-cat-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;margin:0 0 36px;}

.cds-cat-card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:24px 22px 20px;text-decoration:none!important;
  box-shadow:0 10px 26px rgba(20,40,60,.06);
  transition:transform .22s,box-shadow .22s,border-color .22s;}
.cds-cat-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,var(--b),var(--b2));}
.cds-cat-card:hover{
  transform:translateY(-5px);border-color:rgba(22,151,191,.34);
  box-shadow:0 22px 44px rgba(22,151,191,.16);}

.cds-cat-count{
  align-self:flex-start;background:#eef6fa;color:var(--bd);
  border:1px solid rgba(22,151,191,.22);border-radius:999px;
  font-size:11.5px;font-weight:800;padding:4px 12px;margin-bottom:12px;}
.cds-cat-count::after{content:" products";font-weight:600;}

.cds-cat-name{font-size:18px;font-weight:800;color:var(--ink);line-height:1.3;margin-bottom:8px;}
.cds-cat-desc{font-size:13px;line-height:1.55;color:var(--mut);flex:1;margin-bottom:16px;}
.cds-cat-go{
  font-size:13.5px;font-weight:800;color:var(--b);
  display:inline-flex;align-items:center;gap:7px;}
.cds-cat-card:hover .cds-cat-go{color:var(--bd);}
.cds-cat-card:hover .cds-cat-go i{transform:translateX(3px);}
.cds-cat-go i{transition:transform .18s;}

/* domain shortcuts under the grid */
.cds-order-extra{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  border-top:1px solid var(--line);padding-top:24px;margin-bottom:40px;}
.cds-order-extra-link{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--ink)!important;font-size:13.5px;font-weight:700;
  text-decoration:none!important;transition:all .16s;}
.cds-order-extra-link i{color:var(--b);}
.cds-order-extra-link:hover{border-color:var(--b);background:#f3f9fb;color:var(--bd)!important;}

@media (max-width:767px){
  .cds-cat-grid{grid-template-columns:1fr;gap:14px;}
  .cds-cat-card{padding:20px 18px 16px;}
  .cds-order-index .section-heading{font-size:25px!important;}
}

/* =====================================================================
   2026-08-26  ZYROXI Mail store page  (product group 22)
   Markup: templates/orderforms/antler/products.tpl, {if $productGroup.id == 22}
   Illustrations: templates/antler/assets/img/zyroxi/*.svg
   Everything is scoped to .cds-zx, so no other store group, cart step or
   client-area page is affected. Revert = delete this banner's block.
   Antler is specificity-heavy, hence the targeted !important calls.
   ===================================================================== */

.cds-zx {
    --zx-b:    #1697bf;
    --zx-b2:   #55bde5;
    --zx-bd:   #0f7ea0;
    --zx-ink:  #16232b;
    --zx-mut:  #62727e;
    --zx-line: #e3ebf2;
    --zx-bg:   #f6fafc;
    --zx-rad:  16px;
    color: var(--zx-ink);
}
.cds-zx *, .cds-zx *::before, .cds-zx *::after { box-sizing: border-box; }

.cds-zx h1, .cds-zx h2, .cds-zx h3 { color: var(--zx-ink) !important; margin: 0; }
.cds-zx p { color: var(--zx-mut); margin: 0; }

/* ------------------------------- hero ------------------------------- */
.cds-zx .zx-hero {
    background: linear-gradient(135deg, #eaf6fb 0%, #f7fbfd 55%, #ffffff 100%);
    border: 1px solid var(--zx-line);
    border-radius: 24px;
    padding: 48px 44px;
    margin: 24px 0 56px;
    overflow: hidden;
}
.cds-zx .zx-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
.cds-zx .zx-hero-logo { max-width: 220px; height: auto; margin-bottom: 22px; }
.cds-zx .zx-h1 {
    font-size: 40px; line-height: 1.16; font-weight: 800;
    letter-spacing: -.5px; margin-bottom: 16px !important;
}
.cds-zx .zx-lede { font-size: 17px; line-height: 1.65; max-width: 34em; }

.cds-zx .zx-chips {
    list-style: none; padding: 0; margin: 26px 0 30px;
    display: flex; flex-wrap: wrap; gap: 10px;
}
.cds-zx .zx-chips li {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--zx-line); border-radius: 999px;
    padding: 8px 15px; font-size: 13.5px; font-weight: 600; color: var(--zx-ink);
}
.cds-zx .zx-chips i { color: var(--zx-b); font-size: 13px; }

.cds-zx .zx-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cds-zx .zx-cta-main { padding: 14px 30px !important; font-weight: 700 !important; }
.cds-zx .zx-cta-ghost {
    display: inline-flex; align-items: center;
    padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: 14px;
    color: var(--zx-b) !important; border: 2px solid var(--zx-b);
    text-decoration: none !important; transition: background .18s, color .18s;
}
.cds-zx .zx-cta-ghost:hover { background: var(--zx-b); color: #fff !important; }

.cds-zx .zx-hero-art { text-align: center; }
.cds-zx .zx-hero-art img { max-width: 100%; height: auto; }

/* ---------------------------- section shell -------------------------- */
.cds-zx .zx-section { margin: 0 0 64px; }
.cds-zx .zx-band {
    background: var(--zx-bg); border: 1px solid var(--zx-line);
    border-radius: 24px; padding: 48px 40px;
}
.cds-zx .zx-head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.cds-zx .zx-h2 {
    font-size: 30px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 12px !important;
}
.cds-zx .zx-sub { font-size: 16px; line-height: 1.6; }

/* ------------------------- monthly / yearly -------------------------- */
.cds-zx .zx-toggle-wrap { display: flex; justify-content: center; margin-bottom: 38px; }
.cds-zx .zx-toggle {
    display: inline-flex; gap: 4px; padding: 5px;
    background: #eef4f8; border: 1px solid var(--zx-line); border-radius: 999px;
}
.cds-zx .zx-toggle-btn {
    display: inline-flex; align-items: center; gap: 9px;
    border: 0; background: transparent; cursor: pointer;
    padding: 11px 26px; border-radius: 999px;
    font-size: 14.5px; font-weight: 700; color: var(--zx-mut);
    transition: background .18s, color .18s, box-shadow .18s;
}
.cds-zx .zx-toggle-btn:hover { color: var(--zx-ink); }
.cds-zx .zx-toggle-btn.is-on {
    background: #fff; color: var(--zx-b);
    box-shadow: 0 2px 8px rgba(15,126,160,.16);
}
.cds-zx .zx-toggle-btn:focus-visible { outline: 2px solid var(--zx-b); outline-offset: 2px; }
.cds-zx .zx-save-pill {
    background: #17a673; color: #fff; border-radius: 999px;
    padding: 3px 10px; font-size: 11.5px; font-weight: 800;
    letter-spacing: .3px; white-space: nowrap;
}

/* ------------------------------ plans -------------------------------- */
.cds-zx .zx-plan-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px; align-items: stretch;
}
.cds-zx .zx-plan {
    position: relative; background: #fff;
    border: 1px solid var(--zx-line); border-radius: var(--zx-rad);
    padding: 34px 28px 30px;
    display: flex; flex-direction: column;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cds-zx .zx-plan:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(15,126,160,.13);
    border-color: #c9e3ef;
}
.cds-zx .zx-plan.is-featured {
    border: 2px solid var(--zx-b);
    box-shadow: 0 16px 42px rgba(15,126,160,.16);
}
.cds-zx .zx-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--zx-b); color: #fff; border-radius: 999px;
    padding: 6px 18px; font-size: 11.5px; font-weight: 800;
    letter-spacing: .6px; text-transform: uppercase; white-space: nowrap;
}
.cds-zx .zx-plan-head { text-align: center; padding-bottom: 22px; border-bottom: 1px solid var(--zx-line); }
.cds-zx .zx-plan-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 15px; margin-bottom: 14px;
    background: linear-gradient(135deg, var(--zx-b2), var(--zx-b));
    color: #fff; font-size: 21px;
}
.cds-zx .zx-plan-name { font-size: 22px; font-weight: 800; margin-bottom: 6px !important; }
.cds-zx .zx-plan-for { font-size: 13.5px; line-height: 1.5; }

.cds-zx .zx-price-block { padding: 24px 0 22px; text-align: center; min-height: 150px; }
.cds-zx .zx-price { display: none; align-items: baseline; justify-content: center; gap: 10px; }
.cds-zx .zx-price-note { display: none; font-size: 13px; line-height: 1.55; color: var(--zx-mut); margin-top: 12px; }
.cds-zx[data-active-cycle="monthly"]  .zx-price[data-cycle="monthly"],
.cds-zx[data-active-cycle="annually"] .zx-price[data-cycle="annually"] { display: flex; }
.cds-zx[data-active-cycle="monthly"]  .zx-price-note[data-cycle="monthly"],
.cds-zx[data-active-cycle="annually"] .zx-price-note[data-cycle="annually"] { display: block; }

.cds-zx .zx-amount {
    font-size: 44px; font-weight: 800; letter-spacing: -1.4px;
    color: var(--zx-ink); line-height: 1;
}
.cds-zx .zx-per { font-size: 12.5px; line-height: 1.35; color: var(--zx-mut); text-align: left; font-weight: 600; }
.cds-zx .zx-price-note strong { color: var(--zx-ink); font-weight: 700; }
.cds-zx .zx-save-inline {
    display: inline-block; margin-left: 6px; background: #e6f7f0; color: #0f7a55;
    border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 800;
}

.cds-zx .zx-order { display: block !important; text-align: center; padding: 14px 20px !important; font-weight: 700 !important; }

.cds-zx .zx-feat { list-style: none; padding: 0; margin: 26px 0 0; }
.cds-zx .zx-feat li {
    position: relative; padding: 0 0 0 28px; margin-bottom: 12px;
    font-size: 14.5px; line-height: 1.55; color: var(--zx-ink);
}
.cds-zx .zx-feat li::before {
    content: ""; position: absolute; left: 0; top: 6px;
    width: 17px; height: 17px; border-radius: 50%;
    background: var(--zx-b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.cds-zx .zx-feat li strong { font-weight: 700; }
.cds-zx .zx-foot-note { text-align: center; font-size: 13.5px; margin-top: 28px; }

/* --------------------------- feature cards --------------------------- */
.cds-zx .zx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.cds-zx .zx-card {
    background: #fff; border: 1px solid var(--zx-line); border-radius: var(--zx-rad);
    padding: 32px 26px; text-align: center;
}
.cds-zx .zx-card img { width: 104px; height: 104px; margin-bottom: 16px; }
.cds-zx .zx-card h3 { font-size: 18.5px; font-weight: 800; margin-bottom: 10px !important; }
.cds-zx .zx-card p { font-size: 14.5px; line-height: 1.62; }

/* ------------------------------ steps -------------------------------- */
.cds-zx .zx-steps {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px;
}
.cds-zx .zx-steps li { position: relative; text-align: center; padding-top: 8px; }
.cds-zx .zx-steps img { width: 112px; height: 112px; margin-bottom: 14px; }
.cds-zx .zx-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--zx-b); color: #fff; font-weight: 800; font-size: 14px;
    margin-bottom: 12px;
}
.cds-zx .zx-steps h3 { font-size: 18px; font-weight: 800; margin-bottom: 9px !important; }
.cds-zx .zx-steps p { font-size: 14.5px; line-height: 1.62; max-width: 30em; margin: 0 auto; }

/* --------------------------- compare table --------------------------- */
.cds-zx .zx-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cds-zx .zx-table {
    width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0;
    background: #fff; border: 1px solid var(--zx-line); border-radius: var(--zx-rad);
    overflow: hidden;
}
.cds-zx .zx-table th, .cds-zx .zx-table td {
    padding: 15px 18px; text-align: center; font-size: 14.5px;
    border-bottom: 1px solid var(--zx-line); background: transparent !important;
    color: var(--zx-ink) !important;
}
.cds-zx .zx-table thead th {
    font-size: 16px; font-weight: 800; background: #f2f8fb !important;
    border-bottom: 2px solid var(--zx-line);
}
.cds-zx .zx-table thead th.is-featured { background: #e7f4fa !important; color: var(--zx-bd) !important; }
.cds-zx .zx-table tbody th[scope="row"] { text-align: left; font-weight: 700; color: var(--zx-ink) !important; }
.cds-zx .zx-table td.is-featured { background: #f5fbfd !important; }
.cds-zx .zx-table tbody tr:last-child th, .cds-zx .zx-table tbody tr:last-child td { border-bottom: 0; }
.cds-zx .zx-table .zx-y { color: #17a673 !important; font-weight: 700; }
.cds-zx .zx-table .zx-n { color: #a9b6c0 !important; }
.cds-zx .zx-table-cta td { padding-top: 22px; padding-bottom: 22px; }
.cds-zx .zx-table-btn {
    display: inline-block; padding: 11px 20px; border-radius: 999px;
    background: var(--zx-b); color: #fff !important; font-weight: 700; font-size: 13.5px;
    text-decoration: none !important; white-space: nowrap; transition: background .18s;
}
.cds-zx .zx-table-btn:hover { background: var(--zx-bd); }

/* -------------------------------- faq -------------------------------- */
.cds-zx .zx-faq { max-width: 860px; margin: 0 auto; }
.cds-zx .zx-faq details {
    background: #fff; border: 1px solid var(--zx-line);
    border-radius: 12px; margin-bottom: 12px; overflow: hidden;
}
.cds-zx .zx-faq details[open] { border-color: #c9e3ef; }
.cds-zx .zx-faq summary {
    cursor: pointer; list-style: none; padding: 18px 52px 18px 22px;
    font-size: 16px; font-weight: 700; color: var(--zx-ink); position: relative;
}
.cds-zx .zx-faq summary::-webkit-details-marker { display: none; }
.cds-zx .zx-faq summary::after {
    content: ""; position: absolute; right: 22px; top: 50%;
    width: 11px; height: 11px; margin-top: -6px;
    border-right: 2.4px solid var(--zx-b); border-bottom: 2.4px solid var(--zx-b);
    transform: rotate(45deg); transition: transform .2s;
}
.cds-zx .zx-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.cds-zx .zx-faq summary:focus-visible { outline: 2px solid var(--zx-b); outline-offset: -2px; }
.cds-zx .zx-faq p { padding: 0 22px 20px; font-size: 15px; line-height: 1.68; }

.cds-zx .zx-store-nav { margin-top: 8px; }

/* ----------------------------- responsive ---------------------------- */
@media (max-width: 991px) {
    .cds-zx .zx-hero { padding: 38px 28px; }
    .cds-zx .zx-hero-inner { grid-template-columns: 1fr; gap: 34px; }
    .cds-zx .zx-hero-art { order: -1; }
    .cds-zx .zx-hero-art img { max-width: 460px; }
    .cds-zx .zx-h1 { font-size: 32px; }
    .cds-zx .zx-plan-grid, .cds-zx .zx-cards, .cds-zx .zx-steps { grid-template-columns: 1fr; }
    .cds-zx .zx-plan.is-featured { order: -1; }
    .cds-zx .zx-band { padding: 38px 24px; }
    .cds-zx .zx-price-block { min-height: 0; }
}
@media (max-width: 575px) {
    .cds-zx .zx-hero { padding: 30px 20px; border-radius: 18px; }
    .cds-zx .zx-h1 { font-size: 27px; }
    .cds-zx .zx-lede { font-size: 15.5px; }
    .cds-zx .zx-h2 { font-size: 24px; }
    .cds-zx .zx-amount { font-size: 38px; }
    .cds-zx .zx-toggle { width: 100%; }
    .cds-zx .zx-toggle-btn { flex: 1; justify-content: center; padding: 11px 12px; font-size: 13.5px; }
    .cds-zx .zx-save-pill { font-size: 10.5px; padding: 2px 7px; }
    .cds-zx .zx-hero-cta { flex-direction: column; align-items: stretch; }
    .cds-zx .zx-hero-cta a { text-align: center; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .cds-zx .zx-plan:hover { transform: none; }
    .cds-zx * { transition: none !important; }
}

/* ---------------------------------------------------------------------
   2026-08-26b  ZYROXI Mail hero — product screenshot + floating badges
   Replaces the placeholder zx-hero.svg illustration. The circle, the two
   floating cards and the dots are CSS/inline-SVG rather than baked into
   the bitmap, so they stay crisp and reflow on small screens.
   --------------------------------------------------------------------- */

.cds-zx .zx-shot { position: relative; display: block; padding: 6% 8% 8% 6%; }

/* soft blue disc behind the laptop */
.cds-zx .zx-shot-ring {
    position: absolute; left: 50%; top: 50%;
    width: 78%; padding-bottom: 78%; transform: translate(-46%, -50%);
    background: radial-gradient(circle at 50% 50%, #daeefb 0%, #e8f5fc 55%, rgba(232,245,252,0) 72%);
    border-radius: 50%; z-index: 0; pointer-events: none;
}

.cds-zx .zx-shot-img {
    position: relative; z-index: 2;
    display: block; width: 100%; height: auto;
    filter: drop-shadow(0 18px 34px rgba(16,58,84,.16));
}

/* floating white cards */
.cds-zx .zx-float {
    position: absolute; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    width: 84px; height: 84px; border-radius: 22px;
    background: #fff; box-shadow: 0 10px 28px rgba(16,58,84,.15);
}
.cds-zx .zx-float svg { width: 40px; height: 40px; }
.cds-zx .zx-float-mail   { top: 4%;  left: -2%; }
.cds-zx .zx-float-shield { bottom: 6%; right: -1%; }

/* accent dots */
.cds-zx .zx-dot {
    position: absolute; z-index: 3; width: 11px; height: 11px;
    border-radius: 50%; background: #1d6ff2;
}
.cds-zx .zx-dot-1 { top: 8%;  left: 26%; }
.cds-zx .zx-dot-2 { top: 26%; left: 2%;  width: 9px; height: 9px; }
.cds-zx .zx-dot-3 { top: 20%; right: 4%; width: 9px; height: 9px; }
.cds-zx .zx-dot-4 { bottom: 22%; left: 6%; }

@media (max-width: 991px) {
    .cds-zx .zx-shot { padding: 5% 7%; max-width: 620px; margin: 0 auto; }
    .cds-zx .zx-float { width: 68px; height: 68px; border-radius: 18px; }
    .cds-zx .zx-float svg { width: 32px; height: 32px; }
}
@media (max-width: 575px) {
    .cds-zx .zx-shot { padding: 6% 4%; }
    .cds-zx .zx-float { width: 52px; height: 52px; border-radius: 14px; }
    .cds-zx .zx-float svg { width: 25px; height: 25px; }
    .cds-zx .zx-float-mail   { left: 0; }
    .cds-zx .zx-float-shield { right: 0; }
    .cds-zx .zx-dot { width: 8px; height: 8px; }
    .cds-zx .zx-dot-1, .cds-zx .zx-dot-4 { display: none; }
}

/* ---------------------------------------------------------------------
   2026-08-26c  Mobile layout fix — homepage stretched to 862px
   assets/layout/sections/plans.tpl:204 wraps the plan-comparison table in
   .table-responsive-lg, but that class is defined NOWHERE in the theme's
   CSS (only plain .table-responsive exists). With no overflow container the
   847px table forced the whole document to 862px wide on a 390px phone, so
   every page rendered zoomed out with unreadable text.
   This is Bootstrap's own definition of the class, restored.
   Not scoped to a body class on purpose — the bug is global.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .table-responsive-lg {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------------------------------------------------------------------
   2026-08-26d  Mobile menu polish (MOBILE ONLY - desktop untouched)
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    /* Hamburger: the theme draws #nav-toggle as ONE span plus its ::before
       and ::after (top:-10px / bottom:-10px). The markup emits THREE
       <span class="icon">, and `#nav-toggle span {position:absolute}` beats
       `.nav-menu .menu-toggle .icon {display:block;margin-bottom:3px}` on
       specificity (id vs class), so all three stacked at the same point and
       rendered as one thick slab. Keep the first span, drop the extras. */
    #nav-toggle .icon:nth-child(n+2) {
        display: none !important;
    }

    /* Tap targets: top-level items were 33px and submenu links 35px, both
       under the 44px minimum for touch. Padding rather than min-height so the
       centred text and the "NEW" badge keep their current layout. */
    .menu-wrap.mobile .main-menu > .menu-item > a {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    /* .dropdown-item ships `padding: 7px` from a higher-specificity rule,
       so the shorthand beat plain longhands here. */
    .menu-wrap.mobile .dropdown-menu a.dropdown-item {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
}

/* =====================================================================
   2026-09-28 (r34) — BLOCK A: Account Overview, fix the two list panels
   Scope: ONLY "Your Active Products/Services" and "Recent Support Tickets".
   Layout/grid untouched (still 3-across >=992px).

   Bug: the earlier rule `.list-group-item{display:flex}` turned each row
   into a horizontal flex row. WHMCS builds ticket rows as
   `#id - subject <label>Status</label><br><small>Last Updated: ...</small>`
   and under flex the <br> stops breaking, so the date became a second
   column that ran past the card edge and was clipped by overflow:hidden.
   Fix = put these two panels' rows back to block flow and let text wrap.
   Revert = delete this block.
   ===================================================================== */

/* --- rows back to normal block flow, with wrapping --- */
.cds-ca .overview-services.bg-yellow .list-group-item[id^="ClientAreaHomePagePanels-Recent_Support_Tickets"],
.cds-ca .overview-services.bg-yellow .list-group-item[id^="ClientAreaHomePagePanels-Active_Products_Services"]{
  display:block!important;
  padding:10px 12px!important;
  line-height:1.45;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:normal;
}

/* --- Recent Support Tickets --- */
.cds-ca .overview-services.bg-yellow .list-group-item[id^="ClientAreaHomePagePanels-Recent_Support_Tickets"] .label{
  display:inline-block;vertical-align:middle;margin-left:6px;
  border-radius:999px;padding:2px 9px;font-size:10.5px;font-weight:700;line-height:1.6;}
.cds-ca .overview-services.bg-yellow .list-group-item[id^="ClientAreaHomePagePanels-Recent_Support_Tickets"] small{
  display:block;margin-top:4px;font-size:11px;color:var(--mut);line-height:1.4;}

/* --- Your Active Products/Services --- */
.cds-ca .overview-services.bg-yellow .div-service-item{display:block!important;min-width:0;}
.cds-ca .overview-services.bg-yellow .div-service-status{margin-bottom:6px!important;}
.cds-ca .overview-services.bg-yellow .div-service-status .label{
  border-radius:999px;padding:3px 10px;font-size:10.5px;font-weight:700;}
.cds-ca .overview-services.bg-yellow .div-service-name{
  margin-bottom:8px!important;font-size:13.5px!important;line-height:1.4;}
.cds-ca .overview-services.bg-yellow .div-service-name > span{
  display:block;overflow-wrap:anywhere;}
.cds-ca .overview-services.bg-yellow .div-service-name .text-domain{
  font-size:12px;color:var(--mut);font-weight:400;}
.cds-ca .overview-services.bg-yellow .div-service-buttons{margin:0!important;}
.cds-ca .overview-services.bg-yellow .div-service-buttons .btn{
  padding:5px 13px!important;font-size:12px!important;border-radius:9px!important;
  box-shadow:none!important;width:auto!important;}

/* =====================================================================
   2026-09-28 (r34) — BLOCK B: viewticket.php conversation
   The ticket page never got a styling pass (4 mentions of "ticket" in the
   whole override file), so it ran on raw antler values:
     .ticket-reply .message { padding:50px; line-height:34px; display:inline-block }
     .ticket-reply .user img { width:80px; height:80px }
   A six-word reply therefore rendered as a ~275x345px column of whitespace.
   Also fixes the empty-square stars: the theme asks for "Font Awesome 5 Pro",
   but only Font Awesome 5/6 FREE is loaded here, so \f005 never resolved.
   Revert = delete this block.
   ===================================================================== */

.cds-ca .ticket-reply{margin:14px 0!important;}
/* message bubble: readable width, sane padding, normal leading */
.cds-ca .ticket-reply .message{
  display:block!important;max-width:820px;
  padding:15px 18px!important;line-height:1.65!important;
  border-radius:12px!important;margin-top:9px!important;
  background:#f5f8fb!important;border:1px solid #e6ebf2!important;}
.cds-ca .ticket-reply.staff .message{background:#eef7fb!important;border-color:#d7eaf3!important;}
.cds-ca .ticket-reply .message p{margin:0 0 9px;}
.cds-ca .ticket-reply .message p:last-child{margin-bottom:0;}
/* header row: smaller avatar, tighter type */
.cds-ca .ticket-reply .user img{
  width:40px!important;height:40px!important;margin-right:12px!important;}
.cds-ca .ticket-reply .user .name{
  font-size:14.5px!important;font-weight:700!important;color:var(--ink)!important;
  padding:0 6px 0 0!important;}
.cds-ca .ticket-reply .user .date{
  font-size:12px!important;color:var(--mut)!important;padding:0 0 0 8px!important;}
/* the grey lowercase "staff" pill duplicates the coloured Operator/Owner pill */
.cds-ca .ticket-reply .user .type{display:none!important;}
.cds-ca .ticket-reply .user .label{
  border-radius:999px;padding:3px 10px;font-size:10.5px;font-weight:700;}
/* stars: use the font that is actually loaded */
.cds-ca .ticket-reply .rating span.star,
.cds-ca .ticket-reply .rating-done span.star{
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free"!important;font-weight:900!important;
  font-size:13px;}

/* ===== 2026-09-30 AI Agent store page features section (group 23) ===== */
.cds-ai{padding:60px 0 10px;}
.cds-ai .cds-ai-head{max-width:760px;margin:0 auto;}
.cds-ai .cds-ai-eyebrow{display:inline-block;padding:4px 14px;border-radius:30px;background:rgba(22,151,191,.1);color:#1697bf;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;}
.cds-ai .service-wrap .row{row-gap:0;}
.cds-ai .service-wrap .service-section{padding:32px 26px;margin-top:30px;height:calc(100% - 30px);}
.cds-ai .service-wrap .service-section .svg{width:56px;height:56px;margin-bottom:18px;}
.cds-ai .service-wrap .service-section .title{font-size:19px;margin-bottom:10px;}
.cds-ai .service-wrap .service-section .subtitle{font-size:15px;line-height:1.65;margin:0;}
@media (max-width:575px){.cds-ai{padding-top:40px;}.cds-ai .service-wrap .service-section{height:auto;}}

/* ====================================================================
   2026-10-03 ZYROXI AI store page (group 23, /store/ai-zyroxi)
   Hero + what's included + industries + proven + closing CTA.
   Markup: templates/orderforms/antler/cds-ai-hero.tpl, cds-ai-sections.tpl
   Art: templates/antler/assets/img/zyroxi-ai/*.webp (from zyroxi.com/en/ai)
   ==================================================================== */
.cds-ai-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;text-align:left;padding:40px 44px;margin:10px 0 0;border-radius:24px;background:transparent;border:1px solid rgba(15,23,42,.07);overflow:hidden;}
.cds-ai-hero .cds-ai-logo{width:220px;height:auto;margin-bottom:20px;}
.cds-ai-hero .cds-ai-logo-d{display:none;}
.cds-ai-hero h1{font-size:42px;line-height:1.14;font-weight:800;letter-spacing:-.5px;margin:0 0 14px;}
.cds-ai-hero-text>p{font-size:18px;line-height:1.6;margin:0;max-width:30em;}
.cds-ai-chips{list-style:none;padding:0;margin:24px 0 28px;display:flex;flex-wrap:wrap;gap:10px;}
.cds-ai-chips li{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600;}
.cds-ai-chips i{color:#1697bf;}
.cds-ai-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.cds-ai-cta .btn{padding:14px 30px!important;font-weight:700!important;}
.cds-ai-ghost{display:inline-flex;align-items:center;padding:12px 26px;border-radius:999px;font-weight:700;font-size:14px;color:#1697bf!important;border:2px solid #1697bf;text-decoration:none!important;transition:background .18s,color .18s;}
.cds-ai-ghost:hover{background:#1697bf;color:#fff!important;}

/* theme overrides: .header-lined h1 gets a rule underneath and header <p> is 11px */
#order-standard_cart .header-lined .cds-ai-hero h1{border-bottom:0;padding-bottom:0;}
#order-standard_cart .header-lined .cds-ai-hero-text>p{font-size:18px;line-height:1.6;}
/* theme .section-heading is inline-block, which pulled the eyebrow pill onto its line */
.cds-ai .cds-ai-eyebrow{display:table;margin:0 auto 12px;}
.cds-ai-proof-in .cds-ai-eyebrow{margin:0 0 12px;}
.cds-ai .section-heading{display:block;}

/* hero art: robot on its podium, channel/system icons drifting around it */
.cds-ai-hero-art{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:1/0.92;}
.cds-ai-hero-art img{position:absolute;height:auto;}
.cds-ai-podium{width:78%;left:11%;bottom:2%;}
.cds-ai-robot{width:58%;left:21%;bottom:15%;filter:drop-shadow(0 24px 36px rgba(225,29,46,.22));animation:cdsAiBob 5s ease-in-out infinite;}
.cds-ai-f{width:17%;filter:drop-shadow(0 14px 22px rgba(225,29,46,.18));animation:cdsAiDrift 6s ease-in-out infinite;}
.cds-ai-f1{left:2%;top:6%;}
.cds-ai-f2{left:0;top:42%;animation-delay:-1.5s;}
.cds-ai-f3{right:1%;top:4%;animation-delay:-3s;}
.cds-ai-f4{right:0;top:40%;animation-delay:-4.5s;}
.cds-ai-f5{left:10%;bottom:20%;width:13%;animation-delay:-2.2s;}
.cds-ai-f6{right:9%;bottom:21%;width:14%;animation-delay:-3.7s;}
@keyframes cdsAiBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes cdsAiDrift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.cds-ai-robot,.cds-ai-f{animation:none;}}

/* shared card */
.cds-ai .cds-ai-card{border-radius:18px;padding:28px 26px;border:1px solid rgba(15,23,42,.07);height:100%;}
.cds-ai .cds-ai-card h3{font-size:19px;font-weight:700;margin:0 0 10px;}
.cds-ai .cds-ai-card p{font-size:15px;line-height:1.65;margin:0;}

/* what's included */
.cds-ai-inc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:34px;}
.cds-ai .cds-ai-3d{width:88px;height:auto;margin-bottom:16px;filter:drop-shadow(0 10px 16px rgba(225,29,46,.16));}
.cds-ai-ticks{list-style:none;padding:0;margin:16px 0 0;}
.cds-ai-ticks li{font-size:14px;line-height:1.5;margin-top:8px;display:flex;gap:8px;align-items:baseline;}
.cds-ai-ticks i{color:#1697bf;font-size:13px;}
.cds-ai-note{text-align:center;font-size:14.5px;margin:26px auto 0;max-width:760px;}
.cds-ai-note i{color:#1697bf;margin-right:4px;}
.cds-ai-note a{color:#1697bf;font-weight:700;}

/* industries */
.cds-ai-ind-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:34px;}
.cds-ai-ind-top{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.cds-ai-ind-top h3{margin:0!important;}
.cds-ai-ico{flex:0 0 46px;width:46px;height:46px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;background:rgba(225,29,46,.09);color:#e11d2e;font-size:19px;}
.cds-ai-quotes{list-style:none;padding:0;margin:14px 0;display:flex;flex-wrap:wrap;gap:8px;}
.cds-ai-quotes li{font-size:13.5px;font-style:italic;padding:7px 13px;border-radius:14px 14px 14px 4px;background:rgba(22,151,191,.08);}
.cds-ai .cds-ai-conn{font-size:13.5px;}

/* proven */
.cds-ai-proof-in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:40px;align-items:center;border-radius:24px;padding:40px 44px;border:1px solid rgba(15,23,42,.07);}
.cds-ai-proof-art{text-align:center;}
.cds-ai-proof-art img{width:100%;max-width:300px;height:auto;filter:drop-shadow(0 22px 30px rgba(225,29,46,.2));}
.cds-ai-proof-in .section-heading{text-align:left;margin-bottom:14px;}
.cds-ai-proof-in p{font-size:15.5px;line-height:1.65;margin:0 0 10px;}
.cds-ai-live{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;}
.cds-ai-live li{display:flex;gap:10px;align-items:flex-start;}
.cds-ai-live strong{display:block;font-size:14.5px;}
.cds-ai-live span span{display:block;font-size:13px;line-height:1.5;}
.cds-ai-dot{flex:0 0 auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#15803d;background:rgba(21,128,61,.1);border-radius:999px;padding:3px 9px;margin-top:2px;}

/* closing CTA */
.cds-ai-end{padding-bottom:40px;}
.cds-ai-end-in{text-align:center;border-radius:24px;padding:48px 30px;background:linear-gradient(135deg,#0f6f8f 0%,#1697bf 60%,#2bb3dc 100%);}
.cds-ai-end-in h2{color:#fff!important;font-size:32px;font-weight:800;margin:0 0 10px;}
.cds-ai-end-in p{color:rgba(255,255,255,.9);font-size:17px;margin:0 0 24px;}
.cds-ai-end-in .cds-ai-cta{justify-content:center;}
.cds-ai-ghost-w{color:#fff!important;border-color:#fff;}
.cds-ai-ghost-w:hover{background:#fff;color:#1697bf!important;}

/* dark theme (antler sets [data-background=dark]) */
[data-background=dark] .cds-ai-hero{border-color:rgba(255,255,255,.08);}
[data-background=dark] .cds-ai-hero .cds-ai-logo-l{display:none;}
[data-background=dark] .cds-ai-hero .cds-ai-logo-d{display:inline-block;}
[data-background=dark] .cds-ai-chips li{background:#15212a;border-color:rgba(255,255,255,.1);}
[data-background=dark] .cds-ai .cds-ai-card,[data-background=dark] .cds-ai-proof-in{border-color:rgba(255,255,255,.08);}
[data-background=dark] .cds-ai-quotes li{background:rgba(22,151,191,.16);}

@media (max-width:1199px){.cds-ai-inc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:991px){
  .cds-ai-hero{grid-template-columns:1fr;padding:32px 26px;gap:16px;text-align:center;}
  .cds-ai-hero-art{order:-1;max-width:400px;}
  .cds-ai-hero-text>p{margin:0 auto;}
  .cds-ai-chips,.cds-ai-cta{justify-content:center;}
  .cds-ai-ind-grid{grid-template-columns:1fr;}
  .cds-ai-proof-in{grid-template-columns:1fr;padding:32px 24px;gap:20px;}
  .cds-ai-proof-art img{max-width:200px;}
}
@media (max-width:575px){
  .cds-ai-hero{padding:24px 16px;border-radius:18px;}
  .cds-ai-hero h1{font-size:30px;}
  #order-standard_cart .header-lined .cds-ai-hero-text>p{font-size:16px;}
  .cds-ai-inc-grid,.cds-ai-live{grid-template-columns:1fr;}
  .cds-ai-end-in{padding:36px 18px;}
  .cds-ai-end-in h2{font-size:26px;}
}