/*
 * AstronautCloud WHMCS theme (child of Twenty-One).
 * Light design system that matches astronautcloud.com. Tokens are copied from the website's main.scss.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --bg-base: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-2: #F1F5F9;
  --blue: #2966F3;
  --blue-mid: #1E40AF;
  --blue-light: #3B82F6;
  --blue-deep: #1E3A8A;
  --indigo: #6366F1;
  --green: #22C55E;
  --t1: #0F172A;
  --t2: #1E293B;
  --t3: #334155;
  --t4: #475569;
  --t5: #64748B;
  --border: rgba(0, 0, 0, 0.08);
  --border-hi: rgba(0, 0, 0, 0.12);
  --border-blue: color-mix(in srgb, var(--blue) 40%, transparent);
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --s-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --s-blue: 0 4px 14px 0 color-mix(in srgb, var(--blue) 30%, transparent);
  --s-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --header-h: 68px;

  /* Bootstrap hooks */
  --primary: var(--blue);
  --success: var(--green);
  --body-bg: var(--bg-base);
  --body-color: var(--t3);
}

/* ───────── Base ───────── */
body {
  background-color: var(--bg-base) !important;
  color: var(--t3);
  font-family: var(--font);
  line-height: 1.65;
  padding-top: var(--header-h);
  -webkit-font-smoothing: antialiased;
}
section { background-color: transparent !important; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--t1);
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.bg-light, .bg-white, #home-banner { background-color: transparent !important; }
.text-dark, .text-body { color: var(--t2) !important; }
.text-muted { color: var(--t5) !important; }
.text-white { color: var(--t1) !important; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-mid); text-decoration: none; }

#main-body { padding: 36px 0 56px; min-height: 50vh; }

/* ───────── Header (matches the website's fixed white bar) ───────── */
#header, .ac-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.95) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.nav-header { height: var(--header-h); display: flex; align-items: center; padding: 0; }
.nav-container { display: flex; align-items: center; width: 100%; max-width: 1200px; padding-left: 24px; padding-right: 24px; }
.nav-logo { display: flex; align-items: center; margin-right: 20px; padding: 0; }
.nav-logo img { height: 40px; width: auto; display: block; }

.ac-site-links { gap: 4px; align-items: center; }
.ac-site-links .nav-link,
.ac-account-nav > li > a,
.ac-account-nav .nav-item > a {
  color: var(--t2) !important;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 8px 14px !important;
  border-radius: var(--r-sm);
  transition: color 0.2s, background 0.2s;
}
.ac-site-links .nav-link:hover,
.ac-account-nav > li > a:hover,
.ac-account-nav .nav-item > a:hover {
  color: var(--blue) !important;
  background: color-mix(in srgb, var(--blue) 7%, transparent);
}
.ac-account-nav { align-items: center; margin: 0; padding: 0; list-style: none; }
.ac-account-nav > li { list-style: none; }
.ac-account-nav .badge { margin-left: 4px; }
.navbar-toggler { border: 1px solid var(--border-hi); border-radius: var(--r-sm); padding: 6px 10px; }
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%230F172A' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdowns */
.dropdown-menu {
  background: #fff !important;
  border: 1px solid var(--border-hi) !important;
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.18);
  padding: 8px;
  z-index: 1060;
}
.dropdown-menu .dropdown-item, .dropdown-menu > li > a {
  color: var(--t2) !important;
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: 0.9rem;
}
.dropdown-menu .dropdown-item:hover, .dropdown-menu > li > a:hover, .dropdown-item.active {
  background: color-mix(in srgb, var(--blue) 8%, transparent) !important;
  color: var(--blue) !important;
}
.dropdown-divider { border-top-color: var(--border); }

/* Client-area sub navigation (Services, Billing, Support...) */
.ac-subnav { background: #fff !important; border-bottom: 1px solid var(--border); }
.ac-subnav .navbar { padding: 0; }
.ac-subnav-list { flex-wrap: wrap; gap: 2px; align-items: center; margin: 0; padding: 0; list-style: none; }
.ac-subnav-list > li { list-style: none; }
.ac-subnav-list > li > a, .ac-subnav-list .nav-item > a {
  display: block;
  color: var(--t4) !important;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 11px 14px !important;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.ac-subnav-list > li > a:hover, .ac-subnav-list .nav-item > a:hover,
.ac-subnav-list > li.active > a, .ac-subnav-list .nav-item.active > a {
  color: var(--blue) !important;
  border-bottom-color: var(--blue);
  background: transparent !important;
}
.ac-subnav:empty, .ac-subnav-list:empty { display: none; }
.ac-subnav .collapsable-dropdown { display: none !important; }
/* Open Ticket highlighted as a brand pill */
.ac-subnav-list > li.ac-nav-cta { margin-left: auto; }
.ac-subnav-list > li.ac-nav-cta > a {
  background: var(--blue) !important;
  color: #fff !important;
  border-radius: 999px;
  border-bottom-color: transparent !important;
  padding: 7px 18px !important;
  margin: 6px 0;
  box-shadow: var(--s-blue);
}
.ac-subnav-list > li.ac-nav-cta > a:hover { background: var(--blue-mid) !important; color: #fff !important; }
@media (max-width: 575px) { .ac-subnav-list > li.ac-nav-cta { margin-left: 0; } }

/* ───────── Cards / panels ───────── */
.card, .panel {
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-lg);
  box-shadow: var(--s-card);
  margin-bottom: 20px;
}
.clean-card, .bento-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.clean-card:hover, .bento-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-blue);
  box-shadow: var(--s-hover);
}
.card-header, .panel-heading {
  background-color: transparent;
  border-bottom: 1px solid var(--border);
  color: var(--t1);
  font-weight: 600;
  padding: 1.1rem 1.25rem;
}
.card-footer, .panel-footer { background-color: var(--bg-card-2); border-top: 1px solid var(--border); }
.bento-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ───────── Buttons ───────── */
.btn { border-radius: var(--r-md); font-weight: 600; transition: all 0.2s ease; }
.btn-primary, .btn-checkout {
  background: var(--blue) !important;
  border: 1px solid var(--blue) !important;
  color: #fff !important;
  box-shadow: var(--s-blue);
}
.btn-primary:hover, .btn-primary:focus, .btn-checkout:hover {
  background: var(--blue-mid) !important;
  border-color: var(--blue-mid) !important;
  transform: translateY(-1px);
}
.btn-default, .btn-secondary, .btn-outline-secondary {
  background: #fff;
  border: 1px solid var(--border-hi);
  color: var(--t2);
}
.btn-default:hover, .btn-secondary:hover, .btn-outline-secondary:hover {
  background: color-mix(in srgb, var(--blue) 6%, transparent);
  border-color: var(--border-blue);
  color: var(--blue);
}
.btn-success { background: var(--green); border-color: var(--green); color: #fff; }

/* ───────── Forms ───────── */
.form-control, .custom-select, textarea, textarea.form-control,
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {
  background-color: #fff !important;
  border: 1px solid var(--border-hi) !important;
  color: var(--t1) !important;
  border-radius: var(--r-sm) !important;
}
.form-control::placeholder, textarea::placeholder { color: #94A3B8; }
.form-control:focus, .custom-select:focus, textarea:focus,
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus {
  background-color: #fff !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 12%, transparent) !important;
  color: var(--t1) !important;
}
label { color: var(--t2); font-weight: 600; }
.select2-container--default .select2-selection--single {
  background-color: #fff !important;
  border: 1px solid var(--border-hi) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--t1) !important; }
.input-group-text {
  background-color: var(--bg-card-2) !important;
  border: 1px solid var(--border-hi) !important;
  color: var(--t3) !important;
}

/* ───────── Cart & domain selection ───────── */
/* (Domain step, Configure and Review pages have their own redesigned blocks further down.) */
.checkout-boxes,
.domain-promo-box,
.cart-box {
  background: #fff !important;
  border: 1px solid var(--border-hi) !important;
  color: var(--t2) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--s-card);
}

/* ───────── Alerts ───────── */
.alert { border-radius: var(--r-md); border-width: 1px; }
.alert-warning, #order-standard_cart .alert-warning { background-color: #FEF3C7 !important; border-color: #FCD34D !important; color: #92400E !important; }
.alert-info, #order-standard_cart .alert-info { background-color: color-mix(in srgb, var(--blue) 8%, transparent) !important; border-color: color-mix(in srgb, var(--blue) 25%, transparent) !important; color: var(--blue-mid) !important; }
.alert-success, #order-standard_cart .alert-success { background-color: #DCFCE7 !important; border-color: #86EFAC !important; color: #166534 !important; }
.alert-danger, #order-standard_cart .alert-danger { background-color: #FEE2E2 !important; border-color: #FCA5A5 !important; color: #991B1B !important; }

/* Checkout headings */
#order-standard_cart .sub-heading span, .sub-heading span, fieldset legend {
  background: #fff !important;
  color: var(--t1) !important;
  border: 1px solid var(--border-hi);
  padding: 5px 20px !important;
  border-radius: 20px;
  width: auto;
}
#order-standard_cart .sub-heading, .sub-heading {
  border-top: 1px solid var(--border-hi) !important;
  margin-top: 35px;
  margin-bottom: 25px;
}

/* Domain addon panels */
.panel-addon {
  background: #fff !important;
  border: 1px solid var(--border-hi) !important;
  border-radius: var(--r-md) !important;
  margin-bottom: 20px;
  display: flex !important;
  flex-direction: column;
  height: 100%;
}
.panel-addon .panel-heading { background: transparent !important; color: var(--t1) !important; border-bottom: none !important; padding: 20px 15px 5px !important; }
.panel-addon label { color: var(--t1) !important; font-weight: 600 !important; }
.panel-addon .panel-body { color: var(--t3) !important; padding: 10px 15px 20px !important; flex-grow: 1; }
.panel-addon .panel-price { background: var(--bg-card-2) !important; color: var(--t1) !important; border-top: 1px solid var(--border) !important; padding: 12px !important; }
.panel-addon .btn-success, .panel-addon .btn, .panel-addon .btn-add-to-cart {
  background: color-mix(in srgb, var(--blue) 8%, transparent) !important;
  border: none !important;
  border-top: 1px solid color-mix(in srgb, var(--blue) 20%, transparent) !important;
  color: var(--blue) !important;
  border-radius: 0 0 var(--r-md) var(--r-md) !important;
  width: 100%;
  padding: 12px !important;
  font-weight: 600;
  box-shadow: none;
}
.panel-addon .btn-success:hover, .panel-addon .btn:hover { background: var(--blue) !important; color: #fff !important; }
input[name^="eppcode"] { width: 100% !important; max-width: 400px; padding: 10px !important; }

/* Toggle switches */
.toggle.btn { background: #fff !important; border: 1px solid var(--border-hi) !important; min-width: 80px; }
.toggle-on.btn { background: var(--blue) !important; color: #fff !important; }
.toggle-off.btn { background: var(--bg-card-2) !important; color: var(--t3) !important; }
.toggle-handle.btn { background: #fff !important; }
/* (Yes/No + ON/OFF switches: see "Segmented switch" block at the end of this file) */

/* ───────── Sidebar, lists, tables ───────── */
.panel-sidebar { background: #fff; border: 1px solid var(--border-hi); border-radius: var(--r-lg); overflow: hidden; }
.panel-sidebar .panel-heading { background: var(--bg-card-2); color: var(--t2); border-bottom: 1px solid var(--border); }
.list-group-item { background-color: transparent; border-color: var(--border); color: var(--t3); }
.list-group-item-action:hover, .list-group-item:hover { background-color: color-mix(in srgb, var(--blue) 5%, transparent); color: var(--blue); }
.list-group-item.active { background-color: color-mix(in srgb, var(--blue) 10%, transparent); border-color: color-mix(in srgb, var(--blue) 25%, transparent); color: var(--blue); }

.table { color: var(--t3); }
.table thead th { border-bottom: 1px solid var(--border-hi); color: var(--t2); background: var(--bg-card-2); }
.table td, .table th { border-top: 1px solid var(--border); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(15, 23, 42, 0.02); }
.table-hover tbody tr:hover { background-color: color-mix(in srgb, var(--blue) 5%, transparent); color: var(--t1); }

/* Labels & badges */
.label, .badge { border-radius: var(--r-xs); padding: 4px 8px; font-weight: 600; }
.label-success, .badge-success { background-color: #DCFCE7; color: #166534 !important; border: 1px solid #86EFAC; }
.label-primary, .badge-primary { background-color: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue-mid) !important; border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent); }
.label-warning, .badge-warning { background-color: #FEF3C7; color: #92400E !important; border: 1px solid #FCD34D; }
.label-danger, .badge-danger { background-color: #FEE2E2; color: #991B1B !important; border: 1px solid #FCA5A5; }

/* ───────── Portal home hero ───────── */
.ac-hero { position: relative; padding: 70px 0 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 7%, transparent), transparent); }
.hero-content { max-width: 880px; margin: 0 auto; padding: 0 20px; }
.hero-announce {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 0 auto 22px;
  padding: 6px 16px;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  border: 1px solid var(--border-blue);
  border-radius: 100px;
  color: var(--t2);
  font-size: 0.85rem;
  font-weight: 500;
}
.announce-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); animation: acPulse 1.8s ease-out infinite; }
@keyframes acPulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); } 100% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); } }
.hero-title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.hero-title-shine {
  background: linear-gradient(115deg, var(--blue) 0%, var(--blue-light) 45%, var(--indigo) 75%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-subtitle { max-width: 560px; font-size: 1.08rem; color: var(--t4); }

/* ───────── Footer (matches the website footer) ───────── */
#footer, .ac-ft {
  background: #fff !important;
  border-top: 1px solid var(--border) !important;
  padding: 56px 0 32px;
  margin-top: 0;
  color: var(--t3);
}
.ac-ft-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 44px; margin-bottom: 44px; border-bottom: 1px solid var(--border); }
.ac-ft-hl { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--blue) 45%, transparent); border-radius: 14px; }
.ac-ft-hl-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.ac-ft-hl strong { display: block; font-size: 0.92rem; color: var(--t1); line-height: 1.3; }
.ac-ft-hl div > span { font-size: 0.8rem; color: var(--t4); }

.ac-ft-main { display: grid; grid-template-columns: 280px 1fr; gap: 56px; }
.ac-ft-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ac-ft-logo img { height: 42px; width: auto; display: block; }
.ac-ft-tagline { font-size: 0.9rem; color: var(--t4); line-height: 1.65; max-width: 260px; margin: 0; }
.ac-ft-contact, .ac-ft-col ul { list-style: none; margin: 0; padding: 0; }
.ac-ft-contact { display: flex; flex-direction: column; gap: 9px; }
.ac-ft-contact li { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; }
.ac-ft-contact i { color: var(--blue); width: 16px; text-align: center; }
.ac-ft-contact a { color: var(--t2); font-weight: 600; }
.ac-ft-contact a:hover, .ac-ft-col a:hover { color: var(--blue); }
.ac-ft-social { display: flex; gap: 8px; }
.ac-ft-social a {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 45%, transparent);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.ac-ft-social a:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-2px); }

.ac-ft-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.ac-ft-col h3 { font-size: 0.72rem; font-weight: 800; color: var(--t1); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 14px; }
.ac-ft-col h3.ac-ft-gap { margin-top: 30px; }
.ac-ft-col ul { display: flex; flex-direction: column; gap: 10px; }
.ac-ft-col a { font-size: 0.875rem; color: var(--t4); }
.ac-ft-client-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 10px 20px;
  background: var(--blue);
  color: #fff !important;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 100px;
  box-shadow: var(--s-blue);
  transition: background 0.2s, transform 0.2s;
}
.ac-ft-client-btn:hover { background: var(--blue-mid); transform: translateY(-1px); color: #fff !important; }

.ac-ft-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); }
.ac-ft-pay { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ac-ft-pay-label { margin: 0; font-size: 0.82rem; color: var(--t4); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ac-ft-paddle { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--t1); }
.ac-ft-pay-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ac-ft-chip { display: flex; align-items: center; justify-content: center; width: 52px; height: 34px; border: 1px solid color-mix(in srgb, var(--blue) 45%, transparent); border-radius: 8px; background: #fff; }
.ac-ico {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: var(--c);
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.ac-ft-paddle .ac-ico { width: 16px; height: 16px; }
.ac-ft-legal { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 20px; }
.ac-ft-legal a { color: var(--t2); font-weight: 600; font-size: 0.9rem; }
.ac-ft-legal a:hover { color: var(--blue); }
.ac-ft-legal span { color: rgba(0, 0, 0, 0.18); }

.ac-ft-entity { max-width: 900px; margin: 24px auto 0; padding: 22px 24px; border: 1px solid color-mix(in srgb, var(--blue) 45%, transparent); border-radius: 16px; text-align: center; font-size: 0.8rem; line-height: 1.7; color: var(--t3); }
.ac-ft-entity p { margin: 0 0 10px; }
.ac-ft-entity p:last-child { margin-bottom: 0; }
.ac-ft-entity-title { color: var(--t1); font-weight: 700; font-size: 0.86rem; }
.ac-ft-copy { margin-top: 22px; text-align: center; font-size: 0.85rem; color: var(--t4); }
.ac-ft-copy a { color: var(--blue); font-weight: 600; }

/* ───────── Responsive ───────── */
@media (max-width: 1100px) {
  .ac-ft-main { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ac-ft-tagline { max-width: 420px; }
}
@media (max-width: 991px) {
  .navbar-collapse {
    background: #fff;
    margin: 0 -24px;
    padding: 12px 24px 18px;
    border-top: 1px solid var(--border);
    box-shadow: 0 16px 30px -12px rgba(15, 23, 42, 0.14);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .ac-site-links { align-items: stretch; }
  .ac-account-nav { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); flex-direction: column; align-items: stretch; }
}
@media (max-width: 900px) {
  .ac-ft-highlights { grid-template-columns: minmax(0, 1fr); }
  .ac-ft-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}
@media (max-width: 575px) {
  .nav-container { padding-left: 16px; padding-right: 16px; }
  .ac-hero { padding-top: 44px; }
  .ac-ft { padding-top: 40px; }
  .ac-ft-nav { grid-template-columns: minmax(0, 1fr); }
  .ac-ft-legal { gap: 10px 20px; justify-content: flex-start; }
  .ac-ft-legal span { display: none; }
  .ac-ft-pay-list { gap: 6px; }
  .ac-ft-chip { width: 46px; height: 32px; }
  .ac-ico { width: 20px; height: 20px; }
  .ac-ft-entity { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .announce-dot { animation: none; }
  .clean-card, .bento-card, .btn { transition: none; }
}

/* ═════════ Client area dashboard (clientareahome.tpl) ═════════ */
:root {
  --violet: #7C3AED;
  --amber: #F59E0B;
  --emerald: #10B981;
}

/* Welcome banner */
.ac-welcome {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 28px 32px;
  margin-bottom: 24px;
  border-radius: var(--r-xl);
  color: #fff;
  background: linear-gradient(120deg, var(--blue-mid) 0%, var(--blue) 55%, var(--indigo) 100%);
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--blue) 55%, transparent);
}
.ac-welcome::before, .ac-welcome::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, 0.09);
}
.ac-welcome::before { width: 260px; height: 260px; right: -60px; top: -110px; }
.ac-welcome::after { width: 160px; height: 160px; right: 160px; bottom: -90px; }
.ac-welcome > * { position: relative; z-index: 1; }
.ac-welcome-eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); margin-bottom: 10px;
}
.ac-welcome h1 { color: #fff; font-size: 1.75rem; margin: 0 0 4px; }
.ac-welcome p { color: rgba(255, 255, 255, 0.85); margin: 0; font-size: 0.95rem; }
.ac-welcome-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ac-welcome-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px;
  font-weight: 600; font-size: 0.9rem; transition: transform 0.2s, background 0.2s;
}
.ac-welcome-btn:hover { transform: translateY(-2px); text-decoration: none; }
.ac-welcome-btn-solid { background: #fff; color: var(--blue) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }
.ac-welcome-btn-ghost { background: rgba(255, 255, 255, 0.16); color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.4); }
.ac-welcome-btn-ghost:hover { background: rgba(255, 255, 255, 0.28); }

