/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Theme
 *
 * This file allows you to customize the theme colors and styles for the entire Nexus template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}


.mc-promo-login body .primary-content .card .content, .mc-promo-manage body .primary-content .card .content, body .primary-content .card .card-body, body .primary-content .mc-promo-login .card-body, body .primary-content .mc-promo-login .content, body .primary-content .mc-promo-manage .card-body, body .primary-content .mc-promo-manage .content {
    padding: 1em!important;
}

header.header .navbar {
    min-height: 45px!important;
}

header.header .navbar-nav {
    margin-top: 0px!important;
    margin-bottom: 0px!important;
}

#nav {
    gap: 25px!important;
}

.navbar-nav {
    text-transform: uppercase!important;
    font-weight: 700!important;
}

.div-service-status .label {
    color: #22b8e6!important;
}

/* ─── Footer — 1:1 port of the QGS-MAIN-EN qgsf-footer ───── */
.qgsf-footer {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, #0e131e 0%, #131926 100%);
    color: rgba(255, 255, 255, 0.78);
    padding: 72px 0 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.qgsf-footer .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.qgsf-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0.16; background-repeat: no-repeat; }
.qgsf-glow-left { background: radial-gradient(circle at 14% 40%, rgba(32, 146, 255, 0.22), transparent 30%); }
.qgsf-glow-right { background: radial-gradient(circle at 90% 20%, rgba(226, 66, 188, 0.16), transparent 26%); }
.qgsf-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 56px; align-items: start;
}
.qgsf-company { max-width: 460px; }
.qgsf-title {
    margin: 0 0 22px; color: #fff;
    font-family: "Fira Sans", sans-serif; font-size: 1.15rem; font-weight: 700;
    letter-spacing: 0.02em; text-transform: uppercase;
}
.qgsf-company-list, .qgsf-links, .qgsf-payments { list-style: none; margin: 0; padding: 0; }
.qgsf-company-list li, .qgsf-links li, .qgsf-payments li { margin-bottom: 6px; }
.qgsf-company-list strong { color: var(--hc-primary); }
.qgsf-company-list li { color: rgba(255, 255, 255, 0.76); font-size: 0.95rem; line-height: 1.7; }
.qgsf-badges { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 22px; }
.qgsf-badge-large { max-width: 210px; width: 100%; height: auto; display: block; object-fit: contain; opacity: 0.95; }
.qgsf-links a { color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: 0.95rem; transition: color 0.2s ease; }
.qgsf-links a:hover { color: var(--hc-primary); }
.qgsf-links-games a { display: inline-flex; align-items: center; gap: 9px; }
.qgsf-gicon { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; flex: none; }
.qgsf-gicon-fa { width: 22px; text-align: center; color: var(--hc-primary-bright); font-size: 0.95rem; flex: none; }
.qgsf-payments li { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; text-transform: uppercase; font-weight: 700; }
.qgsf-payments img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 34px; border-radius: 6px; padding: 3px; }
.qgsf-socials { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.qgsf-socials a {
    width: 42px; height: 42px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease, background 0.2s ease;
    font-size: 15px; text-decoration: none;
}
.qgsf-socials a:hover { background: var(--hc-primary); transform: translateY(-2px); color: #fff; }
.qgsf-bottom {
    position: relative; z-index: 1; margin-top: 46px; padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    flex-wrap: wrap;
}
.qgsf-bottom-left, .qgsf-bottom-right { color: rgba(255, 255, 255, 0.55); font-size: 0.88rem; }
.qgsf-bottom-right { text-align: right; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qgsf-bottom-right a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.qgsf-bottom-right a:hover { color: var(--hc-primary); }
.qgsf-locale { display: inline-flex; align-items: center; gap: 8px; }
.qgsf-locale .iti-flag { display: inline-block; }
@media (max-width: 1200px) {
    .qgsf-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .qgsf-company { max-width: 100%; }
}
@media (max-width: 768px) {
    .qgsf-footer { padding: 52px 0 22px; }
    .qgsf-grid { grid-template-columns: 1fr; gap: 34px; }
    .qgsf-bottom { flex-direction: column; align-items: flex-start; }
    .qgsf-bottom-right { text-align: left; }
    .qgsf-badge-large { max-width: 180px; }
}

a [href="https://www.whmcs.com/"]:parent {
  display: none;
}

p[style*="text-align:center"]:has(a[href="https://www.whmcs.com/"]) {
    display: none !important;
}

/* =========================================================
   QGS Hosting design system override for Nexus theme
   Brand: QGS (blue #029df6, dark surfaces, Fira Sans)
   Styled to match QGS-MAIN-EN + qgshosting.com
   ========================================================= */
:root {
    /* Brand palette */
    --hc-primary:       #029df6;
    --hc-primary-dark:  #0b7fd0;
    --hc-primary-dim:   rgba(2,157,246,.14);
    --hc-primary-line:  rgba(2,157,246,.34);
    --hc-primary-bright:#2db3ff;
    --hc-navy:    #0b1016;
    --hc-navy-2:  #0f151d;
    --hc-navy-3:  #131a22;

    /* Surfaces - matches QGS Pterodactyl devpanel palette */
    /* Surfaces — 1:1 with QGS-MAIN-EN (qgshosting.com / the configure page).
       Slightly lighter and bluer than the devpanel greys. */
    --hc-bg:      #0b1016;   /* site --bg      */
    --hc-bg-2:    #0f151d;   /* site --bg-2    */
    --hc-card:    #131a22;   /* site --surface */
    --hc-card-2:  #18212c;   /* site --surface-2 */
    --hc-card-3:  #202b38;   /* site --surface-3 */
    --hc-border:  rgba(255,255,255,.08);   /* site --border   */
    --hc-border-2:rgba(255,255,255,.13);   /* site --border-2 */
    --hc-border-blue: rgba(2,157,246,.42); /* site --border-blue */
    --hc-card-edge: #232a39;               /* thick .cfg-card border on the site */
    --hc-border-solid: #222226;            /* opaque variant, used by data tables */
    --hc-text:    #eaeef2;
    --hc-muted:   #96a3b4;
    --hc-faint:   #61707f;

    /* Radii (matches site) */
    --hc-r-xl:    10px;
    --hc-r-lg:    8px;
    --hc-r-md:    5px;

    /* Shadows tuned for dark surfaces */
    --hc-shadow:       0 8px 24px rgba(0,0,0,.35);
    --hc-shadow-md:    0 14px 40px rgba(0,0,0,.45);
    --hc-shadow-lg:    0 24px 60px rgba(0,0,0,.6);
    --hc-shadow-blue:  0 8px 28px rgba(2,157,246,.45);

    /* Override Nexus tokens for dark theme */
    --primary:          var(--hc-primary);
    --primary-lifted:   var(--hc-primary-dark);
    --primary-accented: #0b4fa0;
    --success:          var(--hc-primary);
    --success-lifted:   var(--hc-primary-dark);
    --success-accented: #0b4fa0;
    --text:             var(--hc-text);
    --text-lifted:      var(--hc-muted);
    --text-accented:    #cbd3dc;
    --text-muted:       var(--hc-muted);
    --text-inverted:    #ffffff;
    --border-muted:     var(--hc-border);
    --border:           var(--hc-border);
    --border-lifted:    var(--hc-border-2);
    --bg:               var(--hc-bg);
    --bg-muted:         var(--hc-bg-2);
    --bg-lifted:        var(--hc-card);
    --bg-accented:      var(--hc-card-2);
    --bg-inverted:      #ffffff;

    --rounding-sm:      var(--hc-r-md);
    --rounding-md:      var(--hc-r-lg);
    --rounding-lg:      var(--hc-r-xl);
}

html, body { background: var(--hc-bg); }
body.client-area, body { color: var(--hc-text); font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* Ambient background wash - subtle blue highlight over devpanel dark */
body::before {
    content: "";
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(1000px 620px at 82% -6%, rgba(2,157,246,.07), transparent 60%),
        radial-gradient(1000px 640px at 12% 2%, rgba(2,157,246,.09), transparent 58%),
        linear-gradient(180deg, var(--hc-bg) 0%, var(--hc-bg-2) 100%);
}

/* ---- Hero header ---- */
/* QGS game-page style: the game's product-head banner (set per product group in
   clientareaproductdetails.tpl as --hc-hero-img) under the same left-to-right dark
   fade qgshosting.com uses, a 5px .cfg-card edge, blue accent bar + glow.
   No banner for the group -> datacenter-room wallpaper. */
.hc-hero {
    --hc-hero-img: url('https://static.qgshosting.com/cdn/images/backgrounds/datacenter-room.webp');
    background-color: var(--hc-card);
    background-image:
        linear-gradient(90deg, rgba(11,16,22,.96) 0%, rgba(11,16,22,.84) 38%, rgba(11,16,22,.45) 72%, rgba(11,16,22,.62) 100%),
        var(--hc-hero-img);
    background-size: cover;
    background-position: center 35%;
    border: 1px solid var(--hc-card-edge);
    border-radius: 6px;
    padding: 34px 36px;
    min-height: 150px;
    display: flex; flex-direction: column; justify-content: center;
    color: #fff;
    box-shadow: 0 22px 44px -26px rgba(0,0,0,.85);
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* blue accent bar on the left edge */
.hc-hero::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 1;
    background: linear-gradient(180deg, var(--hc-primary-bright) 0%, var(--hc-primary) 55%, var(--hc-primary-dark) 100%);
    box-shadow: 0 0 22px rgba(2,157,246,.55);
}
/* blue glow bottom-left + bottom fade into the page */
.hc-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(520px 200px at 0% 100%, rgba(2,157,246,.20), transparent 70%),
        linear-gradient(0deg, rgba(11,16,22,.55) 0%, transparent 55%);
}
.hc-hero-inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; position: relative; z-index: 2;
}
.hc-hero-left { display: flex; align-items: center; gap: 20px; }
.hc-hero-icon {
    width: 64px; height: 64px; flex: none;
    background: rgba(2,157,246,.16);
    border: 1px solid var(--hc-primary);
    color: var(--hc-primary-bright);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    box-shadow: 0 10px 26px -10px rgba(2,157,246,.6), inset 0 0 0 1px rgba(255,255,255,.04);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hc-hero h1 {
    font-family: "Oswald", "Fira Sans", sans-serif;
    font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: .5px;
    text-transform: uppercase;
    margin: 0 0 6px; color: #fff; word-break: break-word;
    text-shadow: 0 2px 24px rgba(0,0,0,.55);
}
.hc-hero .hc-status-pill {
    padding: 7px 14px; font-size: 13px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 8px 22px -12px rgba(0,0,0,.8);
}
/* ---- Tabs (client area) — cart keeps its own body.cart rules ---- */
.nav-tabs {
    border-bottom: 3px solid #0a82d3;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #ffffff;
    background-color: #0a82d3;
    border-color: #0887da;
}

@media (max-width: 575.98px) {
    .hc-hero { padding: 24px 22px; background-position: 70% 35%; }
    .hc-hero h1 { font-size: 24px; }
    .hc-hero-icon { width: 52px; height: 52px; font-size: 22px; }
}
.hc-hero .hc-hero-sub { opacity: .8; font-size: 14px; color: rgba(255,255,255,.8); }
.hc-hero .hc-hero-sub a { color: var(--hc-primary); text-decoration: none; }
.hc-hero .hc-hero-sub a:hover { color: #fff; text-decoration: underline; }

/* ---- Status pill ---- */
.hc-status-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--hc-primary-dim);
    border: 1px solid var(--hc-primary-line);
    color: var(--hc-primary);
    padding: 3px 10px;
    border-radius: 5px;
    font-weight: 700; font-size: 12.5px;
    text-transform: uppercase; letter-spacing: .05em;
}
.hc-status-pill .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(2,157,246,.18);
    animation: hc-pulse 2s infinite;
}
@keyframes hc-pulse {
    0%,100% { box-shadow: 0 0 0 4px rgba(2,157,246,.18); }
    50%     { box-shadow: 0 0 0 8px rgba(2,157,246,.04); }
}

/* Status variants (Active/Completed/Paid green; Pending amber; Suspended/Terminated/Unpaid/Cancelled red; Other neutral) */
.hc-status-pill.status-pending,
.hc-status-pill.status-pendingtransfer,
.hc-status-pill.status-grace,
.hc-status-pill.status-redemption,
.hc-status-pill.status-draft,
.hc-status-pill.status-onhold {
    background: rgba(245,158,11,.14); color: #b45309; border-color: rgba(245,158,11,.3);
}
.hc-status-pill.status-pending .dot,
.hc-status-pill.status-onhold .dot { box-shadow: 0 0 0 4px rgba(245,158,11,.18); }

.hc-status-pill.status-suspended,
.hc-status-pill.status-fraud,
.hc-status-pill.status-unpaid,
.hc-status-pill.status-overdue,
.hc-status-pill.status-expired {
    background: rgba(239,68,68,.14); color: #b91c1c; border-color: rgba(239,68,68,.3);
}
.hc-status-pill.status-suspended .dot,
.hc-status-pill.status-unpaid .dot,
.hc-status-pill.status-overdue .dot { box-shadow: 0 0 0 4px rgba(239,68,68,.18); }

.hc-status-pill.status-cancelled,
.hc-status-pill.status-terminated,
.hc-status-pill.status-transferredaway,
.hc-status-pill.status-closed,
.hc-status-pill.status-refunded,
.hc-status-pill.status-collections,
.hc-status-pill.status-dead {
    background: #f1f5f9; color: #64748b; border-color: #e2e8f0;
}
.hc-status-pill.status-cancelled .dot,
.hc-status-pill.status-closed .dot { box-shadow: 0 0 0 4px rgba(100,116,139,.18); }

/* ---- Info cards grid ---- */
.hc-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.hc-info-card {
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    padding: 18px 20px;
    box-shadow: var(--hc-shadow);
    transition: transform .2s ease;
}
.hc-info-card:hover { transform: translateY(-2px); }
.hc-info-card .label {
    font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--hc-muted); margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
}
.hc-info-card .label i { color: var(--hc-primary); }
.hc-info-card .value { font-size: 15px; font-weight: 600; color: var(--hc-text); word-break: break-word; }

/* ---- Section card ---- */
.hc-section {
    background: var(--hc-card);
    border: 4px solid var(--hc-border);
    border-radius: 0px;
    box-shadow: var(--hc-shadow);
    margin-bottom: 22px;
    overflow: hidden;
}
.hc-section-header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--hc-border);
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: 15px;
}
.hc-section-header i { color: var(--hc-primary); }
.hc-section-body { padding: 22px; }
.hc-section-body > p:last-child,
.hc-section-body > .form-group:last-child { margin-bottom: 0; }

/* ---- Quick action buttons ---- */
.hc-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.hc-action-btn {
    display: flex; align-items: center; gap: 12px;
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    padding: 16px 18px;
    color: var(--hc-text);
    text-decoration: none;
    font-weight: 600; font-size: 14px;
    transition: all .2s ease;
    box-shadow: var(--hc-shadow);
    cursor: pointer;
    text-align: left;
}
.hc-action-btn:hover {
    transform: translateY(-2px);
    border-color: var(--hc-primary);
    color: var(--hc-primary);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(2,157,246,.18);
}
.hc-action-btn i {
    width: 38px; height: 38px;
    background: var(--hc-primary-dim);
    color: var(--hc-primary);
    border-radius: var(--hc-r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.hc-action-btn.hc-success i { background: var(--hc-primary-dim); color: var(--hc-primary); }
.hc-action-btn.hc-success:hover { border-color: var(--hc-primary); color: var(--hc-primary-dark); }
.hc-action-btn.hc-danger  i { background: rgba(239,68,68,.12); color: #ef4444; }
.hc-action-btn.hc-danger:hover  { border-color: #ef4444; color: #ef4444; box-shadow: 0 8px 24px rgba(239,68,68,.15); }
.hc-action-btn.disabled { opacity: .55; pointer-events: none; }

/* ---- Buttons (HostCare style) ---- */
.hc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0 22px; min-height: 46px;
    border-radius: var(--hc-r-md);
    font-size: 14.5px; font-weight: 700;
    border: 1.5px solid transparent;
    cursor: pointer; text-decoration: none;
    font-family: inherit; transition: all .18s ease;
    white-space: nowrap;
}
.hc-btn-primary { background: linear-gradient(135deg, var(--hc-primary-dark) 0%, var(--hc-primary) 100%); color: #fff; }
.hc-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--hc-shadow-blue); color: #fff; text-decoration: none; }
.hc-btn-success { background: var(--hc-primary); color: #fff; }
.hc-btn-success:hover { background: var(--hc-primary-dark); color: #fff; text-decoration: none; }
.hc-btn-danger  { background: #ef4444; color: #fff; }
.hc-btn-danger:hover  { background: #dc2626; color: #fff; text-decoration: none; }
.hc-btn-outline { background: var(--hc-card); color: var(--hc-text); border-color: var(--hc-border); }
.hc-btn-outline:hover { border-color: var(--hc-primary); color: var(--hc-primary); text-decoration: none; }
.hc-btn-ghost { background: transparent; color: var(--hc-muted); border: none; }
.hc-btn-ghost:hover { color: var(--hc-primary); background: var(--hc-primary-dim); }
.hc-btn-lg { min-height: 52px; padding: 0 32px; font-size: 15.5px; border-radius: var(--hc-r-lg); }
.hc-btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; }

/* ---- Modern tabs ---- */
.hc-tabs {
    display: flex; flex-wrap: wrap; gap: 6px;
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    padding: 6px;
    border-radius: var(--hc-r-xl);
    margin-bottom: 16px;
    box-shadow: var(--hc-shadow);
    list-style: none;
}
.hc-tabs .nav-item { flex: 0 0 auto; }
.hc-tabs .nav-link {
    border: none !important;
    background: transparent;
    color: var(--hc-muted);
    padding: 10px 16px;
    border-radius: var(--hc-r-md);
    font-weight: 600; font-size: 14px;
    display: flex; align-items: center; gap: 8px;
    transition: all .2s ease;
}
.hc-tabs .nav-link:hover { color: var(--hc-primary); background: var(--hc-primary-dim); }
.hc-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--hc-primary-dark) 0%, var(--hc-primary) 100%);
    color: #fff !important;
    box-shadow: var(--hc-shadow-blue);
}

/* ---- Data row (key/value) ---- */
.hc-data-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--hc-border);
    gap: 16px;
}
.hc-data-row:last-child { border-bottom: none; }
.hc-data-row .k { font-weight: 600; color: var(--hc-muted); font-size: 14px; }
.hc-data-row .v { color: var(--hc-text); font-size: 14px; text-align: right; word-break: break-word; }

/* ---- Usage cards ---- */
.hc-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
    gap: 16px;
}
.hc-usage-card {
    background: var(--hc-bg);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    padding: 20px;
    text-align: left;
}
.hc-usage-card h5 {
    margin: 0 0 12px; font-size: 14px; font-weight: 700;
    color: var(--hc-text); display: flex; align-items: center; gap: 8px;
}
.hc-usage-card h5 i { color: var(--hc-primary); }
.hc-usage-meta {
    display: flex; justify-content: space-between;
    font-size: 13px; color: var(--hc-muted); margin-bottom: 8px;
}
.hc-usage-meta strong { color: var(--hc-text); font-size: 16px; }
.hc-bar { width: 100%; height: 10px; background: #e8f1f8; border-radius: 999px; overflow: hidden; }
.hc-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--hc-primary), var(--hc-primary-dark));
    border-radius: 999px; transition: width .8s ease;
}
.hc-bar-fill.warn   { background: linear-gradient(90deg, #f59e0b, #f97316); }
.hc-bar-fill.danger { background: linear-gradient(90deg, #ef4444, #ec4899); }

/* ---- Card grid (downloads, addons, etc.) ---- */
.hc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
    gap: 16px;
}
.hc-mini-card {
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    padding: 20px 20px 0px 20px;
    box-shadow: var(--hc-shadow);
    transition: transform .2s ease, border-color .2s ease;
}
.hc-mini-card:hover { transform: translateY(-2px); border-color: var(--hc-primary-line); }
.hc-mini-card h4 {
    font-size: 15px; font-weight: 700; margin: 0 0 8px;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.hc-mini-card p { color: var(--hc-muted); font-size: 14px; margin-bottom: 10px; }

/* ---- Forms ---- */
.hc-form .form-control,
.hc-form input[type="text"],
.hc-form input[type="email"],
.hc-form input[type="password"],
.hc-form input[type="number"],
.hc-form input[type="tel"],
.hc-form input[type="url"],
.hc-form select,
.hc-form textarea {
    background: var(--hc-bg);
    border: 1.5px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    padding: 5px 14px;
    font-size: 14px; color: var(--hc-text);
    transition: border-color .15s, box-shadow .15s, background .15s;
    height: auto;
}
.hc-form .form-control:focus,
.hc-form input:focus,
.hc-form select:focus,
.hc-form textarea:focus {
    border-color: var(--hc-primary);
    box-shadow: 0 0 0 3px var(--hc-primary-dim);
    outline: none; background: var(--hc-card-2);
}
.hc-form label,
.hc-form .col-form-label { font-weight: 600; color: var(--hc-text); font-size: 14px; }

/* Radio choice card */
.hc-radio-card {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    margin-bottom: 10px;
    cursor: pointer; transition: all .15s ease;
    background: var(--hc-card);
}
.hc-radio-card:hover { border-color: var(--hc-primary-line); background: var(--hc-bg); }
.hc-radio-card input[type="radio"],
.hc-radio-card input[type="checkbox"] { margin-top: 3px; accent-color: var(--hc-primary); }
.hc-radio-card.active { border-color: var(--hc-primary); background: var(--hc-primary-dim); }
.hc-radio-card .rc-label { font-weight: 600; color: var(--hc-text); }
.hc-radio-card .rc-desc { font-size: 12.5px; color: var(--hc-muted); margin-top: 2px; }

/* NOTE: rules that hid the state/region row used to live here. State IS
   collected again (Name / Surname / Email / Country / State is the whole
   profile now), so they were removed — and StatesDropdown.js is loaded
   again in clientregister.tpl. Don't reintroduce them. */

/* ---- Modern tables ---- */
.hc-table-wrap {
    background: var(--hc-card);
    border: 5px solid var(--hc-border-solid);
    border-radius: var(--hc-r-xl);
    box-shadow: var(--hc-shadow);
    padding: 6px;
    overflow: hidden;
}
.dataTables_wrapper table.table-list {
    border: 1px solid var(--hc-border-solid);
}
.hc-table-wrap .dataTables_wrapper { padding: 14px 16px 8px; color: var(--hc-text); }
.hc-table-wrap .dataTables_filter,
.hc-table-wrap .dataTables_length { font-size: 13px; color: var(--hc-muted); margin-bottom: 12px; }
.hc-table-wrap .dataTables_filter input,
.hc-table-wrap .dataTables_length select {
    background: var(--hc-bg);
    border: 1.5px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    padding: 2px 5px;
    font-size: 13.5px; color: var(--hc-text);
    outline: none; transition: border-color .15s, box-shadow .15s;
    margin-left: 0px;
}
.hc-table-wrap .dataTables_filter input:focus,
.hc-table-wrap .dataTables_length select:focus {
    border-color: var(--hc-primary);
    box-shadow: 0 0 0 3px var(--hc-primary-dim);
}
.hc-table-wrap .dataTables_info { font-size: 12.5px; color: var(--hc-muted); padding-top: 14px !important; }
.hc-table-wrap .dataTables_paginate { padding-top: 10px !important; }
.hc-table-wrap .dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    min-width: 34px; height: 34px;
    padding: 0 10px !important; margin: 0 2px !important;
    background: var(--hc-card) !important;
    border: 1px solid var(--hc-border) !important;
    border-radius: var(--hc-r-md) !important;
    color: var(--hc-muted) !important;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all .15s ease; box-shadow: none !important;
}
.hc-table-wrap .dataTables_paginate .paginate_button:hover {
    background: var(--hc-primary-dim) !important;
    border-color: var(--hc-primary-line) !important;
    color: var(--hc-primary-dark) !important;
}
.hc-table-wrap .dataTables_paginate .paginate_button.current,
.hc-table-wrap .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, var(--hc-primary-dark) 0%, var(--hc-primary) 100%) !important;
    border-color: transparent !important; color: #fff !important;
}
.hc-table-wrap .dataTables_paginate .paginate_button.disabled {
    opacity: .4; cursor: not-allowed;
    background: var(--hc-card) !important; color: var(--hc-muted) !important;
    border-color: var(--hc-border) !important;
}

table.hc-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0;
    background: var(--hc-card);
    font-size: 14px;
    margin: 0 !important;
}
table.hc-table thead th {
    background: var(--hc-bg);
    color: var(--hc-muted);
    font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    padding: 10px!important;
    border: none !important;
    border-bottom: 1px solid var(--hc-border) !important;
    white-space: nowrap;
}
table.hc-table thead th:first-child { border-top-left-radius: var(--hc-r-lg); }
table.hc-table thead th:last-child  { border-top-right-radius: var(--hc-r-lg); }
table.hc-table tbody tr { transition: background .15s ease; }
table.hc-table tbody tr:hover { background: var(--hc-bg); }
table.hc-table tbody tr.clickable { cursor: pointer; }
table.hc-table tbody tr.clickable:hover td:first-child { box-shadow: inset 3px 0 0 var(--hc-primary); }
table.hc-table tbody td {
    padding: 5px 15px !important;
    border: none !important;
    border-bottom: 1px solid var(--hc-border) !important;
    vertical-align: middle !important;
    color: var(--hc-text);
}
table.hc-table tbody tr:last-child td { border-bottom: none !important; }
table.hc-table thead th.sorting,
table.hc-table thead th.sorting_asc,
table.hc-table thead th.sorting_desc {
    cursor: pointer; position: relative; padding-right: 28px !important;
}
table.hc-table thead th.sorting::after,
table.hc-table thead th.sorting_asc::after,
table.hc-table thead th.sorting_desc::after {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; font-weight: 900;
    font-size: 10px; opacity: .4;
}
table.hc-table thead th.sorting::after      { content: "\f0dc"; }
table.hc-table thead th.sorting_asc::after  { content: "\f0de"; opacity: 1; color: var(--hc-primary); }
table.hc-table thead th.sorting_desc::after { content: "\f0dd"; opacity: 1; color: var(--hc-primary); }

