/*
 * Phoenix Hosting - client-area skin for the "phoenix" child theme (parent: twenty-one, WHMCS 9.0.8).
 * Same look as phoenix_cart and phoenixhosting.co/start.html: blueprint navy, paper text,
 * brass accent, IBM Plex Sans/Mono (self-hosted in ../fonts, SIL OFL), 2px radius, grid background.
 *
 * How it loads: twenty-one's includes/head.tpl does {assetExists file="custom.css"}, which in a
 * child theme resolves to THIS file (after all.min.css + theme.min.css). The phoenix_darkmode
 * hook adds a second, mtime-busted link to the same file and skips the light/dark machinery
 * when template=phoenix, so nothing else competes. Markup, field names and JS are untouched.
 *
 * !important is used on colours/backgrounds/borders because Bootstrap utilities
 * (.bg-white, .text-muted, .bg-light ...) are themselves !important.
 */

@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2'); }

:root{
  --phx-bg:#12283F; --phx-bg-deep:#0D1F32; --phx-panel:#1B3A56; --phx-panel-2:#21445F;
  --phx-box:rgba(13,31,50,0.55); --phx-head:rgba(33,68,95,0.45);
  --phx-line:rgba(151,196,219,0.28); --phx-line-strong:rgba(151,196,219,0.55);
  --phx-paper:#F1ECDF; --phx-paper-dim:rgba(241,236,223,0.68);
  --phx-ink:#86C1D6; --phx-accent:#CE9046; --phx-accent-bright:#E4AC5E; --phx-good:#7FBF9B; --phx-warn:#E08A6A;
  --phx-radius:2px;
  --phx-sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --phx-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ================================================================== page shell */
html{ color-scheme:dark; }
html body, html body.primary-bg-color{
  background-color:var(--phx-bg) !important; color:var(--phx-paper) !important;
  font-family:var(--phx-sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--phx-line) 1px, transparent 1px), linear-gradient(90deg, var(--phx-line) 1px, transparent 1px);
  background-size:48px 48px; background-position:-1px -1px; background-attachment:fixed;
}
html body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse at 50% -10%, rgba(18,40,63,0) 0%, var(--phx-bg) 70%);
}
/* phoenix_cart (cart pages) draws its own vignette at z-index 0; push it behind too so
   banners between header and main body (email verification) are not dimmed. */