/* Stat tiles */
.ac-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.ac-stat {
  position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 20px 20px 16px;
  border-radius: var(--r-lg); color: #fff !important; text-decoration: none !important;
  box-shadow: 0 10px 22px -8px var(--stat-shadow);
  background: linear-gradient(135deg, var(--stat-a), var(--stat-b));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ac-stat:hover { transform: translateY(-4px); box-shadow: 0 16px 28px -8px var(--stat-shadow); }
.ac-stat::after {
  content: ""; position: absolute; width: 120px; height: 120px; right: -30px; top: -40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.ac-stat-blue { --stat-a: var(--blue); --stat-b: var(--blue-mid); --stat-shadow: color-mix(in srgb, var(--blue) 55%, transparent); }
.ac-stat-violet { --stat-a: #8B5CF6; --stat-b: #6D28D9; --stat-shadow: rgba(124, 58, 237, 0.5); }
.ac-stat-amber { --stat-a: #F59E0B; --stat-b: #C2570C; --stat-shadow: rgba(245, 158, 11, 0.5); }
.ac-stat-green { --stat-a: #10B981; --stat-b: #047857; --stat-shadow: rgba(16, 185, 129, 0.5); }
.ac-stat-red { --stat-a: #EF4444; --stat-b: #B91C1C; --stat-shadow: rgba(239, 68, 68, 0.55); }
.ac-stat-icon {
  position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; background: rgba(255, 255, 255, 0.2); font-size: 1rem; margin-bottom: 14px;
}
.ac-stat-num { position: relative; z-index: 1; font-size: 2.2rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.ac-stat-label { position: relative; z-index: 1; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.9; margin: 6px 0 14px; }
.ac-stat-link { position: relative; z-index: 1; margin-top: auto; font-size: 0.82rem; font-weight: 600; opacity: 0.95; }
.ac-stat-link i { font-size: 0.7rem; margin-left: 4px; transition: transform 0.2s; }
.ac-stat:hover .ac-stat-link i { transform: translateX(4px); }

/* Content panels */
.ac-panel { overflow: hidden; }
.ac-panel:hover { transform: none; box-shadow: var(--s-card); border-color: var(--border-hi); }
.ac-panel-head { padding: 14px 20px; background: linear-gradient(180deg, #F5F8FF, #FFFFFF); border-bottom: 1px solid var(--border); }
.ac-panel-head h4 { display: flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: 700; }
.ac-panel-ico {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--indigo)); color: #fff; font-size: 0.85rem; box-shadow: 0 4px 10px color-mix(in srgb, var(--blue) 35%, transparent);
}
.ac-panel-body > p, .ac-panel-body > div:not(.table-responsive):not(.list-group) { margin: 0; padding: 18px 20px; font-size: 0.92rem; }
.ac-panel-body a:not(.btn) { color: var(--blue); font-weight: 600; }
.ac-panel-foot { padding: 12px 20px; }

/* Quick actions */
.ac-quick a {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: var(--t2) !important; font-weight: 600; font-size: 0.9rem;
  border-top: 1px solid var(--border); text-decoration: none !important; transition: background 0.2s;
}
.ac-quick a:first-child { border-top: 0; }
.ac-quick a:hover { background: #F5F8FF; }
.ac-quick-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; flex: 0 0 34px; }
.ac-qi-blue { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); }
.ac-qi-violet { background: rgba(124, 58, 237, 0.12); color: #7C3AED; }
.ac-qi-amber { background: rgba(245, 158, 11, 0.16); color: #D97706; }
.ac-qi-green { background: rgba(16, 185, 129, 0.14); color: #059669; }
.ac-quick-go { margin-left: auto; font-size: 0.7rem; color: var(--t5); transition: transform 0.2s; }
.ac-quick a:hover .ac-quick-go { transform: translateX(3px); color: var(--blue); }

/* Help card */
.ac-help {
  position: relative; overflow: hidden; padding: 24px; margin-bottom: 24px; border-radius: var(--r-lg); color: #fff;
  background: linear-gradient(135deg, #0F172A 0%, var(--blue-deep) 100%); box-shadow: 0 12px 26px -10px rgba(15, 23, 42, 0.6);
}
.ac-help::after { content: ""; position: absolute; width: 140px; height: 140px; right: -40px; bottom: -50px; border-radius: 50%; background: color-mix(in srgb, var(--blue) 35%, transparent); }
.ac-help-ico { display: inline-flex; width: 42px; height: 42px; border-radius: 12px; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.14); margin-bottom: 12px; }
.ac-help h5 { color: #fff; font-size: 1.1rem; margin-bottom: 4px; }
.ac-help p { color: rgba(255, 255, 255, 0.78); font-size: 0.88rem; margin-bottom: 14px; position: relative; z-index: 1; }
.ac-help-btn {
  position: relative; z-index: 1; display: inline-block; padding: 8px 18px; border-radius: 999px; background: #fff; color: var(--blue-deep) !important;
  font-weight: 700; font-size: 0.85rem; text-decoration: none !important; transition: transform 0.2s;
}
.ac-help-btn:hover { transform: translateY(-2px); }

/* Sidebar cards (Your Info / Contacts / Shortcuts) */
.card-sidebar, .panel-sidebar { overflow: hidden; }
.card-sidebar > .card-header, .panel-sidebar > .card-header {
  padding: 13px 18px; background: linear-gradient(180deg, #F5F8FF, #FFFFFF); border-bottom: 1px solid var(--border);
}
.card-sidebar .card-title, .panel-sidebar .card-title {
  display: flex; align-items: center; gap: 10px; margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--t1);
}
.card-sidebar .card-title > i:first-child, .panel-sidebar .card-title > i:first-child {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--indigo)); color: #fff; font-size: 0.78rem;
}
.card-sidebar .card-minimise, .panel-sidebar .card-minimise { margin-left: auto; font-size: 0.75rem; color: var(--t5); }
.card-sidebar .card-body, .panel-sidebar .card-body { font-size: 0.9rem; color: var(--t3); }
.card-sidebar .list-group-item, .panel-sidebar .list-group-item { font-size: 0.9rem; padding: 10px 18px; }
.card-sidebar .list-group-item i, .panel-sidebar .list-group-item i { color: var(--blue); width: 18px; text-align: center; margin-right: 6px; }
.card-sidebar .card-footer, .panel-sidebar .card-footer { padding: 12px 16px; }
.card-sidebar .btn-success, .panel-sidebar .btn-success {
  background: linear-gradient(135deg, #10B981, #059669) !important; border: 0 !important; color: #fff !important;
  box-shadow: 0 6px 14px -4px rgba(16, 185, 129, 0.55);
}

@media (max-width: 991px) { .ac-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) {
  .ac-welcome { padding: 22px 20px; }
  .ac-welcome h1 { font-size: 1.4rem; }
  .ac-welcome-actions { width: 100%; }
  .ac-welcome-btn { flex: 1 1 auto; justify-content: center; }
  .ac-stat { padding: 16px; }
  .ac-stat-num { font-size: 1.8rem; }
}

/* ═════════ Logged-in navigation: left rail (large screens) / top bar (small) ═════════ */
:root { --rail-w: 128px; --fly-w: 280px; }

/* Shared: submenus open via .open (set by the footer script) */
.ac-subnav-list > li { position: relative; }
.ac-subnav-list > li.ac-has-sub.open > .dropdown-menu { display: block; }
.ac-rail-ico, .ac-fly-title { display: none; }
.ac-subnav-list > li > a { display: flex; align-items: center; }
.ac-subnav-list > li.ac-has-sub > a::after {
  content: ""; border: solid currentColor; border-width: 0 2px 2px 0; padding: 2.5px; transform: rotate(45deg);
  margin: -3px 0 0 8px; opacity: 0.7;
}
.ac-rail-badge { margin-left: 6px; background: var(--blue); color: #fff; }

/* Top-bar mode (below 992px): flyout is a normal dropdown under the item */
@media (max-width: 991.98px) {
  .ac-subnav-list > li.ac-has-sub > .dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 220px; margin: 0; }
}

/* Rail mode (992px and up, logged in) */
@media (min-width: 992px) {
  body.ac-has-rail { padding-left: var(--rail-w); }

  .ac-has-rail .ac-subnav {
    position: fixed; top: var(--header-h); left: 0; bottom: 0; width: var(--rail-w); z-index: 1040;
    background: #fff !important; border-bottom: 0; border-right: 1px solid var(--border);
    overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none;
  }
  .ac-has-rail .ac-subnav::-webkit-scrollbar { display: none; }
  .ac-has-rail .ac-subnav .navbar { display: block; padding: 0; height: 100%; }
  .ac-has-rail .ac-subnav .container { display: block; max-width: none; width: 100%; padding: 0; margin: 0; height: 100%; }
  .ac-has-rail .ac-subnav-list { width: 100%; }
  .ac-has-rail .ac-subnav-list {
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px;
    padding: 12px 0 16px; min-height: 100%;
  }
  .ac-has-rail .ac-subnav-list > li { position: static; margin: 0; padding: 0 10px; }

  .ac-has-rail .ac-subnav-list > li > a {
    flex-direction: column; justify-content: center; gap: 6px; text-align: center;
    padding: 12px 4px !important; border: 0 !important; border-radius: var(--r-md);
    font-size: 0.8rem; font-weight: 600; line-height: 1.2; color: var(--t4) !important; background: transparent !important;
    position: relative; transition: background 0.2s, color 0.2s;
  }
  .ac-has-rail .ac-subnav-list > li > a::after { display: none; }
  .ac-has-rail .ac-rail-ico {
    display: inline-flex; width: 52px; height: 52px; border-radius: 15px; align-items: center; justify-content: center;
    font-size: 1.2rem; color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, transparent); transition: background 0.2s, color 0.2s, transform 0.2s;
  }
  .ac-has-rail .ac-rail-badge { position: absolute; top: 8px; right: 14px; margin: 0; }

  .ac-has-rail .ac-subnav-list > li > a:hover,
  .ac-has-rail .ac-subnav-list > li.active > a,
  .ac-has-rail .ac-subnav-list > li.ac-has-sub.open > a { background: color-mix(in srgb, var(--blue) 7%, transparent) !important; color: var(--blue) !important; }
  .ac-has-rail .ac-subnav-list > li > a:hover .ac-rail-ico,
  .ac-has-rail .ac-subnav-list > li.active .ac-rail-ico,
  .ac-has-rail .ac-subnav-list > li.ac-has-sub.open .ac-rail-ico { background: var(--blue); color: #fff; transform: translateY(-1px); }
  .ac-has-rail .ac-subnav-list > li.active > a::before {
    content: ""; position: absolute; left: -10px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue);
  }

  /* Open Ticket: filled brand tile pinned to the bottom of the rail */
  .ac-has-rail .ac-subnav-list > li.ac-nav-cta { margin: auto 0 0; order: 99; }
  .ac-has-rail .ac-subnav-list > li.ac-nav-cta > a {
    background: linear-gradient(135deg, var(--blue), var(--blue-mid)) !important; color: #fff !important; border-radius: var(--r-lg);
    box-shadow: var(--s-blue); margin: 0; padding: 12px 4px !important;
  }
  .ac-has-rail .ac-subnav-list > li.ac-nav-cta .ac-rail-ico { background: rgba(255, 255, 255, 0.2); color: #fff; }
  .ac-has-rail .ac-subnav-list > li.ac-nav-cta > a:hover { background: linear-gradient(135deg, var(--blue-mid), var(--blue-deep)) !important; }

  /* Flyout panel beside the rail */
  .ac-has-rail .ac-subnav-list > li.ac-has-sub > .dropdown-menu {
    position: fixed; top: var(--header-h); bottom: 0; left: calc(var(--rail-w) - 1px); width: var(--fly-w); margin: 0;
    padding: 22px 14px; border: 0 !important; border-right: 1px solid var(--border) !important; border-radius: 0;
    box-shadow: 18px 0 40px -24px rgba(15, 23, 42, 0.25); overflow-y: auto; z-index: 1035;
    display: block; visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity 0.15s ease, visibility 0s linear 0.25s;
  }
  .ac-has-rail .ac-subnav-list > li.ac-has-sub.open > .dropdown-menu {
    visibility: visible; opacity: 1; pointer-events: auto; z-index: 1036; transition-delay: 0s;
  }
  .ac-has-rail .ac-subnav-list > li.ac-has-sub > .dropdown-menu .ac-fly-title {
    display: block; padding: 0 12px 14px; margin-bottom: 8px; font-size: 1.1rem; font-weight: 700; color: var(--t1);
    border-bottom: 1px solid var(--border);
  }
  .ac-has-rail .ac-flyout .dropdown-item { padding: 0; }
  .ac-has-rail .ac-flyout li.dropdown-item > a.dropdown-item { display: block; padding: 10px 12px !important; border-radius: var(--r-sm); font-weight: 500; }
}

/* Hover / keyboard opening on pointer devices; touch uses the click toggle */
@media (min-width: 992px) and (hover: hover) {
  .ac-has-rail .ac-subnav-list > li.ac-has-sub:hover > .dropdown-menu,
  .ac-has-rail .ac-subnav-list > li.ac-has-sub:has(> a:focus-visible) > .dropdown-menu {
    visibility: visible; opacity: 1; pointer-events: auto; z-index: 1036; transition-delay: 0s;
  }
  .ac-has-rail .ac-subnav-list > li.ac-has-sub:hover > a { background: color-mix(in srgb, var(--blue) 7%, transparent) !important; color: var(--blue) !important; }
  .ac-has-rail .ac-subnav-list > li.ac-has-sub:hover .ac-rail-ico { background: var(--blue); color: #fff; }
  /* a click-opened menu must not stack on top of a hovered one */
  .ac-has-rail .ac-subnav-list:hover > li.ac-has-sub.open:not(:hover) > .dropdown-menu { visibility: hidden; opacity: 0; pointer-events: none; z-index: 1035; }
}

/* Content area next to the rail: 4 tiles get cramped, use 2 columns until wide */
@media (min-width: 992px) and (max-width: 1199.98px) { .ac-has-rail .ac-stats { grid-template-columns: repeat(2, 1fr); } }

/* ═════════ Flat sidebar (homepage only) ═════════ */
.sidebar .card-sidebar, .sidebar .panel-sidebar, .card-sidebar, .panel-sidebar {
  background: transparent; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin-bottom: 8px; overflow: visible;
}
.card-sidebar > .card-header, .panel-sidebar > .card-header { background: transparent; border-bottom: 0; padding: 14px 4px 6px; }
.card-sidebar .card-title, .panel-sidebar .card-title { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t5); }
.card-sidebar .card-title > i:first-child, .panel-sidebar .card-title > i:first-child {
  width: auto; height: auto; flex: 0 0 auto; background: none; border-radius: 0; color: var(--blue); font-size: 0.9rem;
}
.card-sidebar .card-body, .panel-sidebar .card-body { padding: 4px 4px 8px; }
.card-sidebar .list-group, .panel-sidebar .list-group { border: 0; }
.card-sidebar .list-group-item, .panel-sidebar .list-group-item {
  border: 0 !important; border-radius: var(--r-sm) !important; padding: 8px 10px; background: transparent;
}
.card-sidebar .card-footer, .panel-sidebar .card-footer { background: transparent; border-top: 0; padding: 6px 4px 12px; }

/* ═════════ Home page: sit the sidebar close to the rail ═════════ */
@media (min-width: 992px) {
  .ac-has-rail.ac-home #main-body > .container {
    max-width: 1560px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px;
  }
}

/* ═════════ Order form pages (store, product addons, cart): no categories sidebar ═════════ */
body.ac-cart-no-side #order-standard_cart .cart-sidebar,
body.ac-cart-no-side #order-standard_cart .sidebar-collapsed { display: none !important; }
body.ac-cart-no-side #order-standard_cart .cart-body {
  float: none !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  margin-left: 0 !important; padding: 30px 15px !important;
}

/* ═════════ Header cart link (always visible, logged in or not) ═════════ */
.ac-account-nav li[menuitemname="Shopping Cart"] { display: none !important; } /* parent theme's own cart item */
.ac-cart-link { display: inline-flex !important; align-items: center; gap: 8px; }
.ac-cart-link .fa-shopping-cart { color: var(--blue); }
.ac-cart-badge { background: var(--blue); color: #fff; border-radius: 999px; min-width: 20px; padding: 3px 7px; font-size: 0.7rem; margin-left: 0 !important; }
@media (min-width: 992px) { .ac-cart-item { margin-right: 4px; } }

/* ═════════ Quick Actions + help card inside the flat left sidebar ═════════ */
.ac-side-section { margin: 4px 0 18px; }
.ac-side-title {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 4px 6px;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t5);
}
.ac-side-title i { color: var(--blue); font-size: 0.9rem; }
.sidebar .ac-quick a { border-top: 0; padding: 8px 6px; border-radius: var(--r-sm); font-size: 0.88rem; }
.sidebar .ac-quick-ico { width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px; font-size: 0.78rem; }
.sidebar .ac-help { border-radius: 0; box-shadow: none; padding: 20px; margin-bottom: 16px; }

/* ═════════ Order form: "Choose a Domain" step (cart.php?a=add&pid=…) ═════════ */
#order-standard_cart .cart-body { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#order-standard_cart .header-lined { border: 0 !important; margin: 0 0 22px !important; padding: 0 !important; text-align: left; }
#order-standard_cart .header-lined h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--t1); }
#order-standard_cart .cart-body:has(#frmProductDomain) .header-lined::after {
  content: "Pick how you want to set up your domain. Free DNS management and 24/7 support are included.";
  display: block; margin-top: 8px; font-size: 0.98rem; color: var(--t5); font-weight: 400;
}

/* Three option cards */
#frmProductDomain .domain-selection-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
#frmProductDomain .domain-selection-options .option { display: contents; }
#frmProductDomain .option > label {
  --oa: var(--blue); --ob: var(--blue-mid); --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
  grid-row: 1; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; padding: 24px 22px 22px;
  background: #fff; border: 1.5px solid var(--border-hi); border-radius: var(--r-lg); cursor: pointer; box-shadow: var(--s-card);
  font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: var(--t1);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
#frmProductDomain .option:nth-child(2) > label {
  --oa: #8B5CF6; --ob: #6D28D9; --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3 4 7l4 4'/%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='m16 21 4-4-4-4'/%3E%3Cpath d='M20 17H4'/%3E%3C/svg%3E");
}
#frmProductDomain .option:nth-child(3) > label {
  --oa: #10B981; --ob: #047857; --oi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
}
#frmProductDomain .option > label::before {
  content: ""; width: 54px; height: 54px; border-radius: 16px; margin-bottom: 8px;
  background: var(--oi) center / 26px no-repeat, linear-gradient(135deg, var(--oa), var(--ob));
  box-shadow: 0 8px 18px -6px var(--oa);
}
#frmProductDomain .option > label::after {
  display: block; font-size: 0.88rem; font-weight: 400; line-height: 1.55; color: var(--t5);
}
#frmProductDomain .option:nth-child(1) > label::after { content: "Find and secure a brand-new domain name for your website in seconds."; }
#frmProductDomain .option:nth-child(2) > label::after { content: "Move a domain you already own to AstronautCloud and manage everything in one place."; }
#frmProductDomain .option:nth-child(3) > label::after { content: "Keep your current registrar and simply point your nameservers to us."; }
#frmProductDomain .option > label:hover { transform: translateY(-3px); border-color: var(--oa); box-shadow: var(--s-hover); }
#frmProductDomain .option > label:has(input:checked) {
  border-color: var(--oa); background: linear-gradient(180deg, #fff 55%, color-mix(in srgb, var(--oa) 7%, #fff));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--oa) 16%, transparent), var(--s-hover);
}
/* radio -> round check badge */
#frmProductDomain .option > label .iradio_square-blue {
  position: absolute !important; top: 18px; right: 18px; width: 26px !important; height: 26px !important; margin: 0;
  border-radius: 50%; background: #fff !important; border: 2px solid #CBD5E1; transition: all 0.2s;
}
#frmProductDomain .option > label .iradio_square-blue.checked {
  background: var(--oa) 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat !important;
  border-color: var(--oa);
}

/* Active option panel (spans all three columns) */
#frmProductDomain .option > .domain-input-group {
  grid-row: 2; grid-column: 1 / -1; background: #fff; border: 1px solid var(--border-hi); border-radius: var(--r-lg);
  padding: 26px; box-shadow: var(--s-card); margin: 0;
}
#frmProductDomain .domain-input-group > .row { margin: 0; flex-wrap: nowrap; gap: 14px; align-items: stretch; }
#frmProductDomain .domain-input-group > .row > [class*="col-"] { padding: 0; margin-left: 0; max-width: none; }
#frmProductDomain .domain-input-group > .row > .col-sm-8 { flex: 1 1 auto; width: auto; }
#frmProductDomain .domain-input-group > .row > .col-sm-2 { flex: 0 0 auto; width: auto; }
#frmProductDomain .domain-input-group .domains-row { margin: 0; }
#frmProductDomain .domain-input-group .btn-primary { min-width: 140px; height: 100%; min-height: 54px; border-radius: var(--r-md); font-size: 1rem; }
#frmProductDomain #message {
  width: 100%; height: 84px !important; min-height: 78px; padding: 14px 18px; border: 1.5px solid var(--border-hi); border-radius: var(--r-md); resize: none;
  font-size: 0.98rem; color: var(--t1); background: #F8FAFC; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
#frmProductDomain #message:focus { outline: 0; background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); }
#frmProductDomain #message::placeholder { color: #94A3B8; font-size: 0.9rem; }
#frmProductDomain .domain-input-group > .row + .row { margin-top: 14px; }
#frmProductDomain .domain-input-group .btn-group { margin-right: 8px; }
#frmProductDomain .domain-input-group button.multiselect {
  background: #fff; border: 1.5px solid var(--border-hi); border-radius: 999px; padding: 6px 14px; font-size: 0.8rem; font-weight: 600; color: var(--t3);
}
#frmProductDomain .domain-input-group button.multiselect:hover { border-color: var(--blue); color: var(--blue); }
#frmProductDomain .domain-input-group .domains-row > label { margin: 0 0 0 4px; font-size: 0.82rem; font-weight: 600; color: var(--t4); display: inline-flex; align-items: center; gap: 6px; }
#frmProductDomain .input-group { flex-wrap: nowrap; }
#frmProductDomain .input-group-text, #frmProductDomain .input-group-addon {
  background: #F1F5F9; border: 1.5px solid var(--border-hi); border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md); color: var(--t5); font-weight: 600; height: 54px;
}
#frmProductDomain .input-group .form-control, #frmProductDomain .domains-row select.form-control, #frmProductDomain .domains-row input.form-control {
  height: 54px; border: 1.5px solid var(--border-hi); border-radius: var(--r-md); font-size: 0.98rem; background: #F8FAFC;
}
#frmProductDomain .input-group .form-control { border-radius: 0 var(--r-md) var(--r-md) 0; }
#frmProductDomain .form-control:focus { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); }

/* Trust strip */
#frmProductDomain::after {
  content: "Secure checkout   \2022   Free DNS management   \2022   24/7 expert support";
  display: block; margin: 20px 0 6px; text-align: center; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; color: var(--t5); white-space: pre-wrap;
}

/* ── Search results ── */
#frmProductDomainSelections { margin-top: 12px; }
#DomainSearchResults .primary-domain-header {
  display: flex; align-items: center; gap: 8px; margin: 26px 0 12px; padding: 0; border: 0; background: none;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--t5);
}
#DomainSearchResults .primary-domain-header::after { content: ""; flex: 1; height: 1px; background: var(--border-hi); }
#searchDomainInfo { margin: 0; }
#primaryLookupResult {
  position: relative; margin: 0; padding: 26px 24px; text-align: center; background: linear-gradient(180deg, #ECFDF5, #fff);
  border: 1.5px solid #A7F3D0; border-radius: var(--r-lg); box-shadow: 0 10px 24px -14px rgba(16, 185, 129, 0.55);
}
#primaryLookupResult .headline { font-size: 1.35rem; font-weight: 500; margin: 0 0 6px; }
#primaryLookupResult .domain-checker-available { color: #047857; }
#primaryLookupResult .domain-checker-available strong { font-weight: 800; color: #065F46; }
#primaryLookupResult .domain-available::before {
  content: ""; display: block; width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%;
  background: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 22px no-repeat, linear-gradient(135deg, #10B981, #047857);
  box-shadow: 0 8px 18px -6px rgba(16, 185, 129, 0.7);
}
#primaryLookupResult .domain-checker-unavailable { color: #B91C1C; }
#primaryLookupResult .domain-price { font-size: 0.95rem; color: var(--t4); }
#primaryLookupResult .domain-price .price { font-weight: 800; color: var(--t1); font-size: 1.05rem; }
#primaryLookupResult .domain-contact-support { margin-top: 10px; }

/* Spotlight TLD cards (.com etc.) are redundant with the Exact Match result: hide them everywhere */
#order-standard_cart .spotlight-tlds, #order-standard_cart #spotlightTlds,
#order-standard_cart .spotlight-tld-container, #order-standard_cart .spotlight-tld { display: none !important; }

/* Add to cart buttons (everywhere in the domain step) */
#order-standard_cart .btn-add-to-cart {
  background: var(--blue) !important; color: #fff !important; border: 0 !important; border-radius: 999px; padding: 8px 20px; font-size: 0.82rem; font-weight: 700;
  box-shadow: var(--s-blue); transition: transform 0.15s, background 0.2s;
}
#domainSuggestions .btn-add-to-cart { width: auto !important; flex: 0 0 auto; white-space: nowrap; }
#order-standard_cart .btn-add-to-cart:hover { background: var(--blue-mid) !important; transform: translateY(-1px); }
#order-standard_cart .btn-add-to-cart.checkout, #order-standard_cart .btn-add-to-cart.added { background: #10B981 !important; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35); }

/* Suggested domains list */
#DomainSearchResults .suggested-domains {
  margin-top: 26px; background: #fff; border: 1px solid var(--border-hi); border-radius: var(--r-lg); box-shadow: var(--s-card); overflow: hidden;
}
#DomainSearchResults .suggested-domains > .card-header {
  display: flex; align-items: center; gap: 8px; padding: 16px 22px; background: linear-gradient(180deg, #F5F8FF, #fff); border-bottom: 1px solid var(--border);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--t4);
}
#DomainSearchResults .suggested-domains > .card-header::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
#domainSuggestions { margin: 0; border: 0; }
#domainSuggestions .domain-suggestion.list-group-item {
  display: flex; align-items: center; gap: 0; padding: 14px 22px; border: 0 !important; border-top: 1px solid var(--border) !important; border-radius: 0 !important;
  font-size: 1rem; color: var(--t2); background: #fff; transition: background 0.15s;
}
#domainSuggestions .domain-suggestion.list-group-item:first-child, #domainSuggestions .domain-suggestion.w-hidden:first-child + .domain-suggestion { border-top: 0 !important; }
#domainSuggestions .domain-suggestion:hover { background: #F8FAFF; }
#domainSuggestions .domain-suggestion .domain { font-weight: 500; }
#domainSuggestions .domain-suggestion .extension { font-weight: 800; color: var(--t1); margin-left: 0; }
#domainSuggestions .domain-suggestion .actions { margin-left: auto; padding-left: 16px; display: flex; align-items: center; gap: 14px; float: none; }
#domainSuggestions .domain-suggestion .actions .price { order: 1; font-weight: 700; color: var(--t1); font-size: 0.95rem; }
#domainSuggestions .domain-suggestion .actions .promo { order: 2; }
#domainSuggestions .domain-suggestion .actions .btn { order: 3; }
#domainSuggestions .promo, #domainSuggestions .promo.hot {
  background: linear-gradient(135deg, #F97316, #EF4444); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; line-height: 1.5;
}
#DomainSearchResults .more-suggestions { background: #F8FAFC; border: 0; border-top: 1px solid var(--border); padding: 14px; }
#DomainSearchResults .more-suggestions a { display: inline-block; padding: 8px 20px; border-radius: 999px; border: 1.5px solid var(--border-hi); background: #fff; color: var(--blue); font-weight: 700; font-size: 0.85rem; }
#DomainSearchResults .more-suggestions a:hover { border-color: var(--blue); text-decoration: none; }
#DomainSearchResults .domain-suggestions-warning { padding: 12px 20px 16px; font-size: 0.78rem; color: var(--t5); }
#DomainSearchResults .domain-suggestions-warning p { margin: 0; }
#btnDomainContinue { margin: 22px 0 10px; padding: 14px 38px; font-size: 1.05rem; border-radius: 999px; }

@media (max-width: 991.98px) {
  #frmProductDomain .domain-selection-options { gap: 14px; }
  #frmProductDomain .option > label { padding: 20px 18px; font-size: 1rem; }
}
@media (max-width: 767.98px) {
  #frmProductDomain .domain-selection-options { grid-template-columns: 1fr; }
  #frmProductDomain .option > label { grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; padding-right: 56px; }
  #frmProductDomain .option > label::before { margin-bottom: 0; width: 46px; height: 46px; background-size: 22px, auto; }
  #frmProductDomain .option > label::after { flex-basis: 100%; }
  #frmProductDomain .option > .domain-input-group { grid-row: auto; padding: 18px; }
  #frmProductDomain .domain-input-group > .row { flex-wrap: wrap; }
  #frmProductDomain .domain-input-group > .row > .col-sm-8, #frmProductDomain .domain-input-group > .row > .col-sm-2 { flex: 1 1 100%; width: 100%; }
  #frmProductDomain .domain-input-group .btn-primary { min-height: 52px; }
  #frmProductDomain #message { height: 122px !important; }
  #domainSuggestions .domain-suggestion.list-group-item { flex-wrap: wrap; padding: 14px 16px; }
  #domainSuggestions .domain-suggestion .actions { margin-left: 0; padding-left: 0; width: 100%; margin-top: 10px; }
  #domainSuggestions .domain-suggestion .actions .price { white-space: nowrap; }
  #domainSuggestions .domain-suggestion .actions .btn { margin-left: auto; flex: 0 0 auto; }
  #order-standard_cart .header-lined h1 { font-size: 1.6rem; }
}


/* ═════════ Order form: Configure step (billing cycle tabs, plan card, summary) ═════════ */
#frmConfigureProduct .secondary-cart-body > p:first-child { color: var(--t4); font-size: 1rem; margin: 0 0 18px; }

/* Plan card: name only (feature list lives on the website) */
#order-standard_cart #frmConfigureProduct .product-info {
  display: flex; align-items: center; gap: 16px; margin: 0 0 28px; padding: 18px 22px;
  background: #fff; border: 1px solid var(--border-hi); border-radius: var(--r-lg); box-shadow: var(--s-card);
}
#order-standard_cart #frmConfigureProduct .product-info::before {
  content: ""; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='8' rx='2'/%3E%3Crect x='2' y='14' width='20' height='8' rx='2'/%3E%3Cpath d='M6 6h.01M6 18h.01'/%3E%3C/svg%3E") center / 24px no-repeat, linear-gradient(135deg, var(--blue), var(--blue-mid));
  box-shadow: 0 8px 18px -6px var(--blue);
}
#order-standard_cart #frmConfigureProduct .product-info > p:not(.product-title) { display: none !important; }
#order-standard_cart #frmConfigureProduct .product-info .product-title { margin: 0; font-size: 1.3rem; font-weight: 800; line-height: 1.2; color: var(--t1); letter-spacing: -0.01em; }
#order-standard_cart #frmConfigureProduct .product-info .product-title::before {
  content: "Selected plan"; display: block; margin-bottom: 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--t5);
}

/* Order summary header (the cart's own stylesheet loads after ours, so this needs the extra specificity) */
#order-standard_cart #frmConfigureProduct #orderSummary .order-summary > h2 {
  margin: 0 !important; padding: 16px 22px !important; text-align: left !important; font-size: 1.05rem !important; font-weight: 800 !important;
  color: var(--t1) !important; background: linear-gradient(180deg, #F5F8FF, #fff) !important; border: 0 !important; border-bottom: 1px solid var(--border) !important;
}

/* Billing cycle: original select stays in the page (WHMCS prices depend on it) but is replaced visually by tabs */
#frmConfigureProduct .field-container .form-group { position: relative; }
#frmConfigureProduct .field-container .form-group > label {
  display: block; margin: 0 0 12px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--t5);
}
#frmConfigureProduct .field-container select.form-control { height: 52px; border: 1.5px solid var(--border-hi); border-radius: var(--r-md); font-size: 1rem; background-color: #F8FAFC; }
#order-standard_cart .ac-cycles-ready br { display: none !important; }
#order-standard_cart .ac-cycles-ready #inputBillingcycle { position: absolute !important; opacity: 0 !important; pointer-events: none; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; margin: 0 !important; }
.ac-cycles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ac-cycles-2 { grid-template-columns: repeat(2, 1fr); }
.ac-cycles-4, .ac-cycles-5, .ac-cycles-6 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ac-cycle {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 18px 18px; text-align: left;
  font-family: inherit; background: #fff; border: 1.5px solid var(--border-hi); border-radius: var(--r-lg); box-shadow: var(--s-card); cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ac-cycle:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: var(--s-hover); }
.ac-cycle:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 40%, transparent); outline-offset: 2px; }
.ac-cycle.active { border-color: var(--blue); background: linear-gradient(180deg, #fff 45%, #F2F6FF); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 15%, transparent), var(--s-hover); }
.ac-cycle::after {
  content: ""; position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid #CBD5E1; transition: all 0.2s;
}
.ac-cycle.active::after {
  border-color: var(--blue);
  background: var(--blue) 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.ac-cycle-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding-top: 12px; }
.ac-cycle-badges:empty { padding-top: 0; }
.ac-cycle-name { padding-right: 30px; }
.ac-cycle-badge { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; line-height: 1.4; }
.ac-cycle-best { position: absolute; top: -11px; left: 18px; white-space: nowrap; background: linear-gradient(135deg, var(--blue), var(--indigo)); color: #fff; box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--blue) 60%, transparent); }
.ac-cycle-save { background: #DCFCE7; color: #047857; }
.ac-cycle-name { font-size: 0.95rem; font-weight: 700; color: var(--t1); }
.ac-cycle-price { color: var(--t1); }
.ac-cycle-price strong { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.ac-cycle-price small { font-size: 0.9rem; font-weight: 600; color: var(--t5); margin-left: 2px; }
.ac-cycle-sub { font-size: 0.78rem; line-height: 1.45; color: var(--t5); }

/* Help strip */
#frmConfigureProduct .alert-warning.info-text-sm {
  margin: 26px 0 0; padding: 14px 18px; background: #F5F8FF !important; border: 1px solid #DBE6FF !important; border-radius: var(--r-md); color: var(--t3) !important; font-size: 0.9rem; text-align: left;
}
#frmConfigureProduct .alert-warning.info-text-sm .fa-question-circle { color: var(--blue); margin-right: 4px; }
#frmConfigureProduct .alert-warning.info-text-sm .alert-link { color: var(--blue); font-weight: 700; }

/* Extra sections WHMCS adds for some products (configurable options, add-ons) */
#frmConfigureProduct .sub-heading { height: auto; margin: 28px 0 14px; text-align: left; border-bottom: 1px solid var(--border-hi); }
#frmConfigureProduct .sub-heading span, #frmConfigureProduct .sub-heading-borderless span {
  display: inline-block; padding: 0 0 8px; background: transparent; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--t5);
}
#frmConfigureProduct .product-configurable-options .form-control, #frmConfigureProduct .field-container .form-control { border-radius: var(--r-md); }
#frmConfigureProduct .panel-addon { border: 1.5px solid var(--border-hi); border-radius: var(--r-lg); background: #fff; box-shadow: var(--s-card); overflow: hidden; }
#frmConfigureProduct .panel-addon-selected { border-color: var(--blue); background: #F5F8FF; }
#frmConfigureProduct .panel-addon .panel-add { background: #F8FAFC; border-top: 1px solid var(--border); font-weight: 700; color: var(--blue); }

/* Order summary */
#orderSummary { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
#orderSummary .order-summary { background: #fff !important; border: 1px solid var(--border-hi) !important; border-radius: var(--r-lg); box-shadow: var(--s-card); overflow: hidden; padding: 0; }
#orderSummary .order-summary h2 {
  margin: 0; padding: 18px 22px; text-align: left; font-size: 1.05rem; font-weight: 800; color: var(--t1);
  background: linear-gradient(180deg, #F5F8FF, #fff) !important; border: 0 !important; border-bottom: 1px solid var(--border) !important;
}
#orderSummary .summary-container { margin: 0 !important; padding: 18px 22px 22px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 0.92rem; color: var(--t3); }
#orderSummary .summary-container .product-name { display: block; font-size: 1.05rem; font-weight: 800; color: var(--t1); }
#orderSummary .summary-container .product-group { display: block; margin-bottom: 14px; font-size: 0.8rem; font-style: normal; color: var(--t5); }
#orderSummary .summary-totals { margin: 12px 0 0; padding: 12px 0 0; border: 0; border-top: 1px dashed var(--border-hi); line-height: 1.9; }
#orderSummary .total-due-today {
  margin-top: 16px; padding: 16px 18px; border-radius: 14px; text-align: right; color: #065F46;
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5); border: 1px solid #A7F3D0; font-size: 0.82rem; font-weight: 600;
}
#orderSummary .total-due-today .amt { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: #047857; line-height: 1.2; }
#orderSummary > .text-center { padding: 0; }
#btnCompleteProductConfig { width: 100%; margin: 16px 0 0; padding: 14px 24px; border-radius: 999px; font-size: 1.05rem; }

@media (max-width: 767.98px) {
  .ac-cycles, .ac-cycles-2 { grid-template-columns: 1fr; }
  .ac-cycle { padding: 16px; }
  #frmConfigureProduct .alert-warning.info-text-sm { margin-bottom: 20px; }
  .ac-cycle-price strong { font-size: 1.6rem; }
  #order-standard_cart #frmConfigureProduct .product-info { padding: 14px 16px; gap: 14px; }
}


/* ═════════ Order form: Review & Checkout (cart.php?a=view) ═════════ */
#order-standard_cart .cart-body:has(.view-cart-items) .header-lined::after {
  content: "Review your order, add a promo code if you have one, then continue to secure checkout.";
  display: block; margin-top: 8px; font-size: 0.98rem; font-weight: 400; color: var(--t5);
}
.view-cart-items-header { display: none; }
.view-cart-items { display: flex; flex-direction: column; gap: 14px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }

/* Line items as cards */
.view-cart-items .item {
  position: relative; margin: 0 !important; padding: 20px 22px !important; background: #fff !important; border: 1px solid var(--border-hi) !important; border-radius: var(--r-lg) !important;
  box-shadow: var(--s-card); transition: border-color 0.2s, box-shadow 0.2s;
}
.view-cart-items .item:hover { border-color: color-mix(in srgb, var(--blue) 45%, transparent); box-shadow: var(--s-hover); }
.view-cart-items .item > .row { margin: 0; align-items: center; }
.view-cart-items .item > .row > [class*="col-"] { padding: 0; }
.view-cart-items .item > .row > .col-sm-7 { position: relative; padding-left: 70px; min-height: 52px; }
.view-cart-items .item > .row > .col-sm-7::before {
  content: ""; position: absolute; left: 0; top: 0; width: 52px; height: 52px; border-radius: 15px; box-shadow: 0 8px 18px -6px var(--blue);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center / 26px no-repeat, linear-gradient(135deg, #8B5CF6, #6D28D9);
  box-shadow: 0 8px 18px -6px #8B5CF6;
}
.view-cart-items .item > .row > .col-sm-7:has(.item-group)::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='8' rx='2'/%3E%3Crect x='2' y='14' width='20' height='8' rx='2'/%3E%3Cpath d='M6 6h.01M6 18h.01'/%3E%3C/svg%3E") center / 26px no-repeat, linear-gradient(135deg, var(--blue), var(--blue-mid));
  box-shadow: 0 8px 18px -6px var(--blue);
}
.view-cart-items .item-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 1.1rem; font-weight: 800; color: var(--t1); letter-spacing: -0.01em; }
.view-cart-items .item-title .btn-link:not(.btn-remove-from-cart) {
  padding: 3px 11px; border-radius: 999px; background: #EEF4FF; color: var(--blue); font-size: 0.74rem; font-weight: 700; text-decoration: none;
}
.view-cart-items .item-title .btn-link:not(.btn-remove-from-cart):hover { background: var(--blue); color: #fff; }
.view-cart-items .item-group { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--t5); }
.view-cart-items .item-domain { display: block; margin-top: 6px; font-size: 0.95rem; font-weight: 600; color: var(--t3) !important; word-break: break-all; }
.view-cart-items .item-price { text-align: right; }
.view-cart-items .item-price > span:first-child { display: block; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; color: var(--t1); line-height: 1.2; }
.view-cart-items .item-price .cycle {
  display: inline-block !important; width: auto !important; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: #F1F5F9; color: var(--t4);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-align: center;
}
.view-cart-items .item-price .renewal.cycle { display: block !important; background: transparent !important; padding: 4px 0 0; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.78rem; color: var(--t5); }
.view-cart-items .item-price .renewal-price { display: inline !important; background: transparent !important; padding: 0 !important; margin: 0; font-weight: 600; font-size: inherit; text-transform: none; letter-spacing: 0; color: var(--t4); }
.btn-remove-from-cart { width: 34px; height: 34px; padding: 0; border-radius: 50%; background: #F1F5F9; border: 0; color: var(--t5) !important; box-shadow: none; transition: background 0.2s, color 0.2s; }
.btn-remove-from-cart:hover { background: #FEE2E2; color: #DC2626 !important; text-decoration: none; }
.view-cart-items .item-title .btn-remove-from-cart { width: auto; height: auto; padding: 3px 11px; border-radius: 999px; font-size: 0.74rem; }
.empty-cart { margin: 12px 4px 0 !important; padding: 0 !important; text-align: right; clear: both; }
.empty-cart .btn-link, .empty-cart .btn { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--t5) !important; font-size: 0.82rem; font-weight: 600; text-decoration: none; }
.empty-cart .btn-link:hover, .empty-cart .btn:hover { color: #DC2626 !important; }

/* Promo code */
.view-cart-tabs { margin-top: 26px; padding: 20px 22px 22px; background: #fff !important; border: 1px solid var(--border-hi) !important; border-radius: var(--r-lg) !important; box-shadow: var(--s-card); }
.view-cart-tabs .nav-tabs li, .view-cart-tabs .nav-tabs .nav-item { background: transparent !important; border: 0 !important; margin: 0; }
.view-cart-tabs .tab-pane { background: transparent !important; border: 0 !important; padding: 0 !important; }
.view-cart-tabs .nav-tabs { border: 0; margin: 0 0 14px; }
.view-cart-tabs .nav-tabs .nav-link {
  padding: 0 0 8px; margin-right: 22px; border: 0 !important; border-bottom: 2px solid transparent !important; background: transparent !important; box-shadow: none !important; color: var(--t5);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}
.view-cart-tabs .nav-tabs .nav-link.active { color: var(--blue) !important; border-bottom-color: var(--blue) !important; }
.view-cart-tabs .tab-content { padding: 0 !important; border: 0 !important; background: transparent !important; }
.view-cart-tabs .prepend-icon { position: relative; margin-bottom: 12px; }
.view-cart-tabs .prepend-icon .field-icon { position: absolute; left: 0; top: 0; width: 50px; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--blue); margin: 0; }
.view-cart-tabs .prepend-icon .form-control { height: 50px; padding-left: 50px; border: 1.5px solid var(--border-hi); border-radius: var(--r-md); background: #F8FAFC; font-size: 0.95rem; }
.view-cart-tabs .prepend-icon .form-control:focus { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); }
.view-cart-tabs .btn-block.btn-default, .view-cart-tabs .btn-default {
  border-radius: var(--r-md); border: 1.5px solid var(--blue); background: #fff; color: var(--blue); font-weight: 700; padding: 11px 18px;
}
.view-cart-tabs .btn-default:hover { background: var(--blue); color: #fff; }

/* Order summary */
#orderSummary.order-summary { position: relative; background: #fff; border: 1px solid var(--border-hi); border-radius: var(--r-lg); box-shadow: var(--s-hover); overflow: hidden; padding: 0; }
#orderSummary.order-summary h2 {
  margin: 0; padding: 18px 22px; text-align: left; font-size: 1.1rem; font-weight: 800; color: var(--t1);
  background: linear-gradient(120deg, var(--blue-mid) 0%, var(--blue) 60%, var(--indigo) 100%) !important; color: #fff !important; border: 0 !important;
}
#orderSummary.order-summary .summary-container { margin: 0 !important; padding: 20px 22px 22px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 0.95rem !important; color: var(--t3); }
#orderSummary .subtotal, #orderSummary .recurring-totals { padding: 8px 0; line-height: 1.7; border: 0; font-size: 0.95rem !important; font-weight: 600; color: var(--t3); }
#orderSummary .recurring-totals { border-top: 1px dashed var(--border-hi); margin-top: 6px; padding-top: 12px; }
#orderSummary .recurring-charges { text-align: right; font-weight: 600; font-style: normal !important; color: var(--t4) !important; }
#orderSummary .recurring-charges .cost { font-weight: 800; font-style: normal !important; color: var(--t1) !important; }
#orderSummary .total-due-today {
  margin-top: 14px; padding: 16px 18px; border-radius: 14px; text-align: right; color: #065F46; font-size: 0.82rem; font-weight: 600;
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5); border: 1px solid #A7F3D0;
}
#orderSummary .total-due-today .amt { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: #047857 !important; line-height: 1.2; background: transparent !important; padding: 0 !important; }
#orderSummary .express-checkout-buttons:empty { display: none; }
#orderSummary .summary-container > .text-right { text-align: center !important; margin-top: 18px; }
#orderSummary .btn-checkout {
  display: block; width: 100%; padding: 15px 24px; border: 0 !important; border-radius: 999px; font-size: 1.1rem; font-weight: 700; color: #fff !important;
  background: linear-gradient(135deg, var(--blue), var(--blue-mid)) !important; box-shadow: var(--s-blue); transition: transform 0.15s, box-shadow 0.2s;
}
#orderSummary .btn-checkout:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--blue) 60%, transparent); }
#orderSummary .btn-continue-shopping { margin-top: 8px; color: var(--t5) !important; font-size: 0.88rem; font-weight: 600; text-decoration: none; }
#orderSummary .btn-continue-shopping:hover { color: var(--blue); }

/* Remove / empty-cart confirmation dialogs */
.modal-remove-item .modal-content { border: 0; border-radius: var(--r-xl); box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.45); overflow: hidden; }
.modal-remove-item .modal-title { color: var(--t1); }
.modal-remove-item .modal-title .fa-3x { display: block; margin: 0 auto 12px; color: #EF4444; }
.modal-remove-item .modal-footer { border: 0; padding-bottom: 24px; gap: 10px; }
.modal-remove-item .modal-footer .btn { min-width: 96px; border-radius: 999px; font-weight: 700; }

@media (max-width: 767.98px) {
  .view-cart-items .item { padding: 16px; }
  .view-cart-items .item > .row > .col-sm-7 { padding-left: 62px; }
  .view-cart-items .item > .row > .col-sm-7::before { width: 46px; height: 46px; background-size: 22px, auto; }
  .view-cart-items .item > .row > .item-price { text-align: left; margin-top: 12px; padding-left: 62px; }
  .view-cart-items .item > .row > .item-price > span:first-child { font-size: 1.25rem; }
}


/* "You save" row in the order summary */
#orderSummary .ac-save {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 14px;
  background: #fff; border: 1.5px dashed #34D399;
}
#orderSummary .ac-save-ico {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #D1FAE5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Cpath d='M7.5 7.5h.01'/%3E%3C/svg%3E") center / 18px no-repeat;
}
#orderSummary .ac-save-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; text-align: left; }
#orderSummary .ac-save-txt strong { font-size: 0.98rem; font-weight: 800; color: #047857; }
#orderSummary .ac-save-txt small { font-size: 0.78rem; font-weight: 500; color: var(--t5); }
#orderSummary .ac-save + .total-due-today { margin-top: 12px; }

/* ═════════ Trust block (subtle): under the order summary, and in one row under the checkout button ═════════ */
.ac-trust { margin-top: 16px; padding: 4px 16px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--border); border-radius: var(--r-lg); }
.ac-trust-item { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-top: 1px solid var(--border); }
.ac-trust-item:first-child { border-top: 0; }
.ac-trust-item strong { display: block; font-size: 0.82rem; font-weight: 600; line-height: 1.3; color: var(--t3); }
.ac-trust-item span { font-size: 0.76rem; line-height: 1.45; color: var(--t5); }
.ac-trust-item a { color: var(--blue); font-weight: 600; text-decoration: none; }
.ac-trust-item a:hover { text-decoration: underline; }
.ac-trust-ico { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; background-position: center; background-repeat: no-repeat; background-size: 16px; }
.ac-ti-lock {
  background-color: color-mix(in srgb, var(--blue) 10%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232966F3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
.ac-ti-shield {
  background-color: rgba(16, 185, 129, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.ac-ti-back {
  background-color: rgba(124, 58, 237, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11'/%3E%3C/svg%3E");
}
.ac-free { color: #047857 !important; font-weight: 800; }

/* one row under the Place order button (large screens); wraps on smaller screens */
.ac-trust.ac-trust-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; max-width: 880px; margin: 26px auto 8px; padding: 18px 0 0;
  background: transparent; border: 0; border-top: 1px solid var(--border-hi); border-radius: 0;
}
.ac-trust-row .ac-trust-item { flex: 1 1 230px; max-width: 290px; padding: 4px 0; border: 0; }
@media (max-width: 767.98px) {
  .ac-trust.ac-trust-row { flex-direction: column; align-items: stretch; gap: 8px; max-width: 420px; }
  .ac-trust-row .ac-trust-item { max-width: none; flex: 0 0 auto; }
}

/* ═════════ Checkout (cart.php?a=checkout) ═════════ */
#order-standard_cart .cart-body:has(#frmCheckout) { max-width: 960px !important; margin: 0 auto !important; }
#order-standard_cart .cart-body:has(#frmCheckout) .header-lined::after {
  content: "Almost there. Add your details below to complete your order.";
  display: block; margin-top: 8px; font-size: 0.98rem; font-weight: 400; color: var(--t5);
}

/* "Already registered?" banner */
#order-standard_cart .already-registered {
  display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; padding: 14px 20px;
  background: #F5F8FF; border: 1px solid #DBE6FF; border-radius: var(--r-lg);
}
#order-standard_cart .already-registered > .pull-right, #order-standard_cart .already-registered > .float-right { float: none !important; flex: 0 0 auto; }
#order-standard_cart .already-registered p { flex: 1 1 auto; margin: 0; padding: 0; font-size: 0.92rem; color: var(--t3); overflow: visible; text-align: left; }
#order-standard_cart .already-registered .btn {
  padding: 8px 20px; border-radius: 999px; border: 1.5px solid var(--blue) !important; background: #fff !important; color: var(--blue) !important; font-size: 0.85rem; font-weight: 700; box-shadow: none;
}
#order-standard_cart .already-registered .btn:hover { background: var(--blue) !important; color: #fff !important; }
#order-standard_cart .checkout-error-feedback { border-radius: var(--r-md); }

/* Section cards */
#frmCheckout .ac-co-card, #frmCheckout > #containerNewUserSignup:not(:has(> .card)), #frmCheckout > #containerNewUserSecurity:not(:has(> .card)), #frmCheckout > #containerExistingUserSignin {
  margin: 0 0 20px; padding: 26px 28px 20px; background: #fff; border: 1px solid var(--border-hi); border-radius: var(--r-lg); box-shadow: var(--s-card);
}
#frmCheckout .ac-co-card > #containerNewUserSignup, #frmCheckout .ac-co-card > #containerNewUserSecurity, #frmCheckout .ac-co-card > #containerExistingUserSignin { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
#frmCheckout { counter-reset: acStep; }

/* Numbered section headers */
#order-standard_cart #frmCheckout .sub-heading {
  counter-increment: acStep; display: flex; align-items: center; gap: 12px; height: auto; margin: 4px 0 20px !important; padding: 0;
  text-align: left; border: 0 !important; background: transparent;
}
#order-standard_cart #frmCheckout .sub-heading::before {
  content: counter(acStep); flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--blue), var(--indigo)); box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--blue) 55%, transparent);
}
#order-standard_cart #frmCheckout .sub-heading span,
#order-standard_cart #frmCheckout .sub-heading span.primary-bg-color {
  position: static; width: auto; padding: 0 !important; border: 0 !important; border-radius: 0; background: transparent !important;
  font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em; color: var(--t1) !important; transform: none;
}
#frmCheckout .ac-co-card .sub-heading:not(:first-child) { margin-top: 30px !important; padding-top: 24px; border-top: 1px solid var(--border) !important; }
#frmCheckout p.small.text-muted, #frmCheckout .text-muted.small { font-size: 0.82rem; color: var(--t5) !important; margin: -8px 0 14px; }


/* Choose account (logged-in checkout): selectable cards */
#order-standard_cart #frmCheckout .account-select-container {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 0 0 6px !important; padding: 0; border: 0 !important;
}
#order-standard_cart #frmCheckout .account-select-container > [class*="col-"] { width: auto; max-width: none; flex: none; padding: 0 !important; }
#order-standard_cart #frmCheckout .account-select-container > .col-sm-12 { grid-column: 1 / -1; }
#order-standard_cart #frmCheckout .account-select-container div.account {
  height: 100%; padding: 0 !important; background: #fff !important; border: 1.5px solid var(--border-hi) !important; border-radius: var(--r-md); transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
#order-standard_cart #frmCheckout .account-select-container div.account:hover { border-color: #93B4FF !important; }
#order-standard_cart #frmCheckout .account-select-container div.account.active {
  border-color: var(--blue) !important; background: #F5F8FF !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 12%, transparent);
}
#order-standard_cart #frmCheckout .account-select-container div.account.border-bottom { border-style: dashed !important; }
#order-standard_cart #frmCheckout .account-select-container div.account.border-bottom.active { border-style: solid !important; }
#order-standard_cart #frmCheckout .account-select-container .account > label {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; height: 100%; margin: 0; padding: 16px 18px; cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--t1);
}
#order-standard_cart #frmCheckout .account-select-container .account.border-bottom > label { align-items: center; }
#order-standard_cart #frmCheckout .account-select-container .iradio_square-blue {
  flex: 0 0 22px; width: 22px !important; height: 22px !important; margin: 1px 0 0; border-radius: 50%; background: #fff !important; border: 2px solid #CBD5E1; transition: all 0.2s;
}
#order-standard_cart #frmCheckout .account-select-container .iradio_square-blue.checked {
  border-color: var(--blue);
  background: var(--blue) 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 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat !important;
}
#order-standard_cart #frmCheckout .account-select-container .address { display: block; flex: 1 1 auto; min-width: 0; line-height: 1.5; }
#order-standard_cart #frmCheckout .account-select-container .address strong { font-size: 1rem; font-weight: 800; color: var(--t1); }
#order-standard_cart #frmCheckout .account-select-container .address .label {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; vertical-align: 2px;
  background: #E0EAFF !important; color: var(--blue-mid) !important;
}
#order-standard_cart #frmCheckout .account-select-container .address > br { display: none; }
#order-standard_cart #frmCheckout .account-select-container .address .small { display: block; margin-top: 4px; font-size: 0.84rem; font-weight: 400; line-height: 1.5; color: var(--t5); }
@media (max-width: 575.98px) {
  #order-standard_cart #frmCheckout .account-select-container { grid-template-columns: 1fr; }
}

/* Fields */
#frmCheckout .form-group { margin-bottom: 16px; }
#frmCheckout .prepend-icon { position: relative; }
#frmCheckout .prepend-icon .field-icon {
  position: absolute; left: 0; top: 0; z-index: 2; width: 46px; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; color: #94A3B8; pointer-events: none;
}
#frmCheckout .prepend-icon:focus-within .field-icon { color: var(--blue); }
#frmCheckout .field.form-control, #frmCheckout input.field, #frmCheckout select.field, #frmCheckout textarea.field {
  height: 50px; padding-left: 46px; border: 1.5px solid var(--border-hi); border-radius: var(--r-md); background-color: #F8FAFC; font-size: 0.95rem; color: var(--t1);
  box-shadow: none; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
#frmCheckout select.field { padding-right: 36px; }
#frmCheckout .field.form-control:focus, #frmCheckout textarea.field:focus { background-color: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); outline: 0; }
#frmCheckout .field.form-control::placeholder { color: #94A3B8; }
#frmCheckout textarea.field { height: auto; min-height: 112px; padding: 14px 16px; resize: vertical; }
#frmCheckout #inputDomainContact { padding-left: 16px; height: 50px; }
#frmCheckout .row.margin-bottom > [class*="col-sm-6"] { flex: 0 0 100%; max-width: 100%; margin-left: 0; }
/* phone input (intl-tel-input): keep the library's own left padding, restyle the rest */
#frmCheckout .intl-tel-input { width: 100%; }
#frmCheckout .intl-tel-input input.field, #frmCheckout .intl-tel-input input.form-control { height: 50px; padding-left: inherit; border-radius: var(--r-md); }
#frmCheckout .intl-tel-input.separate-dial-code input.field { padding-left: 82px; }
#frmCheckout .intl-tel-input .selected-flag { border-radius: var(--r-md) 0 0 var(--r-md); background: transparent; }
#frmCheckout .intl-tel-input .country-list { border-radius: var(--r-md); box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.25); border: 1px solid var(--border-hi); }

/* Password helper and strength meter */
#frmCheckout .generate-password { padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--border-hi); background: #fff; color: var(--t3); font-weight: 600; font-size: 0.82rem; }
#frmCheckout .generate-password:hover { border-color: var(--blue); color: var(--blue); }
#frmCheckout .password-strength-meter .progress { height: 8px; border-radius: 999px; background: #E2E8F0; box-shadow: none; overflow: hidden; margin-top: 8px; }
#frmCheckout .password-strength-meter .progress-bar { border-radius: 999px; }
#frmCheckout #passwordStrengthTextLabel { margin: 6px 0 0; font-size: 0.78rem; color: var(--t5) !important; }

/* Payment details */
#order-standard_cart #frmCheckout #totalDueToday {
  margin: 0 0 18px; padding: 16px 20px; border-radius: 14px; text-align: left; background: linear-gradient(135deg, #ECFDF5, #D1FAE5) !important; border: 1px solid #A7F3D0 !important;
  color: #065F46 !important; font-size: 0.95rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
#order-standard_cart #frmCheckout #totalDueToday strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: #047857; }
#frmCheckout #paymentGatewaysContainer { margin-bottom: 8px; }
#frmCheckout #paymentGatewaysContainer .text-center { text-align: left !important; }
#frmCheckout #paymentGatewaysContainer label.radio-inline, #frmCheckout #paymentGatewaysContainer .radio-inline {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 10px 10px 0; padding: 12px 18px; border: 1.5px solid var(--border-hi); border-radius: var(--r-md); background: #fff; font-weight: 600; color: var(--t2); cursor: pointer;
}
#frmCheckout .apply-credit-container { padding: 14px 18px; border-radius: var(--r-md); background: #F5F8FF; border: 1px solid #DBE6FF; margin-bottom: 14px; }

/* Mailing list opt-in */
#frmCheckout .marketing-email-optin {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 20px; align-items: center; margin-top: 22px; padding: 16px 18px; background: #F5F8FF; border: 1px solid #DBE6FF; border-radius: var(--r-md);
}
#frmCheckout .marketing-email-optin h4 { grid-column: 1; margin: 0; font-size: 0.98rem; font-weight: 700; }
#frmCheckout .marketing-email-optin p { grid-column: 1; margin: 0; font-size: 0.82rem; color: var(--t5); }
#frmCheckout .marketing-email-optin .bootstrap-switch { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }

/* Terms + Place order */
#frmCheckout .accepttos, #frmCheckout label.checkbox-inline { font-size: 0.86rem; color: var(--t4); }
#frmCheckout > .text-center { margin: 22px 0 0; }
#frmCheckout > .text-center label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 0.86rem; color: var(--t4); }
#frmCheckout > .text-center a:not(.btn) { color: var(--blue); font-weight: 600; }
#btnCompleteOrder {
  display: block; width: 100%; max-width: 420px; margin: 0 auto; padding: 16px 28px; border: 0 !important; border-radius: 999px; font-size: 1.1rem; font-weight: 700; color: #fff !important;
  background: linear-gradient(135deg, var(--blue), var(--blue-mid)) !important; box-shadow: var(--s-blue); transition: transform 0.15s, box-shadow 0.2s;
}
#btnCompleteOrder:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -6px color-mix(in srgb, var(--blue) 60%, transparent); }

/* WHMCS's own security message: quiet, centred */
#order-standard_cart .checkout-security-msg.alert-warning {
  max-width: 880px; margin: 6px auto 10px; padding: 8px 12px; background: transparent !important; border: 0 !important; color: var(--t5) !important; font-size: 0.76rem; text-align: center;
}
#order-standard_cart .checkout-security-msg > i, #order-standard_cart .checkout-security-msg .fa-lock { position: static !important; float: none !important; display: inline !important; margin: 0 6px 0 0 !important; font-size: 0.8rem !important; line-height: inherit !important; color: #94A3B8 !important; }

@media (max-width: 767.98px) {
  #frmCheckout .ac-co-card, #frmCheckout > #containerNewUserSignup, #frmCheckout > #containerNewUserSecurity { padding: 20px 18px 8px; }
  #order-standard_cart .already-registered { flex-direction: column-reverse; align-items: stretch; text-align: left; }
  #order-standard_cart .already-registered > .pull-right, #order-standard_cart .already-registered > .float-right { width: 100%; margin: 0; }
  #order-standard_cart .already-registered .btn { width: 100%; }
  #frmCheckout .marketing-email-optin { grid-template-columns: 1fr; }
  #frmCheckout .marketing-email-optin .bootstrap-switch { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 10px; }
  #order-standard_cart #frmCheckout #totalDueToday { flex-direction: column; align-items: flex-start; }
}


/* Remove (×) in the top-right corner of each cart item */
@media (min-width: 576px) {
  .view-cart-items .item > .row > .col-sm-1 { position: absolute; top: 12px; right: 12px; width: auto; max-width: none; flex: 0 0 auto; padding: 0; }
  .view-cart-items .item > .row > .col-sm-1 .btn-remove-from-cart { width: 30px; height: 30px; font-size: 0.8rem; background: #F1F5F9; }
  .view-cart-items .item > .row > .item-price { margin-left: auto; padding: 24px 4px 0 0; align-self: flex-end; }
}


/* Header side padding on phones and tablets (Bootstrap zeroes the container padding below 992px) */
@media (max-width: 991.98px) {
  .ac-header .navbar > .container.nav-container { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 575.98px) {
  .ac-header .navbar > .container.nav-container { padding-left: 14px !important; padding-right: 14px !important; }
  .nav-logo img { height: 36px; }
}


/* ═════════ Login page: real reviews on the left, sign-in on the right ═════════ */
.ac-login-split {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); max-width: 1080px; margin: 24px auto 40px;
  background: #fff; border: 1px solid var(--border); border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px -28px rgba(15, 23, 42, 0.28);
}
.ac-login-aside {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 22px; padding: 44px 40px; color: #fff;
  background: linear-gradient(150deg, var(--blue-deep) 0%, var(--blue) 58%, var(--indigo) 100%);
}
.ac-login-aside::before, .ac-login-aside::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, 0.08); }
.ac-login-aside::before { width: 320px; height: 320px; right: -110px; top: -120px; }
.ac-login-aside::after { width: 220px; height: 220px; left: -80px; bottom: -90px; }
.ac-login-aside > * { position: relative; z-index: 1; }
.ac-aside-eyebrow { align-self: flex-start; padding: 5px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ac-aside-title { margin: 0; color: #fff; font-size: 1.75rem; line-height: 1.25; letter-spacing: -0.02em; }
.ac-review-card { padding: 24px 24px 22px; border-radius: 18px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ac-stars { margin-bottom: 12px; color: #FBBF24; font-size: 1.05rem; letter-spacing: 3px; line-height: 1; }
.ac-slides { display: grid; grid-template-columns: minmax(0, 1fr); }
.ac-slide { grid-area: 1 / 1; min-width: 0; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s; }
.ac-slide.active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ac-slide blockquote { margin: 0 0 18px; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.65; color: #fff; font-weight: 400; }
.ac-slide figcaption { display: flex; align-items: center; gap: 12px; }
.ac-slide figcaption img, .ac-avatar-fb { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.55); background: #fff; }
.ac-avatar-fb { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--blue-deep); }
.ac-who strong { display: block; font-size: 0.95rem; font-weight: 700; color: #fff; line-height: 1.3; }
.ac-who span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.78); }
.ac-controls { display: flex; align-items: center; gap: 14px; }
.ac-arrow { width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background 0.2s; }
.ac-arrow:hover { background: rgba(255, 255, 255, 0.24); }
.ac-dots { display: flex; gap: 7px; align-items: center; }
.ac-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: width 0.25s, background 0.25s; }
.ac-dot.active { width: 24px; background: #fff; }
.ac-arrow:focus-visible, .ac-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ac-aside-points { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: auto 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.82rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.ac-aside-points li { display: inline-flex; align-items: center; gap: 7px; }
.ac-aside-points i { color: #A7F3D0; }

/* sign-in side */
.ac-login-panel { display: flex; flex-direction: column; justify-content: center; padding: 40px 44px; }
.ac-login-panel .login-form { width: 100%; }
.ac-login-panel .card { max-width: 440px; margin: 0 auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.ac-login-panel .card-body { padding: 0 !important; }
.ac-login-panel .card:hover { transform: none; }
.ac-login-panel .h3 { margin: 0 0 4px; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--t1); }
.ac-login-panel .form-control-label { font-size: 0.86rem; font-weight: 700; color: var(--t2); margin-bottom: 8px; }
.ac-login-panel .input-group-text { background: #F1F5F9; border: 1.5px solid var(--border-hi); border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md); color: var(--t5); height: 50px; }
.ac-login-panel .input-group .form-control { height: 50px; border: 1.5px solid var(--border-hi); background: #F8FAFC; border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 0.95rem; }
.ac-login-panel .input-group .form-control:focus { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); }
.ac-login-panel .pw-input { border-radius: 0 !important; border-right: 0 !important; }
.ac-login-panel .input-group-append .btn { height: 50px; border: 1.5px solid var(--border-hi); border-left: 0; border-radius: 0 var(--r-md) var(--r-md) 0; background: #F8FAFC; color: var(--t5); box-shadow: none; }
.ac-login-panel .input-group-append .btn:hover { color: var(--blue); transform: none; }
.ac-login-panel a.small.text-muted { color: var(--blue) !important; font-weight: 600; }
.ac-login-panel #default-captcha-domainchecker { margin: 0; padding-bottom: 8px; align-items: center; }
.ac-login-panel #default-captcha-domainchecker p { padding: 0; flex: 0 0 100%; }
.ac-login-panel .captchaimage { padding-left: 0; text-align: left; }
.ac-login-panel #default-captcha-domainchecker > .col-6:last-child { padding-right: 0; }
.ac-login-panel #default-captcha-domainchecker p { margin: 0 0 10px; text-align: left; font-size: 0.8rem; color: var(--t5); }
.ac-login-panel .captchaimage img { max-width: 100%; border-radius: 8px; border: 1px solid var(--border-hi); }
.ac-login-panel #inputCaptcha { height: 44px; border-radius: var(--r-md); border: 1.5px solid var(--border-hi); background: #F8FAFC; text-align: center; letter-spacing: 3px; font-weight: 700; }
.ac-login-panel .card-body > .text-center.row { margin: 0; }
.ac-login-panel .card-body > .text-center.row > .col-md-8 { flex: 0 0 100%; max-width: 100%; padding: 0; }
.ac-login-panel .card-body .float-left { float: none !important; width: 100%; }
.ac-login-panel #login { width: 100%; padding: 14px 24px; border-radius: 999px; font-size: 1.05rem; font-weight: 700; border: 0 !important; background: linear-gradient(135deg, var(--blue), var(--blue-mid)) !important; box-shadow: var(--s-blue); }
.ac-login-panel .card-body .text-right { text-align: left !important; margin-top: 14px; }
.ac-login-panel .card-body .text-right label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.88rem; font-weight: 500; color: var(--t3); cursor: pointer; }
.ac-login-panel .card-body .text-right .form-check-input { position: static; margin: 0; }
.ac-login-panel .card-footer { margin-top: 26px; padding: 18px 0 0 !important; background: transparent !important; border: 0; border-top: 1px solid var(--border); text-align: center; }
.ac-login-panel .card-footer small { font-size: 0.88rem; color: var(--t4); }
.ac-login-panel .card-footer a { font-size: 0.88rem !important; color: var(--blue); }

@media (max-width: 991.98px) {
  .ac-login-split { grid-template-columns: 1fr; margin: 12px auto 28px; border-radius: 20px; }
  .ac-login-panel { order: 1; padding: 32px 28px; }
  .ac-login-aside { order: 2; padding: 32px 28px; }
  .ac-aside-title { font-size: 1.4rem; }
}
@media (max-width: 575.98px) {
  .ac-login-split { border-radius: 16px; margin-left: -2px; margin-right: -2px; }
  .ac-login-panel { padding: 26px 20px; }
  .ac-login-aside { padding: 28px 20px; gap: 18px; }
  .ac-review-card { padding: 18px 18px 16px; }
  .ac-slide blockquote { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) { .ac-slide { transition: none; } }


/* ═════════ Register page (register.php) + fields shared with checkout ═════════ */
.ac-page-head { margin: 0 0 22px; }
.ac-page-head h1 { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--t1); }
.ac-page-head p { margin: 8px 0 0; font-size: 0.98rem; color: var(--t5); }
.ac-page-head a { color: var(--blue); font-weight: 700; }
#registration { max-width: 960px; margin: 0 auto; }

/* Every field gets the same look, including inputs that have no .form-control class (company, address 2, passwords) */
#order-standard_cart #frmCheckout .prepend-icon input.field,
#order-standard_cart #frmCheckout .prepend-icon select.field,
#order-standard_cart #frmCheckout .prepend-icon textarea.field,
#frmCheckout .prepend-icon input.field, #frmCheckout .prepend-icon select.field {
  height: 50px; padding-left: 46px; border: 1.5px solid var(--border-hi); border-radius: var(--r-md); background-color: #F8FAFC; font-size: 0.95rem; color: var(--t1); box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
#order-standard_cart #frmCheckout .prepend-icon input.field:focus, #order-standard_cart #frmCheckout .prepend-icon select.field:focus {
  background-color: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); outline: 0;
}
#order-standard_cart #frmCheckout .field::placeholder, #frmCheckout .field::placeholder { color: #94A3B8; opacity: 1; }

/* Phone number: keep room for the flag and dial code */
#frmCheckout .intl-tel-input { display: block; width: 100%; }
#frmCheckout .intl-tel-input input {
  width: 100%; height: 50px !important; font-size: 0.95rem !important; color: var(--t1); border: 1.5px solid var(--border-hi) !important; border-radius: var(--r-md) !important; background-color: #F8FAFC; box-shadow: none;
}
#frmCheckout .intl-tel-input input:focus { background-color: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); outline: 0; }
#frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-2 input { padding-left: 78px !important; }
#frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-3 input { padding-left: 88px !important; }
#frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-4 input { padding-left: 98px !important; }
#frmCheckout .intl-tel-input.separate-dial-code.iti-sdc-5 input { padding-left: 108px !important; }
#frmCheckout .intl-tel-input .selected-flag { border-radius: var(--r-md) 0 0 var(--r-md); }

/* Section cards (register page already has its own .card wrappers) */
#frmCheckout .card.mb-4 { margin-bottom: 20px !important; border: 1px solid var(--border-hi); border-radius: var(--r-lg); background: #fff; box-shadow: var(--s-card); }
#frmCheckout .card.mb-4 .card-body { padding: 26px 28px 14px !important; }
#frmCheckout #containerNewUserSignup > .card .card-title, #frmCheckout #containerNewUserSecurity > .card .card-title {
  counter-increment: acStep; display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em; color: var(--t1);
}
#frmCheckout #containerNewUserSignup > .card .card-title::before, #frmCheckout #containerNewUserSecurity > .card .card-title::before {
  content: counter(acStep); flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--blue), var(--indigo)); box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--blue) 55%, transparent);
}