.hc-checkbox { width: 18px; height: 18px; accent-color: var(--hc-primary); cursor: pointer; }

/* ---- Bulk action toolbar ---- */
.hc-bulk-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.hc-bulk-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--hc-card);
    border: 1.5px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    padding: 9px 16px;
    font-size: 13.5px; font-weight: 600; color: var(--hc-text);
    cursor: pointer; transition: all .15s ease;
    font-family: inherit; text-decoration: none;
}
.hc-bulk-btn:hover {
    background: var(--hc-primary-dim);
    border-color: var(--hc-primary-line);
    color: var(--hc-primary-dark); text-decoration: none;
}
.hc-bulk-btn i { color: var(--hc-primary); font-size: 13px; }
.hc-dropdown-menu {
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-lg);
    box-shadow: 0 8px 32px rgba(15,24,40,.12);
    padding: 6px; min-width: 220px;
}
.hc-dropdown-menu .dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--hc-r-md);
    font-size: 13.5px; font-weight: 600; color: var(--hc-text);
    transition: background .13s, color .13s;
}
.hc-dropdown-menu .dropdown-item:hover {
    background: var(--hc-primary-dim); color: var(--hc-primary-dark);
}
.hc-dropdown-menu .dropdown-item i { color: var(--hc-primary); width: 14px; text-align: center; }

/* ---- State display (big pill) ---- */
.hc-state-display { text-align: center; padding: 28px 16px; }
.hc-state-label {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--hc-muted); margin-bottom: 14px; display: block;
}
.hc-state-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 24px; border-radius: 999px;
    font-size: 15px; font-weight: 700;
    background: var(--hc-primary-dim); color: var(--hc-primary-dark);
    border: 1.5px solid var(--hc-primary-line);
}
.hc-state-pill.off {
    background: rgba(239,68,68,.12); color: #b91c1c; border-color: rgba(239,68,68,.3);
}
.hc-state-pill i { font-size: 16px; }

/* ---- Addon item (horizontal card) ---- */
.hc-addon {
    display: flex; align-items: center; gap: 20px;
    padding: 20px;
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-lg);
    margin-bottom: 12px;
    transition: all .2s ease;
}
.hc-addon:hover { border-color: var(--hc-primary-line); box-shadow: var(--hc-shadow); }
.hc-addon-ico {
    width: 60px; height: 60px;
    background: var(--hc-primary-dim);
    color: var(--hc-primary);
    border-radius: var(--hc-r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
}
.hc-addon-body { flex: 1; min-width: 0; }
.hc-addon-body strong { font-size: 15px; color: var(--hc-text); display: block; margin-bottom: 4px; }
.hc-addon-body p { color: var(--hc-muted); font-size: 13.5px; margin: 0 0 12px; }
.hc-addon-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hc-addon-actions form { display: inline-flex; gap: 8px; margin: 0; }

/* ---- Todo list ---- */
.hc-todo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.hc-todo-list a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: var(--hc-bg);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    color: var(--hc-text); text-decoration: none;
    font-weight: 600; transition: all .15s ease;
}
.hc-todo-list a:hover {
    background: var(--hc-primary-dim);
    border-color: var(--hc-primary-line);
    color: var(--hc-primary-dark); text-decoration: none;
}
.hc-todo-list a::before {
    content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    color: var(--hc-primary); font-size: 14px;
}

/* ---- Stat cards (for dashboard) ---- */
.hc-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.hc-stat-card {
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    padding: 22px 24px;
    box-shadow: var(--hc-shadow);
    display: flex; align-items: center; gap: 16px;
    transition: all .2s ease;
    text-decoration: none;
    color: var(--hc-text);
}
.hc-stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--hc-primary-line);
    box-shadow: 0 8px 24px rgba(2,157,246,.12);
    text-decoration: none; color: var(--hc-text);
}
.hc-stat-ico {
    width: 56px; height: 56px;
    background: var(--hc-primary-dim);
    color: var(--hc-primary);
    border-radius: var(--hc-r-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
}
.hc-stat-ico.warn   { background: rgba(245,158,11,.14); color: #b45309; }
.hc-stat-ico.danger { background: rgba(239,68,68,.14);  color: #b91c1c; }
.hc-stat-ico.info   { background: rgba(99,179,237,.14); color: #2563eb; }
.hc-stat-body { flex: 1; min-width: 0; }
.hc-stat-value { font-size: 28px; font-weight: 800; color: var(--hc-text); line-height: 1.1; }
.hc-stat-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--hc-muted); margin-top: 4px;
}

/* ---- Inline label tags (small pills used inline) ---- */
.hc-tag {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    background: var(--hc-primary-dim); color: var(--hc-primary-dark);
    text-transform: uppercase; letter-spacing: .04em;
}
.hc-tag.warn   { background: rgba(245,158,11,.14); color: #b45309; }
.hc-tag.danger { background: rgba(239,68,68,.14); color: #b91c1c; }
.hc-tag.muted  { background: #f1f5f9; color: #64748b; }
.hc-tag.info   { background: rgba(99,179,237,.13); color: #2563eb; }

/* ---- Knowledgebase / article list ---- */
.hc-kb-list { display: grid; gap: 10px; }
.hc-kb-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-lg);
    color: var(--hc-text); text-decoration: none;
    transition: all .15s ease;
}
.hc-kb-item:hover {
    border-color: var(--hc-primary-line);
    background: var(--hc-bg);
    color: var(--hc-primary-dark); text-decoration: none;
    transform: translateX(2px);
}
.hc-kb-item i { color: var(--hc-primary); font-size: 16px; }
.hc-kb-item .kb-title { font-weight: 600; flex: 1; }
.hc-kb-item .kb-meta { font-size: 12px; color: var(--hc-muted); }

/* ---- Ticket thread ---- */
.hc-msg {
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-lg);
    padding: 18px 22px;
    margin-bottom: 14px;
    box-shadow: var(--hc-shadow);
}
.hc-msg.staff { background: var(--hc-primary-dim); border-color: var(--hc-primary-line); }
.hc-msg-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 1px solid var(--hc-border); gap: 12px;
    font-size: 13px;
}
.hc-msg.staff .hc-msg-head { border-bottom-color: var(--hc-primary-line); }
.hc-msg-author { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.hc-msg-author .avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--hc-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}
.hc-msg-date { color: var(--hc-muted); font-size: 12px; }
.hc-msg-body { color: var(--hc-text); font-size: 14.5px; line-height: 1.6; }
.hc-msg-body p:last-child { margin-bottom: 0; }

/* ---- Auth (login/register) layout ---- */
.hc-auth-card {
    max-width: 460px; margin: 40px auto;
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    box-shadow: var(--hc-shadow-md);
    padding: 36px 32px;
}
.hc-auth-card h1, .hc-auth-card h2, .hc-auth-card h3 {
    text-align: center; margin: 0 0 8px;
    font-weight: 800; color: var(--hc-text);
}
.hc-auth-card .hc-auth-sub {
    text-align: center; color: var(--hc-muted);
    font-size: 14px; margin-bottom: 24px;
}

/* ---- Sidebar tweaks ---- */
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .panel .list-group-item.active {
    background: var(--hc-primary-dim) !important;
    color: var(--hc-primary-dark) !important;
    border-color: var(--hc-primary-line) !important;
    border-left: 3px solid var(--hc-primary) !important;
    font-weight: 700;
}
.sidebar .list-group-item:hover { background: var(--hc-bg); }
.sidebar a:hover { color: var(--hc-primary); }

/* ---- Bootstrap overrides for shared widgets ---- */
.alert {
    border-radius: var(--hc-r-lg);
    border: 1px solid transparent;
}
.alert-success { background: var(--hc-primary-dim); color: #0b4fa0; border-color: var(--hc-primary-line); }
.alert-info    { background: rgba(99,179,237,.10); color: #1e40af; border-color: rgba(99,179,237,.25); }
.alert-warning { background: rgba(245,158,11,.10); color: #92400e; border-color: rgba(245,158,11,.25); }
.alert-danger, .alert-error { background: rgba(239,68,68,.10); color: #991b1b; border-color: rgba(239,68,68,.25); }

.label.status,
.label-status,
span.label {
    display: inline-flex; align-items: center;
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    background: var(--hc-primary-dim); color: var(--hc-primary-dark);
}
.label-success,
.label.status-active,
.label.status-paid,
.label.status-answered,
.label.status-open    { background: var(--hc-primary-dim); color: var(--hc-primary-dark); }
.label-warning,
.label.status-pending { background: rgba(245,158,11,.14); color: #b45309; }
.label-danger, .label-error,
.label.status-suspended,
.label.status-unpaid,
.label.status-overdue { background: rgba(239,68,68,.14); color: #b91c1c; }
.label-default,
.label.status-cancelled,
.label.status-terminated,
.label.status-closed,
.label.status-refunded { background: #f1f5f9; color: #64748b; }

/* ---- Cards (Bootstrap .card → HostCare look) ---- */
.primary-content .card,
.client-area .card {
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    box-shadow: var(--hc-shadow);
}
.primary-content .card-title,
.client-area .card-title {
    font-weight: 700; color: var(--hc-text);
    display: flex; align-items: center; gap: 10px;
}

/* ---- Page title bar (above tabs) ---- */
.hc-pagebar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 22px;
}
.hc-pagebar h1, .hc-pagebar h2 {
    margin: 0; font-size: 22px; font-weight: 800; color: var(--hc-text);
    display: flex; align-items: center; gap: 12px;
}
.hc-pagebar h1 i, .hc-pagebar h2 i { color: var(--hc-primary); }

/* ---- Generic helpers ---- */
.hc-muted   { color: var(--hc-muted) !important; }

/* ---- Affiliates page (affiliates.tpl) ---- */
.hc-aff-link { display: flex; gap: 10px; align-items: stretch; }
.hc-aff-link .form-control {
    flex: 1 1 auto; min-width: 0; height: auto; min-height: 46px;
    background: rgba(255,255,255,.04); border: 1px solid var(--hc-border-2); color: var(--hc-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px;
}
.hc-aff-link .form-control:focus { border-color: var(--hc-primary); box-shadow: 0 0 0 3px rgba(2,157,246,.18); background: rgba(255,255,255,.06); }
.hc-aff-link .hc-btn { flex: 0 0 auto; min-height: 46px; }
.hc-aff-link .hc-btn.is-copied { background: #10b981; }
.hc-aff-balance { margin-bottom: 22px; }
.hc-aff-balance .hc-info-card .value { font-family: "Oswald", "Fira Sans", sans-serif; font-size: 24px; font-weight: 700; line-height: 1.15; }
.hc-aff-balance .hc-info-card.is-available .value { color: #37e28a; }
.hc-aff-withdraw .hc-section-body { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.hc-aff-withdraw form { margin: 0; }
.hc-aff-withdraw .hc-btn[disabled] {
    background: var(--hc-card-2); color: var(--hc-muted); border: 1px solid var(--hc-border);
    box-shadow: none; transform: none; cursor: not-allowed; opacity: 1;
}
.hc-aff-withdraw p { margin: 0; font-size: 13.5px; }
.hc-aff-title { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; font-size: 20px; font-weight: 700; color: var(--hc-text); }
.hc-aff-title i { color: var(--hc-primary); }
@media (max-width: 575.98px) {
    .hc-aff-link { flex-direction: column; }
    .hc-aff-balance .hc-info-card .value { font-size: 20px; }
}
.hc-mt-0    { margin-top: 0 !important; }
.hc-mb-0    { margin-bottom: 0 !important; }
.hc-divider { height: 1px; background: var(--hc-border); margin: 18px 0; border: none; }

@media (max-width: 576px) {
    .hc-hero { padding: 22px; }
    .hc-hero h1 { font-size: 19px; }
    .hc-data-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .hc-data-row .v { text-align: left; }
    .hc-addon { flex-direction: column; text-align: center; }
    .hc-msg-head { flex-direction: column; align-items: flex-start; }
    table.hc-table.responsive thead { display: none; }
    table.hc-table.responsive tbody tr {
        display: block; padding: 14px;
        border-bottom: 1px solid var(--hc-border);
    }
    table.hc-table.responsive tbody td {
        display: flex; justify-content: space-between; align-items: center;
        border: none !important;
        padding: 6px 0 !important;
        text-align: right !important;
    }
    table.hc-table.responsive tbody td::before {
        content: attr(data-label);
        font-size: 11.5px; font-weight: 700;
        text-transform: uppercase; color: var(--hc-muted);
        letter-spacing: .05em; margin-right: 12px;
    }
}

/* =========================================================
   DigitalOcean-style control panel shell
   ========================================================= */

body.do-app {
    background: var(--hc-bg);
    margin: 0;
    min-height: 100vh;
}

/* When logged in we hide the WHMCS default container styling */
body.do-app section#main-body > .container { max-width: none !important; padding: 0 !important; }
body.do-app section#main-body { background: transparent; }
body.do-app .master-breadcrumb { background: transparent; padding: 0; }
body.do-app header#header > .topbar,
body.do-app header#header > .navbar:not(.do-topbar),
body.do-app header#header > .main-navbar-wrapper { display: none !important; }
body.do-app #footer { display: none !important; } /* large marketing footer hidden inside the app shell */

/* ---- Top bar ---- */
.do-topbar {
    height: 60px;
    background: var(--hc-navy);
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 18px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.do-topbar .do-brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    min-width: 220px;
}
.do-topbar .do-brand img { height: 45px; width: auto; display: block; }
.do-topbar .do-search {
    flex: 1;
    max-width: 540px;
    position: relative;
}
.do-topbar .do-search input {
    width: 100%;
    height: 38px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--hc-r-md);
    padding: 0 14px 0 38px;
    color: #fff;
    font-size: 13.5px;
    outline: none;
    transition: background .15s, border-color .15s;
}
.do-topbar .do-search input::placeholder { color: rgba(255,255,255,.4); }
.do-topbar .do-search input:focus {
    background: rgba(255,255,255,.10);
    border-color: var(--hc-primary-line);
}
.do-topbar .do-search i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: rgba(255,255,255,.5); font-size: 13px;
}
.do-topbar .do-actions {
    display: flex; align-items: center; gap: 10px;
    margin-left: auto;
}
.do-create-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--hc-primary-dark) 0%, var(--hc-primary) 100%);
    color: #fff;
    padding: 0 18px;
    height: 38px;
    border-radius: var(--hc-r-md);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: box-shadow .18s, transform .15s;
}
.do-create-btn:hover {
    color: #fff; text-decoration: none;
    box-shadow: var(--hc-shadow-blue);
    transform: translateY(-1px);
}
.do-icon-btn {
    width: 38px; height: 38px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--hc-r-md);
    color: rgba(255,255,255,.75);
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.do-icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.do-icon-btn .do-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    background: var(--hc-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--hc-navy);
}
.do-account {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--hc-r-md);
    padding: 0 12px 0 6px;
    height: 38px;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.do-account:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.do-account .do-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hc-primary), var(--hc-primary-dark));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 800;
}
.do-account .do-account-label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.do-mobile-toggle {
    display: none;
    width: 38px; height: 38px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--hc-r-md);
    color: #fff;
    align-items: center; justify-content: center;
    cursor: pointer;
}

/* ---- Shell layout ---- */
.do-shell {
    display: flex;
    min-height: calc(100vh - 60px);
}
.do-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--hc-card);
    border-right: 1px solid var(--hc-border);
    position: fixed;
    top: 60px;
    left: 0;
    height: calc(100vh - 60px);
    overflow-y: auto;
    z-index: 50;
}
.do-main {
    flex: 1;
    min-width: 0;
    margin-left: 240px;
    padding: 15px 0px 0px;
}
.do-main-inner { width: 90%; max-width: 1600px; margin: 0 auto; }