html:root body:has(#order-standard_cart.phx-cart)::before{ z-index:-1 !important; }
/* z-index:-1 keeps the vignette above the page background (painted on the canvas)
   but below all content, so no wrapper needs position/z-index changes. */
html body ::selection{ background:var(--phx-accent); color:var(--phx-bg-deep); }
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .h1, html body .h2, html body .h3, html body .h4, html body .h5, html body .h6{ font-family:var(--phx-sans); color:var(--phx-paper) !important; letter-spacing:-0.005em; }
html body p, html body li, html body dd, html body dt, html body label, html body legend{ color:inherit; }
html body a{ color:var(--phx-ink); }
html body a:hover, html body a:focus{ color:var(--phx-accent-bright); }
html body .text-muted, html body small.text-muted, html body .text-secondary, html body .help-block, html body .form-text{ color:var(--phx-paper-dim) !important; }
html body .text-dark, html body .text-body, html body .text-black-50{ color:var(--phx-paper) !important; }
html body .text-primary, html body .text-info{ color:var(--phx-ink) !important; }
html body .text-success{ color:var(--phx-good) !important; }
html body .text-danger{ color:var(--phx-warn) !important; }
html body .text-warning{ color:var(--phx-accent-bright) !important; }
html body .bg-white, html body .bg-light, html body .bg-default{ background-color:transparent !important; }
html body hr{ border-color:var(--phx-line) !important; }
html body code, html body pre{ font-family:var(--phx-mono); color:var(--phx-accent-bright); }
html body pre{ background:var(--phx-bg-deep) !important; border:1px solid var(--phx-line); border-radius:var(--phx-radius); color:var(--phx-paper); padding:12px; }
html body .mono, html body .font-monospace{ font-family:var(--phx-mono); }
html body :focus-visible{ outline:2px solid var(--phx-accent-bright) !important; outline-offset:2px; }

/* ------------------------------------------------------------------ header */
html body header.header{ background:linear-gradient(180deg, rgba(13,31,50,0.85), rgba(13,31,50,0.55)) !important; border-bottom:1px solid var(--phx-line) !important; box-shadow:none !important; }
html body header.header .topbar{ background:var(--phx-bg-deep) !important; color:var(--phx-paper-dim) !important; border-bottom:1px solid var(--phx-line); font-family:var(--phx-mono); font-size:12.5px; }
html body header.header .topbar .btn, html body header.header .topbar .active-client .btn, html body header.header .topbar .active-client .input-group-text{ color:var(--phx-paper-dim) !important; background:transparent !important; font-family:var(--phx-mono); font-size:12.5px; }
html body header.header .topbar .btn:hover{ color:var(--phx-accent-bright) !important; }
html body header.header .topbar .active-client .btn.btn-active-client span{ border-bottom:1px dashed var(--phx-line-strong); color:var(--phx-paper) !important; }
html body header.header .navbar, html body header.header .navbar-light, html body header.header .main-navbar-wrapper{ background:transparent !important; border-color:var(--phx-line) !important; box-shadow:none !important; }
html body header.header .main-navbar-wrapper{ border-top:1px solid var(--phx-line) !important; }
html body header.header .navbar-brand{ display:inline-flex; align-items:center; gap:10px; color:var(--phx-paper) !important; font-weight:700; font-size:20px; font-family:var(--phx-sans); letter-spacing:-0.005em; }
/* Phoenix mark (same SVG as start.html), drawn before the company name. */
html body header.header .navbar-brand::before{
  content:""; width:26px; height:26px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none'%3E%3Cpath d='M4 20 L13 4 L22 20' stroke='%23E4AC5E' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M8 20 L13 11 L18 20' stroke='%2386C1D6' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cline x1='4' y1='22' x2='22' y2='22' stroke='%2386C1D6' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
}
html body header.header .navbar-brand:has(img)::before{ display:none; }
html body header.header .navbar a, html body header.header .navbar .nav-link{ color:var(--phx-paper) !important; font-family:var(--phx-sans); }
html body header.header .navbar-nav a{ font-size:15px; }
html body header.header #nav > li > a:hover, html body header.header .navbar a:hover, html body header.header .navbar .nav-link:hover{ color:var(--phx-accent-bright) !important; }
html body header.header .navbar-nav .nav-item.active > .nav-link, html body header.header .navbar-nav .show > .nav-link{ color:var(--phx-accent-bright) !important; }
html body header.header .toolbar .nav-link{ border:1px solid var(--phx-line-strong) !important; border-radius:var(--phx-radius) !important; color:var(--phx-paper) !important; background:transparent !important; }
html body header.header .toolbar .nav-link:hover{ border-color:var(--phx-accent) !important; color:var(--phx-accent-bright) !important; }
html body header.header .toolbar .nav-link .badge{ background:var(--phx-accent) !important; color:var(--phx-bg-deep) !important; border:0 !important; font-family:var(--phx-mono); opacity:1; }
html body header.header .search{ border:1px solid var(--phx-line-strong) !important; border-radius:var(--phx-radius) !important; background:var(--phx-bg-deep) !important; }
html body header.header .search:focus-within{ border-color:var(--phx-accent) !important; }
html body header.header .search .btn, html body header.header .search .form-control{ background:transparent !important; color:var(--phx-paper) !important; border:0 !important; min-height:0; }
html body header.header .search .btn{ color:var(--phx-ink) !important; }
html body header.header .navbar-toggler, html body header.header .toolbar button.nav-link{ color:var(--phx-paper) !important; }

/* Dropdowns (nav + everywhere) */
html body .dropdown-menu{ background:var(--phx-bg-deep) !important; border:1px solid var(--phx-line-strong) !important; border-radius:var(--phx-radius) !important; box-shadow:0 10px 30px rgba(0,0,0,0.35) !important; }
html body .dropdown-menu a, html body .dropdown-item, html body header.header .dropdown-menu a{ color:var(--phx-paper) !important; font-family:var(--phx-sans); }
html body .dropdown-item:hover, html body .dropdown-item:focus, html body .dropdown-menu a:hover, html body .dropdown-item.active, html body .dropdown-item:active{ background:var(--phx-panel) !important; color:var(--phx-accent-bright) !important; }
html body .dropdown-divider{ border-color:var(--phx-line) !important; }
html body .dropdown-header{ color:var(--phx-ink) !important; font-family:var(--phx-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; }

/* Breadcrumb */
html body .master-breadcrumb{ background:transparent !important; border-bottom:1px solid var(--phx-line) !important; }
html body .master-breadcrumb .breadcrumb, html body .breadcrumb{ background:transparent !important; font-family:var(--phx-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
html body .breadcrumb-item, html body .breadcrumb-item a, html body .breadcrumb-item + .breadcrumb-item::before, html body .breadcrumb-item.active{ color:var(--phx-ink) !important; }
html body .breadcrumb-item.active{ color:var(--phx-paper-dim) !important; }

/* Main body */
html body #main-body{ background:transparent !important; padding-top:28px; padding-bottom:64px; }
html body .primary-content > h1:first-child, html body .header-lined h1{ font-size:30px; font-weight:700; }

/* Footer */
html body #footer, html body footer.footer{ background:rgba(13,31,50,0.7) !important; border-top:1px solid var(--phx-line) !important; color:var(--phx-paper-dim) !important; font-family:var(--phx-mono); font-size:12px; }
html body #footer a, html body #footer .nav-link, html body #footer .btn{ color:var(--phx-paper) !important; font-family:var(--phx-sans); background:transparent !important; }
html body #footer a:hover, html body #footer .nav-link:hover{ color:var(--phx-accent-bright) !important; }
html body #footer .copyright{ color:var(--phx-paper-dim) !important; }
/* Language / currency chooser: only English + GBP exist (same as phoenix_cart). */
html body #footer [data-target="#modalChooseLanguage"]{ display:none !important; }

/* Full-page overlay (spinner during submits) */
html body #fullpage-overlay{ background:rgba(13,31,50,0.85) !important; color:var(--phx-paper) !important; }

/* Email-verification / user-validation banners under the breadcrumb */
html body .verification-banner{ background:rgba(206,144,70,0.10) !important; border-bottom:1px solid var(--phx-accent) !important; color:var(--phx-paper) !important; }
html body .verification-banner .text{ color:var(--phx-paper) !important; }
html body .verification-banner .fas, html body .verification-banner .fal, html body .verification-banner .far{ color:var(--phx-accent-bright) !important; }
html body .verification-banner .btn:not(.close){ background:transparent !important; border:1px solid var(--phx-accent) !important; color:var(--phx-accent-bright) !important; }
html body .verification-banner .btn.close{ color:var(--phx-paper) !important; background:transparent !important; border:0 !important; }

/* ================================================================== cards / panels */
html body .card, html body .panel, html body .well, html body .box, html body .content-box, html body .mc-promo-manage, html body .mc-promo-login, html body .table-container, html body .kbarticle, html body .announcement article, html body .card.bg-default{
  background:var(--phx-box) !important; border:1px solid var(--phx-line-strong) !important; border-radius:var(--phx-radius) !important;
  color:var(--phx-paper) !important; box-shadow:none !important;
}
html body .card-header, html body .panel-heading, html body .card-footer, html body .panel-footer, html body .client-home-cards .card-header{
  background:var(--phx-head) !important; border-color:var(--phx-line) !important; color:var(--phx-paper) !important;
}
html body .card-body, html body .panel-body, html body .collapsable-card-body{ background:transparent !important; color:var(--phx-paper) !important; }
html body .card-title, html body .panel-title, html body .card-header h3, html body .card-header .card-title{ color:var(--phx-paper) !important; font-weight:700; }
html body .card-header .btn, html body .client-home-cards .card-header .btn{ background:transparent !important; border:1px solid var(--phx-line-strong) !important; color:var(--phx-paper) !important; }
html body .card-header .btn:hover{ border-color:var(--phx-accent) !important; color:var(--phx-accent-bright) !important; }
/* WHMCS coloured card accents -> one brass accent line */
html body [class*="card-accent-"]{ border-top:2px solid var(--phx-accent) !important; }
html body .card-sidebar{ border-top:1px solid var(--phx-line-strong) !important; }

/* Sidebar menus */
html body .sidebar .card-header{ padding:12px 16px; }
html body .sidebar .card-title{ font-family:var(--phx-mono); font-size:12px !important; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--phx-ink) !important; }
html body .sidebar .card-title i{ color:var(--phx-ink) !important; }
html body .sidebar .card-minimise{ color:var(--phx-paper-dim) !important; }
html body .list-group, html body .list-group-flush{ background:transparent !important; }
html body .list-group-item, html body .list-group-item-action{ background:transparent !important; border-color:var(--phx-line) !important; color:var(--phx-paper) !important; }
html body .list-group-item-action:hover, html body .list-group-item-action:focus{ background:rgba(33,68,95,0.55) !important; color:var(--phx-accent-bright) !important; }
html body .list-group-item.active, html body .sidebar .list-group-item.active, html body .sidebar .list-group-item.active:hover, html body .sidebar .list-group-item.active:focus{
  background:linear-gradient(90deg, var(--phx-panel-2), var(--phx-panel)) !important; box-shadow:inset 3px 0 0 var(--phx-accent); color:var(--phx-paper) !important; border-color:var(--phx-line) !important;
}
html body .list-group-item.disabled{ color:var(--phx-paper-dim) !important; }
html body .sidebar .card{ overflow:hidden; }
html body .sidebar .list-group-item{ white-space:normal; overflow-wrap:anywhere; }
html body .sidebar .list-group-item i, html body .sidebar .sidebar-menu-item-icon{ color:var(--phx-ink) !important; }
html body .sidebar .list-group-item .badge, html body .sidebar-menu-item-badge .badge{ background:transparent !important; border:1px solid var(--phx-line-strong) !important; color:var(--phx-paper-dim) !important; }

/* Client home tiles */
html body .tiles{ border:1px solid var(--phx-line-strong); border-radius:var(--phx-radius); overflow:hidden; background:var(--phx-box); }
html body .tiles .tile{ background:transparent !important; border-color:var(--phx-line) !important; color:var(--phx-paper) !important; }
html body .tiles .tile:hover{ background:rgba(33,68,95,0.55) !important; }
html body .tiles .tile .stat{ font-family:var(--phx-mono); font-weight:600; color:var(--phx-paper) !important; }
html body .tiles .tile .title{ font-family:var(--phx-mono); font-weight:500; letter-spacing:.12em; color:var(--phx-ink) !important; }
html body .tiles .tile i{ color:rgba(151,196,219,0.22) !important; }
html body .tiles .tile:hover i{ color:rgba(206,144,70,0.45) !important; }
html body .tiles .tile .highlight{ background:var(--phx-accent) !important; height:2px; border-radius:0; }

/* Homepage (logged out): domain search + action buttons + product groups */
html body .home-domain-search{ background:transparent !important; border-bottom:1px solid var(--phx-line); color:var(--phx-paper) !important; }
html body .home-domain-search .p-5, html body .home-domain-search > .container > div{ background:transparent !important; }
html body .home-domain-search h2{ font-weight:700; font-size:34px; }
html body .home-domain-search a{ color:var(--phx-ink) !important; }
html body .home-domain-search .tld-logos{ color:var(--phx-paper-dim) !important; font-family:var(--phx-mono); }
html body .home-domain-search .input-group-wrapper{ background:var(--phx-bg-deep) !important; border:1px solid var(--phx-line-strong) !important; border-radius:var(--phx-radius) !important; }
html body .home-domain-search .input-group-wrapper .form-control{ font-family:var(--phx-mono); border:0 !important; background:transparent !important; }
html body .home-domain-search .input-group-wrapper .advanced-input label{ color:var(--phx-paper) !important; }
html body .action-icon-btns a{ background:var(--phx-box) !important; border:1px solid var(--phx-line-strong); border-radius:var(--phx-radius) !important; color:var(--phx-paper) !important; }
html body .action-icon-btns a:hover{ border-color:var(--phx-accent); color:var(--phx-accent-bright) !important; }
html body .action-icon-btns a .ico-container i{ color:var(--phx-ink) !important; }
html body .action-icon-btns a:hover .ico-container i{ color:var(--phx-accent-bright) !important; }
html body .card-columns.home .card .card-body p{ color:var(--phx-paper-dim) !important; }

/* Product icon blocks (service details) */
html body .product-icon, html body .product-icon.text-center, html body div.product-details-tab-container{ background:var(--phx-box) !important; border:1px solid var(--phx-line-strong) !important; border-radius:var(--phx-radius) !important; color:var(--phx-paper) !important; }
html body .product-icon h3, html body .product-icon h4{ color:var(--phx-paper) !important; }
html body .product-icon .fa-stack .fa-circle{ color:var(--phx-panel) !important; }
html body .product-icon .fa-stack .fa-inverse{ color:var(--phx-accent-bright) !important; }
html body .product-status, html body .product-status-text{ font-family:var(--phx-mono); }

/* ================================================================== tables */
html body table, html body .table{ color:var(--phx-paper) !important; background:transparent !important; }
html body .table th, html body .table td, html body .table thead th, html body .table-list > tbody > tr > td, html body .table-list td{ border-color:var(--phx-line) !important; background:transparent !important; color:var(--phx-paper) !important; }
html body .table thead th, html body table.table-list thead th, html body .dataTables_wrapper table.table-list thead th{
  background:var(--phx-bg-deep) !important; color:var(--phx-ink) !important; font-family:var(--phx-mono); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--phx-line-strong) !important;
}
html body .table thead th a, html body table.table-list thead th a{ color:var(--phx-ink) !important; }
html body .table-striped tbody tr:nth-of-type(odd), html body .table-striped tbody tr:nth-of-type(odd) > td, html body .table-list tbody tr:nth-of-type(odd), html body .table-list tbody tr:nth-of-type(odd) > td{ background:rgba(27,58,86,0.30) !important; }
html body .table-hover tbody tr:hover, html body .table-hover tbody tr:hover > td, html body .table-list > tbody > tr:hover > td{ background:rgba(33,68,95,0.6) !important; color:var(--phx-paper) !important; }
html body .dataTables_wrapper table.table-list{ border:1px solid var(--phx-line-strong) !important; border-radius:var(--phx-radius); background:var(--phx-box) !important; }
html body .dataTables_wrapper .dataTables_info, html body .dataTables_wrapper .dataTables_length, html body .dataTables_wrapper .dataTables_filter, html body .dataTables_wrapper label{ color:var(--phx-paper-dim) !important; font-family:var(--phx-mono); font-size:12.5px; }
html body .dataTables_wrapper .dataTables_filter label .form-control{
  background:var(--phx-bg-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C1D6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 12px center / 16px 16px !important;
  min-height:38px; padding-left:38px !important;
}
html body .dataTables_wrapper .dataTables_info, html body .dataTables_wrapper .dataTables_length{ padding-left:12px; }
html body .dataTables_wrapper .dataTables_filter{ padding:8px 8px 0 0; }
html body .dataTables_wrapper .dataTables_paginate{ padding:0 8px 8px 0; }
html body .table .total-row, html body td.total-row{ background:var(--phx-head) !important; color:var(--phx-paper) !important; font-weight:600; }
html body .table-container{ padding:0; }

/* Pagination */
html body .pagination .page-link, html body .page-link{ background:transparent !important; border-color:var(--phx-line-strong) !important; color:var(--phx-paper) !important; font-family:var(--phx-mono); border-radius:var(--phx-radius) !important; }
html body .page-link:hover{ background:var(--phx-panel) !important; color:var(--phx-accent-bright) !important; }
html body .page-item.active .page-link{ background:var(--phx-accent) !important; border-color:var(--phx-accent) !important; color:var(--phx-bg-deep) !important; }
html body .page-item.disabled .page-link{ color:var(--phx-paper-dim) !important; opacity:.6; }

/* ================================================================== status labels / badges */
html body .label, html body .badge{ border-radius:var(--phx-radius) !important; font-family:var(--phx-mono); font-weight:500; text-transform:uppercase; letter-spacing:.06em; }
html body .label, html body .badge-secondary, html body .badge-light, html body .badge-dark, html body .label-default,
html body .status-cancelled, html body .status-terminated, html body .status-closed, html body .status-expired, html body .status-transferred-away, html body .status-refunded, html body .status-lost, html body .status-dead{
  background:transparent !important; border:1px solid var(--phx-line-strong) !important; color:var(--phx-paper-dim) !important;
}
html body .badge-success, html body .label-success, html body .status-active, html body .status-open, html body .status-completed, html body .status-paid, html body .status-accepted, html body .status-delivered{ background:transparent !important; border:1px solid var(--phx-good) !important; color:var(--phx-good) !important; }
html body .badge-info, html body .badge-primary, html body .label-info, html body .status-answered, html body .status-inprogress{ background:transparent !important; border:1px solid var(--phx-ink) !important; color:var(--phx-ink) !important; }
html body .badge-warning, html body .label-warning, html body .status-pending, html body .status-pending-transfer, html body .status-pending-registration, html body .status-customer-reply, html body .status-unpaid, html body .status-payment-pending, html body .status-onhold, html body .status-grace, html body .status-redemption{ background:transparent !important; border:1px solid var(--phx-accent) !important; color:var(--phx-accent-bright) !important; }
html body .badge-danger, html body .label-danger, html body .status-suspended, html body .status-fraud, html body .status-collections{ background:transparent !important; border:1px solid var(--phx-warn) !important; color:var(--phx-warn) !important; }
html body .badge-pill{ border-radius:999px !important; }

/* ================================================================== buttons */
html body .btn{ border-radius:var(--phx-radius) !important; font-family:var(--phx-sans); font-weight:600; box-shadow:none !important; text-shadow:none !important; transition:background .15s ease, border-color .15s ease, color .15s ease; }
html body .btn-primary, html body .btn-success, html body .btn-order-now, html body a.btn-primary, html body a.btn-success, html body a.btn-order-now{
  background:var(--phx-accent) !important; border:1px solid var(--phx-accent) !important; color:var(--phx-bg-deep) !important;
}
html body .btn-primary:hover, html body .btn-primary:focus, html body .btn-success:hover, html body .btn-success:focus, html body .btn-order-now:hover,
html body .btn-primary:not(:disabled):not(.disabled):active, html body .btn-primary:not(:disabled):not(.disabled).active{
  background:var(--phx-accent-bright) !important; border-color:var(--phx-accent-bright) !important; color:var(--phx-bg-deep) !important;
}
html body .btn-default, html body .btn-secondary, html body .btn-light, html body .btn-info, html body .btn-dark, html body .btn-outline-primary, html body .btn-outline-secondary, html body .btn-outline-info, html body .btn-outline-success,
html body a.btn-default, html body a.btn-secondary, html body a.btn-light, html body a.btn-info{
  background:transparent !important; border:1px solid var(--phx-line-strong) !important; color:var(--phx-paper) !important;
}
html body .btn-default:hover, html body .btn-secondary:hover, html body .btn-light:hover, html body .btn-info:hover, html body .btn-dark:hover, html body .btn-outline-primary:hover, html body .btn-outline-secondary:hover, html body .btn-outline-info:hover, html body .btn-outline-success:hover,
html body .btn-default.active, html body .btn-secondary.active, html body .btn-default:focus, html body .btn-secondary:focus{
  border-color:var(--phx-accent) !important; color:var(--phx-accent-bright) !important; background:rgba(206,144,70,0.08) !important;
}
html body .btn-warning, html body a.btn-warning, html body .btn-outline-warning{ background:transparent !important; border:1px solid var(--phx-accent) !important; color:var(--phx-accent-bright) !important; }
html body .btn-danger, html body a.btn-danger, html body .btn-outline-danger{ background:transparent !important; border:1px solid var(--phx-warn) !important; color:var(--phx-warn) !important; }
html body .btn-danger:hover, html body .btn-outline-danger:hover{ background:rgba(224,138,106,0.12) !important; }
html body .btn-link{ background:transparent !important; border-color:transparent !important; color:var(--phx-ink) !important; font-weight:500; }
html body .btn-link:hover{ color:var(--phx-accent-bright) !important; }
html body .btn.disabled, html body .btn:disabled, html body .btn[disabled]{ opacity:.45; cursor:not-allowed; }
html body .btn-group > .btn.active, html body .btn-group-toggle > .btn.active{ background:var(--phx-accent) !important; border-color:var(--phx-accent) !important; color:var(--phx-bg-deep) !important; }
html body .btn-return-to-admin{ background:var(--phx-warn) !important; color:var(--phx-bg-deep) !important; border:0 !important; }
html body header.header .btn-return-to-admin{ background:transparent !important; color:var(--phx-warn) !important; }
html body .close, html body .btn-close{ color:var(--phx-paper) !important; text-shadow:none !important; opacity:.8; }
html body .close:hover{ color:var(--phx-accent-bright) !important; opacity:1; }

/* ================================================================== forms */
html body .form-control, html body .custom-select, html body select, html body textarea,
html body input[type="text"], html body input[type="email"], html body input[type="password"], html body input[type="tel"], html body input[type="number"], html body input[type="search"], html body input[type="url"], html body input[type="date"]{
  background-color:var(--phx-bg-deep) !important; color:var(--phx-paper) !important; border:1px solid var(--phx-line-strong) !important;
  border-radius:var(--phx-radius) !important; font-family:var(--phx-sans); box-shadow:none !important;
}
html body .form-control:not(.form-control-sm):not(textarea):not(.input-sm), html body .custom-select:not(.custom-select-sm){ min-height:44px; }
html body #registration .prepend-icon .field-icon, html body .prepend-icon .field-icon{ height:44px; line-height:44px; color:var(--phx-ink) !important; }
html body #registration .prepend-icon .field, html body .prepend-icon .field{ min-height:44px; font-size:15px; }
html body .form-control::placeholder{ color:rgba(241,236,223,0.45) !important; }
html body .form-control:focus, html body select:focus, html body textarea:focus, html body .custom-select:focus{ border-color:var(--phx-accent) !important; box-shadow:0 0 0 1px var(--phx-accent) !important; outline:0; }
html body .form-control[readonly], html body .form-control:disabled, html body .form-control-plaintext{ background-color:rgba(13,31,50,0.5) !important; opacity:.8; color:var(--phx-paper) !important; }
html body .is-invalid, html body .form-control.is-invalid, html body .has-error .form-control{ border-color:var(--phx-warn) !important; }
html body .is-valid, html body .form-control.is-valid{ border-color:var(--phx-good) !important; }
html body .invalid-feedback, html body .field-error-msg{ color:var(--phx-warn) !important; }
html body label, html body .form-control-label, html body .col-form-label, html body .control-label, html body .form-label{ color:var(--phx-paper) !important; font-weight:500; }
html body .input-group-text, html body .input-group-addon{ background:var(--phx-panel) !important; border-color:var(--phx-line-strong) !important; color:var(--phx-ink) !important; border-radius:var(--phx-radius) !important; }
html body .input-group-merge .input-group-text{ border-right:0 !important; }
html body .input-group-append .btn, html body .input-group-prepend .btn{ border-color:var(--phx-line-strong) !important; }
html body .input-group > .form-control:not(:first-child), html body .input-group > .input-group-append > .btn, html body .input-group > .input-group-append > .input-group-text{ border-top-left-radius:0 !important; border-bottom-left-radius:0 !important; }
html body .input-group > .form-control:not(:last-child), html body .input-group > .input-group-prepend > .btn, html body .input-group > .input-group-prepend > .input-group-text{ border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; }
html body input[type="checkbox"], html body input[type="radio"]{ accent-color:var(--phx-accent); }
html body .custom-control-label::before{ background:var(--phx-bg-deep) !important; border-color:var(--phx-line-strong) !important; }
html body .custom-control-input:checked ~ .custom-control-label::before{ background:var(--phx-accent) !important; border-color:var(--phx-accent) !important; }
html body .custom-file-label, html body .custom-file-label::after{ background:var(--phx-bg-deep) !important; color:var(--phx-paper) !important; border-color:var(--phx-line-strong) !important; border-radius:var(--phx-radius) !important; }
html body .custom-file-label::after{ background:var(--phx-panel) !important; }
html body .icheckbox_square-blue, html body .iradio_square-blue{ filter:sepia(1) saturate(2.2) hue-rotate(-10deg) brightness(1.05); }
html body .bootstrap-switch{ border-color:var(--phx-line-strong) !important; border-radius:var(--phx-radius) !important; background:var(--phx-bg-deep) !important; }
html body .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, html body .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, html body .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info{ background:var(--phx-accent) !important; color:var(--phx-bg-deep) !important; }
html body .bootstrap-switch .bootstrap-switch-handle-off, html body .bootstrap-switch .bootstrap-switch-label{ background:var(--phx-panel) !important; color:var(--phx-paper) !important; }
html body .progress{ background:var(--phx-bg-deep) !important; border-radius:var(--phx-radius) !important; border:1px solid var(--phx-line); }
html body .progress-bar{ background-color:var(--phx-accent) !important; }
html body .progress-bar.bg-success, html body .progress-bar-success{ background-color:var(--phx-good) !important; }
html body .progress-bar.bg-danger{ background-color:var(--phx-warn) !important; }
/* Password strength meter + generate-password modal */
html body #passwordStrengthBar, html body .password-strength-meter .progress{ background:var(--phx-bg-deep) !important; }
/* intl-tel-input phone field keeps its own padding for the flag */
html body .iti__country-list{ background:var(--phx-bg-deep) !important; color:var(--phx-paper) !important; border-color:var(--phx-line-strong) !important; }
html body .iti__country.iti__highlight{ background:var(--phx-panel) !important; }
html body .iti__dial-code{ color:var(--phx-paper-dim) !important; }
/* Stripe Elements render dark text inside Stripe's iframe: keep a paper box (as phoenix_cart). */
html body .StripeElement, html body .stripe-element{ background:var(--phx-paper) !important; border:1px solid var(--phx-line-strong) !important; border-radius:var(--phx-radius) !important; padding:12px !important; min-height:44px; }
html body .StripeElement--focus{ border-color:var(--phx-accent) !important; box-shadow:0 0 0 2px var(--phx-accent) !important; }
html body .StripeElement--invalid{ border-color:var(--phx-warn) !important; }
/* Captcha */
html body .default-captcha{ background:var(--phx-box) !important; border:1px solid var(--phx-line-strong) !important; border-radius:var(--phx-radius) !important; color:var(--phx-paper) !important; }
html body .default-captcha img{ background:#fff; border-radius:var(--phx-radius); }

/* Markdown editor (tickets) */
html body .md-editor{ background:var(--phx-bg-deep) !important; border-color:var(--phx-line-strong) !important; border-radius:var(--phx-radius) !important; }
html body .md-editor > .md-header, html body .md-editor > .md-footer{ background:var(--phx-panel) !important; border-color:var(--phx-line) !important; color:var(--phx-paper-dim) !important; }
html body .md-editor > textarea, html body .md-editor > textarea.markdown-editor, html body .md-editor > .md-preview, html body div.md-editor > .md-preview{ background:var(--phx-bg-deep) !important; color:var(--phx-paper) !important; border-color:var(--phx-line) !important; }
html body .md-editor > .btn-toolbar, html body div.md-editor > .btn-toolbar{ background-color:var(--phx-panel) !important; }
html body .md-editor .btn{ background:transparent !important; border-color:var(--phx-line) !important; color:var(--phx-paper) !important; }

/* ================================================================== alerts */
html body .alert{ border-radius:var(--phx-radius) !important; border:1px solid var(--phx-line-strong) !important; background:var(--phx-box) !important; color:var(--phx-paper) !important; }
html body .alert-info{ border-left:3px solid var(--phx-ink) !important; }
html body .alert-success{ border-left:3px solid var(--phx-good) !important; }
html body .alert-warning{ border-left:3px solid var(--phx-accent) !important; }
html body .alert-danger{ border-left:3px solid var(--phx-warn) !important; background:rgba(224,138,106,0.10) !important; }
html body .alert a, html body .alert .alert-link{ color:var(--phx-accent-bright) !important; }
html body .alert h1, html body .alert h2, html body .alert h3, html body .alert h4, html body .alert strong{ color:var(--phx-paper) !important; }

/* ================================================================== tabs, modals, popovers */
html body .nav-tabs{ border-bottom:1px solid var(--phx-line-strong) !important; }
html body .nav-tabs .nav-link, html body .nav-tabs a{ background:transparent !important; border:1px solid transparent !important; border-radius:var(--phx-radius) var(--phx-radius) 0 0 !important; color:var(--phx-paper-dim) !important; }
html body .nav-tabs .nav-link:hover{ color:var(--phx-accent-bright) !important; }
html body .nav-tabs .nav-link.active, html body .nav-tabs .nav-item.show .nav-link, html body .nav-tabs > li.active > a{ background:var(--phx-box) !important; border-color:var(--phx-line-strong) var(--phx-line-strong) transparent !important; color:var(--phx-paper) !important; }
html body .tab-content{ color:var(--phx-paper) !important; }
html body .nav-pills .nav-link{ color:var(--phx-paper-dim) !important; border-radius:var(--phx-radius) !important; }
html body .nav-pills .nav-link.active{ background:var(--phx-accent) !important; color:var(--phx-bg-deep) !important; }
html body .responsive-tabs-sm-connector .channel, html body .responsive-tabs-sm-connector .bottom-border{ border-color:var(--phx-line-strong) !important; background:transparent !important; }

html body .modal-content{ background:var(--phx-bg-deep) !important; color:var(--phx-paper) !important; border:1px solid var(--phx-line-strong) !important; border-radius:var(--phx-radius) !important; }
html body .modal-header, html body .modal-footer{ border-color:var(--phx-line) !important; background:transparent !important; }
html body .modal-title{ color:var(--phx-paper) !important; }
html body .modal-backdrop.show{ opacity:.7; background:#050d16; }
html body .modal-localisation .modal-content{ background:var(--phx-bg-deep) !important; }
html body .modal-localisation .item-selector .item{ color:var(--phx-paper) !important; border-radius:var(--phx-radius); }
html body .modal-localisation .item-selector .item.active, html body .modal-localisation .item-selector .item:hover{ background:var(--phx-accent) !important; color:var(--phx-bg-deep) !important; }

html body .popover{ background:var(--phx-bg-deep) !important; border:1px solid var(--phx-line-strong) !important; border-radius:var(--phx-radius) !important; color:var(--phx-paper) !important; font-family:var(--phx-sans); }
html body .popover-header{ background:var(--phx-panel) !important; color:var(--phx-paper) !important; border-color:var(--phx-line) !important; }
html body .popover-body{ color:var(--phx-paper) !important; }
html body .bs-popover-bottom > .arrow::after, html body .bs-popover-auto[x-placement^="bottom"] > .arrow::after{ border-bottom-color:var(--phx-bg-deep) !important; }
html body .bs-popover-top > .arrow::after, html body .bs-popover-auto[x-placement^="top"] > .arrow::after{ border-top-color:var(--phx-bg-deep) !important; }
html body .bs-popover-bottom > .arrow::before, html body .bs-popover-auto[x-placement^="bottom"] > .arrow::before{ border-bottom-color:var(--phx-line-strong) !important; }
html body .client-alerts li a, html body .client-alerts .message{ color:var(--phx-paper) !important; }
html body .client-alerts li a:hover{ background:var(--phx-panel) !important; }
html body .client-alerts li.none{ color:var(--phx-paper-dim) !important; }
html body .tooltip-inner{ background:var(--phx-bg-deep); border:1px solid var(--phx-line-strong); color:var(--phx-paper); font-family:var(--phx-sans); border-radius:var(--phx-radius); }

/* ================================================================== support / knowledgebase / announcements */
html body .kb-category a, html body .kb-article-item, html body .kb-article-title{ color:var(--phx-paper) !important; }
html body .kb-category a:hover, html body .kb-article-item:hover{ color:var(--phx-accent-bright) !important; background:transparent !important; }
html body .kb-article-item small, html body .kb-category .text-muted{ color:var(--phx-paper-dim) !important; }
html body .kbarticle-content, html body .kbarticle-content *:not(pre):not(code):not(a), html body .announcement-body, html body .announcements article *:not(pre):not(code):not(a){ color:var(--phx-paper) !important; background-color:transparent !important; }
html body .announcements .announcement article p{ color:var(--phx-paper-dim) !important; }
html body .posted-by, html body .posted-by *{ color:var(--phx-paper-dim) !important; font-family:var(--phx-mono); font-size:12.5px; }
html body .ticket-reply{ border-color:var(--phx-line-strong) !important; }
html body .ticket-reply .posted-by{ background:var(--phx-head) !important; }
html body .ticket-reply.staff{ border-left:3px solid var(--phx-accent) !important; }
html body .ticket-reply .rating span.star:before, html body .ticket-reply .rating-done span.star:before{ color:var(--phx-line-strong) !important; }
html body .ticket-reply .rating-done span.star.active:before, html body .ticket-reply .rating span.star:hover:before, html body .ticket-reply .rating span.star:hover ~ span.star:before{ color:var(--phx-accent-bright) !important; }
html body .lb-outerContainer, html body .lb-dataContainer{ background:var(--phx-bg-deep) !important; }

/* Domain pricing / domain list / store pages */
html body .domain-pricing .tld-pricing-header, html body .domain-pricing .tld-row, html body .domain-pricing .tld-row [class*="col-"], html body .tld-pricing-header [class*="col-"]{ background:transparent !important; border-color:var(--phx-line) !important; color:var(--phx-paper) !important; }
html body .domain-pricing .tld-row.highlighted{ background:rgba(27,58,86,0.35) !important; }
html body .domain-pricing .tld-pricing-header{ background:var(--phx-bg-deep) !important; color:var(--phx-ink) !important; font-family:var(--phx-mono); }
html body .tld-filters .badge, html body .tld-filters a{ background:transparent !important; border:1px solid var(--phx-line-strong) !important; color:var(--phx-ink) !important; }
html body .tld-filters .badge.active, html body .tld-filters .badge-success{ border-color:var(--phx-accent) !important; color:var(--phx-accent-bright) !important; }
html body .store-order-container, html body .store-promoted-product, html body .landing-page{ color:var(--phx-paper) !important; }

/* Invoices / quotes / emails list totals; invoice page itself (standalone, printable) */
html body .invoice-container, html body .container-fluid.invoice-container, html body .quote-container{ background:var(--phx-box) !important; border:1px solid var(--phx-line-strong) !important; border-radius:var(--phx-radius) !important; color:var(--phx-paper) !important; }
html body .invoice-container .invoice-header{ border-color:var(--phx-line) !important; }
html body .invoice-container .invoice-status .paid, html body .invoice-status .paid{ color:var(--phx-good) !important; }
html body .invoice-container .invoice-status .unpaid, html body .invoice-status .unpaid{ color:var(--phx-warn) !important; }
html body .invoice-container .invoice-status .cancelled, html body .invoice-container .invoice-status .refunded, html body .invoice-container .invoice-status .draft{ color:var(--phx-paper-dim) !important; }
html body .invoice-container .table td, html body .invoice-container .table th{ border-color:var(--phx-line) !important; }
@media print{
  html body, html body.primary-bg-color{ background:#fff !important; color:#000 !important; }
  html body::before{ display:none; }
  html body *{ color:#000 !important; background:transparent !important; border-color:#bbb !important; box-shadow:none !important; }
}

/* ================================================================== small screens */
@media (max-width: 767px){
  html body #main-body{ padding-top:18px; }
  html body .primary-content > h1:first-child, html body .header-lined h1{ font-size:26px; }
  html body header.header .navbar-brand{ font-size:18px; }
  html body .tiles .tile .stat{ font-size:32px; }
  html body .table-responsive, html body .dataTables_wrapper{ overflow-x:auto; }
}