/* Mailing list card (register) */
#frmCheckout > .card.mb-4:has(.bootstrap-switch) .card-body { display: grid; grid-template-columns: 1fr auto; gap: 2px 20px; align-items: center; padding-bottom: 22px !important; }
#frmCheckout > .card.mb-4:has(.bootstrap-switch) .card-title { grid-column: 1; margin: 0; font-size: 1rem; font-weight: 700; }
#frmCheckout > .card.mb-4:has(.bootstrap-switch) p { grid-column: 1; margin: 0; font-size: 0.84rem; color: var(--t5); }
#frmCheckout > .card.mb-4:has(.bootstrap-switch) .bootstrap-switch { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }

/* Captcha */
#frmCheckout > .text-center.row.justify-content-center { max-width: 520px; margin: 0 auto 18px !important; }
#frmCheckout > .text-center.row > .col-md-8 { flex: 0 0 100%; max-width: 100%; padding: 0; }
#frmCheckout #default-captcha-domainchecker { margin: 0; padding: 18px 18px 14px; background: #fff; border: 1px solid var(--border-hi); border-radius: var(--r-lg); align-items: center; }
#frmCheckout #default-captcha-domainchecker p { flex: 0 0 100%; margin: 0 0 12px; font-size: 0.82rem; color: var(--t5); text-align: left; padding: 0; }
#frmCheckout .captchaimage { text-align: left; padding-left: 0; }
#frmCheckout .captchaimage img { max-width: 100%; border-radius: 8px; border: 1px solid var(--border-hi); }
#frmCheckout #inputCaptcha { float: none !important; height: 46px; padding: 0 14px; font-size: 1rem; font-weight: 700; letter-spacing: 3px; text-align: center; border: 1.5px solid var(--border-hi); border-radius: var(--r-md); background: #F8FAFC; }
#frmCheckout #default-captcha-domainchecker > .col-6:last-child { padding-right: 0; }

/* Terms + Register button */
#frmCheckout p.text-center { margin: 0 0 14px; }
#frmCheckout label.form-check { display: inline-flex; align-items: center; gap: 8px; padding: 0; font-size: 0.88rem; color: var(--t4); cursor: pointer; }
#frmCheckout label.form-check .form-check-input { position: static; margin: 0; }
#frmCheckout label.form-check a { color: var(--blue); font-weight: 600; }
#frmCheckout input[type="submit"].btn-primary {
  display: block; width: 100%; max-width: 420px; margin: 0 auto; padding: 15px 28px; border: 0 !important; border-radius: 999px; font-size: 1.08rem; font-weight: 700; color: #fff !important;
  background: linear-gradient(135deg, var(--blue), var(--blue-mid)) !important; box-shadow: var(--s-blue); cursor: pointer; transition: transform 0.15s, box-shadow 0.2s;
}
#frmCheckout input[type="submit"].btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -6px color-mix(in srgb, var(--blue) 60%, transparent); }

@media (max-width: 767.98px) {
  #frmCheckout .card.mb-4 .card-body { padding: 20px 18px 8px !important; }
  #frmCheckout > .card.mb-4:has(.bootstrap-switch) .card-body { grid-template-columns: 1fr; }
  #frmCheckout > .card.mb-4:has(.bootstrap-switch) .bootstrap-switch { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 10px; }
}


/* ═════════ Domain registration page (cart.php?a=add&domain=register) ═════════ */
#order-standard_cart .header-lined + p { margin: 0 0 22px; font-size: 0.98rem; color: var(--t5); }

/* Search hero */
#order-standard_cart .domain-checker-container { margin: 0 0 8px; padding: 0; background: none !important; border: 0; }
#order-standard_cart .domain-checker-bg {
  position: relative; overflow: visible; padding: 34px 34px 26px; border: 0; border-radius: 20px;
  background:
    radial-gradient(circle at 96% -14%, rgba(255, 255, 255, 0.10) 0, rgba(255, 255, 255, 0.10) 150px, transparent 151px),
    radial-gradient(circle at -3% 112%, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.08) 110px, transparent 111px),
    linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 58%, var(--indigo) 100%) !important;
  box-shadow: 0 26px 50px -26px color-mix(in srgb, var(--blue) 65%, transparent);
}
/* nothing in the hero is clipped any more, so the Include TLDs / Maximum Length menus can open below it */
#order-standard_cart .domain-checker-container { position: relative; z-index: 30; }
#order-standard_cart .domain-checker-bg .dropdown-menu { z-index: 1100; min-width: 190px; max-height: 260px; }
#order-standard_cart .domain-checker-bg .row { position: relative; z-index: 1; margin: 0; }
#order-standard_cart .domain-checker-bg .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; margin-left: 0; padding: 0; }
#order-standard_cart .domain-checker-bg .input-group-box { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
#order-standard_cart .domain-checker-bg #message {
  flex: 1 1 calc(100% - 184px); min-width: 0; width: auto; min-height: 100px; height: 100px; padding: 16px 20px; border: 0; border-radius: 14px; resize: none; background: #fff; color: var(--t1);
  font-size: 1rem; box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.45);
}
#order-standard_cart .domain-checker-bg #message:focus { outline: 0; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 10px 24px -12px rgba(15, 23, 42, 0.45); }
#order-standard_cart .domain-checker-bg #message::placeholder { color: #94A3B8; font-size: 0.88rem; }
#order-standard_cart .domain-checker-bg .domain-check-availability {
  position: static; flex: 0 0 auto; min-width: 170px; height: 100px; padding: 0 28px; border: 0 !important; border-radius: 14px; background: #fff !important; color: var(--blue) !important;
  font-size: 1.05rem; font-weight: 800; box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.45); transition: transform 0.15s;
}
#order-standard_cart .domain-checker-bg .domain-check-availability:hover { transform: translateY(-2px); }
#order-standard_cart .domain-checker-bg .btn-group { position: relative; margin: 0; }
#order-standard_cart .domain-checker-bg button.multiselect {
  padding: 7px 16px; border: 1px solid rgba(255, 255, 255, 0.4) !important; border-radius: 999px; background: rgba(255, 255, 255, 0.14) !important; color: #fff !important; font-size: 0.82rem; font-weight: 600; box-shadow: none;
}
#order-standard_cart .domain-checker-bg button.multiselect:hover { background: rgba(255, 255, 255, 0.24) !important; }
#order-standard_cart .domain-checker-bg .input-group-box > label { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 0 4px; font-size: 0.82rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); }

/* Results on this page: price + add-to-cart row inside the exact-match card */
#primaryLookupResult .domain-price { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 6px 0 0; }
#primaryLookupResult .domain-price .price { font-size: 1.35rem; font-weight: 800; color: var(--t1); }

/* TLD pricing */
#order-standard_cart .domain-pricing { margin-top: 36px; }
#order-standard_cart .featured-tlds-container .row { justify-content: center; margin: 0 0 8px; }
#order-standard_cart .featured-tlds-container .row > [class*="col-sm-4"]:empty { display: none; }
#order-standard_cart .featured-tld { padding: 22px 20px; text-align: center; background: #fff; border: 1px solid var(--border-hi); border-radius: var(--r-lg); box-shadow: var(--s-card); }
#order-standard_cart .featured-tld .img-container img { max-height: 44px; width: auto; }
#order-standard_cart .featured-tld .price { margin-top: 10px; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; color: var(--t1); }
#order-standard_cart .domain-pricing > h4 { margin: 26px 0 12px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--t5); }
#order-standard_cart .tld-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
#order-standard_cart .tld-filters .badge { padding: 8px 16px; border: 1px solid var(--border-hi); border-radius: 999px; background: #fff; color: var(--t3); font-size: 0.82rem; font-weight: 700; text-decoration: none; }
#order-standard_cart .tld-filters .badge:hover { border-color: var(--blue); color: var(--blue); }
#order-standard_cart .tld-filters .badge.badge-success { background: var(--blue); border-color: var(--blue); color: #fff; }
#order-standard_cart .domain-pricing .bg-white { overflow: hidden; background: #fff !important; border: 1px solid var(--border-hi); border-radius: var(--r-lg); box-shadow: var(--s-card); }
#order-standard_cart .tld-pricing-header { padding: 13px 0; background: #F1F5F9; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t4); }
#order-standard_cart .tld-row { align-items: center; padding: 14px 0; border-top: 1px solid var(--border); font-size: 0.95rem; color: var(--t2); }
#order-standard_cart .tld-row:hover { background: #F8FAFF; }
#order-standard_cart .tld-row.no-tlds { color: var(--t5); }
#order-standard_cart .tld-row small { color: var(--t5); }
#order-standard_cart .tld-sale-group { margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: linear-gradient(135deg, #F97316, #EF4444); color: #fff; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

/* Promo cards: web hosting + transfer */
#order-standard_cart .cart-body > .row:last-child > [class*="col-md-6"] { display: flex; margin-top: 28px; }
#order-standard_cart .domain-promo-box {
  display: flex; flex-direction: column; width: 100%; padding: 26px 26px 24px; text-align: left; background: #fff !important; border: 1px solid var(--border-hi) !important; border-radius: var(--r-lg) !important; box-shadow: var(--s-card);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
#order-standard_cart .domain-promo-box:hover { transform: translateY(-3px); box-shadow: var(--s-hover); border-color: color-mix(in srgb, var(--blue) 40%, transparent) !important; }
#order-standard_cart .domain-promo-box > .clearfix { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: center; margin-bottom: 12px; }
#order-standard_cart .domain-promo-box > .clearfix > i {
  grid-row: 1 / span 2; float: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0; border-radius: 16px; color: #fff;
  font-size: 1.4rem !important; background: linear-gradient(135deg, var(--blue), var(--blue-mid)); box-shadow: 0 10px 20px -8px var(--blue);
}
#order-standard_cart .domain-promo-box:nth-child(1) > .clearfix > i { background: linear-gradient(135deg, var(--blue), var(--blue-mid)); }
#order-standard_cart .domain-promo-box > .clearfix > i.fa-globe { background: linear-gradient(135deg, #8B5CF6, #6D28D9); box-shadow: 0 10px 20px -8px #8B5CF6; }
#order-standard_cart .domain-promo-box h3 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; color: var(--t1); white-space: normal; }
#order-standard_cart .domain-promo-box > .clearfix > p { margin: 2px 0 0; font-size: 0.86rem; font-weight: 600; color: var(--blue) !important; }
#order-standard_cart .domain-promo-box > p { margin: 0 0 18px; font-size: 0.9rem; color: var(--t5); }
#order-standard_cart .domain-promo-box > p.small { margin: 12px 0 0; font-size: 0.76rem; }
#order-standard_cart .domain-promo-box > .btn {
  align-self: flex-start; margin-top: auto; padding: 11px 24px; border-radius: 999px; font-size: 0.9rem; font-weight: 700; border: 0 !important; color: #fff !important;
  background: linear-gradient(135deg, var(--blue), var(--blue-mid)) !important; box-shadow: var(--s-blue);
}
#order-standard_cart .domain-promo-box > .btn-warning { background: linear-gradient(135deg, #F59E0B, #D97706) !important; box-shadow: 0 6px 16px -4px rgba(245, 158, 11, 0.55); }
#order-standard_cart .domain-promo-box > p + .btn, #order-standard_cart .domain-promo-box > .btn + p.small { margin-top: 0; }

@media (max-width: 767.98px) {
  #order-standard_cart .domain-checker-bg { padding: 22px 18px 20px; border-radius: 16px; }
  #order-standard_cart .domain-checker-bg #message { flex: 1 1 100%; height: 100px; min-height: 100px; }
  #order-standard_cart .domain-checker-bg .domain-check-availability { flex: 1 1 100%; height: 52px; }
  #order-standard_cart .domain-promo-box { padding: 22px 20px; }
}

#domainSuggestions .domain-suggestion .promo { margin-left: 10px; }
#order-standard_cart .tld-pricing-header [class*="col-"], #order-standard_cart .tld-pricing-header .row > div { border: 0 !important; background: transparent !important; box-shadow: none !important; }
#order-standard_cart .tld-row [class*="col-"] { border: 0 !important; }
#order-standard_cart .tld-pricing-header .tld-column { background: transparent !important; }
#order-standard_cart .domain-promo-box > .clearfix { order: 0; }
#order-standard_cart .domain-promo-box > p { order: 1; }
#order-standard_cart .domain-promo-box > p.small { order: 1; margin: 0 0 18px; }
#order-standard_cart .domain-promo-box > .btn { order: 2; }
#order-standard_cart .domain-promo-box > .btn .fa-arrow-right { display: inline-block; margin-left: 6px; font-size: 0.8em; vertical-align: middle; }
@media (max-width: 767.98px) { #order-standard_cart .domain-checker-bg #message { height: 110px; min-height: 110px; } #order-standard_cart .domain-checker-bg .domain-check-availability { height: 54px; } }


/* ═════════ Domain bundle: .com + .org + .net in one click (domain registration page) ═════════ */
.ac-bundle {
  position: relative; overflow: hidden; margin: 22px 0 0; padding: 24px 26px 20px; background: linear-gradient(135deg, #F5F8FF 0%, #FFFFFF 60%); border: 1.5px solid #CFDDFB; border-radius: var(--r-lg);
  box-shadow: 0 14px 30px -20px color-mix(in srgb, var(--blue) 45%, transparent);
}
.ac-bundle::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--blue), var(--indigo)); }
.ac-bundle.is-hidden { display: none; }
.ac-bundle-head h3 { margin: 8px 0 4px; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; color: var(--t1); }
.ac-bundle-head p { margin: 0; font-size: 0.9rem; color: var(--t5); }
.ac-bundle-badge { display: inline-block; padding: 3px 11px; border-radius: 999px; background: linear-gradient(135deg, var(--blue), var(--indigo)); color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ac-bundle-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 16px; }
.ac-bundle-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #fff; border: 1.5px solid var(--border-hi); border-radius: var(--r-md); }
.ac-bundle-name { font-size: 1.02rem; color: var(--t2); word-break: break-all; }
.ac-bundle-name b { font-weight: 800; color: var(--t1); }
.ac-bundle-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: var(--t5); }
.ac-bundle-price { font-size: 0.95rem; font-weight: 800; color: var(--t1); min-height: 1.3em; }
.ac-bundle-tile.is-ok { border-color: #A7F3D0; background: linear-gradient(180deg, #fff, #F3FDF8); }
.ac-bundle-tile.is-ok .ac-bundle-status { color: #047857; }
.ac-bundle-tile.is-ok .ac-bundle-status::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #10B981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat; }
.ac-bundle-tile.is-taken { opacity: 0.7; background: #F8FAFC; }
.ac-bundle-tile.is-taken .ac-bundle-name { text-decoration: line-through; text-decoration-color: #CBD5E1; }
.ac-bundle-tile.is-checking .ac-bundle-status { color: var(--t5); }
.ac-bundle-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.ac-bundle-total span { display: block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t5); }
.ac-bundle-total strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--t1); }
.ac-bundle-btn {
  padding: 13px 28px; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--blue), var(--blue-mid)); color: #fff; font-size: 0.98rem; font-weight: 700; cursor: pointer;
  box-shadow: var(--s-blue); transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
}
.ac-bundle-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 24px -6px color-mix(in srgb, var(--blue) 60%, transparent); }
.ac-bundle-btn:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
.ac-bundle-msg { margin: 12px 0 0; min-height: 0; font-size: 0.88rem; color: var(--t4); }
.ac-bundle-msg:empty { display: none; }
.ac-bundle-msg a { color: var(--blue); font-weight: 700; }
.ac-bundle-check { display: inline-block; vertical-align: -3px; width: 18px; height: 18px; border-radius: 50%; background: #10B981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.ac-bundle.is-done { border-color: #A7F3D0; background: linear-gradient(135deg, #ECFDF5 0%, #FFFFFF 60%); }
@media (max-width: 767.98px) {
  .ac-bundle { padding: 20px 18px 16px; }
  .ac-bundle-tiles { grid-template-columns: 1fr; gap: 10px; }
  .ac-bundle-tile { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .ac-bundle-foot { flex-direction: column; align-items: stretch; }
  .ac-bundle-btn { width: 100%; }
}


/* Search button: beats the order form's own absolute positioning (it loads after this file on the live site) */
#order-standard_cart .domain-checker-container.domain-checker-advanced #btnCheckAvailability.domain-check-availability {
  position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important;
  flex: 0 0 auto; width: auto !important; min-width: 170px; height: 100px !important; margin: 0 !important;
}
@media (max-width: 767.98px) {
  #order-standard_cart .domain-checker-container.domain-checker-advanced #btnCheckAvailability.domain-check-availability { flex: 1 1 100%; width: 100% !important; height: 54px !important; }
}

#order-standard_cart .featured-tld .price, #order-standard_cart .featured-tld .price.com { background: transparent !important; color: var(--t1) !important; padding: 0 !important; border: 0 !important; }
@media (max-width: 767.98px) { #order-standard_cart .domain-checker-bg #message { flex: 1 1 100% !important; } }


/* Inline hint that replaces the black tooltip on the domain search box */
.ac-hero-error[hidden] { display: none !important; }
.ac-hero-error { flex: 0 0 100%; margin: 4px 0 0; padding: 8px 14px; border-radius: 10px; background: #fff; color: #B91C1C; font-size: 0.85rem; font-weight: 600; }
.domain-checker-bg #message.ac-invalid { box-shadow: 0 0 0 3px #FCA5A5, 0 10px 24px -12px rgba(15, 23, 42, 0.45); }
#frmProductDomain .ac-hero-error { background: #FEF2F2; border: 1px solid #FECACA; margin-top: 10px; }
#frmProductDomain #message.ac-invalid { border-color: #EF4444 !important; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12); }


/* TLD pricing table on phones: each extension becomes a clean card with labelled prices */
@media (max-width: 767.98px) {
  #order-standard_cart .tld-pricing-header { display: none !important; }
  #order-standard_cart .domain-pricing .bg-white { background: transparent !important; border: 0; box-shadow: none; overflow: visible; }
  #order-standard_cart .tld-row.filtered-row {
    display: block; margin: 0 0 12px; padding: 16px 16px 12px; background: #fff; border: 1px solid var(--border-hi) !important; border-radius: var(--r-lg); box-shadow: var(--s-card);
  }
  #order-standard_cart .tld-row.filtered-row:hover { background: #fff; }
  #order-standard_cart .tld-row.filtered-row > [class*="col-md-4"] { display: flex; align-items: center; gap: 8px; max-width: none; width: 100%; padding: 0 0 12px !important; font-size: 1.2rem; text-align: left; }
  #order-standard_cart .tld-row.filtered-row > [class*="col-md-4"] strong { font-weight: 800; letter-spacing: -0.01em; color: var(--t1); }
  #order-standard_cart .tld-row.filtered-row > [class*="col-md-8"] { max-width: none; width: 100%; padding: 0; }
  #order-standard_cart .tld-row.filtered-row > [class*="col-md-8"] > .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
  #order-standard_cart .tld-row.filtered-row > [class*="col-md-8"] > .row > div {
    max-width: none; width: auto; flex: none; padding: 10px 6px; border-radius: var(--r-md); background: #F8FAFC; text-align: center; font-size: 0.92rem; font-weight: 700; color: var(--t1); line-height: 1.25; white-space: nowrap;
  }
  #order-standard_cart .tld-row.filtered-row > [class*="col-md-8"] > .row > div::before {
    display: block; margin-bottom: 4px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t5);
  }
  #order-standard_cart .tld-row.filtered-row > [class*="col-md-8"] > .row > div:nth-child(1)::before { content: "Register"; }
  #order-standard_cart .tld-row.filtered-row > [class*="col-md-8"] > .row > div:nth-child(2)::before { content: "Transfer"; }
  #order-standard_cart .tld-row.filtered-row > [class*="col-md-8"] > .row > div:nth-child(3)::before { content: "Renew"; }
  #order-standard_cart .tld-row.filtered-row small { display: block; margin-top: 2px; font-size: 0.7rem; font-weight: 500; color: var(--t5); }
}
/* very small phones: price lines stack as a tidy list (label left, price right) */
@media (max-width: 479.98px) {
  #order-standard_cart .tld-row.filtered-row > [class*="col-md-8"] > .row { grid-template-columns: 1fr; gap: 6px; }
  #order-standard_cart .tld-row.filtered-row > [class*="col-md-8"] > .row > div {
    display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; column-gap: 10px; padding: 10px 14px; text-align: right; font-size: 0.95rem;
  }
  #order-standard_cart .tld-row.filtered-row > [class*="col-md-8"] > .row > div::before { margin: 0; text-align: left; font-size: 0.7rem; }
  #order-standard_cart .tld-row.filtered-row small { display: inline; margin: 0; font-size: 0.74rem; }
  #order-standard_cart .tld-row.filtered-row > [class*="col-md-8"] > .row > div br { display: none; }
}


/* ═════════ Logged-in mobile navigation: slim top bar + bottom tab bar with bottom sheets (below 992px) ═════════ */
.ac-cart-mobile { display: none; }
.ac-lbl-short { display: none; }
@media (max-width: 991.98px) {
  :root { --header-h: 60px; --tabbar-h: 62px; --tabbar-pad: 14px; }
  @supports (padding: max(1px, env(safe-area-inset-bottom))) { :root { --tabbar-pad: max(14px, env(safe-area-inset-bottom, 0px)); } }
  .nav-logo img { height: 34px; }
  .nav-logo { margin-right: 8px; }

  /* top bar: cart + menu buttons */
  .ac-cart-mobile {
    position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-right: 4px; border-radius: 12px;
    color: var(--t2); font-size: 1.05rem; text-decoration: none; transition: background 0.2s;
  }
  .ac-cart-mobile:hover, .ac-cart-mobile:active { background: #F1F5F9; color: var(--blue); text-decoration: none; }
  .ac-cart-count {
    position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--blue); color: #fff;
    font-size: 0.68rem; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff;
  }
  .ac-cart-item { display: none !important; }
  .navbar-toggler { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: 12px; }

  /* hamburger panel: account first, then the website links */
  .ac-header .navbar-collapse {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 10px 16px 18px; background: #fff; border-top: 1px solid var(--border);
    box-shadow: 0 24px 40px -16px rgba(15, 23, 42, 0.28); max-height: calc(100vh - var(--header-h) - 8px); overflow-y: auto;
  }
  .ac-header .navbar-collapse.show { display: flex; flex-direction: column; }
  .ac-header .ac-account-nav { order: -1; margin: 0 0 8px; padding: 0 0 10px; border: 0; border-bottom: 1px solid var(--border); flex-direction: column; align-items: stretch; width: 100% !important; }
  .ac-header .ac-site-links { margin: 0; padding: 0; flex-direction: column; align-items: stretch; width: 100% !important; }
  .ac-header .ac-site-links .nav-link { padding: 13px 6px !important; font-size: 1rem; font-weight: 600; border-bottom: 1px solid var(--border); }
  .ac-header .ac-site-links .nav-item:last-child .nav-link { border-bottom: 0; }
  #Secondary_Navbar-Account > a { display: flex; align-items: center; gap: 12px; padding: 8px 4px !important; font-weight: 700; color: var(--t1) !important; }
  #Secondary_Navbar-Account > a::before {
    content: ""; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / 18px no-repeat, linear-gradient(135deg, var(--blue), var(--indigo));
  }
  #Secondary_Navbar-Account > a::after { margin-left: auto; }
  #Secondary_Navbar-Account .dropdown-menu {
    position: static !important; float: none; transform: none !important; width: 100%; margin: 6px 0 4px; padding: 6px; border: 0 !important; border-radius: 14px; background: #F8FAFC !important; box-shadow: none;
  }
  #Secondary_Navbar-Account .dropdown-menu a.dropdown-item { padding: 11px 12px !important; font-size: 0.95rem; font-weight: 500; }
  #Secondary_Navbar-Account-Logout a.dropdown-item { color: #DC2626 !important; font-weight: 600; }

  /* the client-area menu becomes a bottom tab bar */
  body.ac-has-rail { padding-bottom: calc(var(--tabbar-h) + var(--tabbar-pad)); }
  .ac-has-rail .ac-subnav {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1040; background: #fff !important; border: 0; border-top: 1px solid var(--border);
    box-shadow: 0 -10px 28px -16px rgba(15, 23, 42, 0.28); padding-bottom: var(--tabbar-pad);
  }
  .ac-has-rail .ac-subnav .navbar { display: block; padding: 0; }
  .ac-has-rail .ac-subnav .container { display: block; width: 100%; max-width: none; padding: 0; margin: 0; }
  .ac-has-rail .ac-subnav-list {
    display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; margin: 0; padding: 6px 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  }
  .ac-has-rail .ac-subnav-list::-webkit-scrollbar { display: none; }
  .ac-has-rail .ac-subnav-list > li { flex: 1 0 56px; min-width: 56px; margin: 0 !important; padding: 0; scroll-snap-align: center; }
  .ac-has-rail .ac-subnav-list > li > a {
    flex-direction: column; justify-content: center; gap: 3px; padding: 5px 2px !important; border: 0 !important; border-radius: 12px; background: transparent !important;
    color: var(--t5) !important; font-size: 0.66rem; font-weight: 700; line-height: 1.1; text-align: center; box-shadow: none; transform: none;
  }
  .ac-has-rail .ac-subnav-list > li > a::after { display: none; }
  .ac-has-rail .ac-rail-ico {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 28px; border-radius: 999px; font-size: 1.05rem; color: inherit; background: transparent; transition: background 0.2s;
  }
  .ac-has-rail .ac-subnav-list > li.active > a, .ac-has-rail .ac-subnav-list > li.open > a { color: var(--blue) !important; }
  .ac-has-rail .ac-subnav-list > li.active .ac-rail-ico, .ac-has-rail .ac-subnav-list > li.open .ac-rail-ico { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); }
  .ac-has-rail .ac-subnav-list > li.ac-nav-cta > a { color: var(--blue) !important; box-shadow: none; }
  .ac-has-rail .ac-subnav-list > li.ac-nav-cta .ac-rail-ico { background: linear-gradient(135deg, var(--blue), var(--blue-mid)); color: #fff; box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--blue) 60%, transparent); }
  .ac-has-rail .ac-lbl-full { display: none; }
  .ac-has-rail .ac-lbl-short { display: block; }

  /* submenus open as a bottom sheet above the tab bar */
  .ac-has-rail .ac-subnav-list > li.ac-has-sub > .dropdown-menu {
    position: fixed; left: 10px; right: 10px; top: auto; bottom: calc(var(--tabbar-h) + var(--tabbar-pad) + 10px); width: auto; min-width: 0; margin: 0; padding: 10px 8px 8px;
    max-height: 62vh; overflow-y: auto; border: 0 !important; border-radius: 20px; background: #fff !important; box-shadow: 0 28px 60px -20px rgba(15, 23, 42, 0.45); z-index: 1045;
    display: block; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(14px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .ac-has-rail .ac-subnav-list > li.ac-has-sub.open > .dropdown-menu { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s; }
  .ac-has-rail .ac-subnav-list > li.ac-has-sub.open::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--tabbar-pad)); background: rgba(15, 23, 42, 0.38); z-index: -1;
  }
  .ac-has-rail .ac-fly-title { display: block; padding: 6px 12px 10px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--t5); }
  .ac-has-rail .ac-flyout li.dropdown-item { padding: 0; }
  .ac-has-rail .ac-flyout li.dropdown-item > a.dropdown-item { display: block; padding: 13px 12px !important; border-radius: 12px; font-size: 1rem; font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) { .ac-has-rail .ac-subnav-list > li.ac-has-sub > .dropdown-menu { transition: none; } }