/* ---- Sidebar navigation ---- */
.do-nav-group { margin-bottom: 6px; }
.do-nav-group-header {
    padding: 14px 20px 6px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--hc-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    display: flex; align-items: center; gap: 8px;
}
.do-nav-group-header i { color: var(--hc-primary); font-size: 11px; }
.do-nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 20px;
    color: var(--hc-text);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .12s, color .12s, border-color .12s;
    position: relative;
}
.do-nav-item:hover {
    background: var(--hc-bg);
    color: var(--hc-primary-dark);
    text-decoration: none;
}
.do-nav-item.active {
    background: var(--hc-primary-dim);
    color: var(--hc-primary-dark);
    border-left-color: var(--hc-primary);
    font-weight: 700;
}
.do-nav-item i { width: 16px; text-align: center; color: var(--hc-muted); font-size: 14px; }
.do-nav-item.active i,
.do-nav-item:hover i { color: var(--hc-primary); }
.do-nav-item .do-nav-badge {
    margin-left: auto;
    background: var(--hc-primary-dim);
    color: var(--hc-primary-dark);
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
}
.do-nav-item.active .do-nav-badge { background: var(--hc-primary); color: #fff; }

/* Page bar inside main area */
.do-pagebar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--hc-border);
}
.do-pagebar h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--hc-text);
    display: flex; align-items: center; gap: 12px;
}
.do-pagebar h1 i { color: var(--hc-primary); }
.do-pagebar .do-pagebar-meta { color: var(--hc-muted); font-size: 13px; }

/* Breadcrumb tweak inside shell */
.do-breadcrumb {
    background: transparent;
    padding: 0 0 14px;
    font-size: 13px;
    color: var(--hc-muted);
}
.do-breadcrumb .breadcrumb {
    background: transparent; padding: 0; margin: 0;
    display: flex; gap: 6px;
    list-style: none;
}
.do-breadcrumb .breadcrumb-item a { color: var(--hc-muted); text-decoration: none; }
.do-breadcrumb .breadcrumb-item a:hover { color: var(--hc-primary); }
.do-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--hc-border); padding: 0 4px; }
.do-breadcrumb .breadcrumb-item.active { color: var(--hc-text); font-weight: 600; }

/* Footer inside shell */
.do-footer {
    border-top: 1px solid var(--hc-border);
    padding: 20px 32px;
    color: var(--hc-muted);
    font-size: 12.5px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    background: var(--hc-card);
}
.do-footer a { color: var(--hc-muted); text-decoration: none; }
.do-footer a:hover { color: var(--hc-primary); }
.do-footer .do-footer-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* Notifications dropdown */
.do-dropdown {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 320px;
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-lg);
    box-shadow: 0 18px 46px -12px rgba(0,0,0,.7);
    padding: 8px;
    z-index: 200;
    display: none;
}
.do-dropdown.show { display: block; }
.do-dropdown .do-dd-head {
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--hc-border);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--hc-muted);
    letter-spacing: .06em;
    margin-bottom: 4px;
}
.do-dropdown a, .do-dropdown .do-dd-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px;
    border-radius: var(--hc-r-md);
    color: var(--hc-text);
    text-decoration: none;
    font-size: 13px;
    transition: background .12s;
}
.do-dropdown a:hover { background: var(--hc-bg); color: var(--hc-primary-dark); text-decoration: none; }
.do-dropdown a i { color: var(--hc-primary); width: 16px; text-align: center; margin-top: 2px; }
.do-dropdown a.danger i { color: #ef4444; }
.do-dropdown a.warn i { color: #f59e0b; }
.do-dropdown .do-dd-empty { padding: 16px; text-align: center; color: var(--hc-muted); font-size: 13px; }

/* Mobile */
@media (max-width: 900px) {
    .do-topbar { padding: 0 14px; gap: 10px; }
    .do-topbar .do-brand { min-width: 0; }
    .do-topbar .do-brand img { height: 24px; }
    .do-topbar .do-search { display: none; }
    .do-topbar .do-create-btn { padding: 0 12px; font-size: 12.5px; }
    .do-topbar .do-create-btn .do-create-label { display: none; }
    .do-account .do-account-label { display: none; }
    .do-mobile-toggle { display: inline-flex; }
    .do-sidebar {
        position: fixed; top: 60px; left: 0; bottom: 0;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 90;
        box-shadow: 4px 0 20px rgba(15,24,40,.12);
        height: calc(100vh - 60px);
    }
    body.do-sidebar-open .do-sidebar { transform: translateX(0); }
    body.do-sidebar-open::after {
        content: ""; position: fixed; inset: 60px 0 0 0;
        background: rgba(15,24,40,.5); z-index: 80;
    }
    .do-main { padding: 18px; margin-left: 0; }
}

/* When NOT logged in (auth pages), restore some breathing room */
body:not(.do-app) section#main-body { padding-top: 24px; padding-bottom: 24px; }

/* ---- Hide WHMCS-injected stray system footer (GMT time + copyright) inside DO shell ---- */
body.do-app > p.text-center.text-muted,
body.do-app > p.text-center.small,
body.do-app > .text-center.text-muted.small,
body.do-app > p:last-of-type:not(:has(*)),
body.do-app .do-main > p.text-center.text-muted,
body.do-app .do-main > p.text-center.small {
    display: none !important;
}
/* Any element flagged by our JS cleanup below */
body.do-app .do-strip-system-footer { display: none !important; }

/* ---- Footer stickiness + background fixes for DO shell ---- */
html, body { background: var(--hc-bg); }
body.do-app { display: flex; flex-direction: column; min-height: 100vh; }
body.do-app .do-shell { flex: 1; align-items: stretch; }
body.do-app .do-main {
    display: flex;
    flex-direction: column;
    background: var(--hc-bg);
}
body.do-app .do-main-inner { flex: 1; }

/* Kill the dark marketing footer + WHMCS section bg whenever the DO topbar is present */
body:has(.do-topbar) #footer,
body:has(.do-topbar) section#main-body { display: none !important; background: transparent !important; }
body.do-app section#main-body { background: transparent !important; padding: 0 !important; }

/* Footer pinned to bottom of main column, full width of main */
body.do-app .do-footer {
    margin-top: auto;
    background: var(--hc-card);
    border-top: 1px solid var(--hc-border);
}

/* Make sure the cart/order-form content sits on the same light bg */
body.do-app .container,
body.do-app .container-fluid { background: transparent; }

/* ---- Standalone auth page (login / password reset) ---- */
html:has(body.hc-auth-page) { background-color: rgb(12, 13, 17); }
body.hc-auth-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(12, 13, 17, 0.35) 0%, rgba(12, 13, 17, 0.55) 50%, rgba(12, 13, 17, 0.82) 100%), radial-gradient(circle at 50% 22%, rgba(2, 157, 246, 0.12) 0px, rgba(12, 13, 17, 0) 42%, rgba(12, 13, 17, 0.72) 70%, rgba(12, 13, 17, 0.95) 92%), url(https://static.qgshosting.com/cdn/images/backgrounds/datacenter-room.webp) center top / cover no-repeat fixed rgb(12, 13, 17);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    color: #fff;
    padding: 24px 16px;
}
body.hc-auth-page .hc-auth-brand {
    display: inline-block;
    margin-bottom: 26px;
    text-decoration: none;
}
body.hc-auth-page .hc-auth-brand img {
    height: 75px;
    width: auto;
    display: block;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
body.hc-auth-page .hc-auth-shell {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
}
body.hc-auth-page .hc-auth-content {
    width: 100%;
}
body.hc-auth-page .hc-auth-card {
    background: rgba(19, 26, 34, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--hc-border-2);
    border-radius: var(--hc-r-xl);
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
    padding: 36px 32px;
    margin: 0;
    color: var(--hc-text);
}
body.hc-auth-page .hc-auth-card h1,
body.hc-auth-page .hc-auth-card h2,
body.hc-auth-page .hc-auth-card h3 { color: var(--hc-text); }
body.hc-auth-page .hc-auth-card .hc-auth-sub { color: var(--hc-muted); }
body.hc-auth-page .hc-auth-card .form-control,
body.hc-auth-page .hc-auth-card input,
body.hc-auth-page .hc-auth-card select,
body.hc-auth-page .hc-auth-card textarea {
    background: rgba(255,255,255,0.04);
    border-color: var(--hc-border-2);
    color: var(--hc-text);
}
body.hc-auth-page .hc-auth-card .form-control:focus,
body.hc-auth-page .hc-auth-card input:focus { background: rgba(255,255,255,0.07); border-color: var(--hc-primary); }
body.hc-auth-page .hc-auth-card .input-group-text {
    background: rgba(255,255,255,0.04) !important;
    border-color: var(--hc-border-2) !important;
    color: var(--hc-muted) !important;
}

/* Hide stray WHMCS overlays/modals that don't belong on a clean auth page */
body.hc-auth-page #fullpage-overlay,
body.hc-auth-page #modalAjax,
body.hc-auth-page #modalChooseLanguage,
body.hc-auth-page header#header,
body.hc-auth-page #footer,
body.hc-auth-page .master-breadcrumb,
body.hc-auth-page section#main-body { display: none !important; }

@media (max-width: 480px) {
    body.hc-auth-page { padding: 16px; }
    body.hc-auth-page .hc-auth-card { padding: 28px 22px; }
    body.hc-auth-page .hc-auth-brand img { height: 32px; }
}

/* ---- Language switcher on auth pages ---- */
body.hc-auth-page .hc-auth-lang {
    position: fixed;
    top: 24px;
    right: 20px;
    z-index: 50;
    margin: 0;
}
.hc-auth-lang-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 0 14px;
    height: 38px;
    border-radius: var(--hc-r-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    font-family: inherit;
}
.hc-auth-lang-btn:hover {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.3);
}
.hc-auth-lang-btn i.fa-globe { color: var(--hc-primary); }

.hc-auth-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--hc-card);
    border: 1px solid var(--hc-border-2);
    border-radius: var(--hc-r-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,.45);
    padding: 6px;
    display: none;
    max-height: 60vh;
    overflow-y: auto;
}
.hc-auth-lang-menu.show { display: block; }
.hc-auth-lang-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: var(--hc-r-md);
    color: var(--hc-text);
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s;
}
.hc-auth-lang-item:hover { background: var(--hc-primary-dim); color: var(--hc-primary-dark); }
.hc-auth-lang-item.active { background: var(--hc-primary-dim); color: var(--hc-primary-dark); }
.hc-auth-lang-item .fa-check { margin-left: auto; color: var(--hc-primary); font-size: 11px; }
.hc-auth-lang-item .iti-flag { flex: 0 0 auto; }

@media (max-width: 480px) {
    body.hc-auth-page .hc-auth-lang { top: 14px; right: 14px; }
    .hc-auth-lang-btn { padding: 0 10px; height: 34px; font-size: 12.5px; }
    .hc-auth-lang-btn span:not(.iti-flag) { display: none; }
}

/* ---- Wide auth shell (register page) ---- */
body.hc-auth-page-wide .hc-auth-shell { max-width: 820px; }
body.hc-auth-page-wide .hc-auth-card { padding: 32px 30px; }

/* "Back to login" link on auth pages */
.hc-auth-back {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 18px;
    color: rgba(255,255,255,.85);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--hc-r-md);
    transition: background .15s;
}
.hc-auth-back:hover { background: rgba(255,255,255,.10); color: #fff; text-decoration: none; }
.hc-auth-back i { font-size: 11px; }

/* Center the back link under the card */
.hc-auth-shell .hc-auth-back-wrap { text-align: center; }

/* ---- Wide auth shell: bump up for register form ---- */
body.hc-auth-page-wide { padding: 60px 24px 40px; align-items: center; }
body.hc-auth-page-wide .hc-auth-shell {
    max-width: 960px;
    width: 100%;
}
body.hc-auth-page-wide .hc-auth-card { padding: 36px 36px; }

/* Within the wide register card, drop the inner hc-section bg back to white card */
body.hc-auth-page-wide .hc-auth-card .hc-section {
    box-shadow: none;
    background: var(--hc-bg);
}
body.hc-auth-page-wide .hc-auth-card .hc-section .hc-section-header {
    background: transparent;
}

/* Make the brand stand near the top, card right under */
body.hc-auth-page-wide .hc-auth-brand { margin-bottom: 22px; }

@media (max-width: 720px) {
    body.hc-auth-page-wide { padding: 24px 14px; }
    body.hc-auth-page-wide .hc-auth-card { padding: 26px 20px; }
}

/* ---- Self-contained wide auth card (works regardless of body class) ---- */
body.hc-auth-page .hc-auth-shell { max-width: none !important; width: 100%; align-items: center; }
body.hc-auth-page .hc-auth-content { display: flex; justify-content: center; }
.hc-auth-card { width: 100%; max-width: 460px; }
.hc-auth-card.wide { max-width: 960px; padding: 36px 36px; }
.hc-auth-card.wide .hc-section { box-shadow: none; background: var(--hc-bg); }
.hc-auth-card.wide .hc-section .hc-section-header { background: transparent; }

@media (max-width: 720px) {
    .hc-auth-card.wide { padding: 26px 20px; }
}

/* ---- Wide auth page: top-align so long forms (register) can scroll ---- */
body.hc-auth-page.hc-auth-page-wide {
    justify-content: flex-start !important;
    padding-top: 40px;
    padding-bottom: 40px;
}

/* ---- Make login auth card a bit wider so the form doesn't look pinched ---- */
body.hc-auth-page .hc-auth-shell { max-width: 540px !important; }
.hc-auth-card { max-width: 540px; padding: 40px 38px; }
.hc-auth-card .hc-form .form-group { margin-bottom: 18px; }

/* ---- Match login card width to password-reset (full width inputs) ---- */
body.hc-auth-page .hc-auth-shell { max-width: 540px !important; width: 100% !important; }
body.hc-auth-page .hc-auth-content { width: 100%; display: block; }
.hc-auth-card { width: 100% !important; max-width: 100% !important; padding: 40px 38px; box-sizing: border-box; }
.hc-auth-card form,
.hc-auth-card .hc-form,
.hc-auth-card .form-group,
.hc-auth-card .input-group,
.hc-auth-card .input-group .form-control { width: 100%; box-sizing: border-box; }
.hc-auth-card .input-group-merge { display: flex; flex-wrap: nowrap; width: 100%; }
.hc-auth-card .input-group-merge .form-control { flex: 1 1 auto; min-width: 0; }

/* ---- Register: wide auth card with same hero bg, top-aligned (so long form scrolls) ---- */
body.hc-auth-page.hc-auth-page-wide {
    justify-content: flex-start !important;
    padding: 40px 16px;
}
body.hc-auth-page.hc-auth-page-wide .hc-auth-shell { max-width: 960px !important; }
body.hc-auth-page.hc-auth-page-wide .hc-auth-card.wide { max-width: 100% !important; padding: 36px 36px; }
body.hc-auth-page.hc-auth-page-wide .hc-auth-card.wide .hc-section {
    box-shadow: none;
    background: var(--hc-bg);
}
body.hc-auth-page.hc-auth-page-wide .hc-auth-card.wide .hc-section .hc-section-header {
    background: transparent;
}
@media (max-width: 720px) {
    body.hc-auth-page.hc-auth-page-wide .hc-auth-card.wide { padding: 26px 20px; }
}

/* ---- Register: 900px max-width on desktop ---- */
body.hc-auth-page.hc-auth-page-wide .hc-auth-shell { max-width: 900px !important; }
body.hc-auth-page.hc-auth-page-wide .hc-auth-card.wide { max-width: 900px !important; }

/* ---- Prominent "Back to login" button for register & password-reset ---- */
.hc-back-to-login {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 0 28px;
    min-height: 48px;
    border-radius: var(--hc-r-md);
    background: var(--hc-primary-dim);
    border: 1.5px solid var(--hc-primary-line);
    color: var(--hc-primary-dark) !important;
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    transition: all .18s ease;
}
.hc-back-to-login:hover {
    background: var(--hc-primary);
    border-color: var(--hc-primary);
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--hc-shadow-blue);
}
.hc-back-to-login i { font-size: 12px; transition: transform .18s; }
.hc-back-to-login:hover i { transform: translateX(-3px); }

/* ---- Final footer/background nail-down for DO shell ---- */
html:has(body.do-app),
body.do-app { background-color: var(--hc-bg) !important; }
body.do-app .do-shell,
body.do-app .do-main { background-color: var(--hc-bg); }
body.do-app .do-footer { flex-shrink: 0; }

/* Hide any stray text/paragraphs/centers that WHMCS $footeroutput may emit after the shell */
body.do-app > p,
body.do-app > center,
body.do-app > .text-center.text-muted,
body.do-app > .text-center.small,
body.do-app > div:not([class]):not([id]) { display: none !important; }

/* Modals & overlays must not take flow space */
body.do-app .modal:not(.show),
body.do-app #fullpage-overlay:not(.show),
body.do-app .system-modal:not(.show) { display: none !important; }

/* Bare script-only outputs get clamped to zero */
body.do-app form > .modal { position: absolute; }

/* ---- Sidebar bottom: balance + user identity card ---- */
.do-sidebar { display: flex; flex-direction: column; }
.do-sidebar > .do-nav-group:last-of-type { margin-bottom: 0; }
.do-sidebar-profile {
    margin-top: auto;
    padding: 0px 5px 0px;
    flex-shrink: 0;
}

/* Balance line */
.do-balance {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 6px;
}
.do-balance-icon {
    width: 36px; height: 36px;
    background: var(--hc-primary-dim);
    color: var(--hc-primary);
    border-radius: var(--hc-r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.do-balance-text { min-width: 0; flex: 1; }
.do-balance-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--hc-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1;
}
.do-balance-amount {
    font-size: 15px;
    font-weight: 800;
    color: var(--hc-text);
    margin-top: 3px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Divider */
.do-profile-divider {
    height: 1px;
    background: var(--hc-border);
    margin: 8px 4px;
}

/* Identity row */
.do-profile-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: var(--hc-r-md);
}
.do-profile-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    color: var(--hc-text);
    text-decoration: none;
    padding: 4px;
    border-radius: var(--hc-r-md);
    transition: background .15s;
}
.do-profile-info:hover {
    background: var(--hc-primary-dim);
    color: var(--hc-text);
    text-decoration: none;
}
.do-profile-avatar {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    border-radius: var(--hc-r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
}
.do-profile-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.2;
}
.do-profile-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--hc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.do-profile-email {
    font-size: 11.5px;
    color: var(--hc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.do-profile-btn {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hc-r-md);
    background: var(--hc-bg);
    border: 1px solid var(--hc-border);
    color: var(--hc-muted);
    text-decoration: none;
    transition: all .15s;
    flex-shrink: 0;
}
.do-profile-btn:hover {
    background: var(--hc-card);
    transform: translateY(-1px);
    text-decoration: none;
}
.do-profile-btn.settings:hover { border-color: var(--hc-primary-line); color: var(--hc-primary-dark); }
.do-profile-btn.logout { color: var(--hc-danger); border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.08); }
.do-profile-btn.logout:hover,
.do-profile-btn.logout:focus {
    background: var(--hc-danger) !important;
    color: #fff !important;
    border-color: var(--hc-danger) !important;
    box-shadow: 0 6px 18px rgba(239,68,68,.35);
}
.do-profile-btn.logout:hover i,
.do-profile-btn.logout:focus i { color: #fff !important; }
.do-profile-btn i { font-size: 13px; transition: color .15s; }

/* ---- Cart button on auth pages (login/register/reset) ---- */
body.hc-auth-page .hc-auth-cart {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    border-radius: var(--hc-r-md);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
    z-index: 30;
}
body.hc-auth-page .hc-auth-cart:hover {
    background: var(--hc-primary);
    border-color: var(--hc-primary);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--hc-shadow-blue);
}
body.hc-auth-page .hc-auth-cart i { font-size: 14px; }
body.hc-auth-page .hc-auth-cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    background: var(--hc-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--hc-navy);
    line-height: 1;
}

/* Push the language switcher left of the cart */
body.hc-auth-page .hc-auth-lang { right: 74px; }

@media (max-width: 480px) {
    body.hc-auth-page .hc-auth-cart { top: 16px; right: 16px; }
    body.hc-auth-page .hc-auth-lang { right: 62px; }
}

/* ---- Top-bar: "Order New Service" dropdown ---- */
.do-order-dd-wrap { position: relative; }
.do-order-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--hc-primary-dark) 0%, var(--hc-primary) 100%);
    border: none;
    color: #fff;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--hc-r-md);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow .15s, transform .15s;
}
.do-order-btn:hover {
    box-shadow: var(--hc-shadow-blue);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}
