/* ================================================================
   AshHost — Design System (custom.css)
   Loaded last — controls all colour, type, component overrides.
   Zero external requests. All fonts served locally.
   ================================================================ */

/* ── 1. LOCAL FONT FACES ─────────────────────────────────── */
/* WOFF2 listed first for browsers that support it (~96% of users).
   WOFF fallback for older browsers. WOFF2 files can be generated
   from the WOFF sources using fonttools + brotli (see README). */
@font-face {
  font-family: 'Nexa';
  src: url('../fonts/nexa-webfont/NexaLight.woff2') format('woff2'),
       url('../fonts/nexa-webfont/NexaLight.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nexa';
  src: url('../fonts/nexa-webfont/NexaRegular.woff2') format('woff2'),
       url('../fonts/nexa-webfont/NexaRegular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nexa';
  src: url('../fonts/nexa-webfont/NexaBold.woff2') format('woff2'),
       url('../fonts/nexa-webfont/NexaBold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nexa';
  src: url('../fonts/nexa-webfont/NexaHeavy.woff2') format('woff2'),
       url('../fonts/nexa-webfont/NexaHeavy.woff') format('woff');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofia-pro/SofiaProLightAz.woff2') format('woff2'),
       url('../fonts/sofia-pro/SofiaProLightAz.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofia-pro/SofiaProRegularAz.woff2') format('woff2'),
       url('../fonts/sofia-pro/SofiaProRegularAz.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofia-pro/SofiaProMediumAz.woff2') format('woff2'),
       url('../fonts/sofia-pro/SofiaProMediumAz.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofia-pro/SofiaProSemiBoldAz.woff2') format('woff2'),
       url('../fonts/sofia-pro/SofiaProSemiBoldAz.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro';
  src: url('../fonts/sofia-pro/SofiaProBoldAz.woff2') format('woff2'),
       url('../fonts/sofia-pro/SofiaProBoldAz.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── 2. ROOT TOKENS ──────────────────────────────────────── */
:root {
  --ash-navy:       #080F2E;
  --ash-blue:       #1A2F87;
  --ash-blue-mid:   #2A45A8;
  --ash-blue-light: #4A6BC8;
  --ash-blue-tint:  #D4DCF7;
  --ash-blue-wash:  #EEF2FF;

  --ash-ink:        #0D1117;
  --ash-ink-soft:   #1C2333;
  --ash-slate:      #4B5563;
  --ash-mist:       #9CA3AF;
  --ash-cloud:      #F4F6F9;
  --ash-white:      #FCFDFF;

  --ash-green:      #166534;
  --ash-green-l:    #DCFCE7;
  --ash-green-b:    #86EFAC;
  --ash-amber:      #854D0E;
  --ash-amber-l:    #FEF9C3;
  --ash-amber-b:    #FCD34D;
  --ash-red:        #991B1B;
  --ash-red-l:      #FEE2E2;
  --ash-red-b:      #FCA5A5;
  --ash-info:       #1E40AF;
  --ash-info-l:     #DBEAFE;
  --ash-info-b:     #93C5FD;

  --ash-font-h:     'Nexa', 'Sofia Pro', system-ui, sans-serif;
  --ash-font-body:  'Sofia Pro', system-ui, sans-serif;
  --ash-font-head:  'Nexa', 'Sofia Pro', system-ui, sans-serif;
  --ash-font-sans:  'Sofia Pro', system-ui, sans-serif;

  --ash-r-sm: 4px;
  --ash-r:    6px;
  --ash-r-md: 8px;
  --ash-r-lg: 12px;
}

/* ── 3. BASE TYPOGRAPHY ──────────────────────────────────── */
body {
  font-family: var(--ash-font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.coodiv-text-6,
.main-header-title,
.page-title,
.ash-hero-name,
.ash-section-title {
  font-family: var(--ash-font-h) !important;
  letter-spacing: -0.02em;
}

/* Playfair fix — replace with Nexa throughout */
.hero-area-emyui-aws-title,
.playfair-display-font,
.emyui-ews-plans-group .emyui-ews-plans-group-price-tag,
body.emyui-aws-theme .playfair-display-font {
  font-family: var(--ash-font-h) !important;
}

/* ── 4. PRIMARY COLOUR — replace #473bf0 purple everywhere ── */
/* Buttons */
.btn-primary, .btn-primary:focus {
  background-color: var(--ash-blue) !important;
  border-color: var(--ash-blue) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:active {
  background-color: var(--ash-blue-mid) !important;
  border-color: var(--ash-blue-mid) !important;
}
.btn-red { background-color: var(--ash-red) !important; border-color: var(--ash-red) !important; }

/* whmcs.theme.css purple remnants */
.button-input-generate,
.inputcardcvv-button { background: var(--ash-blue) !important; }
.suggested-domains .btn-moresuggestion {
  background-color: var(--ash-blue) !important;
  border-color: var(--ash-blue) !important;
  border-radius: var(--ash-r-md) !important;
}
.bg-gradient-primary { background: linear-gradient(90deg, var(--ash-navy), var(--ash-blue)) !important; }
.modal-localisation .item-selector .item:hover,
.modal-localisation .item-selector .item.active {
  background-color: var(--ash-blue) !important;
  border-color: var(--ash-blue) !important;
}

/* Links */
a:hover { color: var(--ash-blue); }

/* Nav active */
.nav-scroller-subpages .nav .nav-link:hover,
.nav-scroller-subpages .nav .nav-link.active {
  color: var(--ash-blue) !important;
  border-bottom-color: var(--ash-blue) !important;
}

/* Cart badge */
.shoping-cart-number { background: var(--ash-blue) !important; }

/* Toggles */
.btn-toggle.active { background: var(--ash-blue) !important; }
.coodiv-check-input input:checked ~ .checkbox { background: var(--ash-blue) !important; }
.coodiv-nav-tabs .nav-link.active { border-color: var(--ash-blue) !important; color: var(--ash-blue) !important; }
.order-form-menu-scroller .nav .nav-link.active { border-bottom-color: var(--ash-blue) !important; }
.round-indicator:after { background-color: var(--ash-blue) !important; }

/* ── 5. BUTTONS ──────────────────────────────────────────── */
.btn {
  font-family: var(--ash-font-body) !important;
  font-weight: 500 !important;
  border-radius: var(--ash-r) !important;
  letter-spacing: 0 !important;
  transition: background-color .15s, border-color .15s, box-shadow .15s !important;
}
.btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(26,47,135,.18) !important;
}
@media (max-width: 767px) { .btn { min-height: 44px !important; } }

/* ── 6. FORM CONTROLS ────────────────────────────────────── */
.form-control, input[type="text"], input[type="email"],
input[type="password"], input[type="tel"], input[type="number"],
input[type="url"], input[type="search"], select, textarea {
  font-family: var(--ash-font-body) !important;
  border-radius: var(--ash-r) !important;
  border-color: #D1D5DB !important;
  font-size: 13px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--ash-blue) !important;
  box-shadow: 0 0 0 3px rgba(26,47,135,.12) !important;
  outline: none !important;
}
.form-control.is-invalid, input.is-invalid { border-color: var(--ash-red) !important; }

/* ── 7. CARDS / PANELS ───────────────────────────────────── */
.main-page-contents {
  border-radius: var(--ash-r-md) !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
.white-bg { background: #FFFFFF !important; }
.rounded-20 { border-radius: var(--ash-r-lg) !important; }
.shadow-2  { box-shadow: 0 1px 4px rgba(0,0,0,.06) !important; }

/* ── 8. TABLES ───────────────────────────────────────────── */
.dataTables_wrapper table.table-list thead th {
  background: var(--ash-cloud) !important;
  color: var(--ash-slate) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  border-bottom: 1px solid #E5E7EB !important;
}
table.table-list { font-size: 13px !important; }

/* ── 9. ALERTS ───────────────────────────────────────────── */
.alert {
  font-family: var(--ash-font-body) !important;
  font-size: 13px !important;
  border-radius: var(--ash-r) !important;
  border-width: 1px !important;
}
.alert-info    { background: var(--ash-info-l) !important; border-color: var(--ash-info-b) !important; color: var(--ash-info) !important; }
.alert-success { background: var(--ash-green-l) !important; border-color: var(--ash-green-b) !important; color: var(--ash-green) !important; }
.alert-warning { background: var(--ash-amber-l) !important; border-color: var(--ash-amber-b) !important; color: var(--ash-amber) !important; }
.alert-danger  { background: var(--ash-red-l) !important; border-color: var(--ash-red-b) !important; color: var(--ash-red) !important; }

/* ── 10. BADGES ──────────────────────────────────────────── */
.badge, .label {
  border-radius: var(--ash-r-sm) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 2px 8px !important;
}
.badge-success, .label-success { background: var(--ash-green-l) !important; color: var(--ash-green) !important; }
.badge-warning, .label-warning { background: var(--ash-amber-l) !important; color: var(--ash-amber) !important; }
.badge-danger,  .label-danger  { background: var(--ash-red-l) !important; color: var(--ash-red) !important; }
.badge-info,    .label-info    { background: var(--ash-info-l) !important; color: var(--ash-info) !important; }
.badge-primary, .label-primary { background: var(--ash-blue-wash) !important; color: var(--ash-blue) !important; }

/* ── 11. PRELOADER ───────────────────────────────────────── */
.preloader { background: #FCFDFF !important; }

/* ── 12. BREADCRUMB ──────────────────────────────────────── */
.breadcrumb-container { border-bottom: 1px solid #E5E7EB !important; }
.breadcrumb-item a { color: var(--ash-blue) !important; }

/* ── 13. NAV SCROLLER ────────────────────────────────────── */
.nav-scroller-subpages { background: #FFFFFF !important; border-bottom: 1px solid #E5E7EB !important; }

/* ── 14. HEADER INNER PAGE background ───────────────────── */
#not-main-body.bg-default,
.bg-default { background: var(--ash-cloud) !important; }

/* ── 15. FOCUS RING (global a11y) ────────────────────────── */
*:focus-visible { outline: 2px solid var(--ash-blue) !important; outline-offset: 2px !important; }
*:focus:not(:focus-visible) { outline: none !important; }

/* ── 16. REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .preloader { display: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── 17. STORE ORDER PAGE — replace dark AI theme ────────── */
.ashhost-order {
  font-family: var(--ash-font-body) !important;
  background: var(--ash-cloud) !important;
  color: var(--ash-ink) !important;
  --ash-bg-primary: var(--ash-cloud);
  --ash-bg-card: #FFFFFF;
  --ash-bg-card-hover: #F9FAFB;
  --ash-bg-input: #FFFFFF;
  --ash-border: #E5E7EB;
  --ash-border-active: var(--ash-blue);
  --ash-accent: var(--ash-blue);
  --ash-accent-light: var(--ash-blue-mid);
  --ash-accent-glow: rgba(26,47,135,.08);
  --ash-text-primary: var(--ash-ink);
  --ash-text-secondary: var(--ash-slate);
  --ash-text-muted: var(--ash-mist);
  --ash-shadow: 0 2px 8px rgba(0,0,0,.06);
  --ash-shadow-lg: 0 4px 16px rgba(0,0,0,.08);
}
.ashhost-order .ash-section-label { color: var(--ash-blue) !important; }
.ashhost-order .ash-card,
.ashhost-order .order-product-card,
.ashhost-order [class*="card"] {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  color: var(--ash-ink) !important;
}
.ashhost-order .order-summary-header,
.ashhost-order .price-box,
.ashhost-order .checkout-header {
  background: var(--ash-blue-wash) !important;
  border-color: var(--ash-blue-tint) !important;
  color: var(--ash-blue) !important;
}
.ashhost-order input,
.ashhost-order select,
.ashhost-order textarea {
  background: #FFFFFF !important;
  border-color: #D1D5DB !important;
  color: var(--ash-ink) !important;
}
.ashhost-order label { color: var(--ash-slate) !important; }

/* ── 18. FOOTER OVERRIDES — bring trust banner inline ────── */
.ash-trust-banner {
  background: var(--ash-navy) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
.ash-trust-grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) !important;
}
.ash-trust-badge {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.7) !important;
}
.ash-btn-primary {
  background: var(--ash-blue) !important;
  box-shadow: 0 4px 16px rgba(26,47,135,.3) !important;
}
.ash-btn-primary:hover {
  background: var(--ash-blue-mid) !important;
  box-shadow: 0 6px 20px rgba(26,47,135,.4) !important;
}
.ash-footer-col-title::before { background: var(--ash-blue) !important; }
.ash-contact-ico { color: var(--ash-blue-light) !important; }

/* ── 19. GOOGLE SIGN-IN (preserve) ──────────────────────── */
.provider-btn-wrapper { display: flex; justify-content: center; }
.g_id_signin iframe {
  width: 100% !important;
  max-width: 320px !important;
  height: 44px !important;
  border-radius: 8px !important;
}

/* ================================================================
   AshHost — EXTENDED UI IMPROVEMENTS  (appended 2026)
   ================================================================ */

/* ── 20. CLIENT AREA PRODUCT / SERVICE TABLES ── */
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #D1D5DB !important;
  border-radius: var(--ash-r) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-family: var(--ash-font-body) !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--ash-blue) !important;
  box-shadow: 0 0 0 3px rgba(26,47,135,.12) !important;
  outline: none !important;
}
.table-list tbody tr:hover {
  background: #F9FAFB !important;
}
.table-list tbody tr td { vertical-align: middle !important; }

/* Status badges in tables */
.label-success, .badge-success { background: #DCFCE7 !important; color: #166534 !important; border-radius: 4px !important; }
.label-danger,  .badge-danger  { background: #FEE2E2 !important; color: #991B1B !important; border-radius: 4px !important; }
.label-warning, .badge-warning { background: #FEF9C3 !important; color: #854D0E !important; border-radius: 4px !important; }
.label-info,    .badge-info    { background: #DBEAFE !important; color: #1E40AF !important; border-radius: 4px !important; }
.label-default  { background: #F3F4F6 !important; color: #4B5563 !important; border-radius: 4px !important; }

/* ── 21. INVOICE PAGE IMPROVEMENTS ── */
.invoice-container { font-family: var(--ash-font-body) !important; }
.invoice-status span.unpaid {
  background: #FEF9C3; color: #854D0E; padding: 4px 12px; border-radius: 4px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.invoice-status span.paid {
  background: #DCFCE7; color: #166534; padding: 4px 12px; border-radius: 4px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.invoice-status span.cancelled, .invoice-status span.refunded {
  background: #FEE2E2; color: #991B1B; padding: 4px 12px; border-radius: 4px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.invoice-status span.draft {
  background: #F3F4F6; color: #4B5563; padding: 4px 12px; border-radius: 4px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.invoice-status span.collections {
  background: #FEE2E2; color: #991B1B; padding: 4px 12px; border-radius: 4px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}

/* ── 22. SUPPORT TICKET LIST IMPROVEMENTS ── */
.ticket-subject.unread { font-weight: 700 !important; color: var(--ash-ink) !important; }
.ticket-number {
  font-size: 11px; font-weight: 600; color: var(--ash-mist);
  font-family: 'Courier New', monospace; margin-right: 6px;
}
#tableTicketsList tbody tr { cursor: pointer; }
#tableTicketsList tbody tr:hover td { background: #F9FAFB !important; }

/* ── 23. KNOWLEDGEBASE IMPROVEMENTS ── */
.knowledgebase-categories-grid .kbcat {
  border: 1px solid #E5E7EB !important;
  border-radius: var(--ash-r-md) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.knowledgebase-categories-grid .kbcat:hover {
  border-color: var(--ash-blue) !important;
  box-shadow: 0 0 0 3px rgba(26,47,135,.07) !important;
}

/* ── 24. SUPPORT TICKET SUBMIT IMPROVEMENTS ── */
.support-ticketssubmit-step-title {
  font-family: var(--ash-font-h) !important;
  font-weight: 700 !important; letter-spacing: -0.01em !important;
}

/* ── 25. GLOBAL LINK COLOR ── */
a { color: var(--ash-blue); }
a:hover { color: var(--ash-blue-mid); }

/* ── 26. PAGINATION ── */
.pagination .page-item.active .page-link {
  background: var(--ash-blue) !important;
  border-color: var(--ash-blue) !important;
}
.pagination .page-link {
  color: var(--ash-blue) !important;
  border-color: #E5E7EB !important;
  font-size: 13px !important;
}
.pagination .page-link:hover { background: var(--ash-blue-wash) !important; }

/* ── 27. MODAL IMPROVEMENTS ── */
.modal-content {
  border-radius: var(--ash-r-lg) !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
}
.modal-header {
  border-bottom: 1px solid #E5E7EB !important;
  padding: 18px 24px !important;
}
.modal-header .modal-title {
  font-family: var(--ash-font-h) !important;
  font-size: 16px !important; font-weight: 700 !important;
}
.modal-body { padding: 20px 24px !important; font-size: 13px !important; }
.modal-footer {
  border-top: 1px solid #E5E7EB !important;
  padding: 14px 24px !important;
}
.close { font-size: 18px !important; opacity: 0.5 !important; }
.close:hover { opacity: 0.8 !important; }

/* ── 28. PASSWORD RESET PAGE ── */
.password-reset-container .form-holder { max-width: 420px !important; }
.password-reset-container .form-items { padding: 28px 28px 22px !important; }

/* ── 29. CLIENT REGISTER FORM ── */
.main-signup-block .form-holder {
  box-shadow: 0 4px 20px rgba(0,0,0,.06) !important;
  border: 1px solid #E5E7EB !important;
}
.main-signup-block .form-group { margin-bottom: 14px !important; }
.main-signup-block .form-title h2 {
  font-family: var(--ash-font-h) !important;
  font-size: 20px !important; font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* ── 30. ALERTS / FLASH MESSAGES ── */
.alert { border-left-width: 3px !important; }
.alert-info    { border-left-color: var(--ash-info) !important; }
.alert-success { border-left-color: var(--ash-green) !important; }
.alert-warning { border-left-color: var(--ash-amber) !important; }
.alert-danger  { border-left-color: var(--ash-red) !important; }

/* ── 31. EMPTY STATE IMPROVEMENTS ── */
.table-empty-state, .empty-state, .no-results {
  text-align: center; padding: 48px 20px;
  color: var(--ash-mist); font-size: 14px;
}
.table-empty-state i, .empty-state i {
  font-size: 32px; display: block; margin-bottom: 12px;
  color: var(--ash-cloud);
}

/* ── 32. SCROLL TO TOP BUTTON ── */
#toTop {
  position: fixed; bottom: 24px; right: 24px;
  width: 40px; height: 40px; z-index: 9999;
  background: var(--ash-blue) !important;
  color: #fff !important; border-radius: 8px !important;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(26,47,135,.3) !important;
  border: none !important; padding: 0 !important; min-height: 40px !important;
  transition: background .15s, transform .15s !important;
}
#toTop:hover { background: var(--ash-blue-mid) !important; transform: translateY(-2px) !important; }

/* ── 33. TWO-FACTOR AUTH PAGE ── */
.card.mw-540 {
  border-radius: var(--ash-r-lg) !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.06) !important;
  padding: 4px !important;
}

/* ── 34. DOMAIN SEARCH ── */
.domain-search-form .btn-search,
#btnCheckAvailability {
  background: var(--ash-blue) !important;
  border-color: var(--ash-blue) !important;
  font-family: var(--ash-font-body) !important;
}
#btnCheckAvailability:hover { background: var(--ash-blue-mid) !important; }
.suggested-domain-price { color: var(--ash-blue) !important; font-weight: 700 !important; }

/* ── 35. PRODUCT DETAILS PAGE ── */
.service-info-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 600;
}

/* ── 36. NAV ACTIVE STATE ── */
.nav-scroller-subpages .nav .nav-link.active,
.nav-scroller-subpages .nav .nav-link:hover {
  color: var(--ash-blue) !important;
  border-bottom: 2px solid var(--ash-blue) !important;
  font-weight: 600 !important;
}

/* ── 37. BREADCRUMB ── */
.breadcrumb {
  background: transparent !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
}

/* ── 38. CLIENT AREA HOME — override bg-default on body class ── */
.bg-default-2 { background: var(--ash-cloud) !important; }

/* ── 39. PRINT / INVOICE PDF ── */
@media print {
  .preloader, #toTop, .site-header, .ash-trust-banner,
  .ash-footer, footer, .breadcrumb-container,
  .nav-scroller-subpages { display: none !important; }
}

/* ── 40. MOBILE UX FIXES ── */
@media (max-width: 575px) {
  .main-page-contents { border-radius: var(--ash-r) !important; padding: 16px !important; }
  .ash-stat-num { font-size: 18px !important; }
  h1, .h1 { font-size: 1.5rem !important; }
  h2, .h2 { font-size: 1.25rem !important; }
  .modal-dialog { margin: 12px !important; }
  .modal-body, .modal-header { padding: 16px !important; }
}

/* ── 41. ANNOUNCEMENT / BLOG LIST ── */
.announcements-list .announcement-item,
.announcement-entry { border-radius: var(--ash-r-md) !important; }

/* ── 42. STORE ORDER PAGE LIGHT THEME ── */
.emyui-aws-theme .order-product-card:hover,
.ashhost-order .order-product-card:hover {
  border-color: var(--ash-blue) !important;
  box-shadow: 0 0 0 3px rgba(26,47,135,.08) !important;
}

/* ── 43. PAYMENT METHOD FORM ── */
.payment-method-wrapper {
  border: 1px solid #E5E7EB !important;
  border-radius: var(--ash-r-md) !important;
}
.payment-method-wrapper .payment-method-label {
  font-size: 13px !important; font-weight: 500 !important;
}

/* ── 44. ACCOUNT SECURITY PAGE ── */
.two-factor-section {
  border: 1px solid #E5E7EB !important;
  border-radius: var(--ash-r-md) !important;
  padding: 20px !important;
}

/* ── 45. SKIP-TO-MAIN LINK (a11y) ── */
.skip-main {
  position: absolute; top: -40px; left: 8px;
  background: var(--ash-blue); color: #fff;
  padding: 8px 16px; border-radius: 0 0 6px 6px;
  font-size: 13px; font-weight: 600; z-index: 10000;
  transition: top .15s; text-decoration: none;
}
.skip-main:focus { top: 0; }

/* ── 46. ICON FONT RESTORE (do not inherit Sofia Pro onto FA/feather) ── */
i.fas, i.far, i.fal, i.fad, .fas, .far, .fal, .fad,
.ah-stat-dot i, .nav-card-icon i, .ashhost-drop-icon i {
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 6 Free", "Font Awesome 6 Pro" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  line-height: 1 !important;
  display: inline-block;
}
i.fab, .fab {
  font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
i.feather, .feather {
  font-family: 'feather' !important;
  font-weight: normal !important;
  font-style: normal !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
}

/* ── 47. STORE DROPDOWN grid children ── */
.ashhost-dropdown > .dropdown-divider,
.ashhost-dropdown > .ashhost-currency-header,
.ashhost-dropdown > .ashhost-drop-footer {
  grid-column: 1 / -1;
}

/* ── 48. MOBILE NAV overflow guard ── */
@media (max-width: 991.98px) {
  .site-header .navbar.site-navbar { max-width: 100%; }
  .site-header .search-btn-header,
  .site-header .signup-btn-header-mobile { display: none !important; }
}

/* ── 49. SIGNUP BUTTON CONTRAST GUARANTEE ── */
.ash-nav-register,
a.ash-nav-register,
.site-header .ash-nav-register,
.site-header.top-header-fixed .ash-nav-register,
.site-header.fixed-header-layout .ash-nav-register,
.site-header.fixed-header-layout.top-header-fixed .ash-nav-register,
.site-header.fixed-header-layout.top-header-fixed .header-btn-whmcs .ash-nav-register,
.top-header-fixed .ash-nav-register,
.header-btn-whmcs .ash-nav-register {
  color: #FFFFFF !important;
  background-color: var(--ash-blue) !important;
  border-color: var(--ash-blue) !important;
}
.ash-nav-register:hover,
a.ash-nav-register:hover,
.site-header .ash-nav-register:hover,
.site-header.top-header-fixed .ash-nav-register:hover,
.site-header.fixed-header-layout .ash-nav-register:hover,
.site-header.fixed-header-layout.top-header-fixed .ash-nav-register:hover,
.site-header.fixed-header-layout.top-header-fixed .header-btn-whmcs .ash-nav-register:hover,
.top-header-fixed .ash-nav-register:hover,
.header-btn-whmcs .ash-nav-register:hover {
  color: #FFFFFF !important;
  background-color: var(--ash-blue-mid) !important;
  border-color: var(--ash-blue-mid) !important;
}

/* ── 50. BODY SCROLL LOCK FOR MOBILE MENU ── */
body.mobile-menu-open {
  overflow: hidden !important;
  touch-action: none;
}

/* ── 51. NAVBAR & MOBILE DRAWER ALIGNMENT ── */
.main-menu .coodiv-toggle-arrow {
  justify-content: flex-start !important;
}

@media (max-width: 991.98px) {
  .navbar-nav .ashhost-nav-link,
  .main-menu .ashhost-nav-link,
  .main-menu .coodiv-toggle-arrow.ashhost-nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 13px 14px !important;
    gap: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-sizing: border-box !important;
  }
  .main-menu .coodiv-toggle-arrow.ashhost-nav-link::after {
    margin-left: auto !important;
    font-size: 11px !important;
    opacity: 0.8 !important;
  }
}

/* ── 52. STORE PAGE & ORDERFORM DARK INFRASTRUCTURE THEME ── */
#main-body.ash-store-page,
.ash-store-page,
.ash-store-page #main-body,
body.user-in-shoppingcart #main-body,
body.user-in-shoppingcart.using-emyui-cart-aws #main-body.bg-default-2,
.ah-store-container,
.ah {
  background: #080F2E !important;
  color: #F1F5F9 !important;
}

#main-body.ash-store-page .main-page-contents,
#main-body.ash-store-page .main-page-container,
.ash-store-page .main-page-contents.white-bg {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Store Page Hero */
.ah-hero,
.ash-store-page .ah-hero {
  background: radial-gradient(circle at 50% 0%, rgba(26, 47, 135, 0.45) 0%, rgba(8, 15, 46, 0.95) 75%), #080F2E !important;
  padding: 56px 20px 48px !important;
  text-align: center !important;
  position: relative !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.ah-hero h1,
.ash-store-page .ah-hero h1,
.ah h1,
h1.ah-title {
  color: #FFFFFF !important;
  font-family: var(--ash-font-head, 'Nexa', 'Sofia Pro', sans-serif) !important;
  font-weight: 800 !important;
  font-size: clamp(2rem, 3.8vw, 2.75rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin: 12px auto !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4) !important;
}

.ah-eyebrow,
.ash-store-page .ah-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #38BDF8 !important;
  font-family: var(--ash-font-body, 'Sofia Pro', sans-serif) !important;
  font-size: 0.80rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  background: rgba(56, 189, 248, 0.12) !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

.ah-hero-sub,
.ash-store-page .ah-hero-sub,
.ah-hero p {
  color: #94A3B8 !important;
  font-size: clamp(0.95rem, 1.3vw, 1.08rem) !important;
  line-height: 1.65 !important;
  max-width: 640px !important;
  margin: 10px auto 0 !important;
  font-weight: 400 !important;
}

/* Feature Badges in Hero */
.ah-badges,
.ash-store-page .ah-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 24px !important;
}

.ah-badges .ah-badge,
.ash-store-page .ah-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 15px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #E2E8F0 !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.2s ease !important;
}

.ah-badges .ah-badge:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

.ah-badges .ah-badge i {
  color: #38BDF8 !important;
}

/* Store Content Header */
.ah-content-header,
.ash-store-page .ah-content-header {
  margin: 36px 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

.ah-content-header .ah-cat-title,
.ash-store-page .ah-cat-title {
  color: #FFFFFF !important;
  font-family: var(--ash-font-head, 'Nexa', 'Sofia Pro', sans-serif) !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

.ah-content-header .ah-cat-count,
.ash-store-page .ah-cat-count {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #94A3B8 !important;
  background: rgba(255, 255, 255, 0.07) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Filter Pills */
.ah-filters .ah-filter-btn,
.ash-store-page .ah-filter-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #94A3B8 !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.ah-filters .ah-filter-btn:hover,
.ah-filters .ah-filter-btn.active,
.ash-store-page .ah-filter-btn.active {
  background: #1A2F87 !important;
  border-color: #38BDF8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(26, 47, 135, 0.4) !important;
}

/* Product Cards */
.ah-card,
.ash-store-page .ah-card {
  background: #0E1738 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  position: relative !important;
  overflow: hidden !important;
}

.ah-card:hover,
.ash-store-page .ah-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), 0 0 20px rgba(26, 47, 135, 0.25) !important;
}

.ah-card-header .ah-card-title,
.ash-store-page .ah-card-title {
  color: #FFFFFF !important;
  font-family: var(--ash-font-head, 'Nexa', 'Sofia Pro', sans-serif) !important;
  font-size: 1.22rem !important;
  font-weight: 800 !important;
  margin: 0 0 8px !important;
}

.ah-price,
.ash-store-page .ah-price {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 14px 0 !important;
  line-height: 1.1 !important;
}

.ah-price .ah-currency,
.ash-store-page .ah-price .ah-currency {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #38BDF8 !important;
}

.ah-price .ah-period,
.ash-store-page .ah-price .ah-period {
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: #94A3B8 !important;
}

.ah-features,
.ash-store-page .ah-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 18px 0 22px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 16px !important;
}

.ah-features li,
.ash-store-page .ah-features li {
  font-size: 0.85rem !important;
  color: #CBD5E1 !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.ah-features li i,
.ash-store-page .ah-features li i {
  color: #10B981 !important;
  font-size: 0.85rem !important;
  flex-shrink: 0 !important;
}

.ah-btn-primary,
.ash-store-page .ah-btn-primary,
.ash-store-page .btn-order-now {
  background: linear-gradient(135deg, #1A2F87 0%, #172554 100%) !important;
  border: 1px solid #38BDF8 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 11px 20px !important;
  font-size: 0.92rem !important;
  text-align: center !important;
  box-shadow: 0 4px 14px rgba(26, 47, 135, 0.4) !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  display: inline-block !important;
}

.ah-btn-primary:hover,
.ash-store-page .ah-btn-primary:hover,
.ash-store-page .btn-order-now:hover {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  border-color: #60A5FA !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5) !important;
  transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   53. LOGGED-IN MOBILE NAVBAR & WHMCS FOOTER / COPYRIGHT INTEGRATION
   ═══════════════════════════════════════════════════════════════════ */
/* Mobile Header user button icon-only & responsive alignment */
@media (max-width: 991px) {
  .site-header .user-dropdown-header,
  .site-header .user-dropdown-header > .nav-item {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-header .user-dropdown-header .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .site-header .user-dropdown-header .nav-link:hover,
  .site-header .user-dropdown-header .nav-link:focus {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
  }

  /* Scrolled light header */
  .site-header.scrolled .user-dropdown-header .nav-link {
    background: rgba(15, 23, 42, 0.05) !important;
    color: #0F172A !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
  }

  /* Hide caret / toggle arrow on mobile user button */
  .site-header .user-dropdown-header .nav-link::after,
  .site-header .user-dropdown-header .nav-link::before,
  .site-header .user-dropdown-header .coodiv-toggle-arrow::after {
    display: none !important;
    content: none !important;
  }

  .site-header .user-dropdown-header .nav-link i {
    font-size: 16px !important;
    margin: 0 !important;
    color: inherit !important;
  }

  /* Dropdown menu positioning on mobile */
  .site-header .user-dropdown-header .dropdown-menu {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 100% !important;
    min-width: 220px !important;
    max-width: calc(100vw - 20px) !important;
    margin-top: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    z-index: 1050 !important;
  }
}

@media (max-width: 380px) {
  .site-header .header-btn-whmcs {
    gap: 3px !important;
  }
  .site-header .shoping-cart-btn-header,
  .site-header .notifications-btn-header,
  .site-header .user-dropdown-header .nav-link,
  .site-header .navbar-toggler.hamburger-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 13px !important;
  }
}

/* WHMCS Trailing Powered-By & External Copyright styling */
.poweredby,
p.poweredby,
div.poweredby,
footer.footer .copyright,
.copyright-notice {
  background: #050B1E !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-family: 'Sofia Pro', system-ui, sans-serif !important;
  font-size: 12px !important;
  text-align: center !important;
  padding: 12px 15px 16px !important;
  margin: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  width: 100% !important;
}

.poweredby a,
p.poweredby a,
div.poweredby a,
footer.footer .copyright a {
  color: #60A5FA !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color 0.15s ease !important;
}

.poweredby a:hover,
p.poweredby a:hover,
div.poweredby a:hover,
footer.footer .copyright a:hover {
  color: #93C5FD !important;
  text-decoration: underline !important;
}

/* ═══════════════════════════════════════════════════════════════════
   54. VISUAL ARTIFACTS & UNWANTED BOXES / TOFU GLYPH FIXES
   ═══════════════════════════════════════════════════════════════════ */
/* Remove unwanted white circle & dashed borders on ordersummary-coodiv-box */
.ordersummary-coodiv-box:before,
.ordersummary-coodiv-box:after,
body .ordersummary-coodiv-box:before,
body .ordersummary-coodiv-box:after {
  display: none !important;
  content: none !important;
}

/* Suppress empty badges that render as broken tiny boxes */
.badge:empty,
.ashhost-nav-link .badge:empty,
.nav-link .badge:empty {
  display: none !important;
}

/* Ensure footer logo is 100% transparent */
.ash-footer-logo,
.ash-footer-brand img,
.brand-logo img {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   55. STORE PAGE & CART HIGH-CONTRAST DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════════ */
/* Ensure all text inside product cards, cart, and config is legible */
#order-standard_cart {
  font-family: 'Sofia Pro', system-ui, sans-serif !important;
}

#order-standard_cart .header-lined h1 {
  font-family: var(--ash-font-head, 'Nexa', 'Sofia Pro', sans-serif) !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  letter-spacing: -0.02em !important;
}

.ash-store-page #order-standard_cart .header-lined h1 {
  color: #FFFFFF !important;
}

#order-standard_cart .product-info {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

#order-standard_cart .product-info .product-title {
  color: #0F172A !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  margin-bottom: 8px !important;
}

#order-standard_cart .product-info p {
  color: #475569 !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
}

/* Product cards in standard_cart */
#products .product {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s ease !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}

#products .product:hover {
  border-color: #1A2F87 !important;
  box-shadow: 0 8px 24px rgba(26, 47, 135, 0.08) !important;
  transform: translateY(-2px) !important;
}

#products .product header {
  padding: 18px 20px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  color: #0F172A !important;
}

#products .product .product-desc {
  padding: 16px 20px !important;
  color: #475569 !important;
  font-size: 0.90rem !important;
}

#products .product .product-desc ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 0 !important;
}

#products .product .product-desc ul li {
  padding: 5px 0 !important;
  color: #334155 !important;
  font-size: 0.88rem !important;
  border-bottom: 1px solid #F8FAFC !important;
}

#products .product footer {
  padding: 16px 20px !important;
  background: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#products .product footer .product-pricing .price {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #1A2F87 !important;
  font-family: 'Sofia Pro', system-ui, sans-serif !important;
}

/* Category Sidebar Navigation */
#order-standard_cart .cart-sidebar .list-group-item {
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 0.90rem !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;
  transition: all 0.15s ease !important;
}

#order-standard_cart .cart-sidebar .list-group-item:hover {
  background: #F1F5F9 !important;
  color: #1A2F87 !important;
}

#order-standard_cart .cart-sidebar .list-group-item.active {
  background: #1A2F87 !important;
  border-color: #1A2F87 !important;
  color: #FFFFFF !important;
}

/* Cart Table & Checkout Flow */
.view-cart-items-header {
  background: #F1F5F9 !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  margin-bottom: 12px !important;
}

.view-cart-items .item {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

.view-cart-items .item-title {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #0F172A !important;
}

.view-cart-items .item-price {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #1A2F87 !important;
}

/* Order Summary Sidebar */
.ordersummary-coodiv-box,
.order-summary {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.ordersummary-coodiv-box .product-name {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #0F172A !important;
}

.ordersummary-coodiv-box .total-due-today {
  background: #EEF2FF !important;
  border: 1px solid #C7D2FE !important;
  border-radius: 10px !important;
  padding: 14px !important;
  text-align: center !important;
  margin-top: 18px !important;
}

.ordersummary-coodiv-box .total-due-today .amt {
  color: #1A2F87 !important;
  font-size: 26px !important;
  font-weight: 800 !important;
}

/* Checkout CTA Button */
.btn-checkout,
.btn-order-now,
#btnCompleteOrder {
  background: #1A2F87 !important;
  border-color: #1A2F87 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(26, 47, 135, 0.25) !important;
}

.btn-checkout:hover,
.btn-order-now:hover,
#btnCompleteOrder:hover {
  background: #2563EB !important;
  border-color: #2563EB !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   56. CLIENT AREA SEMANTIC COLOR SYSTEM & RESPONSIVE DASHBOARD
   ═══════════════════════════════════════════════════════════════════ */
/* Semantic status badges */
.label-active,
.label-success,
.status-active {
  background: #DCFCE7 !important;
  color: #166534 !important;
  border: 1px solid #BBF7D0 !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
}

.label-pending,
.label-warning,
.status-pending {
  background: #FEF9C3 !important;
  color: #854D0E !important;
  border: 1px solid #FEF08A !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
}

.label-suspended,
.label-danger,
.status-suspended {
  background: #FEE2E2 !important;
  color: #991B1B !important;
  border: 1px solid #FECACA !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
}

.label-terminated,
.label-default,
.status-terminated {
  background: #F1F5F9 !important;
  color: #64748B !important;
  border: 1px solid #E2E8F0 !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
}

/* Client Area Mobile Tables */
.table-responsive {
  border: none !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.table-responsive .table {
  min-width: 580px !important;
}

@media (max-width: 640px) {
  .ash-actions {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .ash-action {
    padding: 10px 6px 8px !important;
  }
  .ash-action-label {
    font-size: 10px !important;
  }
}

@media (max-width: 440px) {
  .ash-actions {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   57. ASHHOST OFFICIAL BRAND LOCKUP & HEADER / FOOTER SYSTEM
   ═══════════════════════════════════════════════════════════════════ */
/* Combined Brand Lockup [LOGO] AshHost */
.ash-brand-lockup,
a.ash-brand-lockup {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  user-select: none !important;
  vertical-align: middle !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.ash-brand-lockup:hover {
  text-decoration: none !important;
  opacity: 0.96 !important;
}

/* Navbar Logo Emblem */
.ash-brand-logo {
  height: 34px !important;
  max-height: 34px !important;
  width: auto !important;
  max-width: 48px !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.ash-brand-lockup:hover .ash-brand-logo {
  transform: translateY(-1px) scale(1.02) !important;
}

/* Navbar Brand Wordmark "AshHost" */
.ash-brand-name {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  display: inline-block !important;
  color: #FFFFFF !important;
  transition: color 0.2s ease !important;
}

/* Header Initial & Scrolled Dark States with Subtle Premium Blur */
header.site-header.fixed-header-layout {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: rgba(5, 11, 28, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

header.site-header.fixed-header-layout.top-header-fixed {
  position: fixed !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(6, 12, 30, 0.88) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.32) !important;
}

/* Brand wordmark on dark headers */
.site-header .ash-brand-name,
.site-header.top-header-fixed .ash-brand-name {
  color: #FFFFFF !important;
}

/* Wordmark contrast on white/light background contexts */
.light-mode-header .ash-brand-name,
.white-header .ash-brand-name,
.bg-white .ash-brand-name {
  color: #0F172A !important;
}

/* Responsive Brand Lockup Scaling */
@media (max-width: 991px) {
  .ash-brand-logo {
    height: 34px !important;
    max-height: 34px !important;
    max-width: 46px !important;
  }
  .ash-brand-name {
    font-size: 20px !important;
  }
  .ash-brand-lockup {
    gap: 10px !important;
  }
}

@media (max-width: 480px) {
  .ash-brand-logo {
    height: 29px !important;
    max-height: 29px !important;
    max-width: 38px !important;
  }
  .ash-brand-name {
    font-size: 18px !important;
  }
  .ash-brand-lockup {
    gap: 8px !important;
  }
}

@media (max-width: 390px) {
  .ash-brand-logo {
    height: 26px !important;
    max-height: 26px !important;
    max-width: 34px !important;
  }
  .ash-brand-name {
    font-size: 16.5px !important;
  }
  .ash-brand-lockup {
    gap: 7px !important;
  }
}

@media (max-width: 360px) {
  .ash-brand-logo {
    height: 24px !important;
    max-height: 24px !important;
    max-width: 32px !important;
  }
  .ash-brand-name {
    font-size: 15px !important;
  }
  .ash-brand-lockup {
    gap: 6px !important;
  }
}

@media (max-width: 330px) {
  .ash-brand-logo {
    height: 22px !important;
    max-height: 22px !important;
    max-width: 30px !important;
  }
  .ash-brand-name {
    font-size: 14px !important;
  }
  .ash-brand-lockup {
    gap: 5px !important;
  }
}

/* Footer Brand Lockup */
.ash-footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

.ash-footer-brand:hover {
  opacity: 0.95 !important;
  text-decoration: none !important;
}

.ash-footer-logo {
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  max-width: 56px !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.ash-footer-brand-name {
  font-family: 'Nexa', 'Sofia Pro', system-ui, -apple-system, sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

@media (max-width: 768px) {
  .ash-footer-logo {
    height: 36px !important;
    max-height: 36px !important;
  }
  .ash-footer-brand-name {
    font-size: 22px !important;
  }
  .ash-footer-brand {
    gap: 9px !important;
    margin-bottom: 14px !important;
  }
}