/* Phone menu (logged in): account items instead of website links */
@media (max-width: 991.98px) {
  .ac-has-rail .ac-header .ac-site-links { display: none !important; }
  .ac-has-rail .ac-header .ac-account-nav { margin: 0; padding: 0; border: 0; }
  /* "Hello, Name" becomes a header row, and the account menu is always open underneath it */
  .ac-has-rail #Secondary_Navbar-Account > a { pointer-events: none; padding: 6px 4px 10px !important; }
  .ac-has-rail #Secondary_Navbar-Account > a::after { display: none; }
  .ac-has-rail #Secondary_Navbar-Account .dropdown-menu { display: block !important; margin: 0; padding: 4px 0 0; background: transparent !important; }
  .ac-has-rail #Secondary_Navbar-Account .dropdown-menu li.dropdown-item { padding: 0; }
  .ac-has-rail #Secondary_Navbar-Account .dropdown-menu a.dropdown-item { display: flex; align-items: center; padding: 13px 8px !important; border-radius: 10px; font-size: 1rem; font-weight: 600; color: var(--t2) !important; }
  .ac-has-rail #Secondary_Navbar-Account .dropdown-menu a.dropdown-item:active, .ac-has-rail #Secondary_Navbar-Account .dropdown-menu a.dropdown-item:hover { background: #F1F5F9 !important; }
  .ac-has-rail #Secondary_Navbar-Account .dropdown-divider { margin: 6px 0; border-top: 1px solid var(--border); }
  .ac-has-rail #Secondary_Navbar-Account #Secondary_Navbar-Account-Logout a.dropdown-item { color: #DC2626 !important; }
  /* six tabs fit on very small phones too */
  .ac-has-rail .ac-subnav-list > li { flex: 1 1 0; min-width: 48px; }
}


/* Mobile nav refinements: even tabs, aligned Ticket tab, calmer highlights, nicer bottom sheet */
@media (max-width: 991.98px) {
  .ac-has-rail .ac-subnav-list { padding: 6px 2px 4px; }
  .ac-has-rail .ac-subnav-list > li { flex: 1 1 0; min-width: 0; margin: 0 !important; }
  .ac-has-rail .ac-subnav-list > li > a { gap: 2px; margin: 0 !important; padding: 4px 0 !important; font-size: 0.62rem; font-weight: 600; letter-spacing: -0.005em; }
  .ac-has-rail .ac-rail-label { white-space: nowrap; }
  .ac-has-rail .ac-rail-ico { width: 40px; height: 26px; font-size: 1rem; }
  /* Ticket tab: same size and baseline as the rest (the old desktop pill style no longer applies on phones) */
  .ac-has-rail .ac-subnav-list > li.ac-nav-cta > a { margin: 0 !important; padding: 4px 0 !important; border-radius: 12px !important; background: transparent !important; box-shadow: none !important; }
  .ac-has-rail .ac-subnav-list > li.ac-nav-cta .ac-rail-ico { width: 40px; height: 26px; box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--blue) 55%, transparent); }
  /* while a sheet is open, only that tab stays highlighted */
  .ac-has-rail .ac-subnav-list:has(> li.open) > li.active:not(.open) > a { color: var(--t5) !important; }
  .ac-has-rail .ac-subnav-list:has(> li.open) > li.active:not(.open) .ac-rail-ico { background: transparent; color: inherit; }

  /* bottom sheet: grabber, bigger tap rows with a chevron, header never dimmed */
  .ac-has-rail .ac-subnav-list > li.ac-has-sub > .dropdown-menu { padding: 8px 6px 6px; border-radius: 22px; }
  .ac-has-rail .ac-subnav-list > li.ac-has-sub > .dropdown-menu::before { content: ""; display: block; width: 38px; height: 4px; margin: 4px auto 8px; border-radius: 999px; background: #CBD5E1; }
  .ac-has-rail .ac-subnav-list > li.ac-has-sub.open::before { top: var(--header-h); background: rgba(15, 23, 42, 0.4); }
  .ac-has-rail .ac-fly-title { padding: 2px 14px 8px; font-size: 0.72rem; letter-spacing: 0.1em; }
  .ac-has-rail .ac-flyout li.dropdown-item > a.dropdown-item {
    display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 14px !important; border-radius: 14px; font-size: 1rem; font-weight: 600; color: var(--t1) !important;
  }
  .ac-has-rail .ac-flyout li.dropdown-item > a.dropdown-item::after {
    content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-left: 12px; border-top: 2px solid #94A3B8; border-right: 2px solid #94A3B8; transform: rotate(45deg);
  }
  .ac-has-rail .ac-flyout li.dropdown-item > a.dropdown-item:active { background: #EEF4FF !important; }
  .ac-has-rail .ac-flyout .dropdown-divider { margin: 4px 14px; border-top: 1px solid var(--border); }
}


/* ═════════ Hosting plans page (store category): conversion-focused plan cards ═════════ */
#order-standard_cart .cart-body:has(#products) .header-lined p { margin: 8px 0 0; max-width: 680px; font-size: 1rem; line-height: 1.6; color: var(--t5); }
#order-standard_cart #products .row.row-eq-height { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; margin: 18px 0 6px; padding-top: 6px; }
#order-standard_cart #products .row.row-eq-height:not(:has(.product)) { display: none; }
#order-standard_cart #products .row.row-eq-height > [class*="col-"] { width: auto; max-width: none; flex: none; float: none; padding: 0; }

#order-standard_cart #products .product.ac-plan {
  position: relative; display: flex; flex-direction: column; height: 100%; margin: 0; padding: 30px 28px 26px; text-align: left; background: #fff; border: 1.5px solid var(--border-hi); border-radius: 20px;
  box-shadow: var(--s-card); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
#order-standard_cart #products .product.ac-plan:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--blue) 50%, transparent); box-shadow: var(--s-hover); }
#order-standard_cart #products .product.ac-plan-best {
  border-color: var(--blue); background: linear-gradient(180deg, #fff 55%, #F5F8FF); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 12%, transparent), 0 26px 46px -26px color-mix(in srgb, var(--blue) 60%, transparent);
}
.ac-ribbon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 5px 16px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(135deg, var(--blue), var(--indigo)); color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--blue) 70%, transparent);
}
#order-standard_cart .product.ac-plan > header { order: 0; margin: 0; padding: 0; background: none; border: 0; }
#order-standard_cart .product.ac-plan > header span { display: block; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; color: var(--t1); }
#order-standard_cart .product.ac-plan > footer { display: contents !important; }

/* price */
#order-standard_cart .product.ac-plan .product-pricing { order: 1; margin: 14px 0 20px; padding: 0; background: none; border: 0; text-align: left; font-size: inherit; }
.ac-from { display: block; margin-bottom: 2px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t5); }
.ac-price { display: flex; align-items: baseline; gap: 4px; }
.ac-amt { font-size: 2.7rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--t1); }
.ac-per { font-size: 1.05rem; font-weight: 600; color: var(--t5); }
.ac-price-note { margin-top: 8px; font-size: 0.82rem; font-weight: 600; color: var(--t5); }

/* features */
#order-standard_cart .product.ac-plan .product-desc { order: 2; flex: 1 1 auto; margin: 0 0 22px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--border); background: none; color: var(--t2); }
.ac-feat, .ac-incl { margin: 0; padding: 0; list-style: none; }
.ac-feat li { position: relative; padding: 7px 0 7px 30px; font-size: 0.96rem; font-weight: 500; line-height: 1.45; color: var(--t2); }
.ac-feat li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 20px; height: 20px; border-radius: 50%; background: #DCFCE7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ac-plan-sub { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--t4); }
.ac-incl { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-hi); }
.ac-incl li { position: relative; padding: 4px 0 4px 24px; font-size: 0.84rem; font-weight: 600; color: var(--t5); }
.ac-incl li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--blue) 12%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232966F3' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* button */
#order-standard_cart .product.ac-plan .btn-order-now {
  order: 3; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 0; padding: 14px 20px; border-radius: 999px; font-size: 1rem; font-weight: 700; text-decoration: none;
  background: #fff !important; color: var(--blue) !important; border: 1.5px solid var(--blue) !important; box-shadow: none; transition: transform 0.15s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
#order-standard_cart .product.ac-plan .btn-order-now:hover { background: var(--blue) !important; color: #fff !important; transform: translateY(-2px); box-shadow: var(--s-blue); }
#order-standard_cart .product.ac-plan-best .btn-order-now { background: linear-gradient(135deg, var(--blue), var(--blue-mid)) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--s-blue); }
#order-standard_cart .product.ac-plan .btn-order-now i { font-size: 0.85em; transition: transform 0.2s; }
#order-standard_cart .product.ac-plan .btn-order-now:hover i { transform: translateX(4px); }