.do-order-btn:focus,
.do-order-btn:visited { color: #fff; text-decoration: none; }
.do-order-btn > i:first-child { font-size: 12px; }
.do-order-btn-link { text-decoration: none; }
.do-order-dd {
    min-width: 280px;
    max-height: 70vh;
    overflow-y: auto;
}
.do-order-section {
    padding: 10px 12px 4px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--hc-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.do-order-section:first-of-type { padding-top: 4px; }
.do-order-dd a { padding: 9px 12px !important; }
.do-order-dd a i { width: 16px; text-align: center; }
@media (max-width: 720px) {
    .do-order-btn > span { display: none; }
    .do-order-btn { padding: 0 12px; }
}

/* ---- Footer lang flag button ---- */
.do-footer-lang { position: relative; display: inline-block; margin: 0; padding: 0; }
.do-footer-lang-btn {
    padding: 0;
    background: transparent;
    border: 0px solid var(--hc-border);
    border-radius: 0px;
    cursor: pointer;
    overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle;
    transition: border-color .15s, transform .15s;
}
.do-footer-lang-btn:hover { border-color: var(--hc-primary); transform: scale(1.05); }
.do-footer-lang-btn .iti-flag { width: 26px; height: 20px; background-size: cover; background-position: center; }
.do-footer-lang-menu {
    bottom: calc(100% + 8px);
    top: auto;
    right: 0;
    left: auto;
    min-width: 220px;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.do-footer-lang-menu::-webkit-scrollbar { width: 8px; }
.do-footer-lang-menu::-webkit-scrollbar-track { background: transparent; }
.do-footer-lang-menu::-webkit-scrollbar-thumb { background: var(--hc-border); border-radius: 999px; }
.do-footer-lang-menu::-webkit-scrollbar-thumb:hover { background: var(--hc-muted); }
.do-footer-lang-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 9px 12px;
    border-radius: var(--hc-r-md);
    color: var(--hc-text);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
}
.do-footer-lang-item:hover { background: var(--hc-primary-dim); color: var(--hc-primary-dark); }
.do-footer-lang-item.active { background: var(--hc-primary-dim); color: var(--hc-primary-dark); font-weight: 800; }
.do-footer-lang-item .iti-flag { width: 22px; height: 16px; background-size: cover; flex-shrink: 0; border-radius: 2px; }
.do-footer-lang-item i.fa-check { margin-left: auto; color: var(--hc-primary); font-size: 11px; }

/* ---- Auth page lang button: flag-only (override the textual style) ---- */
body.hc-auth-page .hc-auth-lang-btn-icon {
    padding: 0;
    width: 38px;
    height: 38px;
    justify-content: center;
}
body.hc-auth-page .hc-auth-lang-btn-icon .iti-flag {
    width: 22px; height: 16px;
    background-size: cover;
    background-position: center;
    border-radius: 2px;
}

/* ---- Clean flag images (replaces iti-flag sprite which we were stretching) ---- */
.hc-flag-img {
    display: inline-block;
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,.08);
    vertical-align: middle;
    flex-shrink: 0;
}
.do-footer-lang-btn .hc-flag-img { width: 24px; height: 18px; border-radius: 2px; }
body.hc-auth-page .hc-auth-lang-btn-icon .hc-flag-img { width: 22px; height: 16px; }
.do-footer-lang-item .hc-flag-img,
.hc-auth-lang-item .hc-flag-img { width: 22px; height: 16px; }

/* Strip the old iti-flag overrides that were stretching the sprite */
.do-footer-lang-btn .iti-flag,
.do-footer-lang-item .iti-flag,
body.hc-auth-page .hc-auth-lang-btn-icon .iti-flag { background-size: auto; }

/* ============================================================
   Dark-mode surface overrides (dark is the only theme, no toggle)
   Base tokens live in the top :root block; the rules below just apply
   the flat dark palette to layout components.
   ============================================================ */

body { background: var(--hc-bg); color: var(--hc-text); }
body.do-app { background-color: var(--hc-bg) !important; }
.do-shell,
.do-main,
body.do-app section#main-body { background: var(--hc-bg) !important; }

/* Top bar slightly darker so it still stands out */
.do-topbar { background: #08090c; border-bottom-color: rgba(255,255,255,.06); }

/* Sidebar */
.do-sidebar { background: var(--hc-card); border-right-color: var(--hc-border); }
.do-nav-group-header { color: var(--hc-muted); }
.do-nav-item { color: var(--hc-text); }
.do-nav-item:hover { background: rgba(2,157,246,.10); }
.do-nav-item.active { background: rgba(2,157,246,.18); color: var(--hc-primary); }

/* Sidebar profile card */
.do-balance-label,
.do-profile-email { color: var(--hc-muted); }
.do-balance-amount,
.do-profile-name { color: var(--hc-text); }
.do-profile-divider { background: var(--hc-border); }
.do-profile-btn { background: rgba(255,255,255,.04); border-color: var(--hc-border); color: var(--hc-muted); }
.do-profile-info:hover { background: rgba(2,157,246,.12); }

/* Cards everywhere */
.hc-section,
.hc-info-card,
.hc-stat-card,
.hc-mini-card,
.hc-addon,
.hc-table-wrap,
.hc-auth-card,
.hc-msg,
.hc-kb-item,
.hc-section-header,
.primary-content .card {
    background: var(--hc-card) !important;
    border-color: var(--hc-border) !important;
    color: var(--hc-text);
}

.hc-section-header { background: rgba(255,255,255,.02); color: var(--hc-text); }
.hc-data-row { border-bottom-color: var(--hc-border); }
.hc-data-row .k { color: var(--hc-muted); }
.hc-data-row .v { color: var(--hc-text); }

/* Inputs */
.hc-form .form-control,
.hc-form input,
.hc-form select,
.hc-form textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea,
.form-control {
    background: var(--hc-bg-2) !important;
    border-color: var(--hc-border) !important;
    color: var(--hc-text) !important;
}
.hc-form input::placeholder,
input::placeholder,
textarea::placeholder { color: rgba(255,255,255,.35); }
.hc-form input:focus,
input:focus,
select:focus,
textarea:focus { background: var(--hc-card-2) !important; border-color: var(--hc-primary) !important; }

/* Tables */
table.hc-table,
table.hc-table tbody td { background: var(--hc-card) !important; color: var(--hc-text) !important; }
table.hc-table thead th { background: rgba(255,255,255,.03) !important; color: var(--hc-muted) !important; border-bottom-color: var(--hc-border) !important; }
table.hc-table tbody tr:hover { background: rgba(2,157,246,.06) !important; }
table.hc-table tbody td { border-bottom-color: var(--hc-border) !important; }

/* Buttons */
.hc-btn-outline { background: rgba(255,255,255,.04); color: var(--hc-text); border-color: var(--hc-border); }
.hc-btn-outline:hover { background: rgba(2,157,246,.12); border-color: var(--hc-primary); color: var(--hc-primary); }

/* Status pills — keep green for active, just darken neutral */
.hc-status-pill.status-cancelled,
.hc-status-pill.status-terminated,
.hc-status-pill.status-closed,
.hc-status-pill.status-refunded { background: rgba(255,255,255,.06); color: var(--hc-muted); border-color: var(--hc-border); }

/* Hc-tags */
.hc-tag.muted { background: rgba(255,255,255,.06); color: var(--hc-muted); }
.hc-tag.info { background: rgba(99,179,237,.12); color: #93c5fd; }

/* Alerts */
.alert-info { background: rgba(99,179,237,.10); color: #93c5fd; }
.alert-warning { background: rgba(245,158,11,.12); color: #fbbf24; }
.alert-danger, .alert-error { background: rgba(239,68,68,.12); color: #fca5a5; }

/* Footer */
.do-footer { background: var(--hc-card); border-top-color: var(--hc-border); color: var(--hc-muted); }
.do-footer a { color: var(--hc-muted); }
.do-footer a:hover { color: var(--hc-primary); }

/* Footer lang dropdown */
.do-footer-lang-menu,
.do-dropdown { background: var(--hc-card); border-color: var(--hc-border); color: var(--hc-text); }
.do-footer-lang-item,
.do-dropdown a { color: var(--hc-text); }
.do-footer-lang-item:hover,
.do-dropdown a:hover { background: rgba(2,157,246,.12); }
.do-footer-lang-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }

/* Breadcrumb */
.do-breadcrumb .breadcrumb-item.active { color: var(--hc-text); }

/* Hero header stays dark in both modes — no override needed */

/* Page bar title */
.hc-pagebar h1,
.hc-pagebar h2,
.do-pagebar h1,
.do-pagebar h2 { color: var(--hc-text); }
.hc-pagebar { border-bottom-color: var(--hc-border); }

/* Scrollbar */
::-webkit-scrollbar-track { background: var(--hc-bg); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); }

/* Ticket timeline tweaks for dark */
.hc-timeline::before { background: var(--hc-border); }
.hc-timeline-dot { box-shadow: 0 0 0 4px var(--hc-card); }
.hc-timeline-event { background: rgba(255,255,255,.03); border-color: var(--hc-border); color: var(--hc-text); }
.hc-timeline .hc-msg.staff { background: rgba(2,157,246,.10); border-color: rgba(2,157,246,.22); }

/* Detail row icons */
.hc-detail-ico { background: rgba(255,255,255,.04); border-color: var(--hc-border); }

/* Ticket filter chips */
.hc-ticket-filter { background: var(--hc-card); color: var(--hc-muted); border-color: var(--hc-border); }
.hc-ticket-filter:hover { color: var(--hc-primary); }

/* ============================================================
   Auth pages: QGS datacenter background + translucent dark card
   ============================================================ */
/* The wallpaper lives on a viewport-fixed ::before, not on <body>: theme.min.css sets
   body,html{height:100%}, so a body background stopped at the first screen and long
   forms (register) showed a hard edge; background-attachment:fixed also only applied
   to the image layer and is ignored on iOS Safari. A fixed layer covers every scroll
   position on every browser. */
html:has(body.hc-auth-page) { height: auto; min-height: 100%; }
body.hc-auth-page {
    height: auto !important;
    min-height: 100vh !important;
    background: transparent !important;
    color: #fff !important;
    position: relative;
}
body.hc-auth-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(rgba(12, 13, 17, 0.35) 0%, rgba(12, 13, 17, 0.55) 50%, rgba(12, 13, 17, 0.82) 100%),
                radial-gradient(circle at 50% 22%, rgba(2, 157, 246, 0.12) 0px, rgba(12, 13, 17, 0) 42%, rgba(12, 13, 17, 0.72) 70%, rgba(12, 13, 17, 0.95) 92%),
                url(https://static.qgshosting.com/cdn/images/backgrounds/datacenter-room.webp) center top / cover no-repeat rgb(12, 13, 17);
}

/* ============================================================
   Mobile polish
   ============================================================ */
@media (max-width: 900px) {
    /* Top bar: ensure visibility of the most important controls */
    .do-topbar { padding: 0 10px; gap: 6px; }
    .do-topbar .do-brand { min-width: 0; flex-shrink: 1; }
    .do-topbar .do-brand img { height: 22px; }
    .do-topbar .do-actions { gap: 6px; }

    /* Order button: shrink to icon */
    .do-order-btn { padding: 0 10px; }
    .do-order-btn > span { display: none; }
    .do-order-btn > i:last-child { display: none; }

    /* Account button: just the avatar */
    .do-account { padding: 0 6px; }
    .do-account .do-account-label,
    .do-account > i.fa-chevron-down { display: none; }

    /* Theme toggle keeps its 38px square */

    /* Order dropdown anchored to top edge */
    .do-order-dd {
        position: fixed;
        top: 64px;
        right: 6px;
        left: 6px;
        min-width: 0;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
    .do-dropdown { right: 6px !important; left: auto !important; min-width: 0; max-width: calc(100vw - 12px); }

    /* Page bar stacks */
    .hc-pagebar { flex-direction: column; align-items: stretch; gap: 10px; }
    .hc-pagebar h1, .hc-pagebar h2 { font-size: 18px; }
    .hc-pagebar > a, .hc-pagebar > button, .hc-pagebar > .hc-btn { width: 100%; justify-content: center; }
    .hc-pagebar > div { display: flex; gap: 8px; flex-wrap: wrap; }

    /* Tables: shrink padding */
    table.hc-table thead th,
    table.hc-table tbody td { padding: 12px 10px !important; font-size: 13px; }
    .hc-status-pill { padding: 4px 10px; font-size: 11px; }

    /* Cards more breathing room */
    .hc-section-body { padding: 18px; }

    /* Footer collapses cleanly */
    .do-footer { flex-direction: column; align-items: flex-start; padding: 16px 18px; gap: 12px; }
    .do-footer-links { flex-direction: row; flex-wrap: wrap; gap: 12px; }
    .do-footer-lang-menu { right: 0; left: auto; max-width: calc(100vw - 24px); }

    /* Sidebar profile block tightens */
    .do-sidebar-profile { padding: 12px; }
    .do-balance-amount { font-size: 14px; }
    .do-profile-name { font-size: 13px; }
    .do-profile-email { font-size: 11px; }

    /* Form rows stack */
    .hc-form .row > [class*="col-"] { margin-bottom: 8px; }

    /* Ticket layout already stacks at 1024 */
}

@media (max-width: 600px) {
    .do-topbar .do-brand img { height: 20px; }
    .do-icon-btn, .do-order-btn, .do-account { height: 36px; }
    .do-icon-btn { width: 36px; }
    .do-main { padding: 14px; }
    .hc-info-grid, .hc-stat-grid, .hc-usage-grid, .hc-card-grid { grid-template-columns: 1fr; gap: 12px; }
    .hc-info-card { padding: 14px 16px; }
    .hc-stat-card { padding: 16px 18px; }
    .hc-stat-value { font-size: 22px; }
    .hc-stat-ico { width: 44px; height: 44px; font-size: 18px; }

    .hc-tabs { padding: 4px; gap: 4px; }
    .hc-tabs .nav-link { padding: 8px 12px; font-size: 13px; }

    .hc-data-row { padding: 10px 0; flex-direction: column; align-items: flex-start; gap: 4px; }
    .hc-data-row .v { text-align: left; }

    /* Tables on smallest: convert sortable hc-table to card rows where data-label is set */
    table.hc-table.responsive thead { display: none; }
    table.hc-table.responsive tbody tr {
        display: block; padding: 12px;
        border-bottom: 1px solid var(--hc-border);
    }
    table.hc-table.responsive tbody td {
        display: flex; justify-content: space-between; align-items: center;
        border: none !important;
        padding: 6px 0 !important;
        text-align: right !important;
    }
    table.hc-table.responsive tbody td::before {
        content: attr(data-label);
        font-size: 11.5px; font-weight: 700;
        text-transform: uppercase; color: var(--hc-muted);
        letter-spacing: .05em; margin-right: 12px;
    }

    /* Hero shrinks */
    .hc-hero { padding: 22px 20px; }
    .hc-hero h1 { font-size: 18px; }
    .hc-hero-icon { width: 48px; height: 48px; font-size: 22px; }
    .hc-hero-inner { gap: 12px; }
}

@media (max-width: 420px) {
    /* Pack the topbar to fit everything */
    .do-topbar { padding: 0 8px; gap: 4px; }
    .do-mobile-toggle { width: 34px; height: 34px; }
    .do-icon-btn { width: 34px; height: 34px; }
    .do-account { padding: 0 4px; height: 34px; }
    .do-order-btn { padding: 0 8px; height: 34px; }
    .do-topbar .do-brand img { height: 18px; }

    /* Auth card padding tightens */
    body.hc-auth-page .hc-auth-card { padding: 24px 18px; }

    /* Page bar */
    .hc-pagebar h1 { font-size: 16px; gap: 8px; }
}

/* ============================================================
   Tables: make horizontally scrollable on small screens
   ============================================================ */
.hc-table-wrap > .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.hc-table-wrap > .table-container::-webkit-scrollbar { height: 8px; }
.hc-table-wrap > .table-container::-webkit-scrollbar-track { background: transparent; }
.hc-table-wrap > .table-container::-webkit-scrollbar-thumb { background: var(--hc-border); border-radius: 999px; }
.hc-table-wrap > .table-container::-webkit-scrollbar-thumb:hover { background: var(--hc-muted); }
table.hc-table { min-width: 600px; } /* let it scroll horizontally below 600px viewport */

@media (max-width: 700px) {
    .hc-table-wrap { padding: 4px; }
    .hc-table-wrap .dataTables_wrapper { padding: 10px 10px 6px; }
    .hc-table-wrap .dataTables_filter,
    .hc-table-wrap .dataTables_length { float: none !important; display: block; text-align: center; }
    .hc-table-wrap .dataTables_filter input { width: 100%; margin: 6px 0 0; }
    table.hc-table thead th { padding: 10px 12px !important; }
    table.hc-table tbody td { padding: 12px 12px !important; }
    .hc-table-wrap .dataTables_paginate .paginate_button { min-width: 30px; height: 30px; padding: 0 8px !important; }
    .hc-table-wrap .dataTables_info { text-align: center; }
}

/* ============================================================
   Language modal (replaces footer dropdown)
   ============================================================ */
body.hc-modal-open { overflow: hidden; }

.hc-lang-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.hc-lang-modal.show { display: flex; }

.hc-lang-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11,15,22,.65);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.hc-lang-modal-card {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 85vh;
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: hcLangIn .2s ease-out;
}
@keyframes hcLangIn {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.hc-lang-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--hc-border);
    flex-shrink: 0;
}
.hc-lang-modal-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--hc-text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.hc-lang-modal-head h3 i { color: var(--hc-primary); }

.hc-lang-modal-close {
    width: 36px; height: 36px;
    background: var(--hc-bg);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    color: var(--hc-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.hc-lang-modal-close:hover { background: var(--hc-danger); color: #fff; border-color: var(--hc-danger); }

.hc-lang-modal-body {
    padding: 18px 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.hc-lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.hc-lang-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--hc-bg);
    border: 1.5px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    color: var(--hc-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all .15s ease;
    font-family: inherit;
}
.hc-lang-tile:hover {
    background: var(--hc-primary-dim);
    border-color: var(--hc-primary-line);
    color: var(--hc-primary-dark);
    transform: translateY(-1px);
}
.hc-lang-tile.active {
    background: var(--hc-primary-dim);
    border-color: var(--hc-primary);
    color: var(--hc-primary-dark);
    box-shadow: 0 0 0 3px var(--hc-primary-dim);
}
.hc-lang-tile .hc-flag-img-lg {
    width: 30px;
    height: 22px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,.08);
    flex-shrink: 0;
}
.hc-lang-tile .hc-lang-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-lang-tile .hc-lang-check {
    position: absolute;
    top: 6px;
    right: 8px;
    color: var(--hc-primary);
    font-size: 13px;
}

/* Dark theme adjustments */
.hc-lang-modal-card { background: var(--hc-card); border-color: var(--hc-border); }
.hc-lang-tile { background: rgba(255,255,255,.03); border-color: var(--hc-border); color: var(--hc-text); }
.hc-lang-tile:hover { background: rgba(2,157,246,.10); border-color: rgba(2,157,246,.30); }
.hc-lang-tile.active { background: rgba(2,157,246,.15); border-color: var(--hc-primary); }
.hc-lang-modal-close { background: rgba(255,255,255,.04); color: var(--hc-muted); }

/* Mobile: full-screen modal */
@media (max-width: 600px) {
    .hc-lang-modal { padding: 0; align-items: stretch; }
    .hc-lang-modal-card { max-width: 100%; max-height: 100%; border-radius: 0; border: none; }
    .hc-lang-grid { grid-template-columns: 1fr 1fr; }
    .hc-lang-tile { padding: 14px; }
}
@media (max-width: 380px) {
    .hc-lang-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Dark theme — fix list-group panels and status badges
   ============================================================ */

/* List groups (used in home dashboard panels, sidebars, etc.) */
.list-group { background: transparent; }
/* Home dashboard panels: cap the list height and rule it off top and bottom
   so long lists scroll inside the card instead of stretching it. */
.client-home-cards .list-group {
    max-height: 170px;
    overflow: auto;
    border-top: 1px solid #242c32 !important;
    border-bottom: 1px solid #242c32 !important;
}
/* slim scrollbar to match the rest of the theme, now that it can scroll */
.client-home-cards .list-group::-webkit-scrollbar { width: 6px; }
.client-home-cards .list-group::-webkit-scrollbar-track { background: transparent; }
.client-home-cards .list-group::-webkit-scrollbar-thumb { background: #242c32; border-radius: 999px; }
.client-home-cards .list-group::-webkit-scrollbar-thumb:hover { background: var(--hc-muted); }
.client-home-cards .list-group { scrollbar-width: thin; scrollbar-color: #242c32 transparent; }
.list-group-item,
.list-group-item-action {
    background: var(--hc-card) !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
}
.list-group-item.active,
.list-group-item-action.active {
    background: rgba(2,157,246,.14) !important;
    color: var(--hc-primary) !important;
    border-color: var(--hc-primary-line) !important;
}
.list-group-item:hover,
.list-group-item-action:hover {
    background: rgba(2,157,246,.08) !important;
    color: var(--hc-text) !important;
}
.list-group-flush .list-group-item { border-color: var(--hc-border) !important; }

/* Bootstrap labels / status pills emitted by WHMCS — make text readable in dark */
.label.status,
.label-status,
span.label,
.badge {
    background: rgba(2,157,246,.16) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(2,157,246,.30) !important;
}
.label-success,
.label.status-active,
.label.status-paid,
.label.status-answered,
.label.status-open,
.badge-success {
    background: rgba(2,157,246,.18) !important;
    color: #4ade80 !important;
    border-color: rgba(2,157,246,.35) !important;
}
.label-warning,
.label.status-pending,
.label.status-onhold,
.badge-warning {
    background: rgba(245,158,11,.18) !important;
    color: #fbbf24 !important;
    border-color: rgba(245,158,11,.35) !important;
}
.label-danger,
.label-error,
.label.status-suspended,
.label.status-unpaid,
.label.status-overdue,
.label.status-fraud,
.badge-danger {
    background: rgba(239,68,68,.18) !important;
    color: #fca5a5 !important;
    border-color: rgba(239,68,68,.35) !important;
}
.label-default,
.label.status-cancelled,
.label.status-terminated,
.label.status-closed,
.label.status-refunded {
    background: rgba(255,255,255,.08) !important;
    color: #94a3b8 !important;
    border-color: rgba(255,255,255,.12) !important;
}

/* hc-status-pill statuses in dark mode (status-active default = green, ensure text contrast) */
.hc-status-pill {
    background: rgba(2,157,246,.16);
    color: #4ade80;
    border-color: rgba(2,157,246,.30);
}
.hc-status-pill.status-pending,
.hc-status-pill.status-pendingtransfer,
.hc-status-pill.status-grace,
.hc-status-pill.status-redemption,
.hc-status-pill.status-draft,
.hc-status-pill.status-onhold {
    background: rgba(245,158,11,.18);
    color: #fbbf24;
    border-color: rgba(245,158,11,.35);
}
.hc-status-pill.status-suspended,
.hc-status-pill.status-fraud,
.hc-status-pill.status-unpaid,
.hc-status-pill.status-overdue,
.hc-status-pill.status-expired {
    background: rgba(239,68,68,.18);
    color: #fca5a5;
    border-color: rgba(239,68,68,.35);
}
.hc-status-pill.status-cancelled,
.hc-status-pill.status-terminated,
.hc-status-pill.status-transferredaway,
.hc-status-pill.status-closed,
.hc-status-pill.status-refunded {
    background: rgba(255,255,255,.08);
    color: #94a3b8;
    border-color: rgba(255,255,255,.12);
}

/* hc-tag in dark mode */
.hc-tag {
    background: rgba(2,157,246,.16);
    color: #4ade80;
}
.hc-tag.warn { background: rgba(245,158,11,.18); color: #fbbf24; }
.hc-tag.danger { background: rgba(239,68,68,.18); color: #fca5a5; }
.hc-tag.muted { background: rgba(255,255,255,.06); color: #94a3b8; }
.hc-tag.info { background: rgba(99,179,237,.14); color: #93c5fd; }

/* ============================================================
   Domain row actions dropdown
   ============================================================ */
.hc-domain-actions-btn {
    width: 32px; height: 32px;
    background: var(--hc-bg);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    color: var(--hc-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.hc-domain-actions-btn:hover {
    background: var(--hc-primary-dim);
    border-color: var(--hc-primary-line);
    color: var(--hc-primary-dark);
}
.hc-domain-actions-menu {
    position: fixed;
    min-width: 260px;
    width: 260px;
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-lg);
    box-shadow: 0 12px 40px rgba(15,24,40,.18);
    padding: 6px;
    z-index: 9999;
    display: none;
    text-align: left;
    max-height: 80vh;
    overflow-y: auto;
}
.hc-domain-actions-menu.show { display: block; }
.hc-domain-actions-menu .hc-dd-head {
    padding: 8px 12px 6px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--hc-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.hc-domain-actions-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--hc-r-md);
    color: var(--hc-text);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: background .12s, color .12s;
}
.hc-domain-actions-menu a:hover {
    background: var(--hc-primary-dim);
    color: var(--hc-primary-dark);
    text-decoration: none;
}
.hc-domain-actions-menu a i { width: 16px; text-align: center; color: var(--hc-primary); font-size: 12.5px; }
.hc-domain-actions-menu a.danger { color: #b91c1c; }
.hc-domain-actions-menu a.danger i { color: var(--hc-danger); }
.hc-domain-actions-menu a.danger:hover { background: rgba(239,68,68,.10); color: var(--hc-danger); }

/* Dark theme */
.hc-domain-actions-btn { background: rgba(255,255,255,.04); border-color: var(--hc-border); color: var(--hc-muted); }
.hc-domain-actions-btn:hover { background: rgba(2,157,246,.10); color: var(--hc-primary); }
.hc-domain-actions-menu { background: var(--hc-card); border-color: var(--hc-border); }
.hc-domain-actions-menu a { color: var(--hc-text); }
.hc-domain-actions-menu a:hover { background: rgba(2,157,246,.10); color: var(--hc-primary); }

/* Mobile: shift dropdown right edge so it doesn't overflow */
@media (max-width: 700px) {
    .hc-domain-actions-menu { right: 0; min-width: 220px; }
}

/* ============================================================
   Active products/services panel — buttons + new due-date line
   ============================================================ */

/* New due-date line under the product name */
.div-service-name .text-due {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--hc-muted);
    font-weight: 500;
}
.div-service-name .text-due i {
    color: var(--hc-primary);
    margin-right: 6px;
    font-size: 12px;
}
.div-service-name .text-due strong {
    color: var(--hc-text);
    font-weight: 700;
}

/* Buttons inside the panel: clean light-mode look */
.div-service-buttons .btn.btn-default,
.div-service-buttons .btn.btn-sm.btn-default {
    background: var(--hc-card);
    color: var(--hc-text);
    border: 1.5px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    font-weight: 600;
    padding: 6px 14px;
    transition: all .15s;
}
.div-service-buttons .btn.btn-default:hover {
    background: var(--hc-primary-dim);
    border-color: var(--hc-primary-line);
    color: var(--hc-primary-dark);
}
.div-service-buttons .btn.btn-primary {
    background: linear-gradient(135deg, var(--hc-primary-dark), var(--hc-primary));
    border: none;
    color: #fff;
    border-radius: var(--hc-r-md);
    font-weight: 700;
}

/* DARK THEME — service items panel */
.div-service-item { color: var(--hc-text); }
.div-service-name .text-domain { color: var(--hc-muted); }
.div-service-name .text-due { color: var(--hc-muted); }
.div-service-name .text-due strong { color: var(--hc-text); }

.div-service-buttons .btn.btn-default,
.div-service-buttons .btn.btn-sm.btn-default,
.div-service-buttons .btn-view-details {
    background: rgba(255,255,255,.04) !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
}
.div-service-buttons .btn.btn-default:hover,
.div-service-buttons .btn-view-details:hover {
    background: rgba(2,157,246,.12) !important;
    border-color: rgba(2,157,246,.30) !important;
    color: var(--hc-primary) !important;
}
.div-service-buttons .btn.btn-primary {
    background: linear-gradient(135deg, var(--hc-primary-dark), var(--hc-primary)) !important;
    color: #fff !important;
    border: none !important;
}

.div-service-buttons .btn-group .dropdown-toggle {
    background: rgba(255,255,255,.04) !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
}
.div-service-buttons .btn-group .dropdown-toggle:hover {
    background: rgba(2,157,246,.12) !important;
    color: var(--hc-primary) !important;
}
.div-service-buttons .dropdown-menu {
    background: var(--hc-card) !important;
    border: 1px solid var(--hc-border) !important;
}
.div-service-buttons .dropdown-item { color: var(--hc-text) !important; }
.div-service-buttons .dropdown-item:hover {
    background: rgba(2,157,246,.12) !important;
    color: var(--hc-primary) !important;
}

/* ============================================================
   Services list: show-terminated toggle filter
   ============================================================ */
.hc-service-filters {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}
.hc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    padding: 8px 16px 8px 12px;
    cursor: pointer;
    user-select: none;
    transition: all .15s;
    font-family: inherit;
}
.hc-toggle:hover { border-color: var(--hc-primary-line); }
.hc-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.hc-toggle-track {
    width: 36px;
    height: 20px;
    background: #cbd5e1;
    border-radius: 999px;
    position: relative;
    flex-shrink: 0;
    transition: background .2s;
}
.hc-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
    transition: transform .2s;
}
.hc-toggle input:checked + .hc-toggle-track { background: var(--hc-primary); }
.hc-toggle input:checked + .hc-toggle-track .hc-toggle-thumb { transform: translateX(16px); }
.hc-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hc-text);
    white-space: nowrap;
}
.hc-toggle-label i { color: var(--hc-muted); font-size: 12px; }
.hc-toggle input:checked ~ .hc-toggle-label i { color: var(--hc-primary); }
.hc-toggle .hc-tag { padding: 2px 8px; font-size: 10.5px; }

/* Dark mode */
.hc-toggle { background: var(--hc-card); border-color: var(--hc-border); }
.hc-toggle-track { background: rgba(255,255,255,.15); }

/* ============================================================
   Services list filter chips (mirrors ticket filter style)
   ============================================================ */
#hcServiceFiltersBar { margin-bottom: 14px; padding-bottom: 0; border-bottom: none; }
.hc-service-filters {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}
.hc-service-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--hc-card);
    border: 1.5px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--hc-muted);
    cursor: pointer;
    transition: all .15s ease;
    font-family: inherit;
}
.hc-service-filter:hover { border-color: var(--hc-primary-line); color: var(--hc-primary-dark); }
.hc-service-filter.active {
    background: linear-gradient(135deg, var(--hc-primary-dark) 0%, var(--hc-primary) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--hc-shadow-blue);
}
.hc-service-filter i { font-size: 11px; }
.hc-service-filter.active .hc-tag.muted { background: rgba(255,255,255,.2); color: #fff; }

.hc-service-filter { background: var(--hc-card); color: var(--hc-muted); border-color: var(--hc-border); }
.hc-service-filter:hover { color: var(--hc-primary); }

/* Services list: hide-inactive toggle bar */
.hc-service-filters-bar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
@media (max-width: 600px) { .hc-service-filters-bar { justify-content: stretch; } .hc-service-filters-bar .hc-toggle { width: 100%; justify-content: space-between; } }

/* ════════════════════════════════════════════════════════════════════
   WHMCS standard_cart order form — dark theme overrides
   Injected in nexus custom.css so they apply regardless of whether
   the server uses `standard_cart` or `qgs-edited-standard_cart` as
   the active order-form template. Scoped by body.cart / #order-standard_cart
   so nothing leaks to non-cart pages.
   ════════════════════════════════════════════════════════════════════ */

/* Cart canvas — force every WHMCS wrapper transparent so nothing white leaks */
body.cart,
body.cart #main-body,
body.cart section#main-body,
body.cart .container,
body.cart .primary-content,
body.cart .cart-container,
body.cart .row { background:transparent !important; }
body.cart { background:var(--hc-bg) !important; color:var(--hc-text); }

#order-standard_cart { color:var(--hc-text); }
#order-standard_cart .cart-body { background:transparent !important; }

/* Sidebar Actions card (bootstrap-4 collapse) */
#order-standard_cart .cart-sidebar,
#order-standard_cart .cart-sidebar-collapsed,
#order-standard_cart .cart-sidebar .card,
#order-standard_cart .cart-sidebar-collapsed .card,
body.cart .panel,
body.cart .cart-body .card { background:var(--hc-card) !important; border:1px solid var(--hc-border) !important; color:var(--hc-text) !important; border-radius:8px !important; }
body.cart .panel-heading,
body.cart .card-header { background:var(--hc-card-2) !important; color:var(--hc-text) !important; border-bottom:1px solid var(--hc-border) !important; font-weight:700; }
body.cart .panel-heading a,
body.cart .card-header a { color:var(--hc-text) !important; text-decoration:none; }
body.cart .panel-body,
body.cart .card-body { background:var(--hc-card) !important; color:var(--hc-text) !important; }
body.cart .list-group { background:transparent !important; border-radius:0 !important; }
body.cart .list-group-item { background:transparent !important; color:var(--hc-text) !important; border:0 !important; border-top:1px solid var(--hc-border) !important; padding:10px 16px !important; }
body.cart .list-group-item:first-child { border-top:0 !important; }
body.cart .list-group-item.active,
body.cart .list-group-item-action.active { background:rgba(2,157,246,.14) !important; color:var(--hc-primary) !important; }
body.cart .list-group-item i,
body.cart .list-group-item .fa { color:var(--hc-primary); margin-right:8px; }
body.cart .list-group-item:hover { background:rgba(2,157,246,.08) !important; }

/* Review & Checkout heading */
#order-standard_cart .header-lined h1,
#order-standard_cart h1.font-size-36 { color:var(--hc-text) !important; }

/* Order Summary card */
/* No padding on the card itself — .os-head/.os-body (checkout) and the
   h2 + .summary-container (viewcart) each bring their own, so an outer
   pad would double up. */
#order-standard_cart .order-summary { background:var(--hc-card) !important; border:1px solid var(--hc-border) !important; border-radius:6px !important; color:var(--hc-text) !important; padding:0 !important; box-shadow:0 8px 24px rgba(0,0,0,.35); overflow:hidden; }
/* viewcart's legacy markup: give the heading the .os-head treatment */
#order-standard_cart .order-summary > h2 {
    color:var(--hc-text) !important; font-size:1.25rem !important; margin:0 !important;
    font-weight:700; text-transform:uppercase; letter-spacing:.01em;
    padding:20px 22px !important;
    background:linear-gradient(180deg, var(--hc-card-2), var(--hc-card));
    border-bottom:1px solid var(--hc-border);
}
#order-standard_cart .order-summary > .summary-container { padding:20px 22px !important; }
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .recurring-totals,
#order-standard_cart .order-summary .bordered-totals,
#order-standard_cart .order-summary .total-due-today { color:var(--hc-text); }
#order-standard_cart .order-summary .subtotal { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--hc-border); font-size:13px; color:var(--hc-muted); }
#order-standard_cart .order-summary .subtotal #subtotal { color:var(--hc-text); font-weight:700; }
#order-standard_cart .order-summary .recurring-totals { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; color:var(--hc-muted); }
#order-standard_cart .order-summary .bordered-totals { border-top:1px solid var(--hc-border); border-bottom:1px solid var(--hc-border); padding:6px 0; margin:4px 0; }
/* Total row: flat (no nested box) — just a divider + big blue figure, like
   the configure page's .os-totalrow. Avoids the "card inside a card" look. */
#order-standard_cart .order-summary .total-due-today {
    display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
    flex-direction:row-reverse;
    margin-top:12px; padding:14px 0 0;
    border-top:1px solid var(--hc-border);
    background:none !important; border-radius:0;
}
#order-standard_cart .order-summary .total-due-today > span:last-child {
    font-family:"Oswald","Fira Sans",sans-serif;
    font-size:1.05rem; text-transform:uppercase; letter-spacing:.02em;
    color:var(--hc-text); font-weight:700; text-align:left;
}
#order-standard_cart .order-summary .total-due-today .amt {
    font-family:"Oswald","Fira Sans",sans-serif;
    color:var(--hc-primary); font-size:2rem; font-weight:700;
    letter-spacing:-.02em; line-height:1.1; text-align:right; white-space:nowrap;
}

/* Empty cart panel */
body.cart .view-cart-items,
body.cart .view-cart-items-header { background:var(--hc-card) !important; color:var(--hc-text) !important; border:1px solid var(--hc-border) !important; border-radius:8px !important; }
body.cart .view-cart-items-header { padding:10px 16px !important; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:11.5px; color:var(--hc-muted) !important; border-bottom:0 !important; border-radius:8px 8px 0 0 !important; }
body.cart .view-cart-items { border-top:0 !important; border-radius:0 0 8px 8px !important; margin-top:-1px; }
body.cart .view-cart-empty { background:transparent !important; color:var(--hc-muted) !important; text-align:center !important; padding:38px 20px !important; border:0 !important; }

/* Promo Code tab pill + panel */
body.cart .nav-tabs,
body.cart .nav.nav-tabs { border-bottom:0 !important; margin-bottom:0 !important; }
body.cart .nav-tabs .nav-link,
body.cart .nav-tabs .nav-item .nav-link { background:var(--hc-card) !important; color:var(--hc-muted) !important; border:1px solid var(--hc-border) !important; border-bottom:0 !important; border-radius:8px 8px 0 0 !important; padding:8px 16px !important; font-weight:700; font-size:12.5px; }
body.cart .nav-tabs .nav-link.active { background:var(--hc-card-2) !important; color:var(--hc-primary) !important; border-color:var(--hc-border) !important; }
body.cart .tab-content { background:var(--hc-card-2) !important; border:1px solid var(--hc-border) !important; border-radius:0 8px 8px 8px !important; padding:14px !important; margin-top:-1px; }
body.cart .tab-content input.form-control { background:var(--hc-bg-2) !important; color:var(--hc-text) !important; border:1px solid var(--hc-border) !important; }

/* Buttons */
body.cart .btn-default,
body.cart .btn-outline-primary,
body.cart .btn-secondary { background:var(--hc-card) !important; border:1px solid var(--hc-border) !important; color:var(--hc-text) !important; font-weight:700; box-shadow:none !important; }
body.cart .btn-default:hover,
body.cart .btn-outline-primary:hover,
body.cart .btn-secondary:hover { background:rgba(2,157,246,.10) !important; border-color:rgba(2,157,246,.34) !important; color:var(--hc-primary) !important; }
body.cart .btn-primary,
body.cart .btn-success,
body.cart #checkout,
body.cart .btn-checkout { background:linear-gradient(135deg,var(--hc-primary-dark) 0%,var(--hc-primary) 100%) !important; border:0 !important; color:#fff !important; font-weight:800 !important; letter-spacing:.02em; box-shadow:var(--hc-shadow-blue) !important; }
body.cart #checkout.disabled,
body.cart .btn-checkout.disabled,
body.cart .btn-primary.disabled { background:var(--hc-card-2) !important; color:var(--hc-muted) !important; box-shadow:none !important; opacity:.55; cursor:not-allowed; }

/* Continue Shopping link */
body.cart .btn-continue-shopping { color:var(--hc-muted) !important; background:transparent !important; text-decoration:none; }
body.cart .btn-continue-shopping:hover { color:var(--hc-primary) !important; }

/* Modals */
body.cart .modal-content,
body.do-app .modal-content { background:var(--hc-card) !important; border:1px solid var(--hc-border) !important; color:var(--hc-text) !important; border-radius:10px !important; }
body.cart .modal-header, body.do-app .modal-header,
body.cart .modal-footer, body.do-app .modal-footer { background:var(--hc-card) !important; border-color:var(--hc-border) !important; color:var(--hc-text) !important; }
body.cart .modal-title, body.do-app .modal-title { color:var(--hc-text) !important; }
body.cart .modal .close, body.do-app .modal .close { color:var(--hc-muted) !important; text-shadow:none !important; opacity:.7; }
body.cart .modal .close:hover, body.do-app .modal .close:hover { color:var(--hc-text) !important; opacity:1; }
body.cart .modal-backdrop, body.do-app .modal-backdrop { background:#0c0d11 !important; }

/* Alerts */
body.cart .alert { background:var(--hc-card-2) !important; border:1px solid var(--hc-border) !important; color:var(--hc-text) !important; }
body.cart .alert-warning { background:rgba(251,146,60,.10) !important; border-color:rgba(251,146,60,.28) !important; color:#fbbf24 !important; }
body.cart .alert-danger { background:rgba(239,68,68,.10) !important; border-color:rgba(239,68,68,.28) !important; color:#fca5a5 !important; }
body.cart .alert-info { background:rgba(99,179,237,.10) !important; border-color:rgba(99,179,237,.28) !important; color:#93c5fd !important; }
body.cart .alert-success { background:rgba(2,157,246,.10) !important; border-color:rgba(2,157,246,.28) !important; color:var(--hc-primary) !important; }

/* Shopping Cart page breadcrumb strip */
body.cart .master-breadcrumb { background:transparent !important; }
body.cart .master-breadcrumb .breadcrumb-item,
body.cart .master-breadcrumb .breadcrumb-item a { color:var(--hc-muted); }
body.cart .master-breadcrumb .breadcrumb-item.active { color:var(--hc-text); }

/* ── Cart: hide Company Name / VAT / State region so they can't leak
   in when the active order form is still WHMCS's default standard_cart. ─── */
body.cart .thc-company,
body.cart .thc-company-toggle,
body.cart .thc-company-fields,
body.cart #thcCompanyToggle,
body.cart #inputCompanyName,
body.cart #inputTaxId,
body.cart label[for="inputCompanyName"],
body.cart label[for="inputTaxId"],
body.cart .form-group:has(> #inputCompanyName),
body.cart .form-group:has(> #inputTaxId) { display:none !important; }
/* State row is shown again — the cart collects Country + State. A
   StatesDropdown-injected <select> must stay visible too. */
/* NOTE: there used to be `flex:0 0 33.333%; max-width:33.333%` overrides here
   to rebalance City/Postcode/Country after the State field was removed. They
   are gone on purpose: the address row is now a CSS grid, where a percentage
   max-width resolves against the *track* (230px), not the row — which shrank
   the City field to 77px. The grid's `repeat(3, minmax(0,1fr))` handles the
   thirds on its own. Don't reintroduce them. */

/* ════════════════════════════════════════════════════════════════════
   Configure-page visual port — brings the cfg-hero / cfg-step / cfg-card
   / cfg-side / order-summary / os-* language from QGS-MAIN-EN into the
   WHMCS cart. Uses --hc-* tokens so it stays consistent with the client
   area. Scoped under body.cart / #order-standard_cart.
   ════════════════════════════════════════════════════════════════════ */

/* Hero — "Let's configure your server!" banner above the checkout grid */
/* Full-bleed out of WHMCS's .container without creating a horizontal
   scrollbar: `overflow-x: clip` on the page does NOT make a scroll
   container, so position:sticky on .cfg-side keeps working (unlike
   overflow-x:hidden). */
html:has(body.cart), body.cart { overflow-x: clip; }
body.cart .cfg-hero {
    position:relative;
    width:100vw; left:50%; margin-left:-50vw; margin-right:-50vw;
    margin-bottom:0;
    background-image:
        linear-gradient(180deg, rgba(11,16,22,.72), rgba(11,16,22,.94)),
        url("https://static.qgshosting.com/cdn/images/backgrounds/datacenter-room.webp");
    background-color:var(--hc-navy);
    background-size:cover; background-position:center;
    background-repeat:no-repeat;
    border-bottom:3px solid var(--hc-primary);
}
body.cart .cfg-hero-in {
    display:flex; align-items:center; justify-content:space-between;
    gap:24px; flex-wrap:wrap;
    max-width:1210px; margin:0 auto;
    padding:54px 22px 46px;
}
body.cart .cfg-hero-title {
    font-family:"Oswald", "Fira Sans", sans-serif;
    font-size:clamp(2rem, 4.4vw, 3.2rem); font-weight:700;
    text-transform:uppercase; line-height:1.02; letter-spacing:.01em;
    color:#fff; margin:0;
}
body.cart .installed-game { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
body.cart .ig-label { color:var(--hc-muted); font-size:.9rem; }
body.cart .ig-chip {
    display:inline-flex; align-items:center; gap:10px;
    background:var(--hc-card); border:1px solid var(--hc-border-2);
    border-radius:6px; padding:8px 14px 8px 8px; color:var(--hc-text);
}
body.cart .ig-chip img { width:34px; height:34px; object-fit:cover; border-radius:4px; background:var(--hc-bg-2); }
body.cart .ig-chip b { font-family:"Oswald", sans-serif; text-transform:uppercase; letter-spacing:.02em; }
body.cart .ig-change { display:inline-flex; align-items:center; gap:6px; color:var(--hc-primary); font-weight:600; font-size:.9rem; text-decoration:none; }
body.cart .ig-change:hover { text-decoration:underline; }

/* Two-column grid — 1:1 with the configure page (1fr / 360px, gap 30, 1210 max) */
body.cart .cfg-grid { display:grid; grid-template-columns:1fr 360px; gap:30px; align-items:start; max-width:1210px; margin:0 auto; padding:40px 22px; }
body.cart .cfg-main { display:grid; gap:22px; min-width:0; }
/* The steps live inside <form id="frmCheckout">, which is .cfg-main's only
   grid child — so .cfg-main's gap never lands between them. Space the steps
   themselves instead; this works regardless of how deeply they're wrapped. */
body.cart #frmCheckout { display:grid; gap:38px; min-width:0; }
body.cart .cfg-step + .cfg-step { margin-top:38px; }
body.cart #frmCheckout > .cfg-step + .cfg-step { margin-top:0; }
/* #order-standard_cart already pads the page; don't double it up */
body.cart #order-standard_cart { padding:0 !important; max-width:none !important; }

/* Numbered step head */
body.cart .cfg-step { display:block; }
body.cart .cfg-step-head { display:flex; align-items:flex-start; gap:16px; margin-bottom:16px; }
body.cart .cfg-step-num {
    flex:none; width:40px; height:40px; border-radius:5px;
    display:grid; place-items:center; font-family:"Oswald", sans-serif; font-weight:700;
    font-size:1.2rem; color:#fff; background:var(--hc-primary);
}
body.cart .cfg-step-head h2 { font-size:1.35rem; text-transform:uppercase; color:var(--hc-text); margin:0; }
body.cart .cfg-step-head p { color:var(--hc-muted); font-size:.92rem; margin-top:2px; margin-bottom:0; }

/* Card container for each step — 5px #232a39 edge, exactly like the site */
body.cart .cfg-card {
    background:var(--hc-card); border:5px solid var(--hc-card-edge);
    border-radius:6px; padding:0 24px 24px;
    display:grid; gap:22px;
}

/* Field label with icon (identical to configure page) */
body.cart .cfg-field { display:block; }
body.cart .cfg-field-label { display:flex; align-items:center; gap:9px; font-weight:600; margin-bottom:12px; color:var(--hc-text); }
body.cart .cfg-field-label i { color:var(--hc-primary); }
body.cart .cfg-input, body.cart .cfg-select {
    width:100%; background:var(--hc-bg-2); color:var(--hc-text);
    border:1px solid var(--hc-border-2); border-radius:5px;
    padding:13px 15px; font-family:"Fira Sans", sans-serif; font-size:.98rem;
}
body.cart .cfg-input:focus, body.cart .cfg-select:focus { outline:none; border-color:var(--hc-primary); }
body.cart .cfg-select {
    cursor:pointer; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%2396a3b4'%3E%3Cpath d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 16px center; background-size:11px;
}

/* Sticky sidebar */
body.cart .cfg-side { position:sticky; top:16px; align-self:start; }

/* Order Summary card, ported from configure page */
body.cart .cfg-side .order-summary,
body.cart .cfg-order-summary {
    background:var(--hc-card); border:1px solid var(--hc-border);
    border-radius:6px; overflow:hidden;
    padding:0 !important;
}
body.cart .cfg-side .os-head,
body.cart .cfg-order-summary .os-head {
    background:linear-gradient(180deg, var(--hc-card-2), var(--hc-card));
    padding:20px 22px; border-bottom:1px solid var(--hc-border);
}
body.cart .cfg-side .os-head h3,
body.cart .cfg-order-summary .os-head h3 { font-size:1.25rem; text-transform:uppercase; letter-spacing:.01em; color:var(--hc-text); margin:0; font-weight:700; }
body.cart .cfg-side .os-head span,
body.cart .cfg-order-summary .os-head span { display:block; margin-top:3px; font-size:.82rem; color:var(--hc-muted); }
body.cart .cfg-side .os-body,
body.cart .cfg-order-summary .os-body { padding:20px 22px 22px; }
body.cart .os-rows { display:grid; gap:0; }
body.cart .os-row {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:11px 0; border-bottom:1px solid var(--hc-border);
}
body.cart .os-row > span { color:var(--hc-muted); font-size:.9rem; }
body.cart .os-row > b { font-weight:700; text-align:right; color:var(--hc-text); }
body.cart .os-row .os-unset { color:var(--hc-faint); font-weight:500; font-style:italic; }
body.cart .os-feats { display:grid; gap:9px; padding:16px 0; border-bottom:1px solid var(--hc-border); list-style:none; margin:0; }
body.cart .os-feats li { display:flex; align-items:flex-start; gap:9px; font-size:.9rem; color:var(--hc-muted); }
body.cart .os-feats li i { color:var(--hc-primary); font-size:.82rem; margin-top:3px; }
body.cart .os-feats li b { color:var(--hc-text); }
body.cart .os-price { padding:16px 0 4px; }
body.cart .os-baserow, body.cart .os-addon {
    display:flex; align-items:center; justify-content:space-between;
    font-size:.9rem; color:var(--hc-muted); padding:4px 0;
}
body.cart .os-baserow b, body.cart .os-addon b { color:var(--hc-text); font-weight:700; }
body.cart .os-addon b { color:var(--hc-primary-bright); }
/* Label and amount stay on ONE line: the label may wrap (long BG "ОБЩО ДЪЛЖИМО ДНЕС"),
   the amount never does — it used to drop below the label. */
body.cart .os-totalrow {
    display:flex; align-items:flex-end; justify-content:space-between;
    flex-wrap:nowrap; gap:14px;
    margin-top:12px; padding-top:14px; border-top:1px solid var(--hc-border);
}
body.cart .os-totalrow > span { flex:1 1 auto; min-width:0; }
body.cart .os-totalrow > b { flex:0 0 auto; margin-left:auto; line-height:1.1; white-space:nowrap; }
/* Breakdown rows: long label wraps, the price stays in one piece on the right */
body.cart .os-baserow, body.cart .os-addon { gap:12px; }
body.cart .os-baserow > span, body.cart .os-addon > span { flex:1 1 auto; min-width:0; }
body.cart .os-baserow > b, body.cart .os-addon > b { flex:0 0 auto; white-space:nowrap; text-align:right; }
body.cart .os-totalrow > span { display:flex; flex-direction:column; font-family:"Oswald", sans-serif; text-transform:uppercase; font-size:1.05rem; color:var(--hc-text); }
body.cart .os-totalrow > span small { text-transform:none; font-family:"Fira Sans", sans-serif; font-size:.72rem; color:var(--hc-faint); font-weight:400; letter-spacing:0; }
body.cart .os-totalrow > b { font-family:"Oswald", sans-serif; font-size:2rem; font-weight:700; color:#37e28a; } /* green like the qgshosting.com configurator total */
body.cart .os-checkout {
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    width:100%; margin-top:20px; padding:14px 18px;
    background:linear-gradient(135deg, var(--hc-primary-dark), var(--hc-primary));
    color:#fff !important; font-weight:800; letter-spacing:.02em;
    border:0; border-radius:6px; text-decoration:none;
    font-family:"Oswald","Fira Sans",sans-serif; font-size:1rem; text-transform:uppercase;
    box-shadow:var(--hc-shadow-blue); transition:transform .15s, box-shadow .2s;
    cursor:pointer;
}
body.cart .os-checkout:hover { transform:translateY(-1px); box-shadow:0 12px 32px rgba(2,157,246,.55); color:#fff; text-decoration:none; }
body.cart .os-checkout.is-disabled, body.cart .os-checkout:disabled { background:var(--hc-card-2); color:var(--hc-muted) !important; box-shadow:none; cursor:not-allowed; opacity:.55; }
body.cart .os-tos { text-align:center; margin-top:14px; margin-bottom:0; font-size:.8rem; color:var(--hc-faint); }
body.cart .os-tos a { color:var(--hc-primary); font-weight:600; text-decoration:none; }
body.cart .os-tos a:hover { text-decoration:underline; }

/* Payment method radio grid — configure-page's plan chip style */
body.cart .cfg-pm-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
body.cart .cfg-pm-tile {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    background:var(--hc-bg-2); border:2px solid var(--hc-border-2); border-radius:5px;
    padding:16px 12px; cursor:pointer; text-align:center;
    transition:border-color .2s, background .2s, transform .15s;
    color:var(--hc-text);
}
body.cart .cfg-pm-tile:hover { border-color:var(--hc-primary); }
body.cart .cfg-pm-tile.active { border-color:var(--hc-primary); background:rgba(2,157,246,.10); box-shadow:0 0 0 1px var(--hc-primary), 0 8px 22px -12px rgba(2,157,246,.55); }
body.cart .cfg-pm-tile img { max-height:36px; width:auto; object-fit:contain; }
body.cart .cfg-pm-tile b { font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
body.cart .cfg-pm-tile input[type="radio"] { display:none; }

/* Mobile: single column, un-sticky the sidebar */
@media (max-width:900px) {
    body.cart .cfg-grid { grid-template-columns:1fr; padding-inline:14px; }
    body.cart .cfg-side { position:static; }
    body.cart .cfg-hero-in { flex-direction:column; align-items:flex-start; padding:40px 18px 32px; }
}

/* ════════════════════════════════════════════════════════════════════
   Bridge: WHMCS-native checkout elements that live INSIDE the new
   .cfg-card steps. Maps them onto the configure-page visual language
   without needing further .tpl edits.
   ════════════════════════════════════════════════════════════════════ */

/* Inputs: WHMCS renders `.field.form-control`, style them like .cfg-input */
body.cart .cfg-card .field,
body.cart .cfg-card .form-control,
body.cart .cfg-card input[type="text"],
body.cart .cfg-card input[type="email"],
body.cart .cfg-card input[type="tel"],
body.cart .cfg-card input[type="password"],
body.cart .cfg-card select,
body.cart .cfg-card textarea {
    background:var(--hc-bg-2) !important; color:var(--hc-text) !important;
    border:1px solid var(--hc-border-2) !important; border-radius:5px !important;
    padding:13px 15px !important; font-family:"Fira Sans", sans-serif; font-size:.98rem;
    /* all.min.css pins a fixed height/width on .field — that truncated City
       and clipped the country <select>'s text. Force intrinsic sizing. */
    height:auto !important; min-height:48px !important; line-height:1.3 !important;
    width:100% !important; max-width:100% !important; min-width:0 !important;
    box-sizing:border-box !important; box-shadow:none !important;
    display:block !important; float:none !important;
}
/* the <select> needs room for the arrow and must not clip its own text */
body.cart .cfg-card select,
body.cart .cfg-card select.form-control {
    appearance:none; -webkit-appearance:none;
    padding-right:38px !important; text-overflow:ellipsis;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%2396a3b4'%3E%3Cpath d='M6 8 0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 15px center !important;
    background-size:11px !important;
}
/* the grid cell and its .form-group must be allowed to shrink */
body.cart .cfg-card .form-group,
body.cart .cfg-card .prepend-icon { min-width:0; width:auto; }
body.cart .cfg-card textarea { min-height:104px; }
body.cart .cfg-card .field:focus,
body.cart .cfg-card .form-control:focus,
body.cart .cfg-card select:focus,
body.cart .cfg-card textarea:focus { border-color:var(--hc-primary) !important; background:var(--hc-card-2) !important; }
body.cart .cfg-card ::placeholder { color:var(--hc-faint); }
/* prepend-icon inputs: keep room for the icon */
body.cart .cfg-card .prepend-icon { position:relative; }
body.cart .cfg-card .prepend-icon .field,
body.cart .cfg-card .prepend-icon .form-control { padding-left:44px !important; }
body.cart .cfg-card .prepend-icon .field-icon {
    position:absolute; left:0; top:0; width:44px; height:48px;
    display:grid; place-items:center; color:var(--hc-primary); z-index:2;
    pointer-events:none; margin:0;
}
body.cart .cfg-card .form-group { margin-bottom:0; }

/* Tidy form grid: WHMCS emits Bootstrap col-sm-* floats, which stack
   raggedly inside the card. Turn every .row into a real 2-column grid and
   map the Bootstrap widths onto column spans so fields line up evenly. */
body.cart .cfg-card .row {
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px; margin:0; width:100%;
}
body.cart .cfg-card .row > [class*="col-"] {
    padding:0; margin:0; float:none; width:auto; max-width:none; min-width:0;
}
/* half-width fields */
body.cart .cfg-card .row > .col-sm-6,
body.cart .cfg-card .row > .col-md-6,
body.cart .cfg-card .row > .col-lg-6 { grid-column:span 1; }
/* full-width fields */
body.cart .cfg-card .row > .col-sm-12,
body.cart .cfg-card .row > .col-md-12,
body.cart .cfg-card .row > .col-12 { grid-column:1 / -1; }
/* thirds (City / Postcode / Country) get their own 3-up row */
body.cart .cfg-card .row:has(> .col-sm-4) { grid-template-columns:repeat(3, minmax(0,1fr)); }
body.cart .cfg-card .row:has(> .col-sm-4) > .col-sm-12 { grid-column:1 / -1; }
body.cart .cfg-card .row > .col-sm-4 { grid-column:span 1; }
/* offsets are meaningless in the grid */
body.cart .cfg-card .row > [class*="offset-"] { margin-left:0 !important; }

@media (max-width:640px) {
    body.cart .cfg-card .row,
    body.cart .cfg-card .row:has(> .col-sm-4) { grid-template-columns:1fr; }
    body.cart .cfg-card .row > [class*="col-"] { grid-column:1 / -1 !important; }
}

/* Remaining WHMCS .sub-heading dividers inside a step card */
body.cart .cfg-card .sub-heading {
    border:0; margin:6px 0 4px; padding:0 0 10px;
    border-bottom:1px solid var(--hc-border);
}
body.cart .cfg-card .sub-heading span,
body.cart .cfg-card .sub-heading .primary-bg-color {
    background:transparent !important; color:var(--hc-text) !important; padding:0 !important;
    font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; border-radius:0;
}
body.cart .cfg-card .sub-heading .primary-bg-color::before {
    content:""; display:inline-block; width:6px; height:6px; border-radius:2px;
    background:var(--hc-primary); margin-right:8px; vertical-align:middle;
}

/* "Already registered?" action bar inside step 1 */
body.cart .cfg-card .already-registered {
    border:0; padding:0; margin:0 0 4px; min-height:0;
    display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap;
}
body.cart .cfg-card .already-registered p { display:none; }
body.cart .cfg-card .btn-info:not(.w-hidden),
body.cart .cfg-card .btn-warning:not(.w-hidden) {
    background:linear-gradient(135deg, var(--hc-primary-dark), var(--hc-primary)) !important;
    border:0 !important; color:#fff !important; font-weight:700;
    text-transform:uppercase; letter-spacing:.02em; font-size:12.5px;
    padding:10px 18px; border-radius:5px; box-shadow:none !important;
}
body.cart .cfg-card .btn-info:hover,
body.cart .cfg-card .btn-warning:hover { box-shadow:var(--hc-shadow-blue) !important; color:#fff !important; }

/* Payment-method tiles (markup keeps .thc-pm-tile / .thc-pm-tile-active) */
body.cart .thc-pm-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
body.cart .thc-pm-tile {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
    background:var(--hc-bg-2); border:2px solid var(--hc-border-2); border-radius:5px;
    padding:18px 12px; cursor:pointer; text-align:center; margin:0;
    color:var(--hc-text); min-height:104px;
    transition:border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
body.cart .thc-pm-tile:hover { border-color:var(--hc-primary); transform:translateY(-2px); }
body.cart .thc-pm-tile-active {
    border-color:var(--hc-primary); background:rgba(2,157,246,.10);
    box-shadow:0 0 0 1px var(--hc-primary), 0 8px 22px -12px rgba(2,157,246,.6);
}
body.cart .thc-pm-tile input[type="radio"] { position:absolute; opacity:0; pointer-events:none; }
body.cart .thc-pm-tile .thc-pm-icon { max-height:34px; width:auto; max-width:110px; object-fit:contain; }
body.cart .thc-pm-tile .thc-pm-name { font-size:.84rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--hc-text); }
body.cart .thc-pm-tile-active .thc-pm-name { color:var(--hc-primary-bright); }
/* iCheck wrappers WHMCS injects around the radios */
body.cart .thc-pm-tile .icheckbox_square-blue,
body.cart .thc-pm-tile .iradio_square-blue { display:none !important; }

/* Password strength meter + generate button */
body.cart .cfg-card .password-strength-meter .progress { background:var(--hc-bg-2); border:1px solid var(--hc-border); height:8px; border-radius:999px; overflow:hidden; }
body.cart .cfg-card .password-strength-meter .progress-bar { background:var(--hc-primary) !important; }
body.cart .cfg-card #passwordStrengthTextLabel { color:var(--hc-muted) !important; font-size:12px; margin-top:6px; }
body.cart .cfg-card .generate-password {
    background:var(--hc-card-2) !important; border:1px solid var(--hc-border-2) !important;
    color:var(--hc-text) !important; font-weight:700; border-radius:5px; padding:10px 16px; font-size:12.5px;
}
body.cart .cfg-card .generate-password:hover { border-color:var(--hc-primary) !important; color:var(--hc-primary) !important; }

/* Existing-account radio cards (logged-in multi-account picker) */
body.cart .cfg-card .account {
    background:var(--hc-bg-2); border:1px solid var(--hc-border-2); border-radius:5px;
    padding:14px 16px; margin-bottom:10px; color:var(--hc-text);
}
body.cart .cfg-card .account.active { border-color:var(--hc-primary); background:rgba(2,157,246,.08); }
body.cart .cfg-card .account .address strong { color:var(--hc-text); }
body.cart .cfg-card .account .small { color:var(--hc-muted); }
body.cart .cfg-card .label-info { background:var(--hc-primary) !important; color:#fff !important; }
body.cart .cfg-card .label-default { background:var(--hc-card-3) !important; color:var(--hc-muted) !important; }

/* Credit-card / stored-card grid */
body.cart .existing-cc-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; margin-bottom:14px; }
body.cart .existing-cc-grid label {
    background:var(--hc-bg-2); border:1px solid var(--hc-border-2); border-radius:5px;
    color:var(--hc-text); padding:12px 14px; margin:0; cursor:pointer;
}
body.cart .existing-cc-grid label:hover { border-color:var(--hc-primary); }

/* Apply-credit block */
body.cart .apply-credit-container {
    background:var(--hc-bg-2); border:1px solid var(--hc-border); border-radius:6px;
    padding:16px 18px; color:var(--hc-text);
}
body.cart .apply-credit-container p { color:var(--hc-muted); font-size:13px; margin-bottom:8px; }
body.cart .apply-credit-container label.radio { display:flex; align-items:center; gap:8px; color:var(--hc-text); font-size:13.5px; margin:0 0 6px; }

/* Security notice under the form */
body.cart .thc-security-notice {
    display:flex; align-items:center; gap:12px; margin-top:18px;
    background:var(--hc-card); border:1px solid var(--hc-border); border-radius:6px;
    padding:14px 18px;
}
body.cart .thc-security-notice i { color:var(--hc-primary); font-size:18px; }
body.cart .thc-security-notice p { margin:0; color:var(--hc-muted); font-size:12.5px; }
body.cart .thc-security-notice strong { color:var(--hc-text); }

/* Cart card in the sidebar — align with the .order-summary card look */
body.cart .thc-cart-card {
    background:var(--hc-card) !important; border:1px solid var(--hc-border) !important;
    border-radius:6px !important; overflow:hidden; box-shadow:none !important; margin:0 0 14px !important;
}
body.cart .thc-cart-head {
    display:flex; align-items:center; gap:10px; padding:16px 20px;
    background:linear-gradient(180deg, var(--hc-card-2), var(--hc-card));
    border-bottom:1px solid var(--hc-border);
}
body.cart .thc-cart-ico { color:var(--hc-primary); font-size:16px; }
body.cart .thc-cart-title { font-family:"Oswald","Fira Sans",sans-serif; font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--hc-text); }
body.cart .thc-cart-count {
    margin-left:auto; background:var(--hc-primary); color:#fff;
    min-width:24px; height:24px; border-radius:999px;
    display:grid; place-items:center; font-size:12px; font-weight:800; padding:0 7px;
}
body.cart .thc-cart-foot { padding:14px 20px; border-top:1px solid var(--hc-border); background:var(--hc-bg-2); }

/* Order summary loader spinner */
body.cart #orderSummaryLoader { position:absolute; right:18px; top:18px; color:var(--hc-primary); z-index:3; }
body.cart .order-summary { position:relative; }

/* ════════════════════════════════════════════════════════════════════
   Guest site header — 1:1 with QGS-MAIN-EN `.site-header`
   (WHMCS renders #header with a white background by default.)
   ════════════════════════════════════════════════════════════════════ */
#header, header.header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(9, 13, 21, .78) !important;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--hc-border);
    box-shadow: none !important;
}
#header .navbar, header.header .navbar {
    background: transparent !important;
    border-bottom: 0 !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    min-height: 74px;
    padding: 0;
}
#header .navbar > .container, header.header .navbar > .container {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; min-height: 74px; margin: 0 auto !important;
    max-width: 1210px; padding: 0 22px;
}
#header .navbar-brand img, header.header .navbar-brand img { height: 45px !important; width: auto; display: block; }
#header .navbar-nav.toolbar, header.header .navbar-nav.toolbar {
    display: flex; align-items: center; gap: 12px !important;
    list-style: none; margin: 0; padding: 0;
}

/* Login / Register buttons — 1:1 with the site's .btn / .btn-primary / .btn-ghost */
/* `!important` throughout: WHMCS's .hc-btn-sm and theme.min.css both set
   padding / min-height / font-size on these anchors. */
#header .hc-btn, header.header .hc-btn,
#header .hc-btn.hc-btn-sm, header.header .hc-btn.hc-btn-sm {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 9px;
    font-family: "Oswald", "Fira Sans", sans-serif !important;
    font-weight: 700 !important; font-size: 0.98rem !important; letter-spacing: 1px !important;
    text-transform: uppercase !important; line-height: 1.5 !important;
    padding: 9px 20px !important; border-radius: 5px !important;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    min-height: 0 !important; height: auto !important; text-decoration: none !important;
    transition: color .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* Login = ghost */
#header .hc-btn-outline, header.header .hc-btn-outline {
    background: rgba(255,255,255,.04) !important;
    border-color: var(--hc-border-2) !important;
    color: var(--hc-text) !important;
}
#header .hc-btn-outline:hover, header.header .hc-btn-outline:hover {
    border-color: var(--hc-primary) !important;
    background: rgba(2,157,246,.10) !important;
    color: #fff !important;
}
/* Register = solid blue */
#header .hc-btn-primary, header.header .hc-btn-primary {
    background: var(--hc-primary) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
}
#header .hc-btn-primary:hover, header.header .hc-btn-primary:hover {
    color: #eef6ff !important;
    box-shadow: 0 0.0625rem 0.5625rem var(--hc-primary) !important;
    transform: none !important;
}

/* Guest breadcrumb strip ("Shopping Cart") — the site has no such bar */
body.cart .master-breadcrumb,
body.cart nav.master-breadcrumb { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   Checkout polish — success pill, buttons, field icons, promo, empty cart
   ════════════════════════════════════════════════════════════════════ */

/* Secure-payment notice → the site's green "success pill" (same recipe as
   .os-save / .pc-save on the configure page). */
body.cart .thc-security-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 12px;
    background: rgba(55, 226, 154, .12);
    border: 1px solid rgba(55, 226, 153, .30);
    border-radius: 5px;
    color: #37e28a;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: none;
}
/* fixed-size icon so it never stretches with the text block */
body.cart .thc-security-notice i {
    flex: 0 0 16px;
    width: 16px;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    color: #37e28a;
}
body.cart .thc-security-notice p {
    margin: 0;
    color: #37e28a;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.45;
}
body.cart .thc-security-notice strong { color: #5cf0ab; }

/* "Already registered?" / "Create account" → identical to the header REGISTER */
body.cart .cfg-card .btn-info:not(.w-hidden),
body.cart .cfg-card .btn-warning:not(.w-hidden) {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 9px;
    font-family: "Oswald", "Fira Sans", sans-serif !important;
    font-weight: 700 !important; font-size: 0.98rem !important; letter-spacing: 1px !important;
    text-transform: uppercase !important; line-height: 1.5 !important;
    padding: 9px 20px !important; border-radius: 5px !important;
    min-height: 0 !important; height: auto !important;
    background: var(--hc-primary) !important;
    border: 1px solid transparent !important;
    color: #fff !important; box-shadow: none !important;
    transition: color .3s ease, background .3s ease, box-shadow .3s ease;
}
body.cart .cfg-card .btn-info:hover,
body.cart .cfg-card .btn-warning:hover {
    color: #eef6ff !important;
    box-shadow: 0 0.0625rem 0.5625rem var(--hc-primary) !important;
    transform: none !important;
}

/* Field icons: FontAwesome glyphs have different intrinsic widths, which made
   the column of icons look ragged. Pin every glyph to the same box. */
body.cart .cfg-card .prepend-icon .field-icon {
    position: absolute; left: 0; top: 0;
    width: 44px; height: 48px;
    display: flex !important; align-items: center; justify-content: center;
    margin: 0; padding: 0; z-index: 2; pointer-events: none;
}
body.cart .cfg-card .prepend-icon .field-icon i,
body.cart .cfg-card .field-icon i {
    width: 16px; font-size: 14px; line-height: 1;
    text-align: center; color: var(--hc-muted);
    display: inline-block;
}
body.cart .cfg-card .form-group.prepend-icon:focus-within .field-icon i { color: var(--hc-primary); }

/* Phone field: intl-tel-input overlays a flag + dial code on the left, which
   collided with the placeholder. Drop our own icon and clear room for it. */
body.cart .cfg-card .iti { width: 100% !important; display: block !important; }
body.cart .cfg-card .iti input,
body.cart .cfg-card input#inputPhone { padding-left: 92px !important; }
body.cart .cfg-card .form-group:has(#inputPhone) > .field-icon { display: none !important; }
body.cart .cfg-card .iti__flag-container { z-index: 3; }

/* Applied promo code → same green treatment as the configure page */
body.cart .view-cart-promotion-code {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    background: rgba(55, 226, 154, .12);
    border: 1px solid rgba(55, 226, 153, .30);
    border-radius: 5px;
    color: #37e28a; font-weight: 700; font-size: 0.85rem;
}
body.cart .view-cart-promotion-code > i {
    flex: 0 0 16px; width: 16px; font-size: 14px; line-height: 1; text-align: center;
}
body.cart .thc-promo-remove {
    margin-left: auto; flex: 0 0 auto;
    color: #37e28a !important; opacity: .6; font-size: 18px; line-height: 1;
    padding: 0 2px; text-decoration: none;
}
body.cart .thc-promo-remove:hover { opacity: 1; color: var(--hc-danger, #ef4444) !important; }
/* the discount line in the order summary stays green too */
body.cart .os-promo b, body.cart #discount { color: #37e28a !important; }

/* Empty cart → destructive red */
body.cart .thc-empty-cart,
body.cart #btnEmptyCart {
    color: #ef4444 !important;
    font-weight: 700; text-decoration: none;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 0 !important;
}
body.cart .thc-empty-cart i, body.cart #btnEmptyCart i {
    width: 14px; font-size: 13px; text-align: center; color: #ef4444 !important;
}
body.cart .thc-empty-cart:hover, body.cart #btnEmptyCart:hover {
    color: #f87171 !important; text-decoration: underline;
}
body.cart .thc-empty-cart:hover i, body.cart #btnEmptyCart:hover i { color: #f87171 !important; }

/* ════════════════════════════════════════════════════════════════════
   Client-area Bootstrap buttons
   WHMCS templates emit plain .btn/.btn-primary/.btn-default everywhere
   (Payment Methods, invoices, tickets, domains, modals…). Nothing styled
   them for the dark theme, so they rendered as white boxes with white
   text. Cart-specific rules are scoped `body.cart …` and still win.
   ════════════════════════════════════════════════════════════════════ */
.primary-content .btn,
body.do-app .btn,
#main-body .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: "Fira Sans", sans-serif;
    font-weight: 700; font-size: 13.5px; line-height: 1.4;
    padding: 10px 18px; min-height: 40px;
    border-radius: var(--hc-r-md); border: 1px solid transparent;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
/* Primary / success → QGS blue */
.primary-content .btn-primary, body.do-app .btn-primary, #main-body .btn-primary,
.primary-content .btn-success, body.do-app .btn-success, #main-body .btn-success {
    background: linear-gradient(135deg, var(--hc-primary-dark) 0%, var(--hc-primary) 100%);
    border-color: transparent; color: #fff;
}
.primary-content .btn-primary:hover, body.do-app .btn-primary:hover, #main-body .btn-primary:hover,
.primary-content .btn-success:hover, body.do-app .btn-success:hover, #main-body .btn-success:hover {
    color: #fff; box-shadow: var(--hc-shadow-blue);
}
/* Default / secondary / outline → dark ghost */
.primary-content .btn-default, body.do-app .btn-default, #main-body .btn-default,
.primary-content .btn-secondary, body.do-app .btn-secondary, #main-body .btn-secondary,
.primary-content .btn-outline-primary, body.do-app .btn-outline-primary, #main-body .btn-outline-primary,
.primary-content .btn-outline-secondary, body.do-app .btn-outline-secondary, #main-body .btn-outline-secondary {
    background: var(--hc-card-2); border-color: var(--hc-border-2); color: var(--hc-text);
}
.primary-content .btn-default:hover, body.do-app .btn-default:hover, #main-body .btn-default:hover,
.primary-content .btn-secondary:hover, body.do-app .btn-secondary:hover, #main-body .btn-secondary:hover,
.primary-content .btn-outline-primary:hover, body.do-app .btn-outline-primary:hover, #main-body .btn-outline-primary:hover,
.primary-content .btn-outline-secondary:hover, body.do-app .btn-outline-secondary:hover, #main-body .btn-outline-secondary:hover {
    background: rgba(2,157,246,.10); border-color: var(--hc-primary); color: var(--hc-primary);
}
/* Status variants */
.primary-content .btn-danger, body.do-app .btn-danger, #main-body .btn-danger {
    background: #ef4444; border-color: transparent; color: #fff;
}
.primary-content .btn-danger:hover, body.do-app .btn-danger:hover, #main-body .btn-danger:hover { background: #dc2626; color: #fff; }
.primary-content .btn-warning, body.do-app .btn-warning, #main-body .btn-warning {
    background: rgba(251,146,60,.14); border-color: rgba(251,146,60,.40); color: #fbbf24;
}
.primary-content .btn-info, body.do-app .btn-info, #main-body .btn-info {
    background: rgba(2,157,246,.14); border-color: rgba(2,157,246,.40); color: var(--hc-primary-bright);
}
.primary-content .btn-link, body.do-app .btn-link, #main-body .btn-link {
    background: transparent; border-color: transparent; color: var(--hc-primary);
    padding: 6px 8px; min-height: 0;
}
.primary-content .btn-link:hover, body.do-app .btn-link:hover, #main-body .btn-link:hover { color: var(--hc-primary-bright); text-decoration: underline; }
/* Sizes */
.primary-content .btn-sm, body.do-app .btn-sm, #main-body .btn-sm { padding: 6px 12px; min-height: 32px; font-size: 12.5px; }
.primary-content .btn-lg, body.do-app .btn-lg, #main-body .btn-lg { padding: 13px 26px; min-height: 48px; font-size: 15px; }
/* Disabled */
.primary-content .btn.disabled, body.do-app .btn.disabled, #main-body .btn.disabled,
.primary-content .btn:disabled, body.do-app .btn:disabled, #main-body .btn:disabled {
    background: var(--hc-card-2); border-color: var(--hc-border); color: var(--hc-faint);
    box-shadow: none; opacity: .6; cursor: not-allowed;
}

/* Client-area tables: WHMCS's .table defaults are near-invisible on dark */
.primary-content .table, body.do-app .table, #main-body .table { color: var(--hc-text); margin-bottom: 0; }
.primary-content .table > thead > tr > th, body.do-app .table > thead > tr > th, #main-body .table > thead > tr > th,
.primary-content .table th, body.do-app .table th, #main-body .table th {
    color: var(--hc-muted); font-size: 11.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 1px solid var(--hc-border) !important; border-top: 0 !important;
    background: transparent; padding: 12px 14px;
}
.primary-content .table td, body.do-app .table td, #main-body .table td {
    color: var(--hc-text); border-top: 1px solid var(--hc-border) !important; padding: 14px;
    vertical-align: middle; background: transparent;
}
.primary-content .table-striped tbody tr:nth-of-type(odd),
body.do-app .table-striped tbody tr:nth-of-type(odd),
#main-body .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.02); }
.primary-content .table-striped tbody tr:hover,
body.do-app .table-striped tbody tr:hover,
#main-body .table-striped tbody tr:hover { background: rgba(2,157,246,.06); }

/* ════════════════════════════════════════════════════════════════════
   DataTables chrome (invoices / services / tickets lists)
   Pagination, length select, search box and "showing x of y" all fell
   back to Bootstrap defaults — grey/white pills on a dark page.
   ════════════════════════════════════════════════════════════════════ */