/* help strip */
/* term box: longest term price + how much you save */
.ac-term { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, #ECFDF5, #F0FDF9); border: 1.5px solid #A7F3D0; }
.ac-term-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ac-term-badge { padding: 3px 10px; border-radius: 999px; background: #10B981; color: #fff; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.ac-term-name { font-size: 0.78rem; font-weight: 700; color: #065F46; }
.ac-term-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.ac-term-price strong { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; color: var(--t1); line-height: 1.1; }
.ac-term-price span { font-size: 0.82rem; font-weight: 600; color: #047857; }
.ac-term-save { margin-top: 8px; font-size: 0.95rem; font-weight: 800; color: #047857; }
.ac-term-save span { font-size: 0.78rem; font-weight: 600; color: #065F46; }

/* help banner: bold, impossible to miss */
.ac-plan-help {
  position: relative; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 36px; padding: 30px 34px; border-radius: 22px; color: #fff; overflow: hidden;
  background: radial-gradient(circle at 96% -20%, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0.14) 170px, transparent 171px), linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 60%, var(--indigo) 100%);
  box-shadow: 0 26px 50px -26px color-mix(in srgb, var(--blue) 70%, transparent);
}
.ac-help-ico { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.18); font-size: 1.5rem; }
.ac-help-copy { flex: 1 1 280px; min-width: 0; }
.ac-help-copy strong { display: block; margin: 0 0 4px; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.ac-help-copy span { display: block; margin: 0; font-size: 0.98rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.ac-help-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ac-help-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-size: 0.98rem; font-weight: 700; text-decoration: none; transition: transform 0.15s, background 0.2s, color 0.2s; }
.ac-help-primary { background: #fff; color: var(--blue-mid) !important; box-shadow: 0 10px 22px -10px rgba(15, 23, 42, 0.5); }
.ac-help-primary:hover { transform: translateY(-2px); text-decoration: none; }
.ac-help-ghost { background: rgba(255, 255, 255, 0.14); border: 1.5px solid rgba(255, 255, 255, 0.55); color: #fff !important; }
.ac-help-ghost:hover { background: rgba(255, 255, 255, 0.26); text-decoration: none; }

@media (max-width: 575.98px) {
  #order-standard_cart #products .product.ac-plan { padding: 26px 20px 22px; }
  .ac-amt { font-size: 2.3rem; }
  .ac-plan-help { padding: 24px 20px; gap: 16px; }
  .ac-help-copy strong { font-size: 1.2rem; }
  .ac-help-actions { width: 100%; flex-direction: column; }
  .ac-help-actions a { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { #order-standard_cart #products .product.ac-plan, .ac-plan-help a { transition: none; } }

/* plan cards: win over the order form's own float/width/padding rules */
#order-standard_cart .products .product.ac-plan div.product-desc { float: none !important; width: 100% !important; padding: 18px 0 0 !important; font-size: 1rem !important; }
#order-standard_cart .products .product.ac-plan header { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; }
#order-standard_cart .products .product.ac-plan header span { padding: 0 !important; }
#order-standard_cart .products .product.ac-plan footer { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
#order-standard_cart .products .product.ac-plan .product-pricing { float: none !important; width: 100% !important; }
#order-standard_cart .products .product.ac-plan .btn-order-now { float: none !important; }


/* Android / rounded-corner phones: keep tab labels off the screen edge and away from the corners */
@media (max-width: 991.98px) {
  .ac-has-rail .ac-subnav-list { padding: 6px 10px 4px; }
  @supports (padding: max(1px, env(safe-area-inset-left))) {
    .ac-has-rail .ac-subnav-list { padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
  }
}


/* ──────────────────────────────────────────────────────────────────────────────
   Client-area polish (ported from Astro by WebGradee): sidebar, status pills,
   responsive tables, forms, touch states, module output, service/domain pages
   ────────────────────────────────────────────────────────────────────────────── */
/* ═════════ Native sidebar panels (Overview, Your Info, Shortcuts …): clean list ═════════ */
body .sidebar .card-sidebar > .card-header,
body .sidebar .panel-sidebar > .card-header { display: flex; align-items: center; padding: 16px 6px 8px; cursor: pointer; }
body .sidebar .card-title { display: flex; align-items: center; gap: 10px; flex: 1; margin: 0; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; line-height: 1.2; }
body .sidebar .card-title > i:first-child { width: 18px; text-align: center; font-size: 0.85rem; }
body .sidebar .card-minimise { margin-left: auto; color: var(--t5); font-size: 0.7rem; transition: transform 0.2s; }
body .sidebar .card-body { padding: 2px 0 8px; }
body .sidebar .list-group { gap: 2px; display: flex; flex-direction: column; background: transparent; }
body .sidebar .list-group-item,
body .sidebar a.list-group-item {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 14px;
  border: 0 !important; border-radius: 10px !important; background: transparent !important;
  color: var(--t3) !important; font-size: 0.9rem; font-weight: 500; line-height: 1.35; transition: background 0.15s, color 0.15s;
}
body .sidebar .list-group-item i { color: var(--t5); width: 18px; margin: 0; text-align: center; flex: 0 0 auto; }
body .sidebar .list-group-item:hover,
body .sidebar .list-group-item:focus { background: color-mix(in srgb, var(--blue) 7%, transparent) !important; color: var(--blue) !important; text-decoration: none; }
body .sidebar .list-group-item:hover i { color: var(--blue); }
body .sidebar .list-group-item.active,
body .sidebar .list-group-item.active:hover,
body .sidebar .list-group-item.active:focus {
  background: color-mix(in srgb, var(--blue) 11%, #fff) !important; color: var(--blue) !important; font-weight: 700;
  box-shadow: inset 3px 0 0 var(--blue);
}
body .sidebar .list-group-item.active i { color: var(--blue); }
body .sidebar .list-group-item.disabled { opacity: 0.5; }
body .sidebar .list-group-item .badge { margin-left: auto; background: color-mix(in srgb, var(--blue) 12%, #fff); color: var(--blue); border-radius: 999px; font-size: 0.7rem; padding: 3px 8px; font-weight: 700; }
body .sidebar .card-footer { padding: 4px 6px 10px; background: transparent; border: 0; }
body .sidebar .list-group-item .sidebar-menu-item-icon { font-size: 1rem; color: var(--blue); }
body .sidebar .list-group-item .item-text { flex: 1; min-width: 0; }
body .sidebar .list-group-item .badge.badge-info,
body .sidebar .list-group-item .badge.badge-light { background: color-mix(in srgb, var(--blue) 12%, #fff); color: var(--blue); }
body .sidebar .list-group-item:not(.active) .badge { background: #eef1f6; color: var(--t3); }

/* ═════════ Status badges (services, domains, invoices, tickets): readable on any state ═════════ */
.status {
  display: inline-block; min-width: 84px; padding: 5px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
  line-height: 1.3; text-align: center; letter-spacing: 0.01em;
  background: #EEF1F6 !important; color: #475569 !important; border: 1px solid #CBD5E1 !important;
}
.status.status-active, .status.status-paid, .status.status-open-ticket, .status.status-completed, .status.status-answered-ticket, .status.status-registered {
  background: #DCFCE7 !important; color: #166534 !important; border-color: #86EFAC !important;
}
.status.status-pending, .status.status-pending-transfer, .status.status-pending-registration, .status.status-payment-pending, .status.status-draft, .status.status-on-hold, .status.status-in-progress, .status.status-open {
  background: #FEF3C7 !important; color: #92400E !important; border-color: #FCD34D !important;
}
.status.status-suspended, .status.status-expired, .status.status-grace, .status.status-redemption, .status.status-customer-reply, .status.status-delivered, .status.status-dead {
  background: #FFEDD5 !important; color: #9A3412 !important; border-color: #FDBA74 !important;
}
.status.status-terminated, .status.status-cancelled, .status.status-fraud, .status.status-unpaid, .status.status-overdue, .status.status-collections, .status.status-transferred-away, .status.status-refunded-failed, .status.status-rejected {
  background: #FEE2E2 !important; color: #991B1B !important; border-color: #FCA5A5 !important;
}
.status.status-closed, .status.status-refunded, .status.status-inactive, .status.status-unconfirmed, .status.status-lost { background: #EEF1F6 !important; color: #475569 !important; border-color: #CBD5E1 !important; }
.status.status-answered, .status.status-payment-plan, .status.status-new { background: color-mix(in srgb, var(--blue) 11%, #fff) !important; color: var(--blue-mid) !important; border-color: color-mix(in srgb, var(--blue) 30%, #fff) !important; }

/* Row action buttons: one height and one corner style (split button + View Details) */
.table-list .btn, .dataTable .btn, #tableServicesList .btn, #tableDomainsList .btn, #tableInvoicesList .btn,
.table-list .btn-group > .btn, .table-list .btn-group .dropdown-toggle { border-radius: 10px !important; min-height: 40px; padding: 8px 16px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.table-list .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.table-list .btn-group > .btn + .btn, .table-list .btn-group > .dropdown-toggle { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; padding-left: 12px; padding-right: 12px; }


/* ═════════ Responsive data tables (services, domains, invoices, tickets, quotes) ═════════ */
.table-container, .dataTables_wrapper { max-width: 100%; }
.table-list { width: 100% !important; }
.dataTables_wrapper .dataTables_filter input { max-width: 100%; border-radius: 10px; }
.dataTables_wrapper .dataTables_paginate { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }

@media (max-width: 767.98px) {
  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { float: none; text-align: left; margin-bottom: 10px; }
  .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; text-align: left; }
  .dataTables_wrapper .dataTables_filter input { flex: 1 1 auto; min-width: 0; width: auto !important; max-width: 100%; margin: 0 !important; }
  .dataTables_wrapper .dataTables_length select { flex: 0 0 auto; width: auto; margin: 0 !important; }
  .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { float: none; text-align: left; justify-content: flex-start; margin-top: 10px; }

  /* each row becomes a card; columns become "label : value" lines (labels are set from the header by the footer script) */
  table.table-list, table.table-list tbody, table.table-list tr, table.table-list td { display: block; width: 100% !important; }
  table.table-list { border: 0 !important; background: transparent !important; }
  table.table-list thead { display: none !important; }
  table.table-list tbody tr {
    margin: 0 0 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--border-hi) !important; border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }
  table.table-list tbody tr:hover { background: #fff !important; }
  table.table-list td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 0 !important;
    border: 0 !important; text-align: right !important; word-break: break-word;
  }
  table.table-list td::before {
    content: attr(data-label); flex: 0 0 38%; max-width: 38%; text-align: left; font-size: 0.7rem; font-weight: 800;
    letter-spacing: 0.07em; text-transform: uppercase; color: var(--t5);
  }
  table.table-list td[data-label=""]::before, table.table-list td:not([data-label])::before { display: none; }
  table.table-list td.ac-td-main, table.table-list td:first-child:not(.ac-td-ssl):not(.ac-td-blank) {
    display: block; text-align: left !important; font-size: 1rem; padding: 0 0 10px !important; margin-bottom: 4px;
    border-bottom: 1px solid var(--border) !important;
  }
  table.table-list td.ac-td-main::before, table.table-list td:first-child::before { display: none; }
  table.table-list tbody tr { position: relative; }
  table.table-list td.ac-td-ssl { position: absolute; top: 14px; right: 14px; width: auto !important; padding: 0 !important; display: block; }
  table.table-list td.ac-td-ssl::before { display: none; }
  table.table-list td.ac-td-ssl img { width: 22px; height: auto; display: block; }
  table.table-list td.ac-td-main { padding-right: 38px !important; box-sizing: border-box; }
  /* billing cycle (the small text after the price) sits on its own line, right-aligned */
  table.table-list td:has(> small) { flex-wrap: wrap; }
  table.table-list td > small { flex: 0 0 100%; margin: 2px 0 0; text-align: right; font-size: 0.78rem; font-weight: 600; color: var(--t5); }
  table.table-list td.ac-td-blank { display: none; }
  table.table-list td:empty, table.table-list td.dataTables_empty::before { display: none; }
  table.table-list td.dataTables_empty { display: block; text-align: center !important; }
  table.table-list td .btn, table.table-list td .btn-group { max-width: 100%; }
  table.table-list td .btn-group { display: inline-flex; flex-wrap: nowrap; }

  /* dashboard list rows (status | product | buttons): stack and let the buttons wrap */
  .ac-panel .list-group-item, .ac-panel-body .list-group-item, .ac-panel-body .row { flex-wrap: wrap; gap: 10px; }
  .ac-panel-body [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  .ac-panel-body .btn, .ac-panel-body .btn-group { margin: 2px 4px 2px 0; }
}

/* ═════════ Service status pill in the dashboard / services list (parent forces white text on .label) ═════════ */
.div-service-status .label, .div-service-status .label.status {
  display: inline-block; min-width: 84px; padding: 5px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; line-height: 1.3;
  background: #EEF1F6 !important; color: #475569 !important; border: 1px solid #CBD5E1 !important;
}
.div-service-status .label.label-success, .div-service-status .label.label-active, .div-service-status .label.status-active, .div-service-status .label.product-status-active
  { background: #DCFCE7 !important; color: #166534 !important; border-color: #86EFAC !important; }
.div-service-status .label.label-warning, .div-service-status .label.label-pending, .div-service-status .label.status-pending
  { background: #FEF3C7 !important; color: #92400E !important; border-color: #FCD34D !important; }
.div-service-status .label.label-suspended, .div-service-status .label.status-suspended
  { background: #FFEDD5 !important; color: #9A3412 !important; border-color: #FDBA74 !important; }
.div-service-status .label.label-danger, .div-service-status .label.label-terminated, .div-service-status .label.label-cancelled, .div-service-status .label.status-terminated, .div-service-status .label.status-cancelled, .div-service-status .label.status-fraud
  { background: #FEE2E2 !important; color: #991B1B !important; border-color: #FCA5A5 !important; }

/* ═════════ Sidebar menu items (Shortcuts, Actions, Categories …): icon tile + label ═════════ */
body .sidebar .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; }
body .sidebar .sidebar-menu-item-icon-wrapper {
  flex: 0 0 30px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; background: color-mix(in srgb, var(--blue) 9%, #fff); transition: background 0.15s;
}
body .sidebar .sidebar-menu-item-icon-wrapper .sidebar-menu-item-icon { width: auto; margin: 0; font-size: 0.86rem; color: var(--blue); }
body .sidebar .sidebar-menu-item-label { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; color: inherit; line-height: 1.3; }
body .sidebar .sidebar-menu-item-wrapper .badge { margin-left: auto; flex: 0 0 auto; }
body .sidebar .list-group-item { padding: 7px 10px !important; }
body .sidebar .list-group-item:hover .sidebar-menu-item-icon-wrapper { background: var(--blue); }
body .sidebar .list-group-item:hover .sidebar-menu-item-icon { color: #fff; }
body .sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper { background: var(--blue); }
body .sidebar .list-group-item.active .sidebar-menu-item-icon { color: #fff; }
/* radio-style filter rows (View: Active / Pending …) keep a plain icon, no tile */
body .sidebar .sidebar-menu-item-icon-wrapper:has(.fa-circle, .fa-dot-circle, .fa-check-circle) { background: transparent !important; flex-basis: 22px; width: 22px; }
body .sidebar .list-group-item:hover .sidebar-menu-item-icon-wrapper:has(.fa-circle, .fa-dot-circle) .sidebar-menu-item-icon,
body .sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper:has(.fa-circle, .fa-dot-circle) .sidebar-menu-item-icon { color: var(--blue); }

/* Open Ticket stays pinned to the bottom of the rail while the rest of the menu scrolls (large screens) */
@media (min-width: 992px) {
  body.ac-cta-sticky.ac-has-rail .ac-subnav-list > li.ac-nav-cta {
    position: sticky !important; bottom: 0; z-index: 2; margin-top: auto;
    padding-top: 10px; padding-bottom: 12px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 28%);
  }
}

/* Icons on filled buttons in the sidebar panels (e.g. Support PIN > Generate PIN) are white, not grey */
body .sidebar .btn:not(.btn-default):not(.btn-light):not(.btn-link):not(.btn-secondary):not([class*="btn-outline"]) i,
body .sidebar .btn:not(.btn-default):not(.btn-light):not(.btn-link):not(.btn-secondary):not([class*="btn-outline"]) .fas,
body .sidebar .btn:not(.btn-default):not(.btn-light):not(.btn-link):not(.btn-secondary):not([class*="btn-outline"]) .far,
body .sidebar .btn:not(.btn-default):not(.btn-light):not(.btn-link):not(.btn-secondary):not([class*="btn-outline"]) .fa { color: #fff !important; }

/* ═════════ Forms: one consistent corner style ═════════ */
:root { --r-field: 12px; }
body .form-control, body select.form-control, body .custom-select, body textarea.form-control,
body .field.form-control, body .prepend-icon .field, body .iti input.form-control, body .iti input[type="tel"] { border-radius: var(--r-field); }
body textarea.form-control { border-radius: 14px; }

/* Input groups (icon box + field + reveal / search button): only the OUTER corners are rounded, the joins are square */
body .input-group > .form-control, body .input-group > .custom-select, body .input-group > .input-group-text, body .input-group > .btn,
body .input-group > .input-group-prepend > *, body .input-group > .input-group-append > * { border-radius: 0 !important; }
body .input-group > :first-child, body .input-group > .input-group-prepend:first-child > :first-child {
  border-top-left-radius: var(--r-field) !important; border-bottom-left-radius: var(--r-field) !important;
}
body .input-group > :last-child, body .input-group > .input-group-append:last-child > :last-child {
  border-top-right-radius: var(--r-field) !important; border-bottom-right-radius: var(--r-field) !important;
}
body .input-group > .input-group-prepend:first-child:not(:last-child) > :last-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body .input-group > .input-group-append:last-child:not(:first-child) > :first-child { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
body .input-group-text { background: color-mix(in srgb, var(--blue) 6%, #fff); color: var(--t4); border-color: var(--border-hi); }

/* Password reset / small standalone cards: inset on phones, full-width pill button */
@media (max-width: 575.98px) {
  body[data-ac-tpl^="password-reset"] .card.mw-540 { width: calc(100% - 32px); margin-left: auto; margin-right: auto; }
}
body[data-ac-tpl^="password-reset"] .card.mw-540 .btn-primary { display: block; width: 100%; border-radius: 999px; padding: 13px 24px; font-size: 1rem; font-weight: 700; }
body[data-ac-tpl^="password-reset"] .card.mw-540 .form-group:last-child, body[data-ac-tpl^="password-reset"] .card.mw-540 .text-center { text-align: center; }

/* ═════════ Touch devices: no square grey tap flash; a soft rounded pressed state instead ═════════ */
html, body, a, button, input, select, textarea, label, summary, [role="button"], [role="tab"], .btn, .nav-link, .dropdown-item,
.list-group-item, .card-header, .ac-cycle, .navbar-toggler { -webkit-tap-highlight-color: transparent; }
a:focus, button:focus, .nav-link:focus, .list-group-item:focus { outline: none; }
a:focus-visible, button:focus-visible, .nav-link:focus-visible, .list-group-item:focus-visible, .btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 55%, #fff); outline-offset: 2px; border-radius: 12px;
}
.nav-link, .navbar-nav .nav-link, .nav-tabs .nav-link, .nav-pills .nav-link, .dropdown-item, .list-group-item-action,
.ac-subnav-list > li > a, .ac-flyout .dropdown-item { border-radius: 12px; transition: background-color 0.12s, color 0.12s; }
.nav-link:active, .navbar-nav .nav-link:active, .nav-pills .nav-link:active, .dropdown-item:active, .list-group-item-action:active,
.ac-subnav-list > li > a:active, .ac-flyout li > a:active, .card-header[data-toggle]:active {
  background-color: color-mix(in srgb, var(--blue) 11%, #fff) !important; color: var(--blue) !important; border-radius: 12px !important;
}
@media (hover: none) {
  /* touch screens keep the pressed tint only while pressed; sticky :hover tints would stay stuck after a tap */
  .nav-link:hover, .list-group-item-action:hover, .dropdown-item:hover { background-color: transparent; }
  body .sidebar .list-group-item:hover { background: transparent !important; }
  body .sidebar .list-group-item.active:hover { background: color-mix(in srgb, var(--blue) 11%, #fff) !important; }
}

/* ═════════ Third-party module output on phones (Contabo, NameCrane, cPanel/VPS modules, ...) ═════════ */
#main-body { overflow-x: clip; }
#main-body img, #main-body video, #main-body canvas { max-width: 100%; height: auto; }
#main-body iframe, #main-body svg { max-width: 100%; }
#main-body pre, #main-body code { white-space: pre-wrap; word-break: break-word; max-width: 100%; }
#main-body [class*="col-"], #main-body .row > *, #main-body .card, #main-body .panel, #main-body .tab-pane { min-width: 0; }

@media (max-width: 767.98px) {
  #main-body [style*="width"] { max-width: 100% !important; }
  #main-body [style*="min-width"] { min-width: 0 !important; }
  #main-body .container, #main-body .container-fluid { padding-left: 14px; padding-right: 14px; }
  #main-body .row { margin-left: -6px; margin-right: -6px; }
  #main-body .row > [class*="col-"] { padding-left: 6px; padding-right: 6px; }

  /* tab strips scroll sideways instead of overflowing the screen */
  #main-body .nav-tabs, #main-body .nav-pills, #main-body .product-details-tab-container .nav {
    flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap;
  }
  #main-body .nav-tabs::-webkit-scrollbar, #main-body .nav-pills::-webkit-scrollbar { display: none; }
  #main-body .nav-tabs .nav-item, #main-body .nav-pills .nav-item { flex: 0 0 auto; }
  #main-body .nav-tabs .nav-link, #main-body .nav-pills .nav-link { white-space: nowrap; }

  /* long words / IPs / passwords wrap instead of pushing the page wider */
  #main-body td, #main-body th, #main-body dd, #main-body dt, #main-body .form-control-static { overflow-wrap: break-word; }

  /* "Label: value" tables (no header row): label on top, value below, no overlap */
  @supports selector(:has(*)) {
    #main-body table:not(:has(thead)):not(.dataTable):not(.table-list):not(.ac-keep-table),
    #main-body table:not(:has(thead)):not(.dataTable):not(.table-list):not(.ac-keep-table) > tbody,
    #main-body table:not(:has(thead)):not(.dataTable):not(.table-list):not(.ac-keep-table) > tbody > tr,
    #main-body table:not(:has(thead)):not(.dataTable):not(.table-list):not(.ac-keep-table) > tbody > tr > td,
    #main-body table:not(:has(thead)):not(.dataTable):not(.table-list):not(.ac-keep-table) > tbody > tr > th { display: block; width: 100% !important; max-width: 100%; }
    #main-body table:not(:has(thead)):not(.dataTable):not(.table-list):not(.ac-keep-table) > tbody > tr { padding: 10px 14px; border-bottom: 1px solid var(--border); }
    #main-body table:not(:has(thead)):not(.dataTable):not(.table-list):not(.ac-keep-table) > tbody > tr > th {
      padding: 0 0 2px !important; border: 0 !important; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--t5);
    }
    #main-body table:not(:has(thead)):not(.dataTable):not(.table-list):not(.ac-keep-table) > tbody > tr > td { padding: 0 !important; border: 0 !important; color: var(--t2); }
    /* tables WITH a header row scroll sideways inside their own box */
    #main-body table:has(thead):not(.dataTable):not(.table-list):not(.ac-keep-table) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #main-body table:has(thead):not(.dataTable):not(.table-list):not(.ac-keep-table) th, #main-body table:has(thead):not(.dataTable):not(.table-list):not(.ac-keep-table) td { white-space: nowrap; overflow-wrap: normal; padding-left: 12px; padding-right: 12px; }
  }

  /* button rows wrap, buttons can break lines */
  #main-body .btn-group, #main-body .btn-toolbar { flex-wrap: wrap; }
  #main-body .btn { white-space: normal; }
  #main-body .btn-block-mobile, #main-body .module-client-area .btn { max-width: 100%; }
  #main-body .module-client-area, #main-body .product-details-tab-container, #main-body .tab-content { max-width: 100%; overflow-x: auto; }
}

/* Phone cards: no zebra stripes, sorted-column shading or leftover hover grey inside a card */
@media (max-width: 767.98px) {
  body table.table-list tbody tr,
  body table.table-list tbody tr.odd, body table.table-list tbody tr.even,
  body table.table-list.table-striped tbody tr:nth-of-type(odd), body table.table-list.table-striped tbody tr:nth-of-type(even),
  body table.table-list.table-hover tbody tr:hover, body table.table-list tbody tr:hover, body table.table-list tbody tr:active {
    background: #fff !important; background-color: #fff !important;
  }
  body table.table-list tbody tr > td, body table.table-list tbody tr > th,
  body table.table-list.dataTable tbody tr > .sorting_1, body table.table-list.dataTable tbody tr > .sorting_2, body table.table-list.dataTable tbody tr > .sorting_3,
  body table.table-list tbody tr:hover > td, body table.table-list tbody tr.odd > td, body table.table-list tbody tr.even > td {
    background: transparent !important; background-color: transparent !important; box-shadow: none !important;
  }
  /* a tapped card gets a soft rounded tint (the whole card, not a grey rectangle on part of it) */
  body table.table-list tbody tr:active { background: color-mix(in srgb, var(--blue) 6%, #fff) !important; }
}

/* ═════════ Unpaid bills + renewal reminders ═════════ */
.ac-panel-danger { border-color: #FCA5A5 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08); }
.ac-panel-danger .ac-panel-head { background: linear-gradient(180deg, #FEF2F2, #fff); border-bottom-color: #FECACA; }
.ac-panel-danger .ac-panel-head h4 { color: #991B1B; }
.ac-panel-danger .ac-panel-ico { background: #DC2626; }

.ac-renew-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: 6px 0 0 8px; padding: 5px 12px; border-radius: 12px;
  font-size: 0.78rem; font-weight: 800; line-height: 1.25; text-decoration: none !important; white-space: nowrap; vertical-align: middle;
  background: #FEF3C7; color: #92400E !important; border: 1px solid #FCD34D; transition: transform 0.15s, box-shadow 0.15s;
}
.ac-renew-chip small { font-size: 0.66rem; font-weight: 600; opacity: 0.85; }
.ac-renew-chip:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(146, 64, 14, 0.6); }
.ac-renew-urgent, .ac-renew-overdue { background: #FEE2E2; color: #991B1B !important; border-color: #FCA5A5; }
tr[data-ac-renew="soon"] { box-shadow: inset 3px 0 0 #F59E0B; }
tr[data-ac-renew="urgent"], tr[data-ac-renew="overdue"] { box-shadow: inset 3px 0 0 #EF4444; }
.list-group-item[data-ac-renew="soon"] { box-shadow: inset 3px 0 0 #F59E0B; }
.list-group-item[data-ac-renew="urgent"], .list-group-item[data-ac-renew="overdue"] { box-shadow: inset 3px 0 0 #EF4444; }
@media (max-width: 767.98px) {
  body table.table-list tbody tr[data-ac-renew="soon"] { border-color: #FCD34D !important; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.12); }
  body table.table-list tbody tr[data-ac-renew="urgent"], body table.table-list tbody tr[data-ac-renew="overdue"] { border-color: #FCA5A5 !important; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.12); }
  .ac-renew-chip { margin: 0; }
  /* the renew chip gets its own full-width line under the status pill, so nothing runs past the card edge */
  table.table-list td:has(> .ac-renew-chip) { flex-wrap: wrap; }
  table.table-list td > .ac-renew-chip { flex: 1 0 100%; align-items: center; margin: 8px 0 0; text-align: center; white-space: normal; }
  .list-group-item:has(> .ac-renew-chip), .ac-panel-body .list-group-item { flex-wrap: wrap; }
  .list-group-item > .ac-renew-chip { flex: 1 0 100%; align-items: center; margin: 8px 0 0; text-align: center; }
}

.ac-renew-main { display: inline-flex; align-items: center; gap: 6px; }

/* ═════════ "There is more here, slide": fade + arrow on the left menu / bottom tab bar when it can scroll ═════════ */
.ac-scroll-hint { position: fixed; z-index: 1045; display: none; align-items: center; justify-content: center; pointer-events: none; color: var(--blue); font-size: 0.8rem; }
.ac-scroll-hint i { filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9)); }
.ac-scroll-hint.show { display: flex; }
/* phones: bottom tab bar scrolls sideways */
@media (max-width: 991.98px) {
  .ac-scroll-hint { top: auto; bottom: var(--tabbar-pad); height: var(--tabbar-h); width: 40px; }
  .ac-hint-end { right: 0; justify-content: flex-end; padding-right: 6px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 62%); }
  .ac-hint-start { left: 0; justify-content: flex-start; padding-left: 6px; background: linear-gradient(270deg, rgba(255,255,255,0), #fff 62%); }
  /* phones: just the soft edge fade (no arrow) */
  .ac-scroll-hint i { display: none; }
}
/* large screens: vertical rail scrolls up / down */
@media (min-width: 992px) {
  .ac-scroll-hint { left: 0; width: var(--rail-w); height: 44px; }
  .ac-hint-end { bottom: var(--ac-rail-bottom, 0px); background: linear-gradient(180deg, rgba(255,255,255,0), #fff 70%); align-items: flex-end; padding-bottom: 6px; }
  .ac-hint-start { top: var(--header-h); background: linear-gradient(0deg, rgba(255,255,255,0), #fff 70%); align-items: flex-start; padding-top: 6px; }
  .ac-hint-end i { animation: ac-nudge-y 1.3s ease-in-out infinite; }
  .ac-hint-start i { animation: ac-nudge-y-rev 1.3s ease-in-out infinite; }
}
@keyframes ac-nudge-x { 0%, 100% { transform: translateX(0); opacity: 0.55; } 50% { transform: translateX(4px); opacity: 1; } }
@keyframes ac-nudge-x-rev { 0%, 100% { transform: translateX(0); opacity: 0.55; } 50% { transform: translateX(-4px); opacity: 1; } }
@keyframes ac-nudge-y { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(4px); opacity: 1; } }
@keyframes ac-nudge-y-rev { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ac-scroll-hint i { animation: none !important; } }

/* dashboard stat cards: pill + renew emphasis */
.ac-stat { position: relative; }
.ac-stat-pill { position: absolute; top: 16px; right: 16px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.96); color: #92400E; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5); }
.ac-stat-pill-red { color: #991B1B; }
.ac-stat-renew .ac-stat-link { font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.ac-stat-red .ac-stat-link { font-weight: 800; }
@media (max-width: 575.98px) { .ac-stat-pill { top: 12px; right: 12px; font-size: 0.64rem; padding: 4px 9px; } }

/* ═════════ Action toolbars above lists (domains: Manage Nameservers | Edit Contact | Renew | More...) on phones ═════════ */
@media (max-width: 767.98px) {
  @supports selector(:has(*)) {
    #main-body .btn-group[role="group"]:has(> :nth-child(3)):not(.table-list .btn-group),
    #main-body .btn-toolbar {
      display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 100%; margin: 0 0 14px;
    }
    #main-body .btn-group[role="group"]:has(> :nth-child(3)):not(.table-list .btn-group) > .btn,
    #main-body .btn-group[role="group"]:has(> :nth-child(3)):not(.table-list .btn-group) > .btn-group,
    #main-body .btn-toolbar > .btn, #main-body .btn-toolbar > .btn-group { width: 100%; max-width: 100%; margin: 0 !important; float: none; }
    #main-body .btn-group[role="group"]:has(> :nth-child(3)):not(.table-list .btn-group) .btn,
    #main-body .btn-toolbar .btn {
      display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 42px; padding: 8px 10px;
      border-radius: 12px !important; font-size: 0.78rem; font-weight: 600; line-height: 1.25; text-align: center; white-space: normal;
    }
    #main-body .btn-group[role="group"]:has(> :nth-child(3)):not(.table-list .btn-group) .btn i,
    #main-body .btn-toolbar .btn i { font-size: 0.85em; flex: 0 0 auto; }
    /* the "More..." dropdown spans the full row and its menu stays inside the screen */
    #main-body .btn-group[role="group"]:has(> :nth-child(3)) > .btn-group:last-child:not(:nth-child(even)) { grid-column: 1 / -1; }
  }
  #main-body .btn-group .dropdown-menu { max-width: calc(100vw - 32px); right: 0; left: auto; }
}

/* ═════════ Forms on phones: tidy checkbox / radio lists and action buttons (contact details, preferences, ...) ═════════ */
@media (max-width: 767.98px) {
  @supports selector(:has(*)) {
    /* "[ ] label" rows: small clean text, box aligned to the first line, soft divider between rows */
    #main-body form label:has(> input[type="checkbox"]):not(.custom-control-label),
    #main-body form label:has(> input[type="radio"]):not(.custom-control-label),
    #main-body form .form-check:has(> input[type="checkbox"]), #main-body form .form-check:has(> input[type="radio"]) {
      display: flex; align-items: flex-start; gap: 12px; width: 100%; margin: 0; padding: 10px 0 !important;
      font-size: 0.9rem; font-weight: 500; line-height: 1.45; color: var(--t2); border-bottom: 1px solid var(--border); cursor: pointer;
    }
    #main-body form label:has(> input[type="checkbox"]) > input, #main-body form label:has(> input[type="radio"]) > input,
    #main-body form .form-check > input[type="checkbox"], #main-body form .form-check > input[type="radio"] {
      position: static !important; flex: 0 0 18px; width: 18px; height: 18px; margin: 2px 0 0 !important; accent-color: var(--blue);
    }
    #main-body form .form-check > label { font-size: 0.9rem; line-height: 1.45; font-weight: 500; margin: 0; padding: 0; color: var(--t2); }
    #main-body form .form-group > label:has(> input[type="checkbox"]):last-child, #main-body form .form-check:last-child { border-bottom: 0; }
  }

  /* form action bar (Save / Cancel / Delete): one clear primary action, full width, stacked */
  #main-body form p.text-center:has(> .btn), #main-body form .form-group.text-center:has(> .btn), #main-body form div.text-center:has(> .btn),
  #main-body form .btn-container:has(> .btn), #main-body form p.text-center:has(> input[type="submit"]) {
    display: flex; flex-direction: column; gap: 10px; margin: 18px 0 8px;
  }
  #main-body form p.text-center > .btn, #main-body form .form-group.text-center > .btn, #main-body form div.text-center > .btn, #main-body form .btn-container > .btn,
  #main-body form p.text-center > input[type="submit"], #main-body form p.text-center > input[type="reset"], #main-body form p.text-center > input[type="button"] {
    width: 100%; margin: 0 !important; padding: 12px 18px; border-radius: 999px; font-size: 0.95rem; font-weight: 700;
  }
  #main-body form .btn-danger, #main-body form .btn-delete {
    background: #FEF2F2 !important; color: #B91C1C !important; border: 1px solid #FCA5A5 !important; box-shadow: none !important;
  }
  /* primary first, then Cancel, destructive last */
  #main-body form p.text-center > .btn-danger, #main-body form div.text-center > .btn-danger { order: 3; }
  #main-body form p.text-center > .btn-default, #main-body form p.text-center > input[type="reset"], #main-body form div.text-center > .btn-default { order: 2; }
  #main-body form p.text-center > .btn-primary, #main-body form div.text-center > .btn-primary, #main-body form p.text-center > input[type="submit"] { order: 1; }
}
#main-body form .card-body > label:last-child, #main-body form .card-body > .form-check:last-child { border-bottom: 0 !important; }

/* ═════════ Page counter ("Show 10 entries", "Showing 1 to 10 of 230", Previous 1 2 3 … Next) on phones ═════════ */
@media (max-width: 767.98px) {
  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { width: 100%; float: none !important; text-align: center !important; margin: 10px 0 0; }
  .dataTables_wrapper .dataTables_length label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.85rem; color: var(--t4); }
  .dataTables_wrapper .dataTables_length select { width: auto; min-width: 64px; height: 36px; padding: 4px 28px 4px 12px; font-size: 0.85rem; border-radius: 10px; }
  .dataTables_wrapper .dataTables_info { font-size: 0.8rem; color: var(--t5); padding-top: 0; }
  .dataTables_wrapper .dataTables_paginate { display: block; overflow: visible; }
  .dataTables_wrapper .pagination, .pagination { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 6px; margin: 4px 0 0; padding: 0; max-width: 100%; }
  .pagination .page-item { flex: 0 0 auto; margin: 0 !important; }
  .pagination .page-item .page-link {
    display: block; min-width: 38px; padding: 8px 12px; margin: 0 !important; font-size: 0.82rem; font-weight: 700; line-height: 1.2; text-align: center;
    border: 1px solid var(--border-hi) !important; border-radius: 10px !important; background: #fff; color: var(--t3);
  }
  .pagination .page-item.active .page-link { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; box-shadow: 0 6px 14px -8px var(--blue); }
  .pagination .page-item.disabled .page-link { opacity: 0.45; background: #fff; }
  /* on narrow screens show only: Previous, the current page, Next (numbers in between would overflow) */
  .pagination .page-item:not(.active):not(.previous):not(.next):not(:first-child):not(:last-child) { display: none; }
  .pagination .page-item:first-child .page-link, .pagination .page-item:last-child .page-link { padding-left: 14px; padding-right: 14px; }
}

/* large screens: make the rail's scroll arrow a clear round button */
@media (min-width: 992px) {
  .ac-scroll-hint { height: 54px; }
  .ac-scroll-hint i {
    width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
    background: #fff; color: var(--blue); font-size: 0.78rem; border: 1px solid color-mix(in srgb, var(--blue) 30%, #fff);
    box-shadow: 0 6px 14px -6px rgba(41, 102, 243, 0.55); filter: none;
  }
}

/* ═════════ "Have a promo code?" box: clean, one row on wider screens, stacked on small phones ═════════ */
#order-standard_cart .view-cart-tabs { margin-top: 22px; padding: 16px 18px 18px; border-radius: 16px !important; }
#order-standard_cart .view-cart-tabs .nav-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; border: 0; }
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px !important; border: 0 !important; border-radius: 999px !important;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--t4) !important; background: transparent !important;
}
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active { background: color-mix(in srgb, var(--blue) 10%, #fff) !important; color: var(--blue) !important; }
#order-standard_cart .view-cart-tabs .tab-pane.promo form { display: flex; align-items: stretch; gap: 10px; margin: 0; }
#order-standard_cart .view-cart-tabs .tab-pane.promo .form-group.prepend-icon { flex: 1 1 auto; min-width: 0; margin: 0; position: relative; }
#order-standard_cart .view-cart-tabs .tab-pane.promo .field-icon { position: absolute; left: 0; top: 0; bottom: 0; width: 46px; margin: 0; display: flex; align-items: center; justify-content: center; color: var(--blue); pointer-events: none; }
#order-standard_cart .view-cart-tabs .tab-pane.promo .form-control { height: 46px; padding: 0 14px 0 46px; border-radius: 12px; font-size: 0.92rem; }
#order-standard_cart .view-cart-tabs .tab-pane.promo .btn {
  flex: 0 0 auto; width: auto; height: 46px; margin: 0; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px !important; border: 0 !important; background: var(--blue) !important; color: #fff !important; font-size: 0.9rem; font-weight: 700; white-space: nowrap;
}
#order-standard_cart .view-cart-tabs .tab-pane.promo .btn:hover { background: var(--blue-mid) !important; }
@media (max-width: 479.98px) {
  #order-standard_cart .view-cart-tabs { padding: 14px; }
  #order-standard_cart .view-cart-tabs .tab-pane.promo form { flex-direction: column; }
  #order-standard_cart .view-cart-tabs .tab-pane.promo .btn { width: 100%; }
}

/* promo tab: left aligned with the input below it (the tab strip had 20px of left padding) */
#order-standard_cart .view-cart-tabs .nav-tabs { padding: 0 !important; margin-left: 0 !important; justify-content: flex-start !important; text-align: left !important; }
#order-standard_cart .view-cart-tabs .nav-tabs .nav-item { margin: 0 !important; }

/* ═════════ Phone tabs: stacked full-width buttons instead of a sideways-scrolling strip ═════════ */
@media (max-width: 767.98px) {
  #main-body .action_btns .nav-tabs, #main-body .product-details-tab-container ~ .nav-tabs,
  #main-body .nav-tabs:has(> :nth-child(3)) {
    display: flex !important; flex-direction: column !important; flex-wrap: wrap !important; overflow: visible !important; white-space: normal !important;
    gap: 8px; padding: 0 !important; margin: 0 0 14px !important; border: 0 !important;
  }
  #main-body .action_btns .nav-tabs > li, #main-body .nav-tabs:has(> :nth-child(3)) > li, #main-body .nav-tabs:has(> :nth-child(3)) > .nav-item { width: 100%; flex: 0 0 auto; margin: 0 !important; }
  #main-body .action_btns .nav-tabs .nav-link, #main-body .nav-tabs:has(> :nth-child(3)) .nav-link {
    display: flex !important; align-items: center; gap: 10px; width: 100%; padding: 12px 16px !important; border: 1px solid var(--border-hi) !important;
    border-radius: 12px !important; background: #fff !important; color: var(--t2) !important; font-size: 0.92rem; font-weight: 600; white-space: normal; text-align: left;
  }
  #main-body .action_btns .nav-tabs .nav-link i, #main-body .nav-tabs:has(> :nth-child(3)) .nav-link i { color: var(--blue); width: 20px; text-align: center; }
  #main-body .action_btns .nav-tabs .nav-link.active, #main-body .nav-tabs:has(> :nth-child(3)) .nav-link.active {
    background: color-mix(in srgb, var(--blue) 10%, #fff) !important; border-color: var(--blue) !important; color: var(--blue) !important; box-shadow: inset 3px 0 0 var(--blue);
  }
  /* active tab panel sits right under the buttons, no extra side padding */
  #main-body .tab-content.product-details-tab-container { margin-top: 4px; }
}

/* ═════════ Contabo VPS module (instance actions + information) on phones ═════════ */
@media (max-width: 767.98px) {
  /* the two rows of action tiles: three equal columns, no 180px minimums or 32px gaps */
  #main-body .contabo-actions-bg .row > div[style*="gap"] { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; width: 100%; margin-bottom: 8px; }
  #main-body .contabo-actions-bg .row > div[style*="gap"] > div { min-width: 0 !important; max-width: none !important; width: 100%; flex: none !important; }
  #main-body .contabo-action-btn {
    margin: 0 !important; padding: 12px 4px !important; min-height: 104px !important; width: 100%; border-radius: 14px !important;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  }
  #main-body .contabo-action-btn img { width: 38px !important; height: 38px !important; max-width: none; margin: 0 !important; object-fit: contain; }
  #main-body .contabo-action-btn i { font-size: 32px !important; }
  #main-body .contabo-action-btn div { margin: 0 !important; font-size: 0.72rem; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
  #main-body .contabo-actions-bg { padding: 18px 12px 12px !important; margin-bottom: 16px !important; }
  #main-body .contabo-actions-bg h3.panel-title { font-size: 1.15rem !important; }

  /* Instance Information: label above value, rows as tall as they need to be (the module forces height: 42px and 10% side padding) */
  #main-body table[style*="table-layout"] { table-layout: auto !important; }
  #main-body table[style*="table-layout"] tr { height: auto !important; }
  #main-body table[style*="table-layout"] td, #main-body table[style*="table-layout"] th { padding-left: 0 !important; padding-right: 0 !important; height: auto !important; }
  #main-body .table.table-striped tbody tr:nth-of-type(odd), #main-body .table.table-striped tbody tr:nth-of-type(even) { background: transparent !important; }
  #main-body .table td.contabo-info-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--t5); padding-top: 10px !important; }
  #main-body .table td.contabo-info-label strong { font-weight: 800; }
  #main-body .table td.contabo-info-label + td { padding-bottom: 10px !important; font-size: 0.95rem; color: var(--t1); }
  /* top summary block (status, dates, payment method) */
  #main-body .page_info { padding: 16px 12px !important; border-radius: 14px; }
  #main-body .page_info h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--t5); margin: 14px 0 2px; }
  #main-body .page_info p { font-size: 0.95rem; color: var(--t1); margin-bottom: 4px; }
}

/* ═════════ Service / product details page (clientarea.php?action=productdetails) ═════════ */
.ac-svc { border: 1px solid var(--border-hi) !important; border-radius: 18px !important; box-shadow: var(--s-card); overflow: hidden; background: #fff; }
.ac-svc .card-body { padding: 22px 24px; }
.ac-svc-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.ac-svc-ico {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-mid)); box-shadow: 0 10px 20px -10px var(--blue);
}
.ac-svc-title { flex: 1 1 auto; min-width: 0; }
.ac-svc-title h2 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: var(--t1); overflow-wrap: anywhere; }
.ac-svc-title p { margin: 2px 0 0; font-size: 0.9rem; color: var(--t4); }
.ac-svc-status {
  flex: 0 0 auto; padding: 6px 14px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: #EEF1F6; color: #475569; border: 1px solid #CBD5E1;
}
.ac-svc-status-active { background: #DCFCE7; color: #166534; border-color: #86EFAC; }
.ac-svc-status-pending { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.ac-svc-status-suspended { background: #FFEDD5; color: #9A3412; border-color: #FDBA74; }
.ac-svc-status-terminated, .ac-svc-status-cancelled, .ac-svc-status-fraud { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }

.ac-svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0; }
.ac-svc-item { margin: 0; padding: 12px 14px; background: #F8FAFC; border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.ac-svc-item dt { margin: 0 0 4px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t5); }
.ac-svc-item dd { margin: 0; font-size: 0.98rem; font-weight: 600; color: var(--t1); overflow-wrap: anywhere; }
.ac-svc-wide { grid-column: 1 / -1; }
.ac-svc-warn { background: #FEF2F2; border-color: #FECACA; }
.ac-svc-warn dd { color: #991B1B; }

.ac-svc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.ac-svc-btn-main { padding: 10px 22px; border-radius: 12px; font-weight: 700; }
.ac-svc-btn { padding: 10px 18px; border-radius: 12px; font-weight: 600; }
.ac-svc-btn-danger { margin-left: auto; background: transparent !important; color: #B91C1C !important; border: 1px solid #FCA5A5 !important; }
.ac-svc-btn-danger:hover { background: #FEF2F2 !important; }

/* tabs under the summary (Domain / Manage / Configurable options / Additional information / Resource usage) */
.nav-tabs.responsive-tabs-sm { margin: 18px 0 0; padding: 0; border: 0; gap: 6px; flex-wrap: wrap; }
.nav-tabs.responsive-tabs-sm .nav-item { margin: 0; }
.nav-tabs.responsive-tabs-sm .nav-link { padding: 10px 16px !important; border: 1px solid transparent !important; border-radius: 12px !important; font-size: 0.9rem; font-weight: 600; color: var(--t4) !important; background: transparent !important; }
.nav-tabs.responsive-tabs-sm .nav-link i { color: var(--t5); margin-right: 4px; }
.nav-tabs.responsive-tabs-sm .nav-link:hover { background: color-mix(in srgb, var(--blue) 6%, #fff) !important; color: var(--blue) !important; }
.nav-tabs.responsive-tabs-sm .nav-link.active { background: #fff !important; border-color: var(--border-hi) !important; color: var(--blue) !important; box-shadow: 0 6px 14px -10px rgba(15, 23, 42, 0.4); }
.nav-tabs.responsive-tabs-sm .nav-link.active i { color: var(--blue); }
.responsive-tabs-sm-connector { display: none; }
.product-details-tab-container { margin-top: 10px; padding: 22px; background: #fff !important; border: 1px solid var(--border-hi); border-radius: 16px; }
.product-details-tab-container .module-client-area { max-width: 100%; }

/* "Domain / Username / Server" rows inside the Domain tab */
.product-details-tab-container #domain .row { max-width: 620px; margin: 0 auto !important; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.product-details-tab-container #domain .row:last-of-type { border-bottom: 0; }
.product-details-tab-container #domain .row > [class*="col-sm-5"] { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--t5); padding-top: 2px; }
.product-details-tab-container #domain .row > [class*="col-sm-7"] { font-weight: 600; color: var(--t1); overflow-wrap: anywhere; }

@media (max-width: 767.98px) {
  .ac-svc .card-body { padding: 16px; }
  .ac-svc-head { flex-wrap: wrap; gap: 12px; }
  .ac-svc-ico { flex-basis: 48px; width: 48px; height: 48px; border-radius: 14px; font-size: 1.2rem; }
  .ac-svc-title h2 { font-size: 1.1rem; }
  .ac-svc-status { order: 3; margin-left: 0; }
  .ac-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ac-svc-item { padding: 10px 12px; }
  .ac-svc-item dd { font-size: 0.9rem; }
  .ac-svc-actions { flex-direction: column; align-items: stretch; }
  .ac-svc-actions .btn { width: 100%; margin: 0; }
  .nav-tabs.responsive-tabs-sm { gap: 8px; }
  .product-details-tab-container { padding: 14px; border-radius: 14px; }
  .product-details-tab-container #domain .row { text-align: left; padding: 10px 0; }
  .product-details-tab-container #domain .row > [class*="col-sm-5"], .product-details-tab-container #domain .row > [class*="col-sm-7"] { text-align: left !important; }
}

/* ═════════ Domain details page (clientarea.php?action=domaindetails) ═════════ */
.ac-svc-title h2 a { color: inherit; text-decoration: none; }
.ac-svc-title h2 a:hover { color: var(--blue); }
.ac-svc-item dd small { font-size: 0.78rem; font-weight: 500; color: var(--t4); }
.ac-svc-status-expired, .ac-svc-status-grace, .ac-svc-status-redemption { background: #FFEDD5; color: #9A3412; border-color: #FDBA74; }
.ac-svc-status-pending-transfer, .ac-svc-status-pending-registration, .ac-svc-status-transferred-away { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.ac-dom .moduleoutput { margin-top: 16px; }
.ac-dom-sub { margin: 24px 0 12px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t5); }
.ac-dom-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.ac-dom-action {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--border-hi); border-radius: 14px;
  color: var(--t2) !important; font-weight: 600; font-size: 0.92rem; text-decoration: none !important; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.ac-dom-action:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 5%, #fff); transform: translateY(-1px); }
.ac-dom-action-ico { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--blue) 10%, #fff); color: var(--blue); }
.ac-dom-action-txt { flex: 1; min-width: 0; line-height: 1.3; }
.ac-dom-action-go { color: var(--t5); font-size: 0.75rem; }
.ac-dom-action-main { background: linear-gradient(135deg, var(--blue), var(--blue-mid)); border-color: transparent; color: #fff !important; box-shadow: 0 12px 22px -14px var(--blue); }
.ac-dom-action-main:hover { background: linear-gradient(135deg, var(--blue-mid), var(--blue-deep)); border-color: transparent; }
.ac-dom-action-main .ac-dom-action-ico { background: rgba(255, 255, 255, 0.2); color: #fff; }
.ac-dom-action-main .ac-dom-action-go { color: rgba(255, 255, 255, 0.8); }

/* the other panels on this page (auto renew, nameservers, registrar lock, release, EPP code): same clean card style */
#tabAutorenew .card, #tabNameservers .card, #tabReglock .card, #tabRelease .card, #tabAddons .card { border: 1px solid var(--border-hi); border-radius: 18px; box-shadow: var(--s-card); }
#tabAutorenew .card-title, #tabNameservers .card-title, #tabReglock .card-title, #tabRelease .card-title, #tabAddons .card-title { font-size: 1.15rem; font-weight: 800; color: var(--t1); margin-bottom: 14px; }
#tabAutorenew .btn-lg, #tabReglock .btn-lg { padding: 11px 26px; font-size: 0.95rem; border-radius: 999px; font-weight: 700; }
#tabNameservers .form-control { height: 46px; }

@media (max-width: 767.98px) {
  .ac-dom-actions { grid-template-columns: 1fr; }
  .ac-dom-action { padding: 12px; }
  #tabNameservers .form-group.row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  #tabNameservers .col-sm-8.offset-sm-4 { margin-left: 0; flex: 0 0 100%; max-width: 100%; }
  #tabNameservers .btn, #tabAutorenew .btn, #tabReglock .btn, #tabRelease .btn { width: 100%; }
}

/* Sidebar on the right (admin option) */
@media (min-width: 768px) { body.ac-side-right #main-body > .container > .row { flex-direction: row-reverse; } }

/* Phones and small tablets: the page itself comes first ("Welcome back" banner, stats), the sidebar panels follow it */
@media (max-width: 767.98px) {
  #main-body > .container > .row > .sidebar { order: 2; margin-top: 8px; }
  #main-body > .container > .row > [class*="col-md-9"], #main-body > .container > .row > [class*="col-md-12"] { order: 1; }
}


/* ═════════ List tables on larger screens (services, domains, invoices, tickets): clean toolbar + readable rows ═════════ */
@media (min-width: 768px) {
  /* toolbar: search on the left, "Show N entries" on the right; table; then count on the left and paging on the right */
  .dataTables_wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; }
  .dataTables_wrapper > .listtable { display: contents; }
  .dataTables_wrapper .dataTables_filter { order: 1; flex: 1 1 280px; max-width: 380px; margin: 0; float: none; text-align: left; }
  .dataTables_wrapper .dataTables_filter label { display: block; margin: 0; font-size: 0; }
  .dataTables_wrapper .dataTables_filter input { display: block; width: 100% !important; max-width: 100%; margin: 0 !important; font-size: 0.95rem; height: 44px; border-radius: 12px; }
  .dataTables_wrapper .dataTables_length { order: 2; margin: 0 0 0 auto; float: none; font-size: 0.86rem; color: var(--t4); }
  .dataTables_wrapper .dataTables_length label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
  .dataTables_wrapper .dataTables_length select { width: auto; height: 38px; border-radius: 10px; margin: 0; }
  .dataTables_wrapper table.table-list { order: 3; flex: 0 0 100%; width: 100% !important; margin: 0 !important; }
  .dataTables_wrapper .dataTables_info { order: 4; margin: 0; padding: 0; float: none; font-size: 0.86rem; color: var(--t5); }
  .dataTables_wrapper .dataTables_paginate { order: 5; margin: 0 0 0 auto; float: none; }

  /* the table itself */
  body table.table-list {
    border-collapse: separate !important; border-spacing: 0; border: 1px solid var(--border-hi) !important; border-radius: 16px; overflow: hidden; background: #fff;
  }
  body table.table-list thead th {
    padding: 14px 20px !important; background: #F8FAFC !important; border: 0 !important; border-bottom: 1px solid var(--border-hi) !important;
    color: var(--t5); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-align: left !important; white-space: nowrap;
  }
  body table.table-list tbody td {
    padding: 18px 20px !important; vertical-align: middle; text-align: left !important; border: 0 !important; border-bottom: 1px solid var(--border) !important;
    background: #fff !important; color: var(--t2); font-size: 0.95rem;
  }
  body table.table-list tbody tr:last-child td { border-bottom: 0 !important; }
  body table.table-list tbody tr { cursor: pointer; }
  body table.table-list tbody tr:hover td { background: color-mix(in srgb, var(--blue) 4%, #fff) !important; }
  body table.table-list td.dataTables_empty { padding: 36px 20px !important; text-align: center !important; color: var(--t5); }

  /* cells */
  body table.table-list td.ac-td-ssl, body table.table-list thead th:first-child:empty { width: 56px; padding-right: 0 !important; text-align: center !important; }
  body table.table-list td.ac-td-ssl img { width: 22px; height: auto; vertical-align: middle; }
  body table.table-list td.ac-td-main strong { display: block; margin-bottom: 2px; font-size: 1rem; font-weight: 700; color: var(--t1); }
  body table.table-list td.ac-td-main { min-width: 150px; }
  body table.table-list td.ac-td-main br { display: none; }
  body table.table-list td.ac-td-main a { font-size: 0.88rem; font-weight: 500; overflow-wrap: break-word; word-break: normal; }
  body table.table-list td:has(> small) { white-space: nowrap; }
  body table.table-list td small { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: #F1F5F9; color: var(--t4); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; vertical-align: 1px; }

  /* paging */
  .dataTables_wrapper .dataTables_paginate .pagination { margin: 0; gap: 6px; flex-wrap: wrap; }
  .dataTables_wrapper .dataTables_paginate .page-link {
    min-width: 40px; padding: 8px 14px; text-align: center; border: 1px solid var(--border-hi) !important; border-radius: 10px !important; background: #fff; color: var(--t3); font-weight: 600; line-height: 1.2;
  }
  .dataTables_wrapper .dataTables_paginate .page-item.active .page-link { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff; }
  .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link { opacity: 0.5; }
  .dataTables_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover { border-color: var(--blue) !important; color: var(--blue); }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  body table.table-list thead th, body table.table-list tbody td { padding: 14px 12px !important; }
  body table.table-list th.responsive-edit-button, body table.table-list td.responsive-edit-button { width: 108px; }
  body table.table-list td.responsive-edit-button .btn { padding: 7px 12px; }
  /* narrower desktops: the billing-cycle chip goes under the price instead of beside it */
  body table.table-list td small { display: table; margin: 4px 0 0; }
  body table.table-list td.ac-td-ssl, body table.table-list thead th:first-child:empty { width: 40px; padding-left: 10px !important; }
}
@media (min-width: 992px) {
  /* "Manage" button column (WHMCS hides it on large screens; it is the clear way into a service) */
  body table.table-list th.responsive-edit-button, body table.table-list td.responsive-edit-button { display: table-cell !important; width: 128px; text-align: right !important; }
  body table.table-list td.responsive-edit-button .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; padding: 8px 16px; border-radius: 10px;
    background: #fff !important; color: var(--blue) !important; border: 1.5px solid color-mix(in srgb, var(--blue) 35%, transparent) !important; font-size: 0.85rem; font-weight: 700; box-shadow: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  body table.table-list td.responsive-edit-button .btn::after { content: "\2192"; font-weight: 700; }
  body table.table-list tbody tr:hover td.responsive-edit-button .btn { background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important; }
}


/* ═════════ Upgrade / downgrade page (upgrade.php?type=package): current plan + plan cards with billing-term chips ═════════ */
.ac-upgrade { max-width: 1100px; }
.ac-up-intro { margin: 0 0 18px; color: var(--t4); font-size: 1rem; }
.ac-up-current { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--border-hi); border-radius: 16px; box-shadow: var(--s-card); }
.ac-up-ico {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.15rem;
  background: linear-gradient(135deg, var(--blue), var(--blue-mid)); box-shadow: 0 10px 20px -10px var(--blue);
}
.ac-up-current-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ac-up-eyebrow { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--t5); }
.ac-up-current-text strong { font-size: 1.08rem; font-weight: 800; color: var(--t1); overflow-wrap: anywhere; }
.ac-up-current-text small { font-size: 0.88rem; color: var(--t5); overflow-wrap: anywhere; }
.ac-up-term { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: color-mix(in srgb, var(--blue) 10%, #fff); color: var(--blue-mid); border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent); }
.ac-up-title { margin: 28px 0 14px; font-size: 1.2rem; font-weight: 800; color: var(--t1); }

.ac-up-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: stretch; }
.ac-up-card { display: flex; flex-direction: column; margin: 0; padding: 22px; background: #fff; border: 1px solid var(--border-hi); border-radius: 18px; box-shadow: var(--s-card); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.ac-up-card:hover { border-color: color-mix(in srgb, var(--blue) 45%, transparent); box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--blue) 55%, transparent); transform: translateY(-2px); }
.ac-up-card-head h4 { margin: 0 0 12px; font-size: 1.18rem; font-weight: 800; letter-spacing: -0.01em; color: var(--t1); }
.ac-up-desc { flex: 1 1 auto; font-size: 0.92rem; line-height: 1.5; color: var(--t3); }
.ac-up-feat { margin: 0; padding: 0; list-style: none; }
.ac-up-feat li { position: relative; padding: 5px 0 5px 28px; }
.ac-up-feat li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%; background: #DCFCE7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.ac-up-feat li.ac-up-extra { display: none; }
.ac-up-feat.is-open li.ac-up-extra { display: block; }
.ac-up-more { margin: 6px 0 0; padding: 4px 0; border: 0; background: none; color: var(--blue); font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.ac-up-more:hover { text-decoration: underline; }
.ac-up-card-foot { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--border-hi); }
.ac-up-price-fixed { margin-bottom: 14px; font-size: 1.1rem; font-weight: 800; color: var(--t1); text-align: center; }

.ac-up-terms { display: grid; gap: 8px; margin-bottom: 14px; }
.ac-up-term-opt { position: relative; display: block; margin: 0; cursor: pointer; }
.ac-up-term-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ac-up-term-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border: 1.5px solid var(--border-hi); border-radius: 12px; font-size: 0.9rem; background: #fff; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.ac-up-term-box b { font-weight: 700; color: var(--t1); white-space: nowrap; }
.ac-up-term-price { display: flex; flex-direction: column; align-items: flex-end; color: var(--t3); font-size: 0.86rem; text-align: right; }
.ac-up-term-price small { font-size: 0.74rem; color: var(--t5); }
.ac-up-term-opt:hover .ac-up-term-box { border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.ac-up-term-opt input:checked + .ac-up-term-box { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 6%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent); }
.ac-up-term-opt input:focus-visible + .ac-up-term-box { outline: 2px solid var(--blue); outline-offset: 2px; }
.ac-up-card .btn-primary { padding: 12px 20px; border-radius: 999px; font-weight: 700; }

.ac-up-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 20px; text-align: center; background: #fff; border: 1px dashed var(--border-hi); border-radius: 16px; color: var(--t4); }
.ac-up-empty i { font-size: 1.6rem; color: var(--blue); }
.ac-up-empty p { margin: 0; max-width: 460px; }
.ac-up-back { margin: 22px 0 0; }
.ac-up-back a { font-weight: 600; }
@media (max-width: 575.98px) {
  .ac-up-grid { grid-template-columns: minmax(0, 1fr); }
  .ac-up-card { padding: 18px; }
  .ac-up-current { flex-wrap: wrap; }
  .ac-up-term { order: 3; }
}
@media (prefers-reduced-motion: reduce) { .ac-up-card { transition: none; } .ac-up-card:hover { transform: none; } }


/* ═════════ Service details page: summary + shortcuts, then the module's own overview (usage, shortcuts, quick email) ═════════ */
.ac-svc-title p { overflow-wrap: anywhere; }
.ac-svc-visit { font-weight: 600; white-space: nowrap; }
.ac-svc-visit i { font-size: 0.7em; margin-left: 2px; }
.ac-svc-days { display: block; margin-top: 3px; font-size: 0.78rem; font-weight: 700; color: var(--t5); }
.ac-svc-soon { background: #FFFBEB; border-color: #FCD34D; }
.ac-svc-soon .ac-svc-days { color: #92400E; }
.ac-copy-item dd { display: flex; align-items: center; gap: 8px; }
.ac-copy-val { min-width: 0; overflow-wrap: anywhere; }
.ac-copy { flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border-hi); border-radius: 8px; background: #fff; color: var(--t4); font-size: 0.8rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.ac-copy:hover { color: var(--blue); border-color: var(--blue); }
.ac-copy.is-done { background: #DCFCE7; border-color: #86EFAC; color: #166534; }

.ac-svc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ac-svc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ac-svc-btn-upgrade { background: #fff !important; color: var(--blue) !important; border: 1.5px solid color-mix(in srgb, var(--blue) 40%, transparent) !important; font-weight: 700; }
.ac-svc-btn-upgrade:hover { background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important; }
.ac-svc-btn-upgrade.ac-svc-btn-main { background: linear-gradient(135deg, var(--blue), var(--blue-mid)) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--s-blue); }
.ac-svc-btn-danger { margin-left: auto; }

.ac-svc-module { margin-top: 18px; animation: ac-svc-reveal 0s 1.2s forwards; opacity: 0; }
.ac-svc-module.is-ready { opacity: 1; animation: none; }
@keyframes ac-svc-reveal { to { opacity: 1; } }
.ac-svc-module .card { border: 1px solid var(--border-hi) !important; border-radius: 18px !important; box-shadow: var(--s-card); overflow: hidden; margin-bottom: 18px; background: #fff; }
.ac-svc-module .card-header { padding: 16px 22px; background: #fff; border-bottom: 1px solid var(--border); }
.ac-svc-module .card-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--t1); }
.ac-svc-module .card-body { padding: 20px 22px; }
.ac-svc-module .ac-gone { display: none !important; }
.ac-svc-module img { max-width: 100%; height: auto; }
.ac-svc-module .row { margin-left: -8px; margin-right: -8px; }
.ac-svc-module [class*="col-"] { padding-left: 8px; padding-right: 8px; }
.ac-svc-module .input-group { flex-wrap: nowrap; }
.ac-svc-module .form-control { min-width: 0; }

@media (max-width: 767.98px) {
  .ac-svc-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ac-svc-actions .ac-svc-btn-main { grid-column: 1 / -1; }
  .ac-svc-actions .ac-svc-btn { width: 100%; padding: 11px 12px; font-size: 0.9rem; text-align: center; }
  .ac-svc-actions .ac-svc-btn-danger { grid-column: 1 / -1; margin-left: 0; }
  .ac-svc-module .card-header, .ac-svc-module .card-body { padding-left: 16px; padding-right: 16px; }
  .ac-svc-module .card { border-radius: 16px !important; }
}
@media (max-width: 400px) {
  .ac-svc-actions { grid-template-columns: minmax(0, 1fr); }
}


/* "Switch to a longer term and save" offer (service page) + the "your plan" tag on the upgrade page */
.ac-nudge {
  position: relative; display: flex; align-items: center; gap: 16px; margin: 18px 0 0; padding: 16px 52px 16px 18px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(120deg, #ECFDF5 0%, #F0FDF9 60%, #fff 100%); border: 1.5px solid #A7F3D0; box-shadow: 0 14px 28px -22px rgba(5, 150, 105, 0.7);
}
.ac-nudge-badge { flex: 0 0 auto; padding: 7px 13px; border-radius: 999px; background: #10B981; color: #fff; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; }
.ac-nudge-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ac-nudge-text strong { font-size: 1.02rem; font-weight: 800; color: #065F46; }
.ac-nudge-text span { font-size: 0.88rem; line-height: 1.45; color: #047857; }
.ac-nudge-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: 0 !important; border-radius: 999px; background: #059669 !important; color: #fff !important; font-weight: 700; box-shadow: 0 10px 20px -12px #059669; }
.ac-nudge-btn:hover { background: #047857 !important; transform: translateY(-1px); }
.ac-nudge-x { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #047857; font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: 0.7; }
.ac-nudge-x:hover { opacity: 1; background: rgba(5, 150, 105, 0.12); }
.ac-nudge.is-hidden { display: none; }
@media (max-width: 767.98px) {
  .ac-nudge { flex-wrap: wrap; gap: 10px 12px; padding: 16px 44px 16px 16px; }
  .ac-nudge-text { flex: 1 1 100%; order: 2; }
  .ac-nudge-badge { order: 1; }
  .ac-nudge-btn { order: 3; flex: 1 1 100%; justify-content: center; }
}
.ac-up-same { display: inline-block; margin: -4px 0 12px; padding: 3px 11px; border-radius: 999px; background: #DCFCE7; color: #166534; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.ac-up-card.is-same { border-color: #86EFAC; }


/* ═════════ Open a ticket, step 1 (submitticket.php): department cards ═════════ */
.ac-tk-head { margin-bottom: 26px; }
.ac-tk-head .card-title { margin: 0 0 6px; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: var(--t1); }
.ac-tk-head p { font-size: 1rem; line-height: 1.55; }
.ac-tk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.ac-tk-card {
  --tk: var(--blue);
  position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 20px 20px 20px 18px; background: #fff; border: 1.5px solid var(--border-hi); border-radius: 18px;
  color: var(--t3); text-decoration: none !important; box-shadow: var(--s-card); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.ac-tk-card:hover, .ac-tk-card:focus-visible {
  border-color: color-mix(in srgb, var(--tk) 55%, transparent); box-shadow: 0 18px 34px -22px color-mix(in srgb, var(--tk) 70%, transparent); transform: translateY(-2px); color: var(--t3); outline: 0;
}
.ac-tk-card:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tk) 25%, transparent); }
.ac-tk-ico {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: #fff;
  background: linear-gradient(135deg, var(--tk), color-mix(in srgb, var(--tk) 65%, #000)); box-shadow: 0 10px 20px -10px var(--tk);
}
.ac-tk-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-right: 26px; }
.ac-tk-body strong { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; color: var(--t1); }
.ac-tk-desc { font-size: 0.9rem; line-height: 1.5; color: var(--t4); overflow-wrap: anywhere; }
.ac-tk-go { position: absolute; top: 22px; right: 20px; font-size: 0.9rem; color: var(--t5); transition: transform 0.2s, color 0.2s; }
.ac-tk-card:hover .ac-tk-go, .ac-tk-card:focus-visible .ac-tk-go { color: var(--tk); transform: translateX(4px); }
.ac-tk-card[data-tone="violet"] { --tk: #7C3AED; }
.ac-tk-card[data-tone="cyan"] { --tk: #0891B2; }
.ac-tk-card[data-tone="green"] { --tk: #059669; }
.ac-tk-card[data-tone="red"] { --tk: #DC2626; }
.ac-tk-card[data-tone="amber"] { --tk: #D97706; }
.ac-tk-help { display: flex; align-items: flex-start; gap: 14px; margin-top: 24px; padding: 16px 18px; border-radius: 16px; background: #F8FAFC; border: 1px solid var(--border); }
.ac-tk-help-ico { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #FEF3C7; color: #B45309; }
.ac-tk-help-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 0.9rem; line-height: 1.5; color: var(--t4); }
.ac-tk-help-text strong { color: var(--t1); font-size: 0.95rem; }
@media (max-width: 575.98px) {
  .ac-tk-head .card-title { font-size: 1.4rem; }
  .ac-tk-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ac-tk-card { padding: 16px 16px 16px 14px; gap: 14px; border-radius: 16px; }
  .ac-tk-ico { flex-basis: 42px; width: 42px; height: 42px; border-radius: 12px; }
  .ac-tk-go { top: 18px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .ac-tk-card, .ac-tk-go { transition: none; } .ac-tk-card:hover { transform: none; } }

/* ═════════ Markdown editor (ticket message, announcements, KB replies) ═════════ */
#main-body .md-editor {
  display: block; position: relative; border: 1px solid var(--border-hi) !important; border-radius: 14px; background: #fff;
  box-shadow: none; overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
#main-body .md-editor.active, #main-body .md-editor:focus-within {
  border-color: var(--blue) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}
#main-body .md-editor > .md-header.btn-toolbar {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 6px; width: 100%; max-width: 100%;
  margin: 0 !important; padding: 8px 10px !important; background: #F8FAFC; border-bottom: 1px solid var(--border);
  border-radius: 0 !important; float: none;
}
#main-body .md-editor > .md-header .btn-group {
  display: inline-flex !important; flex-wrap: nowrap; width: auto !important; max-width: none !important; margin: 0 !important;
  float: none; gap: 2px; grid-column: auto;
}
#main-body .md-editor > .md-header .btn-group:not(:last-child)::after { content: none; }
#main-body .md-editor > .md-header .btn {
  display: inline-flex !important; align-items: center; justify-content: center; width: 34px !important; min-width: 34px; height: 34px;
  min-height: 34px !important; margin: 0 !important; padding: 0 !important; float: none; border: 1px solid transparent !important;
  border-radius: 9px !important; background: transparent; color: #475569; font-size: .85rem; font-weight: 600; line-height: 1;
  box-shadow: none !important; white-space: nowrap; transition: background .15s, color .15s;
}
#main-body .md-editor > .md-header .btn i, #main-body .md-editor > .md-header .btn span { font-size: .85rem; margin: 0; }
#main-body .md-editor > .md-header .btn:hover, #main-body .md-editor > .md-header .btn:focus {
  background: #fff; border-color: var(--border-hi) !important; color: var(--blue);
}
#main-body .md-editor > .md-header .btn.active { background: color-mix(in srgb, var(--blue) 12%, #fff); color: var(--blue); }
/* Preview button: compact pill pushed to the right */
#main-body .md-editor > .md-header .btn-group:last-child { margin-left: auto !important; }
#main-body .md-editor > .md-header .btn-primary, #main-body .md-editor > .md-header .btn[data-handler="bootstrap-markdown-cmdPreview"] {
  width: auto !important; min-width: 0; gap: 6px; padding: 0 12px !important; background: #fff; border: 1px solid var(--border-hi) !important;
  color: var(--blue); font-size: .78rem;
}
#main-body .md-editor > .md-header .btn-primary:hover, #main-body .md-editor > .md-header .btn-primary.active {
  background: var(--blue); border-color: var(--blue) !important; color: #fff;
}
#main-body .md-editor > textarea, #main-body .md-editor > .md-input, #main-body .md-editor > .md-preview {
  display: block; width: 100% !important; max-width: 100%; min-height: 200px; margin: 0; padding: 14px 16px;
  border: 0 !important; border-radius: 0; background: #fff; box-shadow: none !important; font-size: .95rem; line-height: 1.6; resize: vertical;
}
#main-body .md-editor > .md-preview { overflow: auto; }
#main-body .md-editor > .md-preview > :last-child { margin-bottom: 0; }
#main-body .md-editor.md-fullscreen-mode { border-radius: 0; }
#main-body .md-editor .md-fullscreen-controls { top: 10px; right: 10px; }
#main-body .md-editor .md-fullscreen-controls a {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: #fff;
  border: 1px solid var(--border-hi); color: #475569; text-decoration: none;
}
@media (max-width: 575.98px) {
  #main-body .md-editor { border-radius: 12px; }
  #main-body .md-editor > .md-header.btn-toolbar { gap: 6px; padding: 8px !important; }
  #main-body .md-editor > .md-header .btn { width: 34px !important; min-width: 34px; height: 34px; min-height: 34px !important; }
  #main-body .md-editor > .md-header .btn-primary, #main-body .md-editor > .md-header .btn[data-handler="bootstrap-markdown-cmdPreview"] { width: auto !important; padding: 0 12px !important; }
  #main-body .md-editor > textarea, #main-body .md-editor > .md-input { min-height: 180px; font-size: 16px; padding: 12px 14px; }
}

/* ═════════ Segmented switch: every Yes/No and ON/OFF toggle (bootstrap-switch) ═════════
   The plugin sizes its pieces with JavaScript, which breaks once our fonts/padding apply (the labels stacked
   on top of each other). Layout is therefore taken over in CSS: two pills side by side, active one highlighted. */
.bootstrap-switch.bootstrap-switch {
  display: inline-flex !important; align-items: stretch; width: auto !important; min-width: 0 !important; max-width: 100%;
  margin: 0; padding: 3px; border: 1px solid var(--border-hi) !important; border-radius: 999px; background: #EEF2F7;
  overflow: visible; line-height: 1; vertical-align: middle; box-shadow: none; transition: box-shadow .15s, border-color .15s;
}
.bootstrap-switch.bootstrap-switch.bootstrap-switch-focused { border-color: var(--blue) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }
.bootstrap-switch.bootstrap-switch .bootstrap-switch-container {
  display: inline-flex !important; width: auto !important; margin: 0 !important; transform: none !important; border-radius: 999px; background: transparent;
}
.bootstrap-switch.bootstrap-switch .bootstrap-switch-label { display: none !important; }
.bootstrap-switch.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch .bootstrap-switch-handle-off {
  display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; width: auto !important; min-width: 54px;
  height: auto; margin: 0 !important; padding: 8px 18px !important; border: 0 !important; border-radius: 999px !important;
  background: transparent !important; color: #64748B !important; font-size: .8rem !important; font-weight: 700; line-height: 1.2 !important;
  letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; transition: background .18s, color .18s, box-shadow .18s;
}
.bootstrap-switch.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-on {
  background: var(--blue) !important; color: #fff !important; box-shadow: 0 2px 6px color-mix(in srgb, var(--blue) 35%, transparent);
}
.bootstrap-switch.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-off {
  background: #fff !important; color: #334155 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
}
.bootstrap-switch.bootstrap-switch.bootstrap-switch-disabled { opacity: .55; }
@media (max-width: 575.98px) {
  .bootstrap-switch.bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch .bootstrap-switch-handle-off { min-width: 60px; padding: 10px 20px !important; font-size: .82rem !important; }
}

/* Single Sign-On card: switch and status text on one tidy row */
#frmSingleSignOn .p-2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 4px 0 6px !important; }
#frmSingleSignOn #ssoStatusTextEnabled, #frmSingleSignOn #ssoStatusTextDisabled { flex: 1 1 220px; min-width: 0; font-size: .92rem; color: var(--t4); }
/* Mailing-list card on the account details page */
.card:has(> .card-body > input[name="marketingoptin"], > .card-body .bootstrap-switch) .card-body > p { margin-bottom: 14px; }

/* ═════════ User Management (account-user-management) ═════════ */
.card .table.table-striped:has(.btn-manage-permissions) { border: 0; margin-bottom: 8px; }
.card .table.table-striped:has(.btn-manage-permissions) .btn { white-space: nowrap; }
.card .table.table-striped:has(.btn-manage-permissions) .label-info {
  display: inline-block; margin: 0 4px 0 6px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 12%, #fff);
  color: var(--blue); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle;
}
@media (max-width: 767.98px) {
  .card .table.table-striped:has(.btn-manage-permissions) thead, .card .table.table-striped:has(.btn-manage-permissions) tr:first-child:has(th) { display: none !important; }
  .card .table.table-striped:has(.btn-manage-permissions), .card .table.table-striped:has(.btn-manage-permissions) tbody { display: block; width: 100%; }
  .card .table.table-striped:has(.btn-manage-permissions) tr {
    display: flex !important; flex-direction: column; gap: 12px; margin: 0 0 12px; padding: 14px; background: #F8FAFC !important;
    border: 1px solid var(--border); border-radius: 14px;
  }
  .card .table.table-striped:has(.btn-manage-permissions) td { display: block; width: 100% !important; padding: 0 !important; border: 0 !important; background: none !important; overflow-wrap: anywhere; font-size: .95rem; }
  .card .table.table-striped:has(.btn-manage-permissions) td::before { content: none !important; }
  .card .table.table-striped:has(.btn-manage-permissions) td:last-child { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .card .table.table-striped:has(.btn-manage-permissions) td:last-child form { display: contents !important; }
  .card .table.table-striped:has(.btn-manage-permissions) td:last-child .btn {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; margin: 0 !important; padding: 8px 10px; border-radius: 12px; font-size: .84rem; white-space: normal; text-align: center;
  }
  .card .table.table-striped:has(.btn-manage-permissions) td small { display: block; margin-top: 4px; color: var(--t5); }
}

/* "Back to service" link above the Downloads / Addons / Change Password panes */
.ac-svc-back { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 8px 14px; border: 1px solid var(--border-hi) !important; border-radius: 999px !important; background: #fff !important; color: var(--t3) !important; font-size: .84rem; font-weight: 600; }
.ac-svc-back:hover { color: var(--blue) !important; border-color: var(--blue) !important; }
.ac-up-card.is-pick { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent); }

/* ═════════ Service page: promotion tiles (where the Sitejet card used to be) ═════════ */
.ac-svc-module .card:has(img[src*="sitejet" i]), .tab-content .card:has(> .card-header img[src*="sitejet" i]) { display: none !important; }
.ac-promo { margin: 22px 0 6px; }
.ac-promo-title { margin: 0 0 12px; font-size: 1rem; font-weight: 800; color: var(--t1); letter-spacing: -.01em; }
.ac-promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.ac-promo-card {
  position: relative; display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 16px 40px 16px 16px; text-decoration: none !important;
  background: linear-gradient(135deg, #fff 0%, #F5F8FF 100%); border: 1px solid var(--border-hi); border-radius: 16px; box-shadow: var(--s-card);
  color: var(--t2); transition: transform .18s, border-color .18s, box-shadow .18s;
}
.ac-promo-card:hover { transform: translateY(-2px); border-color: var(--blue); box-shadow: 0 10px 24px color-mix(in srgb, var(--blue) 16%, transparent); color: var(--t2); }
.ac-promo-ico { flex: 0 0 42px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: color-mix(in srgb, var(--blue) 12%, #fff); color: var(--blue); font-size: 1rem; }
.ac-promo-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ac-promo-body strong { font-size: .95rem; font-weight: 800; color: var(--t1); line-height: 1.25; }
.ac-promo-body span { font-size: .82rem; line-height: 1.45; color: var(--t5); overflow-wrap: anywhere; }
.ac-promo-go { position: absolute; top: 18px; right: 16px; font-size: .8rem; color: var(--blue); opacity: .55; transition: transform .18s, opacity .18s; }
.ac-promo-card:hover .ac-promo-go { transform: translateX(3px); opacity: 1; }
@media (max-width: 575.98px) { .ac-promo-grid { grid-template-columns: 1fr; } .ac-promo-card { padding: 14px 38px 14px 14px; } }
@media (prefers-reduced-motion: reduce) { .ac-promo-card, .ac-promo-go { transition: none; } .ac-promo-card:hover { transform: none; } }

/* Sitejet Builder card, whichever markup the module uses (never the shortcut button or sidebar link) */
#main-body :is(.card, .panel, div, section)[id*="sitejet" i]:not(.ac-svc):not(:has(.ac-svc-actions)) { display: none !important; }
#main-body .tab-content .card:has(img[src*="sitejet" i]):not(.ac-svc):not(:has(.ac-svc-actions)),
#main-body .tab-content .panel:has(img[src*="sitejet" i]):not(:has(.ac-svc-actions)) { display: none !important; }
.ac-gone { display: none !important; }

/* ═════════ Configure page: option tiles (Operating System, Server Location, Application) ═════════ */
.ac-field-gone { display: none !important; }
.ac-opt-src { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; overflow: hidden; pointer-events: none; }
#productConfigurableOptions .ac-opt-col { flex: 0 0 100%; max-width: 100%; }
#productConfigurableOptions .ac-opt-col > .form-group > label:first-child, #productConfigurableOptions .ac-opt-col label[for^="inputConfigOption"] {
  display: block; margin: 6px 0 10px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--t5);
}
.ac-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; margin-bottom: 8px; }
.ac-opts-loc { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.ac-opts-app { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }
.ac-opt {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 34px 12px 12px; text-align: left; cursor: pointer;
  background: #fff; border: 1.5px solid var(--border-hi); border-radius: 14px; color: var(--t2); font: inherit; line-height: 1.25;
  transition: border-color .15s, box-shadow .15s, background .15s, transform .15s;
}
.ac-opt:hover { border-color: color-mix(in srgb, var(--blue) 55%, #fff); transform: translateY(-1px); }
.ac-opt:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 30%, transparent); outline-offset: 2px; }
.ac-opt.is-on { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 7%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent); }
.ac-opt-ico { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: #F1F5F9; }
.ac-opt-ico img { width: 24px; height: 24px; object-fit: contain; }
.ac-opt-ico-cc { font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, #fff); }
.ac-opt-ico-letter { font-size: 1rem; font-weight: 800; background: #F1F5F9; }
.ac-opt-ico-none { color: var(--t5); font-size: .95rem; }
.ac-opt-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ac-opt-txt b { font-size: .92rem; font-weight: 700; color: var(--t1); overflow-wrap: break-word; }
.ac-opt-txt small { font-size: .76rem; color: var(--t5); overflow-wrap: break-word; }
.ac-opt-txt em { font-style: normal; font-size: .74rem; font-weight: 700; color: var(--blue); }
.ac-opt-check {
  position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1.5px solid var(--border-hi); background: #fff; color: transparent; font-size: .6rem; transition: background .15s, border-color .15s, color .15s;
}
.ac-opt.is-on .ac-opt-check { background: var(--blue); border-color: var(--blue); color: #fff; }
@media (max-width: 575.98px) {
  .ac-opts, .ac-opts-loc, .ac-opts-app { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ac-opt { gap: 8px; padding: 10px; min-height: 56px; border-radius: 12px; }
  .ac-opt-ico { flex-basis: 32px; width: 32px; height: 32px; border-radius: 9px; }
  .ac-opt-ico img { width: 20px; height: 20px; }
  .ac-opt-check { top: -7px; right: -7px; width: 18px; height: 18px; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; box-shadow: 0 1px 3px rgba(15, 23, 42, .25); }
  .ac-opt.is-on .ac-opt-check { opacity: 1; transform: none; }
  .ac-opt-txt b { font-size: .86rem; }
  .ac-opt-txt small { font-size: .72rem; }
}
@media (max-width: 359.98px) { .ac-opts, .ac-opts-loc, .ac-opts-app { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ac-opt { transition: none; } .ac-opt:hover { transform: none; } }

/* Configure page option tabs */
.ac-opt-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 16px; padding: 5px; background: #EEF2F7; border-radius: 16px; }
.ac-opt-tab {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; text-align: left; cursor: pointer; border: 0; border-radius: 12px;
  background: transparent; color: var(--t4); font: inherit; line-height: 1.25; transition: background .15s, color .15s, box-shadow .15s;
}
.ac-opt-tab:hover { background: rgba(255, 255, 255, .6); }
.ac-opt-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 30%, transparent); outline-offset: 1px; }
.ac-opt-tab.is-on { background: #fff; color: var(--t1); box-shadow: 0 1px 3px rgba(15, 23, 42, .14), 0 4px 12px rgba(15, 23, 42, .06); }
.ac-opt-tab-ico { flex: 0 0 34px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(15, 23, 42, .06); color: var(--t4); font-size: .9rem; }
.ac-opt-tab.is-on .ac-opt-tab-ico { background: var(--blue); color: #fff; }
.ac-opt-tab-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ac-opt-tab-txt b { font-size: .88rem; font-weight: 700; overflow-wrap: break-word; }
.ac-opt-tab-txt small { font-size: .74rem; color: var(--t5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-opt-tab.is-on .ac-opt-tab-txt small { color: var(--blue); font-weight: 600; }
.ac-tab-off { display: none !important; }
#productConfigurableOptions.ac-has-tabs .ac-opt-col label[for^="inputConfigOption"] { display: none; }
@media (max-width: 575.98px) {
  .ac-opt-tabs { gap: 4px; padding: 4px; }
  .ac-opt-tab { flex-direction: column; align-items: flex-start; gap: 6px; padding: 9px 8px; }
  .ac-opt-tab-ico { flex-basis: 28px; width: 28px; height: 28px; font-size: .78rem; border-radius: 8px; }
  .ac-opt-tab-txt { width: 100%; }
  .ac-opt-tab-txt b { font-size: .76rem; }
  .ac-opt-tab-txt small { font-size: .7rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { .ac-opt-tab { transition: none; } }

/* Configure page: bolder, cleaner look (no grey) */
.ac-opt { border: 1.5px solid #D9E3F7; box-shadow: 0 1px 2px rgba(41, 102, 243, .06); }
.ac-opt:hover { border-color: var(--blue); box-shadow: 0 6px 16px color-mix(in srgb, var(--blue) 14%, transparent); }
.ac-opt.is-on { border-color: var(--blue); background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 10%, #fff), color-mix(in srgb, var(--blue) 4%, #fff)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent), 0 8px 20px color-mix(in srgb, var(--blue) 16%, transparent); }
.ac-opt-ico { background: color-mix(in srgb, var(--blue) 10%, #fff); }
.ac-opt-ico-none { color: #E11D48; background: #FFF1F2; }
.ac-opt-check { border-color: #C7D6F5; }
.ac-opt-tabs { gap: 10px; padding: 0; background: transparent; border-radius: 0; }
.ac-opt-tab { padding: 12px 14px; background: #fff; border: 1.5px solid #D9E3F7; border-radius: 14px; color: var(--t2); box-shadow: 0 1px 2px rgba(41, 102, 243, .06); }
.ac-opt-tab:hover { background: #F5F8FF; border-color: var(--blue); }
.ac-opt-tab.is-on { background: linear-gradient(135deg, #2966F3, #1D4ED8); border-color: #1D4ED8; color: #fff; box-shadow: 0 8px 20px rgba(41, 102, 243, .32); }
.ac-opt-tab-ico { background: color-mix(in srgb, var(--blue) 12%, #fff); color: var(--blue); }
.ac-opt-tab.is-on .ac-opt-tab-ico { background: rgba(255, 255, 255, .22); color: #fff; }
.ac-opt-tab-txt small { color: var(--t5); }
.ac-opt-tab.is-on .ac-opt-tab-txt small { color: rgba(255, 255, 255, .88); font-weight: 600; }
@media (max-width: 575.98px) { .ac-opt-tabs { gap: 6px; } .ac-opt-tab { padding: 10px 8px; border-radius: 12px; } }

/* country flags on the Server Location tiles */
.ac-opt-ico-flag { background: transparent !important; width: 40px; flex-basis: 40px; }
.ac-opt-ico-flag img { width: 36px; height: auto; max-height: 27px; object-fit: cover; border-radius: 5px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .14), 0 2px 5px rgba(15, 23, 42, .12); }
@media (max-width: 575.98px) { .ac-opt-ico-flag { width: 34px; flex-basis: 34px; } .ac-opt-ico-flag img { width: 30px; max-height: 23px; border-radius: 4px; } }
/* breathing room between the "Configurable Options" heading and the tabs */
#productConfigurableOptions.ac-has-tabs { margin-top: 48px; }
.ac-opt-tabs { margin: 0 0 18px; }
@media (max-width: 575.98px) { #productConfigurableOptions.ac-has-tabs { margin-top: 42px; } .ac-opt-tabs { margin-bottom: 14px; } }

/* ═════════ Astronaut branding ═════════ */
/* login page: starfield, orbiting planet, floating astronaut */
.ac-astro-scene { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; overflow: hidden; }
.ac-astro-stars {
  position: absolute; inset: 0; opacity: .9;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 28% 62%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 44% 10%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 58% 48%, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 72% 22%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 86% 70%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 20% 86%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 92% 38%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 66% 90%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 36% 36%, #fff 50%, transparent 52%);
  animation: ac-twinkle 5s ease-in-out infinite alternate;
}
.ac-astro-planet {
  position: absolute; right: 26px; bottom: 54px; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #FDBA74, #F97316 55%, #C2410C); box-shadow: inset -8px -8px 14px rgba(0, 0, 0, .28), 0 0 24px rgba(251, 146, 60, .45);
  animation: ac-bob 7s ease-in-out infinite;
}
.ac-astro-planet::after { content: ""; position: absolute; left: -22px; right: -22px; top: 22px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); transform: rotate(-16deg); }
.ac-astro-man { position: absolute; right: 18px; top: 14px; width: 104px; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .3)); animation: ac-float 6s ease-in-out infinite; }
.ac-ast-login .ac-login-aside .ac-aside-title { padding-right: 96px; }
.ac-astro-greet { margin: 0 0 18px; }
.ac-astro-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 10%, #fff); color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ac-astro-greet h2 { margin: 12px 0 4px; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--t1); }
.ac-astro-greet p { margin: 0; color: var(--t5); font-size: .95rem; }
@media (max-width: 575.98px) { .ac-astro-man { width: 78px; right: 12px; top: 10px; } .ac-ast-login .ac-login-aside .ac-aside-title { padding-right: 72px; } .ac-astro-planet { width: 40px; height: 40px; right: 16px; bottom: 40px; } .ac-astro-greet h2 { font-size: 1.35rem; } }
@keyframes ac-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes ac-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ac-twinkle { from { opacity: .45; } to { opacity: 1; } }


/* mascot in empty states */
.ac-empty-astro { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; text-align: center; }
.ac-empty-astro img { width: 84px; height: auto; animation: ac-float 6s ease-in-out infinite; filter: drop-shadow(0 8px 12px rgba(41, 102, 243, .22)); margin-bottom: 4px; }
.ac-empty-astro strong { font-size: 1.05rem; font-weight: 800; color: var(--t1); }
.ac-empty-astro span { font-size: .88rem; color: var(--t5); max-width: 340px; }
.ac-empty-astro .btn { margin-top: 10px; }
td.ac-empty-cell { padding: 8px !important; }
table.table-list td.ac-empty-cell::before { display: none !important; }

/* rocket progress tracker */
.ac-track { margin: 0 0 22px; padding: 18px 20px 14px; background: #fff; border: 1px solid #D9E3F7; border-radius: 16px; box-shadow: 0 1px 2px rgba(41, 102, 243, .06); }
.ac-track-line { position: relative; height: 6px; margin: 14px 16.67% 0; border-radius: 999px; background: #E2E8F5; }
.ac-track-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #2966F3, #7C3AED); transition: width 1.1s cubic-bezier(.22, .8, .3, 1); }
.ac-track-rocket { position: absolute; top: 50%; left: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--blue); box-shadow: 0 3px 10px rgba(41, 102, 243, .35); font-size: .85rem; transition: left 1.1s cubic-bezier(.22, .8, .3, 1); }
.ac-track-rocket i { transform: rotate(45deg); }
.ac-track ol { display: grid; grid-template-columns: repeat(3, 1fr); margin: 12px 0 0; padding: 0; list-style: none; }
.ac-track li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--t5); text-align: center; }
.ac-track li b { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #EEF2FA; color: var(--t4); font-size: .72rem; }
.ac-track li.is-on { color: var(--t1); }
.ac-track li.is-on b { background: var(--blue); color: #fff; }
.ac-track li.is-done { color: #059669; }
.ac-track li.is-done b { background: #10B981; color: #fff; }
@media (max-width: 575.98px) { .ac-track { padding: 14px 12px 12px; border-radius: 14px; } .ac-track li { font-size: .72rem; } }

/* order complete: countdown and liftoff */
.ac-launch { position: relative; display: flex; align-items: center; gap: 22px; margin: 0 0 22px; padding: 24px; overflow: hidden; border-radius: 20px; color: #fff; background: radial-gradient(circle at 20% 20%, #1E3A8A, #0B1437 70%); box-shadow: 0 14px 34px rgba(11, 20, 55, .35); }
.ac-launch-pad { position: relative; flex: 0 0 96px; height: 96px; display: flex; align-items: flex-end; justify-content: center; }
.ac-launch-rocket { font-size: 2.8rem; color: #fff; transform: rotate(-45deg); filter: drop-shadow(0 0 12px rgba(251, 146, 60, .8)); transition: transform .2s; }
.ac-launch-star { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #FDE68A; opacity: 0; }
.ac-launch-star.s1 { left: 6px; top: 20px; } .ac-launch-star.s2 { right: 4px; top: 30px; } .ac-launch-star.s3 { left: 22px; top: 4px; } .ac-launch-star.s4 { right: 20px; top: 8px; } .ac-launch-star.s5 { left: 46px; top: 0; }
.ac-launch-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ac-launch-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.ac-launch-sub { font-size: .92rem; color: rgba(255, 255, 255, .8); }
.ac-launch-count { font-size: 3.4rem; font-weight: 800; line-height: 1; color: #FDE68A; }
.ac-launch.is-count .ac-launch-title, .ac-launch.is-count .ac-launch-sub { display: none; }
.ac-launch.is-lift .ac-launch-count, .ac-launch.is-done .ac-launch-count { display: none; }
.ac-launch.is-lift .ac-launch-title { display: block; }
.ac-launch.is-lift .ac-launch-sub { display: block; }
.ac-launch.is-count .ac-launch-rocket { animation: ac-shake .12s linear infinite; }
.ac-launch.is-lift .ac-launch-rocket { animation: ac-liftoff 1.4s ease-in forwards; }
.ac-launch.is-lift .ac-launch-star { animation: ac-burst 1.2s ease-out forwards; }
@keyframes ac-shake { 0% { transform: rotate(-45deg) translate(0, 0); } 50% { transform: rotate(-45deg) translate(1.5px, -1px); } 100% { transform: rotate(-45deg) translate(-1.5px, 1px); } }
@keyframes ac-liftoff { 0% { transform: rotate(-45deg) translate(0, 0); opacity: 1; } 100% { transform: rotate(-45deg) translate(70px, -120px); opacity: 0; } }
@keyframes ac-burst { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(2.2) translateY(-14px); } }
.ac-launch.is-done .ac-launch-rocket { animation: none; }
@media (max-width: 575.98px) { .ac-launch { padding: 18px; gap: 14px; border-radius: 16px; } .ac-launch-pad { flex-basis: 64px; height: 72px; } .ac-launch-rocket { font-size: 2.1rem; } .ac-launch-title { font-size: 1.2rem; } .ac-launch-count { font-size: 2.6rem; } }

/* orbit loader: replaces the spinning circle */
.ac-ast-loader .fa-spin.fa-spinner, .ac-ast-loader .fa-spin.fa-circle-notch, .ac-ast-loader .fa-spin.fa-sync, .ac-ast-loader .fa-spin.fa-sync-alt {
  animation: none !important; position: relative; display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.15em; font-size: 1em; line-height: 1; color: inherit;
}
.ac-ast-loader .fa-spin.fa-spinner::before, .ac-ast-loader .fa-spin.fa-circle-notch::before, .ac-ast-loader .fa-spin.fa-sync::before, .ac-ast-loader .fa-spin.fa-sync-alt::before {
  content: "" !important; position: absolute; inset: 16%; border-radius: 50%; border: 2px solid currentColor; opacity: .28;
}
.ac-ast-loader .fa-spin.fa-spinner::after, .ac-ast-loader .fa-spin.fa-circle-notch::after, .ac-ast-loader .fa-spin.fa-sync::after, .ac-ast-loader .fa-spin.fa-sync-alt::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; animation: ac-orbit .85s linear infinite;
  background: radial-gradient(circle at 50% 6%, currentColor 0 2.2px, transparent 2.8px);
}
@keyframes ac-orbit { to { transform: rotate(360deg); } }

/* rocket flame under the main buttons on hover */
@media (hover: hover) {
  .ac-ast-flames .btn-primary:not(.disabled):not(:disabled), .ac-ast-flames .btn-checkout:not(.disabled):not(:disabled) { position: relative; overflow: visible; }
  .ac-ast-flames .btn-primary:not(.disabled):not(:disabled)::after, .ac-ast-flames .btn-checkout:not(.disabled):not(:disabled)::after {
    content: ""; position: absolute; left: 50%; top: calc(100% - 3px); width: 16px; height: 0; margin-left: -8px; pointer-events: none; opacity: 0;
    border-radius: 2px 2px 60% 60% / 2px 2px 100% 100%; background: linear-gradient(#FDE68A 0%, #FB923C 55%, rgba(249, 115, 22, 0) 100%); transition: height .18s ease, opacity .18s ease;
  }
  .ac-ast-flames .btn-primary:not(.disabled):not(:disabled):hover::after, .ac-ast-flames .btn-checkout:not(.disabled):not(:disabled):hover::after { height: 13px; opacity: 1; animation: ac-flame .16s ease-in-out infinite alternate; }
}
@keyframes ac-flame { from { transform: scaleX(.8) scaleY(.85); } to { transform: scaleX(1.1) scaleY(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .ac-astro-stars, .ac-astro-planet, .ac-astro-man, .ac-empty-astro img, .ac-launch-rocket, .ac-launch-star, .ac-track-fill, .ac-track-rocket { animation: none !important; transition: none !important; }
  .ac-ast-flames .btn-primary::after, .ac-ast-flames .btn-checkout::after { animation: none !important; }
}
/* the greeting replaces the plain "Login" heading */
.ac-ast-login .ac-login-panel:has(.ac-astro-greet) .login-form .card-body > .mb-4:first-child { display: none; }
.ac-ast-login .ac-login-panel .ac-astro-greet { margin-bottom: 22px; }

.ac-hchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; font-size: .78rem; font-weight: 600; border-radius: 999px; color: #fff; }
.ac-hchip b { font-weight: 700; }
.ac-hchip-ok { background: #10B981; }
.ac-hchip-warn { background: #F59E0B; }
.ac-hchip-calm { color: #047857; background: #D1FAE5; }

/* ═════════ Dashboard service box: tabs Active | Services with issues ═════════ */
.ac-svcbox { position: relative; margin: 0 0 20px; padding: 6px 0 8px; background: #fff; border-radius: 18px; box-shadow: inset 3px 0 0 #10B981, 0 12px 30px -16px rgba(16, 185, 129, .45); }
.ac-svcbox-warn { box-shadow: inset 3px 0 0 #F59E0B, 0 12px 30px -16px rgba(245, 158, 11, .55); }
.ac-svcbox-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ac-svcbox-head { padding: 12px 18px 4px 22px; }
.ac-svcbox-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 4px; background: #F1F5FF; border-radius: 999px; }
.ac-svcbox-tab { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 15px; font-size: .86rem; font-weight: 600; color: var(--t4); border-radius: 999px; cursor: pointer; user-select: none; transition: background .15s, color .15s; }
.ac-svcbox-tab b { padding: 1px 8px; font-size: .74rem; font-weight: 700; color: #fff; background: #94A3B8; border-radius: 999px; }
.ac-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; }
.ac-tab-issues .ac-tab-dot { background: #F59E0B; }
.ac-svcbox-tab:hover { color: var(--t1); }
#acsvc-active:checked ~ .ac-svcbox-head .ac-tab-active { color: #047857; background: #fff; box-shadow: 0 2px 8px -2px rgba(16, 185, 129, .45); }
#acsvc-active:checked ~ .ac-svcbox-head .ac-tab-active b { background: #10B981; }
#acsvc-issues:checked ~ .ac-svcbox-head .ac-tab-issues { color: #B45309; background: #fff; box-shadow: 0 2px 8px -2px rgba(245, 158, 11, .5); }
#acsvc-issues:checked ~ .ac-svcbox-head .ac-tab-issues b { background: #F59E0B; }
.ac-svcbox-warn .ac-tab-issues b { background: #F59E0B; }
#acsvc-active:focus-visible ~ .ac-svcbox-head .ac-tab-active, #acsvc-issues:focus-visible ~ .ac-svcbox-head .ac-tab-issues { outline: 2px solid var(--blue); outline-offset: 2px; }
.ac-svcbox-panel { display: none; padding: 6px 12px 6px 16px; }
#acsvc-active:checked ~ .ac-panel-active, #acsvc-issues:checked ~ .ac-panel-issues { display: block; }
.ac-svcbox-list { margin: 0; padding: 0; list-style: none; }
.ac-svcrow { display: grid; grid-template-columns: 40px minmax(160px, 1.3fr) auto minmax(0, 1.2fr) auto; align-items: center; gap: 6px 14px; padding: 12px 8px; border-radius: 14px; transition: background .15s; }
.ac-svcrow:hover { background: #F7FAFF; }
.ac-svcrow + .ac-svcrow { margin-top: 2px; }
.ac-svcrow-ico { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-size: .95rem; }
.ac-svcrow-ico-ok { color: #059669; background: #DDF7EC; }
.ac-svcrow-ico-warn { color: #D97706; background: #FFF0D5; }
.ac-svcrow-main { display: flex; flex-direction: column; min-width: 0; }
.ac-svcrow-main strong { font-size: .95rem; font-weight: 600; color: var(--t1); overflow-wrap: anywhere; }
.ac-svcrow-main span { font-size: .8rem; color: var(--t5); overflow-wrap: anywhere; }
.ac-svcrow-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ac-schip { padding: 3px 10px; font-size: .74rem; font-weight: 600; color: #fff; border-radius: 999px; white-space: nowrap; }
.ac-schip-ok { background: #10B981; }
.ac-schip-warn { background: #F59E0B; }
.ac-svcrow-detail { font-size: .82rem; color: var(--t4); }
.ac-svcrow-ctas { display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ac-svcrow-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; font-size: .82rem; font-weight: 600; color: #fff !important; background: var(--blue); border-radius: 999px; text-decoration: none !important; white-space: nowrap; transition: filter .15s, background .15s; }
.ac-svcrow-issue .ac-svcrow-btn:not(.ac-svcrow-btn-ghost) { background: #D97706; }
.ac-svcrow-btn:hover { filter: brightness(1.07); }
.ac-svcrow-btn-ghost { color: var(--blue) !important; background: #EAF0FF; }
.ac-svcrow-btn-ghost:hover { background: #DCE7FF; filter: none; }
.ac-svcbox-more { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 8px 8px; font-size: .85rem; font-weight: 600; color: var(--blue); text-decoration: none; }
.ac-svcbox-more:hover { text-decoration: underline; }
.ac-svcbox-empty { margin: 8px; padding: 18px 8px; font-size: .92rem; color: var(--t4); }
.ac-svcbox-empty-ok { display: flex; align-items: center; gap: 10px; color: #047857; }
.ac-svcbox-empty-ok i { font-size: 1.15rem; }
.ac-svcbox-lite { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px 16px 24px; }
.ac-svcbox-lite-text { display: flex; flex-direction: column; }
.ac-svcbox-lite-text strong { font-weight: 600; color: var(--t1); }
.ac-svcbox-lite-text span { font-size: .85rem; color: var(--t4); }
@media (max-width: 991.98px) {
  .ac-svcrow { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .ac-svcrow-detail { grid-column: 2 / -1; }
  .ac-svcrow-btn, .ac-svcrow-ctas { grid-column: 2 / -1; justify-self: start; }
}
@media (max-width: 575.98px) {
  .ac-svcbox-head { padding: 12px 12px 4px 16px; }
  .ac-svcbox-tabs { display: flex; width: 100%; }
  .ac-svcbox-tab { flex: 1 1 0; justify-content: center; padding: 8px 8px; font-size: .8rem; gap: 6px; text-align: center; }
  .ac-tab-dot { display: none; }
  .ac-svcbox-panel { padding: 6px 6px 6px 10px; }
  .ac-svcrow { grid-template-columns: 36px minmax(0, 1fr); padding: 12px 6px; }
  .ac-svcrow-ico { width: 36px; height: 36px; }
  .ac-svcrow-chips, .ac-svcrow-detail, .ac-svcrow-btn, .ac-svcrow-ctas { grid-column: 1 / -1; }
  .ac-svcrow-btn, .ac-svcrow-ctas { width: 100%; }
  .ac-svcrow-ctas .ac-svcrow-btn { flex: 1 1 100%; }
  .ac-svcrow-btn { justify-self: stretch; }
  .ac-svcbox-lite { flex-wrap: wrap; }
  .ac-svcbox-lite .ac-svcrow-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ac-svcrow, .ac-svcbox-tab, .ac-svcrow-btn { transition: none; } }
@media (max-width: 575.98px) { .ac-tab-pre { display: none; } .ac-tab-word { text-transform: capitalize; } }
/* Active tab: green side stripe and crisp blue buttons; the Issues tab keeps its amber look */
.ac-svcbox:has(#acsvc-active:checked) { box-shadow: inset 3px 0 0 #10B981, 0 12px 30px -16px rgba(16, 185, 129, .45); }
.ac-svcbox:has(#acsvc-issues:checked) { box-shadow: inset 3px 0 0 #F59E0B, 0 12px 30px -16px rgba(245, 158, 11, .55); }
.ac-panel-active .ac-svcrow-btn { color: #fff !important; background: #2966F3; box-shadow: 0 8px 18px -8px rgba(41, 102, 243, .65); }
.ac-panel-active .ac-svcrow-btn:hover { background: #1F55D6; filter: none; box-shadow: 0 10px 20px -8px rgba(41, 102, 243, .75); }
/* option tiles: always three columns (two on phones, one on very small screens) */
.ac-opts, .ac-opts-loc, .ac-opts-app { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ac-opt-txt b { overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (max-width: 575.98px) { .ac-opts, .ac-opts-loc, .ac-opts-app { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 359.98px) { .ac-opts, .ac-opts-loc, .ac-opts-app { grid-template-columns: 1fr; } }