.dataTables_wrapper .dataTables_paginate { padding-top: 4px; }
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    background: var(--hc-card-2) !important;
    background-image: none !important;
    border: 1px solid var(--hc-border-2) !important;
    border-radius: var(--hc-r-md) !important;
    color: var(--hc-text) !important;
    min-width: 34px; height: 34px;
    padding: 0 12px !important; margin-left: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 700; line-height: 1;
    box-shadow: none !important; cursor: pointer;
    transition: background .16s, border-color .16s, color .16s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(2,157,246,.12) !important;
    border-color: var(--hc-primary) !important;
    color: var(--hc-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, var(--hc-primary-dark), var(--hc-primary)) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    border-color: var(--hc-border) !important;
    color: var(--hc-faint) !important;
    cursor: not-allowed; opacity: .55;
}
/* "Showing 1 to 1 of 1 entries" + "Show 10 entries" + search */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--hc-muted); font-size: 12.5px; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--hc-bg-2) !important;
    border: 1px solid var(--hc-border-2) !important;
    border-radius: var(--hc-r-md) !important;
    color: var(--hc-text) !important;
    padding: 6px 10px; min-height: 34px; box-shadow: none !important;
}
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--hc-primary) !important; outline: none; }
.dataTables_wrapper .dataTables_filter input::placeholder { color: var(--hc-faint); }
/* sort arrows */
.dataTables_wrapper table.dataTable thead th { color: var(--hc-muted); }
.dataTables_wrapper table.dataTable thead .sorting:after,
.dataTables_wrapper table.dataTable thead .sorting_asc:after,
.dataTables_wrapper table.dataTable thead .sorting_desc:after { color: var(--hc-faint); opacity: .8; }

/* ════════════════════════════════════════════════════════════════════
   Modals — ported from the devpanel (Pterodactyl) Modal component:
     mask   → rgba(0,0,0,.7)
     body   → var(--secondary) #14141d, 5px solid #049df6, radius 0
     close  → solid blue square, top-right, rotates 90° on hover
   Applied globally: WHMCS renders Bootstrap modals on many pages
   (generate password, remove item, empty cart, confirmations, language).
   ════════════════════════════════════════════════════════════════════ */
.modal-backdrop,
.modal-backdrop.show,
.modal-backdrop.in { background: #000 !important; opacity: .7 !important; }

.modal { z-index: 1050; }
.modal-dialog {
    max-width: 95%;
    margin: 5rem auto auto;
}
@media (min-width: 768px) { .modal-dialog { max-width: 75%; } }
@media (min-width: 992px) { .modal-dialog { max-width: 640px; } }
.modal-dialog.modal-lg { max-width: 95%; }
@media (min-width: 992px) { .modal-dialog.modal-lg { max-width: 900px; } }

.modal-content {
    background: var(--hc-card) !important;      /* devpanel --secondary */
    border: 5px solid var(--hc-primary) !important;
    border-radius: 0 !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.55) !important;
    color: var(--hc-text) !important;
}
.modal-header,
.modal-footer {
    background: transparent !important;
    border-color: var(--hc-border) !important;
    padding: 16px 20px;
}
.modal-header { border-bottom: 1px solid var(--hc-border) !important; }
.modal-footer { border-top: 1px solid var(--hc-border) !important; gap: 8px; }
.modal-body { background: transparent !important; color: var(--hc-text) !important; padding: 20px; }
.modal-title,
.modal-content h1, .modal-content h2, .modal-content h3,
.modal-content h4, .modal-content h5 {
    color: var(--hc-text) !important;
    font-family: "Oswald", "Fira Sans", sans-serif;
    font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
    font-size: 1.05rem; margin: 0;
}
.modal-content p, .modal-content label, .modal-content .control-label { color: var(--hc-text); }
.modal-content .text-muted, .modal-content small { color: var(--hc-muted) !important; }

/* Close button — devpanel's blue square */
.modal-content .close,
.modal-content button.close {
    position: absolute; top: 0; right: 0;
    width: 38px; height: 38px; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--hc-primary) !important;
    border: 0 !important; border-radius: 0 !important;
    color: #fff !important; opacity: .55;
    font-size: 20px; line-height: 1; font-weight: 400;
    text-shadow: none !important; cursor: pointer;
    transition: opacity .15s linear, transform .15s linear;
    z-index: 2;
}
.modal-content .close:hover,
.modal-content button.close:hover { opacity: 1; transform: rotate(90deg); color: #fff !important; }
.modal-content .close > span { line-height: 1; }
/* header needs room for the square and a positioning context */
.modal-content { position: relative; }
.modal-header { padding-right: 52px; }

/* Inputs inside modals */
.modal-content input, .modal-content select, .modal-content textarea,
.modal-content .form-control {
    background: var(--hc-bg-2) !important;
    border: 1px solid var(--hc-border-2) !important;
    border-radius: var(--hc-r-md) !important;
    color: var(--hc-text) !important;
    min-height: 42px; padding: 9px 12px; box-shadow: none !important;
}
.modal-content input:focus, .modal-content .form-control:focus { border-color: var(--hc-primary) !important; outline: none; }
.modal-content input[readonly] { background: var(--hc-card-2) !important; }

/* Language chooser modal uses .item tiles */
.modal-localisation .modal-content .item {
    display: block; padding: 10px 12px; margin-bottom: 8px;
    background: var(--hc-bg-2); border: 1px solid var(--hc-border-2);
    border-radius: var(--hc-r-md); color: var(--hc-text) !important; text-decoration: none;
}
.modal-localisation .modal-content .item:hover { border-color: var(--hc-primary); color: var(--hc-primary) !important; }
.modal-localisation .modal-content .item.active { background: rgba(2,157,246,.14); border-color: var(--hc-primary); color: var(--hc-primary) !important; }

/* ════════════════════════════════════════════════════════════════════
   intl-tel-input country dropdown
   Styled globally (NOT under #order-standard_cart): the plugin appends
   the list to <body>, so cart-scoped selectors never reach it — which
   is why it stayed white with unreadable text.
   ════════════════════════════════════════════════════════════════════ */
.iti__country-list {
    background: var(--hc-card) !important;
    border: 1px solid var(--hc-border-2) !important;
    border-radius: var(--hc-r-md) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.55) !important;
    color: var(--hc-text) !important;
    padding: 6px !important;
    max-height: 260px;
}
.iti__country {
    color: var(--hc-text) !important;
    padding: 8px 10px !important;
    border-radius: var(--hc-r-xs, 4px);
    display: flex; align-items: center; gap: 9px;
    font-size: 13.5px; line-height: 1.3;
}
.iti__country-name { color: var(--hc-text) !important; }
.iti__dial-code { color: var(--hc-muted) !important; margin-left: auto; }
.iti__country.iti__highlight,
.iti__country:hover {
    background: rgba(2,157,246,.14) !important;
}
.iti__country.iti__highlight .iti__country-name,
.iti__country:hover .iti__country-name { color: var(--hc-primary-bright) !important; }
.iti__country.iti__active { background: rgba(2,157,246,.20) !important; }
.iti__divider { border-bottom: 1px solid var(--hc-border) !important; margin: 6px 0 !important; }
.iti__country-list .iti__flag-box { flex: 0 0 auto; }
/* optional search box in newer plugin builds */
.iti__search-input {
    background: var(--hc-bg-2) !important;
    border: 1px solid var(--hc-border-2) !important;
    color: var(--hc-text) !important;
    border-radius: var(--hc-r-md) !important;
    padding: 8px 10px !important; margin-bottom: 6px;
}
.iti__search-input::placeholder { color: var(--hc-faint) !important; }
/* the selected-flag trigger and its caret */
.iti__selected-flag { background: transparent !important; }
.iti__selected-flag:hover,
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag { background: rgba(255,255,255,.05) !important; }
.iti__selected-dial-code { color: var(--hc-text) !important; }
.iti__arrow { border-top-color: var(--hc-muted) !important; }
.iti__arrow--up { border-bottom-color: var(--hc-muted) !important; }
/* slim scrollbar to match the rest of the theme */
.iti__country-list::-webkit-scrollbar { width: 6px; }
.iti__country-list::-webkit-scrollbar-track { background: transparent; }
.iti__country-list::-webkit-scrollbar-thumb { background: var(--hc-border-2); border-radius: 999px; }
.iti__country-list::-webkit-scrollbar-thumb:hover { background: var(--hc-muted); }

/* ── intl-tel-input, LEGACY class names ──────────────────────────────
   This WHMCS build ships an older intl-tel-input that emits un-prefixed
   classes (.country-list / .country / .country-name / .dial-code /
   .flag-container / .selected-flag) instead of the modern .iti__* ones.
   The .iti__* rules above never matched it, which is why the country
   dropdown stayed white with white text. Always keep BOTH sets.
   Everything here is scoped under .country-list / .flag-container so the
   generic names can't leak onto unrelated elements. ─────────────────── */
.country-list {
    background: var(--hc-card) !important;
    border: 1px solid var(--hc-border-2) !important;
    border-radius: var(--hc-r-md) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.55) !important;
    color: var(--hc-text) !important;
    padding: 6px !important;
    max-height: 260px;
}
.country-list .country {
    color: var(--hc-text) !important;
    padding: 8px 10px !important;
    border-radius: 4px;
    font-size: 13.5px; line-height: 1.35;
}
.country-list .country .country-name { color: var(--hc-text) !important; }
.country-list .country .dial-code { color: var(--hc-muted) !important; }
.country-list .country.highlight,
.country-list .country:hover { background: rgba(2,157,246,.14) !important; }
.country-list .country.highlight .country-name,
.country-list .country:hover .country-name { color: var(--hc-primary-bright) !important; }
.country-list .country.active { background: rgba(2,157,246,.20) !important; }
.country-list .divider,
.country-list .country.preferred:last-of-type {
    border-bottom: 1px solid var(--hc-border) !important;
    margin-bottom: 4px !important; padding-bottom: 8px !important;
}
.country-list::-webkit-scrollbar { width: 6px; }
.country-list::-webkit-scrollbar-track { background: transparent; }
.country-list::-webkit-scrollbar-thumb { background: var(--hc-border-2); border-radius: 999px; }
.country-list::-webkit-scrollbar-thumb:hover { background: var(--hc-muted); }

.flag-container .selected-flag { background: transparent !important; }
.flag-container:hover .selected-flag,
.flag-container .selected-flag:hover { background: rgba(255,255,255,.05) !important; }
.selected-flag .selected-dial-code { color: var(--hc-text) !important; }
.selected-flag .arrow { border-top-color: var(--hc-muted) !important; }
.selected-flag .arrow.up { border-bottom-color: var(--hc-muted) !important; }

/* Cancellation request: the type is fixed to "End of Billing Period", so the
   <select> is replaced by a static read-only pill (value goes up in a hidden
   input). See clientareacancelrequest.tpl. */
.hc-cancel-type-static {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 16px; margin-top: 4px;
    background: var(--hc-bg-2);
    border: 1px solid var(--hc-border-2);
    border-radius: var(--hc-r-md);
    color: var(--hc-text); font-weight: 700; font-size: 13.5px;
}
.hc-cancel-type-static i { color: var(--hc-primary); font-size: 14px; }

/* ════════════════════════════════════════════════════════════════════
   Cancellation wizard (clientareacancelrequest.tpl)
   Uses the qgshosting.com /configure page language: numbered step badge,
   5px --hc-card-edge card, icon option tiles, site .btn buttons.
   ════════════════════════════════════════════════════════════════════ */
.hc-cxl { display: block; padding: 4px 0 32px; }
.hc-cxl form { width: 100%; }

.hc-cxl-card {
    position: relative;
    max-width: 820px; margin: 0 auto;
    background: var(--hc-card);
    border: 5px solid var(--hc-card-edge);
    border-radius: 6px;
    overflow: hidden;
}
.hc-cxl-step[hidden] { display: none !important; }

/* ── head: numbered badge + title, exactly like .cfg-step-head ─────── */
.hc-cxl-head { display: flex; align-items: flex-start; gap: 16px; padding: 26px 28px 0; }
.hc-cxl-num {
    flex: none; width: 40px; height: 40px; border-radius: 5px;
    display: grid; place-items: center;
    font-family: "Oswald", sans-serif; font-weight: 700; font-size: 1.2rem;
    color: #fff; background: var(--hc-primary);
}
.hc-cxl-num-warn { background: #ef4444; }
.hc-cxl-num-ok   { background: #22c55e; }
.hc-cxl-head h2 {
    margin: 0; color: var(--hc-text);
    font-family: "Oswald", "Fira Sans", sans-serif;
    font-size: 1.35rem; font-weight: 700; text-transform: uppercase; letter-spacing: .01em;
}
.hc-cxl-head p { margin: 4px 0 0; color: var(--hc-muted); font-size: .92rem; line-height: 1.5; }

.hc-cxl-body { padding: 20px 28px 4px; }

/* ── close: quiet ghost square, not a slab ─────────────────────────── */
.hc-cxl-close {
    position: absolute; top: 14px; right: 14px;
    width: 34px; height: 34px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--hc-border-2);
    color: var(--hc-muted) !important;
    font-size: 13px; text-decoration: none !important; z-index: 3;
    transition: color .15s, border-color .15s, background .15s;
}
.hc-cxl-close:hover { color: var(--hc-text) !important; border-color: var(--hc-primary); background: rgba(2,157,246,.10); }

/* ── step 1: reason tiles — .loc-opt / .pkg-chip treatment ─────────── */
.hc-cxl-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.hc-cxl-opt {
    display: flex; align-items: center; gap: 12px;
    text-align: left; width: 100%;
    padding: 15px 16px;
    background: var(--hc-bg-2);
    border: 1px solid var(--hc-border-2);
    border-radius: 5px;
    color: var(--hc-text);
    font-family: "Fira Sans", sans-serif; font-size: .98rem; font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.hc-cxl-opt > i { flex: 0 0 18px; width: 18px; text-align: center; color: var(--hc-primary); font-size: 15px; }
.hc-cxl-opt:hover { border-color: var(--hc-border-blue); background: rgba(2,157,246,.06); }
.hc-cxl-opt.is-picked { border-color: var(--hc-primary); background: rgba(2,157,246,.10); }
@media (max-width: 700px) { .hc-cxl-grid { grid-template-columns: 1fr; } }

/* ── step 2: chosen-reason chip + textarea ─────────────────────────── */
.hc-cxl-picked {
    display: flex; align-items: center; gap: 9px;
    margin-bottom: 14px; padding: 9px 12px;
    background: rgba(2,157,246,.10);
    border: 1px solid rgba(2,157,246,.30);
    border-radius: 5px;
    color: var(--hc-primary-bright); font-weight: 700; font-size: .88rem;
}
.hc-cxl-picked[hidden] { display: none !important; }
.hc-cxl-picked > i { flex: 0 0 16px; text-align: center; }
.hc-cxl-repick {
    margin-left: auto; background: transparent; border: 0;
    color: var(--hc-muted); font-size: .82rem; font-weight: 700;
    text-decoration: underline; cursor: pointer; padding: 0;
}
.hc-cxl-repick:hover { color: var(--hc-text); }

.hc-cxl-textarea {
    width: 100%; min-height: 132px; resize: vertical;
    background: var(--hc-bg-2);
    border: 1px solid var(--hc-border-2);
    border-radius: 5px;
    padding: 13px 15px;
    color: var(--hc-text);
    font-family: "Fira Sans", sans-serif; font-size: .98rem; line-height: 1.5;
}
.hc-cxl-textarea:focus { outline: none; border-color: var(--hc-primary); background: var(--hc-card-2); }
.hc-cxl-textarea::placeholder { color: var(--hc-faint); }

.hc-cxl-hint { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; color: var(--hc-muted); font-size: .84rem; line-height: 1.5; }
.hc-cxl-hint > i { flex: 0 0 14px; width: 14px; text-align: center; color: var(--hc-faint); margin-top: 2px; }
.hc-cxl-hint strong { color: var(--hc-text); }
.hc-cxl-hint.is-ok { color: #37e28a; }
.hc-cxl-hint.is-ok > i { color: #37e28a; }

/* ── step 3: what you lose ─────────────────────────────────────────── */
.hc-cxl-warn {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; margin-bottom: 10px;
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.34);
    border-radius: 5px;
    color: var(--hc-text); font-size: .95rem; line-height: 1.5;
}
.hc-cxl-warn > i { flex: 0 0 18px; width: 18px; text-align: center; color: #ef4444; font-size: 15px; margin-top: 2px; }
.hc-cxl-warn-domain { background: rgba(251,146,60,.08); border-color: rgba(251,146,60,.34); }
.hc-cxl-warn-domain > i { color: #fbbf24; }
.hc-cxl-check { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: .88rem; color: var(--hc-muted); cursor: pointer; }

/* ── footer + buttons: the site's .btn / .btn-primary / .btn-ghost ─── */
.hc-cxl-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 20px 28px 24px; flex-wrap: wrap;
}
.hc-cxl-foot:only-child,
.hc-cxl-foot > :only-child { margin-left: auto; }
.hc-cxl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 11px 22px; border: 1px solid transparent; border-radius: 5px;
    font-family: "Oswald", "Fira Sans", sans-serif;
    font-weight: 700; font-size: .98rem; letter-spacing: 1px; text-transform: uppercase;
    line-height: 1.5; cursor: pointer; white-space: nowrap;
    text-decoration: none !important;
    transition: color .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.hc-cxl-btn-primary { background: var(--hc-primary); color: #fff !important; }
.hc-cxl-btn-primary:hover { color: #eef6ff !important; box-shadow: 0 .0625rem .5625rem var(--hc-primary); }
.hc-cxl-btn-ghost {
    background: rgba(255,255,255,.04);
    border-color: var(--hc-border-2);
    color: var(--hc-text) !important;
}
.hc-cxl-btn-ghost:hover { border-color: var(--hc-primary); background: rgba(2,157,246,.10); color: #fff !important; }
.hc-cxl-btn-danger { background: #ef4444; color: #fff !important; }
.hc-cxl-btn-danger:hover { background: #dc2626; color: #fff !important; box-shadow: 0 .0625rem .5625rem rgba(239,68,68,.8); }
.hc-cxl-btn:disabled,
.hc-cxl-btn[disabled] {
    background: var(--hc-card-2); color: var(--hc-faint) !important;
    border-color: var(--hc-border); cursor: not-allowed; box-shadow: none;
}

.hc-cxl-error {
    display: flex; align-items: center; gap: 9px;
    margin-bottom: 14px; padding: 11px 14px;
    background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.36);
    border-radius: 5px; color: #fca5a5; font-weight: 600; font-size: .88rem;
}

@media (max-width: 620px) {
    .hc-cxl-card { border-width: 3px; }
    .hc-cxl-head { padding: 20px 18px 0; gap: 12px; }
    .hc-cxl-head h2 { font-size: 1.15rem; }
    .hc-cxl-body { padding: 16px 18px 4px; }
    .hc-cxl-foot { padding: 16px 18px 20px; }
    .hc-cxl-foot .hc-cxl-btn { flex: 1 1 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   File attachment field (Bootstrap .custom-file) — ticket forms
   Bootstrap renders the visible part as .custom-file-label with the
   "Browse" button drawn by its ::after, both white by default and
   ~38px tall, so it sat lower than the 46px .hc-btn beside it.
   ════════════════════════════════════════════════════════════════════ */
.attachment-group,
.input-group.attachment-group { display: flex; align-items: stretch; gap: 10px; flex-wrap: nowrap; }

.custom-file,
.attachment-group .custom-file {
    flex: 1 1 auto; min-width: 0;
    height: 46px;                     /* match .hc-btn */
    margin: 0; position: relative;
}
.custom-file-input { height: 46px; cursor: pointer; }

.custom-file-label,
.attachment-group .custom-file-label {
    display: flex; align-items: center;
    height: 46px; margin: 0;
    padding: 0 130px 0 16px;          /* room for the Browse button */
    background: var(--hc-bg-2) !important;
    border: 1.5px solid var(--hc-border-2) !important;
    border-radius: var(--hc-r-md) !important;
    color: var(--hc-text) !important;
    font-size: 14px; font-weight: 500; line-height: normal;
    box-shadow: none !important;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.custom-file-input:focus ~ .custom-file-label,
.custom-file-input:hover ~ .custom-file-label { border-color: var(--hc-primary) !important; }

/* the "Browse" button Bootstrap draws with ::after */
.custom-file-label::after,
.attachment-group .custom-file-label::after {
    position: absolute; top: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    height: auto; padding: 0 20px;
    background: var(--hc-card-2) !important;
    border: 0 !important;
    border-left: 1.5px solid var(--hc-border-2) !important;
    border-radius: 0 var(--hc-r-md) var(--hc-r-md) 0 !important;
    color: var(--hc-text) !important;
    font-size: 13.5px; font-weight: 700; line-height: normal;
}
.custom-file-input:hover ~ .custom-file-label::after,
.custom-file-input:focus ~ .custom-file-label::after {
    background: rgba(2,157,246,.14) !important;
    color: var(--hc-primary) !important;
    border-left-color: var(--hc-primary) !important;
}

/* "Add More" sits in an .input-group-append — keep it the same height */
.attachment-group .input-group-append { display: flex; align-items: stretch; margin: 0; }
.attachment-group .input-group-append .hc-btn { height: 46px; min-height: 46px; white-space: nowrap; }

/* extra rows added by "Add More" line up with the first one */
.file-upload .attachment-group { margin-top: 10px; }
.file-upload .attachment-group .custom-file-label { padding-right: 130px; }

@media (max-width: 620px) {
    .attachment-group, .input-group.attachment-group { flex-wrap: wrap; }
    .attachment-group .input-group-append,
    .attachment-group .input-group-append .hc-btn { width: 100%; }
    .custom-file-label, .attachment-group .custom-file-label { padding-right: 110px; }
}

/* ════════════════════════════════════════════════════════════════════
   Markdown editor — bootstrap-markdown (.md-editor)
   NOTE: this WHMCS build ships bootstrap-markdown, NOT EasyMDE/CodeMirror.
   The classes are .md-editor / .md-preview / textarea.markdown-editor /
   .md-header / .md-footer / .btn-toolbar — rules written against
   .CodeMirror or .EasyMDEContainer match nothing here.
   ════════════════════════════════════════════════════════════════════ */
.md-editor > .md-preview,
.md-editor > textarea.markdown-editor {
    padding: 15px !important;
    border-top: 1px solid #242c32 !important;
    border-bottom: 1px solid #242c32 !important;
    background-color: #0f151d !important;
}

.md-editor .md-footer,
.md-editor > .md-header {
    display: block;
    padding: 6px 4px;
    background: #242c32;
}

div.md-editor.active {
    display: block;
    border: 1px solid #242c32;
    outline: 0;
    box-shadow: none;
}

.md-editor > .btn-toolbar {
    background-color: #242c32 !important;
}

/* ── Complementary rules ─────────────────────────────────────────────
   The block above sets surfaces but not foregrounds, so text, caret,
   placeholder, toolbar buttons and the preview body would otherwise keep
   bootstrap-markdown's light-theme colours on the new dark surfaces. */
.md-editor { border: 1px solid #242c32; border-radius: var(--hc-r-md); overflow: hidden; }
.md-editor > textarea.markdown-editor {
    color: var(--hc-text) !important;
    caret-color: var(--hc-primary);
    font-family: "Fira Sans", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px; line-height: 1.6;
    resize: vertical; box-shadow: none !important;
}
.md-editor > textarea.markdown-editor:focus { outline: 0; box-shadow: none !important; }
.md-editor > textarea.markdown-editor::placeholder { color: var(--hc-faint) !important; }

/* toolbar buttons */
.md-editor > .btn-toolbar .btn,
.md-editor > .btn-toolbar .btn-default {
    background: transparent !important;
    border: 0 !important;
    color: var(--hc-text) !important;
    box-shadow: none !important;
}
.md-editor > .btn-toolbar .btn:hover,
.md-editor > .btn-toolbar .btn.active {
    background: rgba(2,157,246,.16) !important;
    color: var(--hc-primary) !important;
}
.md-editor > .btn-toolbar .btn-group { margin: 2px; }

/* footer counters */
.md-editor .md-footer { color: var(--hc-muted); font-size: 11.5px; }

/* rendered preview body */
.md-editor > .md-preview { color: var(--hc-text) !important; }
.md-editor > .md-preview a { color: var(--hc-primary); }
.md-editor > .md-preview code,
.md-editor > .md-preview pre {
    background: var(--hc-card-2) !important;
    color: var(--hc-text) !important;
    border: 1px solid #242c32 !important;
    border-radius: 4px;
}
.md-editor > .md-preview blockquote {
    border-left: 3px solid var(--hc-primary);
    background: rgba(255,255,255,.02);
    color: var(--hc-muted);
}
.md-editor > .md-preview table td,
.md-editor > .md-preview table th { border-color: #242c32 !important; }

/* ════════════════════════════════════════════════════════════════════
   Ticket thread — tell staff replies apart from the client's
   The generic dark-surface rule above lists .hc-msg with
   `background: … !important`, which flattened the existing .staff
   variant. These rules restore it and push the contrast further:
   blue tint + a solid left accent bar, so the two sides are readable
   at a glance rather than only via the small badge.
   ════════════════════════════════════════════════════════════════════ */
.hc-msg.staff,
.hc-timeline .hc-msg.staff,
body.do-app .hc-timeline .hc-msg.staff {
    background: rgba(2,157,246,.07) !important;
    border-color: rgba(2,157,246,.30) !important;
    border-left: 3px solid var(--hc-primary) !important;
}
.hc-msg.staff .hc-msg-head,
.hc-timeline .hc-msg.staff .hc-msg-head { border-bottom-color: rgba(2,157,246,.24) !important; }

/* author line */
.hc-msg.staff .posted-by-name { color: var(--hc-primary-bright); }
.hc-msg.staff .hc-msg-author .avatar {
    background: var(--hc-primary) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(2,157,246,.18);
}
/* client side stays neutral so the blue actually reads as "staff" */
.hc-msg:not(.staff) .hc-msg-author .avatar {
    background: var(--hc-card-3) !important;
    color: var(--hc-muted) !important;
}

/* role badge: solid blue for staff, quiet grey for the client */
.hc-msg.staff .hc-msg-author .hc-tag {
    background: var(--hc-primary) !important;
    color: #fff !important;
    border-color: transparent !important;
    font-weight: 800; letter-spacing: .04em;
}
.hc-msg .hc-msg-author .hc-tag.muted {
    background: var(--hc-card-3) !important;
    color: var(--hc-muted) !important;
    border-color: var(--hc-border) !important;
}

/* timeline dot + connector pick up the same accent */
.hc-timeline-node.staff .hc-timeline-dot {
    background: var(--hc-primary) !important;
    box-shadow: 0 0 0 4px var(--hc-card), 0 0 0 5px rgba(2,157,246,.28);
}

@media (max-width: 620px) {
    .hc-msg.staff,
    .hc-timeline .hc-msg.staff { border-left-width: 3px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   Network-issue banner (includes/network-issues-notifications.tpl)
   Stock markup is a Bootstrap alert wrapping a .container, with the
   "Learn more" link floated right. Inside .do-main-inner that nested
   container fought the page padding and the float left the banner
   glued to the breadcrumb. Laid out as flex instead — no template
   change, so the WHMCS include stays mergeable.
   ════════════════════════════════════════════════════════════════════ */
.network-issue-alert {
    margin: 0 0 18px !important;
    padding: 12px 16px !important;
    border-radius: var(--hc-r-md) !important;
    border: 1px solid transparent;
    font-size: 14px; line-height: 1.5;
}
/* kill the nested container's own width/padding — the page already pads */
.network-issue-alert > .container {
    max-width: none !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.network-issue-alert > .container > i:first-child {
    flex: 0 0 18px; width: 18px; text-align: center; font-size: 15px;
}
/* the stock float-lg-right pushes it out of the flex row */
.network-issue-alert .alert-link {
    float: none !important;
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 700; text-decoration: none; white-space: nowrap;
}
.network-issue-alert .alert-link:hover { text-decoration: underline; }

/* warning (open issue) — amber */
.network-issue-alert.alert-warning {
    background: rgba(251,146,60,.10) !important;
    border-color: rgba(251,146,60,.34) !important;
    color: #fbbf24 !important;
}
.network-issue-alert.alert-warning .alert-link,
.network-issue-alert.alert-warning > .container > i:first-child { color: #fbbf24 !important; }

/* info (scheduled maintenance) — blue */
.network-issue-alert.alert-info {
    background: rgba(2,157,246,.10) !important;
    border-color: rgba(2,157,246,.30) !important;
    color: var(--hc-primary-bright) !important;
}
.network-issue-alert.alert-info .alert-link,
.network-issue-alert.alert-info > .container > i:first-child { color: var(--hc-primary-bright) !important; }

/* guest layout: the banner sits outside #main-body, so give it the same
   gutters the rest of the guest page uses */
body:not(.do-app) .network-issue-alert {
    max-width: 1210px;
    margin: 18px auto !important;
    padding-inline: 22px !important;
}

@media (max-width: 620px) {
    .network-issue-alert > .container { gap: 8px; }
    .network-issue-alert .alert-link { margin-left: 0; flex-basis: 100%; }
}