/* ==========================================================================
   CyTide Hosting — WHMCS theme
   Dark ocean / tide-line visual system. Built to sit on top of Twenty-One.
   Load order: WHMCS core CSS -> bootstrap -> THIS FILE (last).
   ========================================================================== */

/* No webfont import: external resources are blocked by template validation.
   To use Sora/Inter, upload the .woff2 files to templates/cytide/fonts/ and
   uncomment the @font-face blocks at the bottom of this file. */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Depth ladder — darkest is the ocean floor, lightest is the surface */
    --cy-abyss:      #040c14;
    --cy-deep:       #061019;
    --cy-surface:    #0a1a28;
    --cy-raised:     #0f2537;
    --cy-line:       #16354a;

    /* Tide */
    --cy-tide:       #2fe3c2;
    --cy-tide-deep:  #0e9e8a;
    --cy-tide-dim:   rgba(47, 227, 194, .14);
    --cy-reef:       #58c9ff;

    /* Honesty amber — the site's "here's what we can't promise" notes */
    --cy-warn:       #f5b944;
    --cy-warn-dim:   rgba(245, 185, 68, .12);
    --cy-danger:     #ff6b6b;

    /* Type */
    --cy-ink:        #e8f4f8;
    --cy-ink-soft:   #b6cbd8;
    --cy-ink-mute:   #7e99a9;

    --cy-font:       'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --cy-display:    'Sora', var(--cy-font);
    --cy-mono:       'JetBrains Mono', ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo, monospace;

    /* Geometry */
    --cy-r-sm: 6px;
    --cy-r:    12px;
    --cy-r-lg: 18px;
    --cy-shell: 1180px;

    --cy-shadow:      0 18px 48px -24px rgba(0, 0, 0, .9);
    --cy-shadow-lift: 0 28px 60px -26px rgba(0, 0, 0, .95), 0 0 0 1px var(--cy-tide-dim);

    --cy-ease: cubic-bezier(.22, .68, .36, 1);

    /* Bootstrap 5 bridge — most of WHMCS picks these up for free */
    --bs-primary: #2fe3c2;
    --bs-body-bg: #061019;
    --bs-body-color: #e8f4f8;
    --bs-border-color: #16354a;
    --bs-link-color: #2fe3c2;
    --bs-link-hover-color: #58c9ff;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    background: var(--cy-deep);
    background-image:
        radial-gradient(900px 520px at 82% -8%, rgba(47, 227, 194, .10), transparent 62%),
        radial-gradient(760px 460px at 6% 4%, rgba(88, 201, 255, .07), transparent 60%);
    background-attachment: fixed;
    color: var(--cy-ink);
    font-family: var(--cy-font);
    font-size: 15.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4 {
    font-family: var(--cy-display);
    font-weight: 600;
    letter-spacing: -.02em;
    color: #fff;
    line-height: 1.18;
}

h1, .h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h2, .h2 { font-size: clamp(1.55rem, 2.8vw, 2.15rem); }
h3, .h3 { font-size: 1.28rem; }

p { max-width: 72ch; }

a { color: var(--cy-tide); text-decoration: none; transition: color .18s var(--cy-ease); }
a:hover, a:focus { color: var(--cy-reef); text-decoration: none; }

hr { border-color: var(--cy-line); opacity: 1; }

::selection { background: var(--cy-tide); color: var(--cy-abyss); }

:focus-visible {
    outline: 2px solid var(--cy-tide);
    outline-offset: 2px;
    border-radius: 4px;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--cy-abyss); }
::-webkit-scrollbar-thumb { background: #1c4055; border-radius: 99px; border: 3px solid var(--cy-abyss); }
::-webkit-scrollbar-thumb:hover { background: var(--cy-tide-deep); }

.cy-shell { max-width: var(--cy-shell); margin-inline: auto; padding-inline: 22px; }

.cy-skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--cy-tide); color: var(--cy-abyss);
    padding: 10px 16px; border-radius: 0 0 var(--cy-r-sm) 0; font-weight: 600;
}
.cy-skip:focus { left: 0; }

/* Small section label. Sentence case on purpose — no shouty eyebrows. */
.cy-label {
    font-family: var(--cy-mono);
    font-size: .74rem;
    color: var(--cy-tide);
    letter-spacing: .04em;
    margin-bottom: .55rem;
    display: block;
}

/* --------------------------------------------------------------------------
   3. Top bar + navigation
   -------------------------------------------------------------------------- */
.cy-topbar {
    background: linear-gradient(90deg, rgba(14, 158, 138, .18), rgba(88, 201, 255, .12));
    border-bottom: 1px solid var(--cy-line);
    font-size: .82rem;
    color: var(--cy-ink-soft);
}
.cy-topbar .cy-shell {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding-block: 7px; flex-wrap: wrap;
}
.cy-topbar a { color: var(--cy-ink); }
.cy-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--cy-tide); display: inline-block; margin-right: 7px;
    box-shadow: 0 0 0 0 rgba(47, 227, 194, .6);
    animation: cy-pulse 2.6s infinite;
}
@keyframes cy-pulse {
    70%  { box-shadow: 0 0 0 8px rgba(47, 227, 194, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 227, 194, 0); }
}

.cy-nav {
    position: sticky; top: 0; z-index: 120;
    background: rgba(6, 16, 25, .72);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--cy-line);
}

/* Mobile menu switch. Visually hidden but still keyboard-focusable. */
.cy-nav-toggle {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}
.cy-nav .cy-shell {
    display: flex; align-items: center; gap: 26px; padding-block: 13px;
}

.cy-brand { display: flex; align-items: center; gap: 11px; color: #fff; font-family: var(--cy-display); font-weight: 700; font-size: 1.06rem; }
.cy-brand img { height: 34px; width: auto; display: block; }
.cy-brand span small { display: block; font-family: var(--cy-mono); font-size: .62rem; color: var(--cy-ink-mute); font-weight: 400; letter-spacing: .02em; }

.cy-nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; list-style: none; margin-bottom: 0; padding: 0; }
.cy-nav-links > li { position: relative; }
.cy-nav-links > li > a {
    display: block; padding: 8px 13px; border-radius: var(--cy-r-sm);
    color: var(--cy-ink-soft); font-weight: 500; font-size: .93rem;
}
.cy-nav-links > li > a:hover,
.cy-nav-links > li.active > a { color: #fff; background: rgba(47, 227, 194, .10); }

.cy-nav-actions { display: flex; align-items: center; gap: 9px; }

/* Dropdowns inside the custom nav */
.cy-nav-links .dropdown-menu,
.cy-nav-actions .dropdown-menu {
    background: var(--cy-raised);
    border: 1px solid var(--cy-line);
    border-radius: var(--cy-r);
    box-shadow: var(--cy-shadow);
    padding: 6px;
    min-width: 232px;
}
.dropdown-menu .dropdown-item {
    color: var(--cy-ink-soft); border-radius: var(--cy-r-sm); padding: 8px 11px; font-size: .92rem;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus { background: rgba(47, 227, 194, .12); color: #fff; }
.dropdown-menu .dropdown-divider { border-color: var(--cy-line); }
.dropdown-header { color: var(--cy-ink-mute); font-family: var(--cy-mono); font-size: .72rem; }

/* Dropdowns open on hover/focus as well as on click, so the menus still work
   if Bootstrap's JS isn't available on the page. */
@media (min-width: 768px) {
    .cy-nav .dropdown { position: relative; }
    .cy-nav .dropdown:hover > .dropdown-menu,
    .cy-nav .dropdown:focus-within > .dropdown-menu,
    .cy-nav li.dropdown:hover > .dropdown-menu,
    .cy-nav li.dropdown:focus-within > .dropdown-menu {
        display: block; position: absolute; top: 100%; left: 0; margin-top: 6px;
    }
    .cy-nav .cy-nav-actions .dropdown:hover > .dropdown-menu,
    .cy-nav .cy-nav-actions .dropdown:focus-within > .dropdown-menu { left: auto; right: 0; }
}

@media (max-width: 767px) {
    .cy-nav .dropdown-menu {
        display: block; position: static; float: none;
        background: transparent; border: 0; box-shadow: none;
        padding: 0 0 0 12px; margin: 0;
    }
}

.cy-burger {
    display: none; border: 1px solid var(--cy-line);
    color: var(--cy-ink); border-radius: var(--cy-r-sm);
    padding: 7px 12px; margin-left: auto; cursor: pointer; user-select: none;
    line-height: 1.2;
}
.cy-nav-toggle:focus-visible ~ .cy-shell .cy-burger { outline: 2px solid var(--cy-tide); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   4. Hero + the tide line (the one loud idea in this theme)
   -------------------------------------------------------------------------- */
.cy-hero { position: relative; overflow: hidden; padding: 44px 0 0; }
.cy-hero .cy-shell { position: relative; z-index: 2; }

.cy-hero-grid {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 46px; align-items: center; padding-bottom: 120px;
}

.cy-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(47, 227, 194, .10); border: 1px solid var(--cy-tide-dim);
    color: var(--cy-tide); padding: 5px 13px; border-radius: 99px;
    font-size: .8rem; font-weight: 500; margin-bottom: 20px;
}

.cy-hero h1 { margin-bottom: 18px; }
.cy-hero h1 em { font-style: italic; color: var(--cy-tide); font-weight: 600; }
.cy-hero-sub { font-size: 1.09rem; color: var(--cy-ink-soft); max-width: 48ch; margin-bottom: 28px; }
.cy-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Node telemetry card — reads like a console because that's the product */
.cy-telemetry {
    background: linear-gradient(180deg, rgba(15, 37, 55, .92), rgba(10, 26, 40, .92));
    border: 1px solid var(--cy-line);
    border-radius: var(--cy-r-lg);
    box-shadow: var(--cy-shadow);
    overflow: hidden;
}
.cy-telemetry-head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 16px; border-bottom: 1px solid var(--cy-line);
    background: rgba(4, 12, 20, .5);
    font-family: var(--cy-mono); font-size: .78rem; color: var(--cy-ink-mute);
}
.cy-telemetry-head i { width: 9px; height: 9px; border-radius: 50%; background: #23394a; display: block; }
.cy-telemetry-head i:first-child { background: var(--cy-tide); }
.cy-telemetry-body { padding: 6px 16px 14px; }
.cy-telemetry-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 9px 0; border-bottom: 1px dashed rgba(22, 53, 74, .8);
    font-family: var(--cy-mono); font-size: .85rem;
}
.cy-telemetry-row:last-child { border-bottom: 0; }
.cy-telemetry-row dt { color: var(--cy-ink-mute); font-weight: 400; }
.cy-telemetry-row dd { color: var(--cy-ink); margin: 0; text-align: right; }
.cy-telemetry-row dd b { color: var(--cy-tide); font-weight: 500; }

/* The waterline: a slow swell that separates the hero from the page. */
.cy-tideline {
    position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
    line-height: 0; pointer-events: none;
}
.cy-tideline svg { width: 200%; height: 70px; display: block; }
.cy-tideline .swell-back  { fill: rgba(14, 158, 138, .16); animation: cy-swell 26s linear infinite; }
.cy-tideline .swell-mid   { fill: rgba(47, 227, 194, .10); animation: cy-swell 18s linear infinite reverse; }
.cy-tideline .swell-front { fill: var(--cy-surface); animation: cy-swell 34s linear infinite; }
@keyframes cy-swell {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   5. Sections
   -------------------------------------------------------------------------- */
.cy-section { padding: 70px 0; }
.cy-section--tint { background: var(--cy-surface); border-block: 1px solid var(--cy-line); }
.cy-section-head { max-width: 60ch; margin-bottom: 38px; }
.cy-section-head p { color: var(--cy-ink-soft); margin-bottom: 0; }

.cy-grid { display: grid; gap: 18px; }
.cy-grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.cy-grid--4 { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.cy-card {
    position: relative;
    background: linear-gradient(180deg, rgba(15, 37, 55, .78), rgba(10, 26, 40, .78));
    border: 1px solid var(--cy-line);
    border-radius: var(--cy-r);
    padding: 24px;
    transition: border-color .22s var(--cy-ease), transform .22s var(--cy-ease);
}
.cy-card:hover { border-color: rgba(47, 227, 194, .38); }
.cy-card h3 { font-size: 1.1rem; margin: 12px 0 7px; }
.cy-card p { color: var(--cy-ink-soft); font-size: .94rem; margin-bottom: 0; }
.cy-card-icon {
    width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 10px; background: rgba(47, 227, 194, .10);
    border: 1px solid var(--cy-tide-dim); font-size: 1.15rem;
}

/* --------------------------------------------------------------------------
   7. Transparency notes — CyTide's honesty callouts, treated as a component
   -------------------------------------------------------------------------- */
.cy-note {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--cy-warn-dim);
    border: 1px solid rgba(245, 185, 68, .28);
    border-left: 3px solid var(--cy-warn);
    border-radius: var(--cy-r);
    padding: 18px 20px;
}
.cy-note-icon { color: var(--cy-warn); font-size: 1.1rem; line-height: 1.4; }
.cy-note h4 { font-size: 1rem; color: var(--cy-warn); margin: 0 0 6px; }
.cy-note p { color: var(--cy-ink-soft); font-size: .92rem; margin-bottom: 8px; }
.cy-note p:last-child { margin-bottom: 0; }
.cy-note strong { color: #fff; }

/* --------------------------------------------------------------------------
   8. Plans
   -------------------------------------------------------------------------- */
.cy-switch { display: inline-flex; gap: 4px; padding: 4px; background: var(--cy-abyss); border: 1px solid var(--cy-line); border-radius: 99px; margin-bottom: 30px; }
.cy-switch label {
    color: var(--cy-ink-soft); cursor: pointer; margin: 0;
    padding: 8px 20px; border-radius: 99px; font-weight: 500; font-size: .92rem;
    transition: background .2s var(--cy-ease), color .2s var(--cy-ease);
}
.cy-switch label:hover { color: #fff; }

/* Radio-driven tabs — no script involved. */
.cy-tab-input { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; }
.cy-tab-panel { display: none; }
#cy-plans-mc:checked  ~ #plans-mc,
#cy-plans-bot:checked ~ #plans-bot { display: grid; }
#cy-plans-mc:checked  ~ .cy-switch label[for="cy-plans-mc"],
#cy-plans-bot:checked ~ .cy-switch label[for="cy-plans-bot"] {
    background: var(--cy-tide); color: var(--cy-abyss); font-weight: 600;
}
.cy-tab-input:focus-visible ~ .cy-switch { outline: 2px solid var(--cy-tide); outline-offset: 3px; }

.cy-plan {
    position: relative; display: flex; flex-direction: column;
    background: linear-gradient(180deg, rgba(15, 37, 55, .8), rgba(8, 22, 34, .8));
    border: 1px solid var(--cy-line);
    border-radius: var(--cy-r);
    padding: 24px 22px 22px;
    transition: border-color .22s var(--cy-ease), box-shadow .22s var(--cy-ease);
}
.cy-plan:hover { border-color: rgba(47, 227, 194, .45); box-shadow: var(--cy-shadow-lift); }
.cy-plan--pick { border-color: var(--cy-tide); }
.cy-plan--pick::before {
    content: attr(data-flag);
    position: absolute; top: -11px; left: 22px;
    background: var(--cy-tide); color: var(--cy-abyss);
    font-size: .72rem; font-weight: 700; padding: 3px 11px; border-radius: 99px;
}
.cy-plan h3 { font-size: 1.22rem; margin-bottom: 4px; }
.cy-plan-blurb { color: var(--cy-ink-mute); font-size: .86rem; min-height: 2.6em; margin-bottom: 16px; }
.cy-plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 18px; font-family: var(--cy-display); }
.cy-plan-price b { font-size: 2.05rem; font-weight: 700; color: #fff; letter-spacing: -.03em; }
.cy-plan-price span { color: var(--cy-ink-mute); font-size: .86rem; font-family: var(--cy-font); }
.cy-plan-specs { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; }
.cy-plan-specs li { display: flex; gap: 9px; align-items: flex-start; font-size: .9rem; color: var(--cy-ink-soft); font-family: var(--cy-mono); }
.cy-plan-specs li::before { content: '~'; color: var(--cy-tide); font-weight: 600; }
.cy-plan .btn { margin-top: auto; width: 100%; }

/* --------------------------------------------------------------------------
   9. Buttons (also rewrites Bootstrap/WHMCS buttons across the client area)
   -------------------------------------------------------------------------- */
.btn {
    font-family: var(--cy-font);
    font-weight: 600; font-size: .93rem;
    border-radius: var(--cy-r-sm);
    padding: 10px 20px;
    border: 1px solid transparent;
    transition: transform .16s var(--cy-ease), background .2s var(--cy-ease), border-color .2s var(--cy-ease), color .2s var(--cy-ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary, .btn-success, .btn-order {
    background: linear-gradient(135deg, var(--cy-tide), var(--cy-tide-deep));
    border-color: transparent; color: var(--cy-abyss);
}
.btn-primary:hover, .btn-success:hover, .btn-order:hover,
.btn-primary:focus, .btn-success:focus,
.btn-check:checked + .btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
    background: linear-gradient(135deg, #4df0d4, var(--cy-tide-deep));
    color: var(--cy-abyss); border-color: transparent;
}

.btn-secondary, .btn-default {
    background: rgba(22, 53, 74, .5); border-color: var(--cy-line); color: var(--cy-ink);
}
.btn-secondary:hover, .btn-default:hover { background: rgba(22, 53, 74, .9); border-color: var(--cy-tide-deep); color: #fff; }

.btn-outline-primary { color: var(--cy-tide); border-color: rgba(47, 227, 194, .5); background: transparent; }
.btn-outline-primary:hover { background: var(--cy-tide-dim); color: #fff; border-color: var(--cy-tide); }

.btn-danger { background: var(--cy-danger); border-color: transparent; color: #1a0606; }
.btn-warning { background: var(--cy-warn); border-color: transparent; color: #241801; }
.btn-info { background: var(--cy-reef); border-color: transparent; color: var(--cy-abyss); }
.btn-link { color: var(--cy-tide); }
.btn-lg { padding: 13px 26px; font-size: 1rem; }
.btn-sm { padding: 6px 13px; font-size: .84rem; }

/* --------------------------------------------------------------------------
   10. WHMCS client area — panels, cards, sidebars
   -------------------------------------------------------------------------- */
.main-container, .container, .container-fluid { color: var(--cy-ink); }

#main-body, .main-content { padding-block: 34px; }

.page-header,
.cy-pagehead {
    border-bottom: 1px solid var(--cy-line);
    padding-bottom: 16px;
    margin-bottom: 26px;
}
.cy-pagehead { padding-top: 34px; }
.cy-pagehead h1, .page-header h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0; }
.cy-pagehead p { color: var(--cy-ink-mute); margin: 6px 0 0; }

.breadcrumb {
    background: transparent; padding: 0; margin-bottom: 10px;
    font-size: .84rem; font-family: var(--cy-mono);
}
.breadcrumb a { color: var(--cy-ink-mute); }
.breadcrumb a:hover { color: var(--cy-tide); }
.breadcrumb .active, .breadcrumb-item.active { color: var(--cy-ink-soft); }
.breadcrumb-item + .breadcrumb-item::before { color: #2a5066; }

.card, .panel, .well, .jumbotron, .sidebar-item, .panel-sidebar {
    background: linear-gradient(180deg, rgba(15, 37, 55, .74), rgba(10, 26, 40, .74));
    border: 1px solid var(--cy-line);
    border-radius: var(--cy-r);
    color: var(--cy-ink);
}
.card-header, .panel-heading, .sidebar-item .list-group-item:first-child {
    background: rgba(4, 12, 20, .45);
    border-bottom: 1px solid var(--cy-line);
    color: #fff; font-family: var(--cy-display); font-weight: 600;
    border-radius: var(--cy-r) var(--cy-r) 0 0;
}
.card-footer, .panel-footer { background: rgba(4, 12, 20, .35); border-top: 1px solid var(--cy-line); }
.card-body, .panel-body { color: var(--cy-ink-soft); }
.card-body h1, .card-body h2, .card-body h3, .card-body h4 { color: #fff; }

.panel-primary, .card-primary { border-color: rgba(47, 227, 194, .4); }

/* Sidebar menus */
.list-group { border-radius: var(--cy-r); overflow: hidden; }
.list-group-item {
    background: transparent; border-color: var(--cy-line); color: var(--cy-ink-soft);
}
.list-group-item:hover { background: rgba(47, 227, 194, .07); color: #fff; }
.list-group-item.active, .list-group-item.active:hover {
    background: var(--cy-tide-dim); border-color: var(--cy-line);
    color: #fff; font-weight: 600;
    box-shadow: inset 3px 0 0 var(--cy-tide);
}
.list-group-item .badge { background: var(--cy-tide-dim); color: var(--cy-tide); }

/* Stat tiles on the client home */
.client-home-panels .card, .home-panels .card { height: 100%; }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.form-control, .form-select, .input-group-text, textarea, select, input[type="text"],
input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"] {
    background: rgba(4, 12, 20, .7);
    border: 1px solid var(--cy-line);
    color: var(--cy-ink);
    border-radius: var(--cy-r-sm);
    padding: 10px 13px;
}
.form-control:focus, .form-select:focus, textarea:focus, select:focus {
    background: rgba(4, 12, 20, .9);
    border-color: var(--cy-tide);
    box-shadow: 0 0 0 3px rgba(47, 227, 194, .16);
    color: #fff;
}
.form-control::placeholder { color: #5f7d8f; }
.form-label, label { color: var(--cy-ink-soft); font-weight: 500; font-size: .9rem; }
.form-text, .help-block, small.text-muted, .text-muted { color: var(--cy-ink-mute) !important; }
.input-group-text { color: var(--cy-ink-mute); }
.form-check-input { background-color: rgba(4, 12, 20, .8); border-color: var(--cy-line); }
.form-check-input:checked { background-color: var(--cy-tide); border-color: var(--cy-tide); }

/* Autofill kills dark inputs in Chrome without this */
input:-webkit-autofill,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--cy-ink);
    -webkit-box-shadow: 0 0 0 1000px #071522 inset;
    caret-color: var(--cy-ink);
}

/* --------------------------------------------------------------------------
   12. Tables
   -------------------------------------------------------------------------- */
.table, table {
    color: var(--cy-ink-soft);
    --bs-table-bg: transparent;
    --bs-table-color: var(--cy-ink-soft);
    --bs-table-striped-bg: rgba(255, 255, 255, .02);
    --bs-table-striped-color: var(--cy-ink-soft);
    --bs-table-hover-bg: rgba(47, 227, 194, .06);
    --bs-table-hover-color: #fff;
    --bs-table-border-color: var(--cy-line);
}
.table > :not(caption) > * > * { border-bottom-color: var(--cy-line); background-color: transparent; }
.table thead th, .table > thead > tr > th {
    color: var(--cy-ink-mute);
    font-family: var(--cy-mono); font-size: .78rem; font-weight: 500;
    border-bottom: 1px solid var(--cy-line) !important;
    background: rgba(4, 12, 20, .4);
}
.table a { color: var(--cy-tide); }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--cy-ink-mute); }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--cy-ink-soft) !important; }

/* --------------------------------------------------------------------------
   13. Alerts, badges, tabs, modals, misc Bootstrap
   -------------------------------------------------------------------------- */
.alert { border-radius: var(--cy-r); border-width: 1px; border-left-width: 3px; }
.alert-success { background: rgba(47, 227, 194, .10); border-color: rgba(47, 227, 194, .35); border-left-color: var(--cy-tide); color: #bff6ea; }
.alert-info    { background: rgba(88, 201, 255, .10); border-color: rgba(88, 201, 255, .32); border-left-color: var(--cy-reef); color: #cfe9ff; }
.alert-warning { background: var(--cy-warn-dim); border-color: rgba(245, 185, 68, .32); border-left-color: var(--cy-warn); color: #ffe4ae; }
.alert-danger  { background: rgba(255, 107, 107, .10); border-color: rgba(255, 107, 107, .32); border-left-color: var(--cy-danger); color: #ffd2d2; }
.alert a { color: inherit; text-decoration: underline; }

.badge { font-weight: 600; border-radius: 99px; padding: .38em .72em; }
.badge.bg-success, .label-success { background: var(--cy-tide) !important; color: var(--cy-abyss) !important; }
.badge.bg-warning, .label-warning { background: var(--cy-warn) !important; color: #241801 !important; }
.badge.bg-danger,  .label-danger  { background: var(--cy-danger) !important; color: #1a0606 !important; }
.badge.bg-info,    .label-info    { background: var(--cy-reef) !important; color: var(--cy-abyss) !important; }
.badge.bg-secondary, .badge-secondary { background: rgba(22, 53, 74, .9) !important; color: var(--cy-ink-soft) !important; }
.badge-success { background: var(--cy-tide) !important; color: var(--cy-abyss) !important; }
.badge-warning { background: var(--cy-warn) !important; color: #241801 !important; }
.badge-danger  { background: var(--cy-danger) !important; color: #1a0606 !important; }
.badge-info    { background: var(--cy-reef) !important; color: var(--cy-abyss) !important; }

/* Bootstrap 4 bits twenty-one still uses */
.custom-select, .custom-file-label {
    background-color: rgba(4, 12, 20, .7); border-color: var(--cy-line); color: var(--cy-ink);
}
.close { color: var(--cy-ink); opacity: .8; text-shadow: none; }
.close:hover { color: #fff; }
.popover { background: var(--cy-raised); border-color: var(--cy-line); }
.popover-body, .popover-header { background: transparent; color: var(--cy-ink-soft); border-color: var(--cy-line); }
.btn-return-to-admin { position: fixed; bottom: 16px; right: 16px; z-index: 130; background: var(--cy-warn); color: #241801; border-radius: 99px; }

.nav-tabs { border-bottom: 1px solid var(--cy-line); gap: 2px; }
.nav-tabs .nav-link {
    color: var(--cy-ink-mute); border: 0; border-bottom: 2px solid transparent;
    border-radius: 0; padding: 10px 16px; font-weight: 500;
}
.nav-tabs .nav-link:hover { color: var(--cy-ink); border-bottom-color: var(--cy-line); background: transparent; }
.nav-tabs .nav-link.active {
    background: transparent; color: #fff; border-bottom-color: var(--cy-tide);
}
.nav-pills .nav-link { color: var(--cy-ink-soft); border-radius: var(--cy-r-sm); }
.nav-pills .nav-link.active { background: var(--cy-tide); color: var(--cy-abyss); }

.modal-content {
    background: var(--cy-raised); border: 1px solid var(--cy-line);
    border-radius: var(--cy-r-lg); color: var(--cy-ink);
}
.modal-header, .modal-footer { border-color: var(--cy-line); }
.modal-backdrop.show { opacity: .74; }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

.pagination .page-link {
    background: rgba(10, 26, 40, .8); border-color: var(--cy-line); color: var(--cy-ink-soft);
}
.pagination .page-item.active .page-link { background: var(--cy-tide); border-color: var(--cy-tide); color: var(--cy-abyss); }

.progress { background: rgba(4, 12, 20, .8); border-radius: 99px; height: 8px; }
.progress-bar { background: linear-gradient(90deg, var(--cy-tide-deep), var(--cy-tide)); }

.accordion-item { background: transparent; border-color: var(--cy-line); }
.accordion-button {
    background: rgba(15, 37, 55, .6); color: #fff;
    font-family: var(--cy-display); font-weight: 600; font-size: 1rem;
}
.accordion-button:not(.collapsed) { background: rgba(47, 227, 194, .10); color: var(--cy-tide); box-shadow: none; }
.accordion-button::after { filter: invert(1); }
.accordion-body { color: var(--cy-ink-soft); background: rgba(4, 12, 20, .3); }

.tooltip-inner { background: var(--cy-raised); border: 1px solid var(--cy-line); }
code, kbd, pre { font-family: var(--cy-mono); }
code { color: var(--cy-tide); background: rgba(47, 227, 194, .08); padding: 2px 6px; border-radius: 4px; }
pre { background: var(--cy-abyss); border: 1px solid var(--cy-line); border-radius: var(--cy-r-sm); padding: 14px; color: var(--cy-ink-soft); }

/* --------------------------------------------------------------------------
   14. Cart / order form
   -------------------------------------------------------------------------- */
#order-standard_cart .product,
#order-standard_cart .product-info,
#order-standard_cart .cart-body,
.order-summary, .summary-container {
    background: linear-gradient(180deg, rgba(15, 37, 55, .74), rgba(10, 26, 40, .74));
    border: 1px solid var(--cy-line);
    border-radius: var(--cy-r);
    color: var(--cy-ink-soft);
}
#order-standard_cart .product header,
#order-standard_cart .product-header {
    background: rgba(4, 12, 20, .5); border-bottom: 1px solid var(--cy-line);
    color: #fff; font-family: var(--cy-display);
}
#order-standard_cart .product .price,
.cart-pricing, .product-pricing {
    color: var(--cy-tide); font-family: var(--cy-display); font-weight: 700;
}
#order-standard_cart .cat-list li a { color: var(--cy-ink-soft); border-color: var(--cy-line); }
#order-standard_cart .cat-list li.active a,
#order-standard_cart .cat-list li a:hover { background: var(--cy-tide-dim); color: #fff; }
.domain-checker-container, .domain-search-container {
    background: var(--cy-raised); border: 1px solid var(--cy-line); border-radius: var(--cy-r-lg);
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.cy-footer {
    background: var(--cy-abyss);
    border-top: 1px solid var(--cy-line);
    margin-top: 64px;
    padding-top: 54px;
    color: var(--cy-ink-mute);
    font-size: .92rem;
}
.cy-footer-grid {
    display: grid; gap: 34px;
    grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(140px, 1fr));
    padding-bottom: 40px;
}
.cy-footer h4 {
    font-size: .88rem; color: #fff; margin-bottom: 14px;
    font-family: var(--cy-font); font-weight: 600;
}
.cy-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.cy-footer ul a { color: var(--cy-ink-mute); font-size: .9rem; }
.cy-footer ul a:hover { color: var(--cy-tide); }
.cy-footer p { max-width: 42ch; }

.cy-footer-status {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(47, 227, 194, .08); border: 1px solid var(--cy-tide-dim);
    color: var(--cy-tide); border-radius: 99px; padding: 7px 15px;
    font-family: var(--cy-mono); font-size: .8rem; margin-top: 16px;
}

.cy-footer-base {
    border-top: 1px solid var(--cy-line);
    padding-block: 20px;
    display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    font-size: .84rem;
}
.cy-footer-base span { color: #5f7d8f; }
.cy-footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   16. Motion + responsive + print
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .cy-hero-grid { grid-template-columns: 1fr; gap: 34px; padding-bottom: 100px; }
    .cy-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
    body { font-size: 15px; }
    .cy-burger { display: block; }
    .cy-nav-links,
    .cy-nav-actions {
        display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 4px;
    }
    .cy-nav .cy-shell { flex-wrap: wrap; }
    .cy-nav-toggle:checked ~ .cy-shell { padding-bottom: 16px; }
    .cy-nav-toggle:checked ~ .cy-shell .cy-nav-links,
    .cy-nav-toggle:checked ~ .cy-shell .cy-nav-actions { display: flex; }
    .cy-nav-toggle:checked ~ .cy-shell .cy-nav-actions .btn { width: 100%; }
    .cy-switch { display: flex; width: 100%; }
    .cy-switch label { flex: 1; text-align: center; }
    .cy-hero { padding-top: 46px; }
    .cy-section { padding: 52px 0; }
    .cy-footer-grid { grid-template-columns: 1fr; }
    .cy-topbar .cy-shell { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media print {
    .cy-nav, .cy-topbar, .cy-footer, .cy-tideline { display: none !important; }
    body { background: #fff; color: #000; }
}


/* --------------------------------------------------------------------------
   17. Fallback: style Twenty-One's own header and footer markup
   Applies when header.tpl / footer.tpl are NOT overridden, so the theme still
   lands with nothing but this stylesheet in place.
   -------------------------------------------------------------------------- */
.primary-bg-color { background: var(--cy-deep) !important; }

#header, .header { background: transparent; }
#header .topbar, .topbar {
    background: rgba(4, 12, 20, .85);
    border-bottom: 1px solid var(--cy-line);
    color: var(--cy-ink-soft);
}
.topbar .btn, .topbar .input-group-text, .topbar .btn-active-client {
    color: var(--cy-ink-soft); background: transparent; border-color: var(--cy-line);
}
.topbar .btn:hover, .topbar .btn-active-client:hover { color: #fff; }

.main-navbar-wrapper, #header .navbar, .navbar {
    background: rgba(6, 16, 25, .82) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--cy-line);
}
.navbar-brand { color: #fff !important; font-family: var(--cy-display); font-weight: 700; }
.navbar-brand .logo-img, .logo-img { max-height: 38px; width: auto; }
.navbar .nav-link, .navbar-nav .nav-link {
    color: var(--cy-ink-soft) !important; border-radius: var(--cy-r-sm); font-weight: 500;
}
.navbar .nav-link:hover,
.navbar .nav-item.active > .nav-link,
.navbar-nav .nav-link:hover { color: #fff !important; background: rgba(47, 227, 194, .10); }
.navbar-toggler { border-color: var(--cy-line); color: var(--cy-ink); }
.navbar-toggler-icon { filter: invert(1) opacity(.8); }

.master-breadcrumb, #main-breadcrumb {
    background: transparent; border-bottom: 1px solid var(--cy-line);
    font-family: var(--cy-mono); font-size: .84rem;
}

#main-body, .main-body { background: transparent; }

#footer, .footer {
    background: var(--cy-abyss);
    border-top: 1px solid var(--cy-line);
    color: var(--cy-ink-mute);
    padding-top: 40px;
}
#footer .nav-link, .footer .nav-link { color: var(--cy-ink-mute) !important; }
#footer .nav-link:hover, .footer .nav-link:hover { color: var(--cy-tide) !important; }

.sidebar .card, .sidebar-item {
    background: linear-gradient(180deg, rgba(15, 37, 55, .74), rgba(10, 26, 40, .74));
    border: 1px solid var(--cy-line);
}
.sidebar .list-group-item, .sidebar-item .list-group-item { background: transparent; }

/* --------------------------------------------------------------------------
   18. Homepage sits inside #main-body > .container, so full-width sections
   break out of it here.
   -------------------------------------------------------------------------- */
body { overflow-x: hidden; }

#main-body .cy-hero,
#main-body .cy-section--tint {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}
#main-body .cy-section:first-child { padding-top: 40px; }
.homepage-body #main-body > .container { padding-left: 0; padding-right: 0; }
.homepage-body #main-body .cy-shell { max-width: 1140px; }

/* Panel shortcut in the navbar toolbar */
.cy-panel-link { color: var(--cy-tide) !important; font-weight: 600; font-size: .9rem; }
.cy-panel-link:hover { color: #fff !important; }

/* Footer utility row (social icons + language switcher) */
.cy-footer-utils { display: flex; gap: 10px; align-items: center; }
.cy-footer-utils .btn { color: var(--cy-ink-mute); font-size: .84rem; padding: 4px 10px; }
.cy-footer-utils .btn:hover { color: var(--cy-tide); }
.cy-footer .copyright { color: #5f7d8f; }


/* --------------------------------------------------------------------------
   19. Contrast corrections — these run last so they win over theme.min.css.
   Everything WHMCS renders on a white surface gets pulled onto the dark palette.
   -------------------------------------------------------------------------- */

/* Compact client-area hero */
.cy-hero-inner { padding-bottom: 54px; max-width: 62ch; }
.cy-hero-inner h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 10px; }
.cy-hero-sub { font-size: 1.02rem; color: var(--cy-ink-soft); margin-bottom: 20px; }

/* Navbar legibility — the default grey was far too dim on this background */
.navbar .nav-link,
.navbar-nav .nav-link,
#nav .nav-link {
    color: #d7e8f2 !important;
    opacity: 1;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar-nav .nav-link:hover,
.navbar .nav-item.active > .nav-link,
.navbar .nav-item.open > .nav-link {
    color: #fff !important;
    background: rgba(47, 227, 194, .12);
}
.navbar .nav-link .caret, .navbar .dropdown-toggle::after { color: var(--cy-tide); }
.navbar-brand { color: #fff !important; }

/* Dropdowns */
.dropdown-menu {
    background: var(--cy-raised) !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: var(--cy-r) !important;
    box-shadow: var(--cy-shadow) !important;
    padding: 6px !important;
}
.dropdown-menu .dropdown-item,
.dropdown-menu > li > a,
.dropdown-menu a {
    color: var(--cy-ink-soft) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--cy-r-sm) !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu a:hover {
    background: rgba(47, 227, 194, .14) !important;
    color: #fff !important;
}
.dropdown-menu .dropdown-divider,
.dropdown-menu .divider { background: var(--cy-line) !important; border-color: var(--cy-line) !important; }
.dropdown-header { color: var(--cy-ink-mute) !important; }

/* Every white surface WHMCS ships: cards, panels, cart products, modals */
.card, .card-body, .card-header, .card-footer,
.panel, .panel-body, .panel-heading, .panel-footer,
.well, .jumbotron, .product, .product-info, .cart-body,
.order-summary, .summary-container, .popover, .popover-body,
.modal-content, .modal-header, .modal-body, .modal-footer,
.list-group-item, .bg-white, .bg-light, .tab-content {
    background-color: transparent !important;
    border-color: var(--cy-line) !important;
    color: var(--cy-ink-soft) !important;
}
.card, .panel, .well, .jumbotron, .product, .modal-content,
.order-summary, .summary-container, .popover {
    background: linear-gradient(180deg, rgba(15, 37, 55, .92), rgba(10, 26, 40, .92)) !important;
}
.card-header, .panel-heading, .modal-header, .card-footer, .panel-footer, .modal-footer {
    background: rgba(4, 12, 20, .45) !important;
}

/* Text inside them */
.card h1, .card h2, .card h3, .card h4, .card h5, .card-title,
.panel h1, .panel h2, .panel h3, .panel h4, .panel-title,
.product h1, .product h2, .product h3, .product h4,
.modal-title, .pricing-card-title {
    color: #fff !important;
}
.card p, .card li, .card td, .card th, .card small, .card label,
.panel p, .panel li, .panel td, .product li, .product p, .product-desc,
.card-body ul li, .modal-body p, .modal-body li {
    color: var(--cy-ink-soft) !important;
}
.text-muted, .help-block, .small.text-muted { color: var(--cy-ink-mute) !important; }
.text-dark, .text-body, .text-black { color: var(--cy-ink) !important; }

/* Cart pricing */
.product .price, .cart-pricing, .product-pricing, .price {
    color: var(--cy-tide) !important;
}

/* Card-accent tiles on the default client home */
[class*="card-accent-"] {
    background: linear-gradient(180deg, rgba(15, 37, 55, .92), rgba(10, 26, 40, .92)) !important;
    border: 1px solid var(--cy-line) !important;
    color: var(--cy-ink) !important;
}
[class*="card-accent-"]:hover { border-color: rgba(47, 227, 194, .45) !important; color: #fff !important; }
[class*="card-accent-"] .ico-container i { color: var(--cy-tide) !important; }

/* Support routes through Discord only — hide the built-in contact/ticket entries */
#nav li[menuitemname="Contact Us"],
#nav li[menuitemname="Open Ticket"],
.sidebar li[menuitemname="Open Ticket"],
.sidebar li[menuitemname="Contact Us"] { display: none !important; }


/* --------------------------------------------------------------------------
   20. Stacking order + the last white surfaces
   -------------------------------------------------------------------------- */

/* The hero sets its own stacking context, which was painting over open menus. */
#header, .cy-topbar { position: relative; z-index: 500; }
#header .navbar, .main-navbar-wrapper { position: relative; z-index: 510; }
.dropdown-menu { z-index: 1060 !important; }
#main-body, .cy-hero, .master-breadcrumb { position: relative; z-index: 1; }
.cy-hero { isolation: auto; }

/* Navbar link colour — higher specificity than theme.min.css's own rules */
.main-navbar-wrapper .navbar-nav > li > a,
.main-navbar-wrapper .navbar-nav .nav-link,
.main-navbar-wrapper a.nav-link,
#nav > li > a {
    color: #d7e8f2 !important;
}
.main-navbar-wrapper .navbar-nav > li > a:hover,
.main-navbar-wrapper .navbar-nav > li.active > a,
.main-navbar-wrapper a.nav-link:hover,
#nav > li > a:hover {
    color: #fff !important;
}

/* Card and product headers in the order form were still coming through white */
#order-standard_cart .product > header,
#order-standard_cart .product-header,
#order-standard_cart .panel-heading,
#order-standard_cart .card-header,
.product > header,
.card > header,
.panel > header,
.panel-default > .panel-heading,
.card-columns .card .card-header,
.pricing-card-header {
    background: rgba(4, 12, 20, .55) !important;
    border-bottom: 1px solid var(--cy-line) !important;
    color: #fff !important;
}
#order-standard_cart .product > header h1,
#order-standard_cart .product > header h2,
#order-standard_cart .product > header h3,
#order-standard_cart .product > header h4,
.product > header *,
.card > header *,
.panel-default > .panel-heading * {
    color: #fff !important;
}

/* Anything still painting itself white inside the cart */
#order-standard_cart [class*="panel"],
#order-standard_cart [class*="card"],
#order-standard_cart .product * {
    border-color: var(--cy-line);
}
#order-standard_cart .product,
#order-standard_cart .product > div {
    background-color: transparent !important;
}


/* --------------------------------------------------------------------------
   21. Order form: configure step
   -------------------------------------------------------------------------- */

/* Selects were still rendering as white system controls */
select,
select.form-control,
.custom-select,
.form-select,
#order-standard_cart select {
    background-color: rgba(4, 12, 20, .85) !important;
    color: var(--cy-ink) !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: var(--cy-r-sm) !important;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 34px;
}
select option { background: #0f2537; color: var(--cy-ink); }

/* Checkboxes and radios */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--cy-tide);
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Field labels were too dim to read */
label,
.control-label,
.field-label,
#order-standard_cart label {
    color: var(--cy-ink-soft) !important;
}
.field-help-text, .product-field-description, #order-standard_cart p {
    color: var(--cy-ink-mute) !important;
}

/* Section headings that sit on a horizontal rule — the mask colour has to match
   the page background or they overlap the fields below. */
.header-lined,
#order-standard_cart .header-lined,
.additional-information h3,
.configure-product h3 {
    position: relative;
    background: transparent !important;
    display: block;
    margin: 32px 0 16px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--cy-line);
    padding-bottom: 10px;
    color: #fff !important;
    line-height: 1.3;
}
.header-lined span,
.header-lined small,
.additional-information h3 small {
    background: transparent !important;
    padding: 0 !important;
    color: var(--cy-ink-mute) !important;
    display: block;
    font-size: .84rem;
    font-style: normal;
}

/* Billing cycle / summary panels */
.order-summary, .summary-container, #orderSummary {
    background: linear-gradient(180deg, rgba(15, 37, 55, .92), rgba(10, 26, 40, .92)) !important;
    border: 1px solid var(--cy-line) !important;
}
.order-summary h3, #orderSummary h3 { color: #fff !important; }


/* --------------------------------------------------------------------------
   22. Shopping cart / checkout — the order form ships its own white wrappers
   -------------------------------------------------------------------------- */
#order-standard_cart,
#order-standard_cart > div,
[class*="cart-"], [class*="checkout-"], [class*="summary-"],
.cart-container, .view-cart-items, .promo-section, .tax-section,
.order-summary-container, .checkout-container, .cart-body, .cart-header {
    background-color: transparent !important;
    color: var(--cy-ink-soft) !important;
}

/* Boxed items inside the cart keep a surface, everything else stays clear */
.view-cart-items .item,
.order-summary .summary-item,
#order-standard_cart .cart-item,
#order-standard_cart .last-chance-product {
    background: linear-gradient(180deg, rgba(15, 37, 55, .92), rgba(10, 26, 40, .92)) !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: var(--cy-r) !important;
}

#order-standard_cart h1,
#order-standard_cart h2,
#order-standard_cart h3,
#order-standard_cart h4,
[class*="summary-"] h1, [class*="summary-"] h2,
[class*="summary-"] h3, [class*="summary-"] h4 {
    color: #fff !important;
}
#order-standard_cart a, [class*="cart-"] a { color: var(--cy-tide) !important; }
#order-standard_cart .breadcrumb a { color: var(--cy-ink-mute) !important; }

/* Totals rows */
.order-summary .subtotal, .order-summary .total,
[class*="summary-"] .total, #order-standard_cart .total {
    color: #fff !important;
    border-top-color: var(--cy-line) !important;
}

/* Checkout button was rendering in stock blue */
.checkout-btn, .btn-checkout, #btnCompleteProductConfig,
#order-standard_cart .btn-primary, [class*="checkout"] .btn-primary {
    background: linear-gradient(135deg, var(--cy-tide), var(--cy-tide-deep)) !important;
    border-color: transparent !important;
    color: var(--cy-abyss) !important;
    font-weight: 600 !important;
}

/* Promo / tax tab strip */
#order-standard_cart .nav-tabs .nav-link.active,
[class*="cart-"] .nav-tabs .nav-link.active {
    color: #fff !important;
    border-bottom-color: var(--cy-tide) !important;
    background: transparent !important;
}

/* Last resort: nothing inside the main body may paint itself white */
#main-body [style*="background-color: #fff"],
#main-body [style*="background-color:#fff"],
#main-body [style*="background: #fff"],
#main-body .bg-white, #main-body .bg-light {
    background-color: transparent !important;
}


/* --------------------------------------------------------------------------
   23. Order form sub-headings and button contrast
   -------------------------------------------------------------------------- */

/* WHMCS centres these headings by sitting a span on top of a border line, with
   the span's background masking the line. That mask was white-on-dark and the
   span's offset pushed it over the field below. */
.sub-heading {
    border-bottom: 1px solid var(--cy-line) !important;
    text-align: center;
    margin: 34px 0 30px !important;
    line-height: 1;
}
.sub-heading span {
    background: var(--cy-deep) !important;
    color: #fff !important;
    padding: 0 18px !important;
    position: relative;
    top: 10px;
    display: inline-block;
    font-family: var(--cy-display);
    font-weight: 600;
}
.sub-heading small,
.sub-heading span small {
    display: block;
    color: var(--cy-ink-mute) !important;
    font-size: .8rem;
    font-style: normal;
    background: transparent !important;
}

/* Button label contrast — teal fill needs the dark ink, not white */
.btn-primary, .btn-primary:hover, .btn-primary:focus,
.btn-success, .btn-success:hover, .btn-success:focus,
.btn-order, .checkout-btn, #btnCompleteProductConfig,
#order-standard_cart .btn-primary {
    color: #04121b !important;
}
.btn-primary i, .btn-success i, .btn-order i,
.checkout-btn i, #btnCompleteProductConfig i {
    color: #04121b !important;
}
.btn-primary:disabled, .btn-success:disabled { opacity: .55; }


/* --------------------------------------------------------------------------
   24. Page shell backgrounds — !important, because the order form loads its own
   stylesheet after this one and repaints the shell white.
   -------------------------------------------------------------------------- */
html, body {
    background-color: var(--cy-deep) !important;
    color: var(--cy-ink) !important;
}
body.primary-bg-color, .primary-bg-color { background-color: var(--cy-deep) !important; }

#header, .header { background-color: transparent !important; }
#main-body, .main-body, #main-body > .container, .primary-content,
section#main-body, .master-breadcrumb {
    background-color: transparent !important;
}

/* The order form wraps everything in its own shell */
#order-standard_cart, #order_form, .order-form,
#main-body .row, #main-body .col, #main-body [class^="col-"] {
    background-color: transparent !important;
}

#main-body, #main-body p, #main-body li, #main-body td, #main-body dd,
.primary-content, .primary-content p {
    color: var(--cy-ink-soft);
}
#main-body h1, #main-body h2, #main-body h3, #main-body h4, #main-body h5 {
    color: #fff;
}


/* --------------------------------------------------------------------------
   25. Blanket clear, then re-apply surfaces
   Nothing under the main body paints its own background. Anything that needs a
   surface gets one back below — these selectors carry the #main-body id plus a
   class, so they outrank the clear.
   -------------------------------------------------------------------------- */
#main-body *,
#order-standard_cart * {
    background-color: transparent !important;
}

/* Surfaces restored */
#main-body .card, #main-body .panel, #main-body .well, #main-body .product,
#main-body .modal-content, #main-body .popover, #main-body .order-summary,
#main-body .summary-container, #main-body .sidebar-item,
#main-body .view-cart-items .item, #main-body .cart-item,
#main-body .last-chance-product, #main-body [class*="card-accent-"],
#order-standard_cart .product, #order-standard_cart .cart-item {
    background: linear-gradient(180deg, rgba(15, 37, 55, .92), rgba(10, 26, 40, .92)) !important;
}
#main-body .card-header, #main-body .panel-heading, #main-body .modal-header,
#main-body .card-footer, #main-body .panel-footer, #main-body .modal-footer,
#main-body .product > header, #order-standard_cart .product > header {
    background: rgba(4, 12, 20, .55) !important;
}

/* Controls */
#main-body .form-control, #main-body input, #main-body select,
#main-body textarea, #main-body .custom-select, #main-body .input-group-text,
#order-standard_cart input, #order-standard_cart select {
    background-color: rgba(4, 12, 20, .85) !important;
    color: var(--cy-ink) !important;
}
#main-body input[type="checkbox"], #main-body input[type="radio"] {
    accent-color: var(--cy-tide);
}

/* Buttons */
#main-body .btn-primary, #main-body .btn-success, #main-body .btn-order,
#main-body .checkout-btn, #order-standard_cart .btn-primary,
#main-body [class*="checkout"] .btn-primary {
    background: linear-gradient(135deg, var(--cy-tide), var(--cy-tide-deep)) !important;
    color: #04121b !important;
}
#main-body .btn-secondary, #main-body .btn-default {
    background: rgba(22, 53, 74, .75) !important;
    color: var(--cy-ink) !important;
}
#main-body .btn-danger { background: var(--cy-danger) !important; color: #1a0606 !important; }

/* Menus, badges, alerts */
#main-body .dropdown-menu { background: var(--cy-raised) !important; }
#main-body .badge.bg-info, #main-body .badge-info { background: var(--cy-reef) !important; }
#main-body .badge.bg-success, #main-body .badge-success { background: var(--cy-tide) !important; }
#main-body .alert-success { background: rgba(47, 227, 194, .10) !important; }
#main-body .alert-info    { background: rgba(88, 201, 255, .10) !important; }
#main-body .alert-warning { background: var(--cy-warn-dim) !important; }
#main-body .alert-danger  { background: rgba(255, 107, 107, .10) !important; }
#main-body .progress { background: rgba(4, 12, 20, .8) !important; }
#main-body .progress-bar { background: linear-gradient(90deg, var(--cy-tide-deep), var(--cy-tide)) !important; }

/* Sub-heading mask has to match the page, not stay transparent */
#main-body .sub-heading span { background: var(--cy-deep) !important; }


/* --------------------------------------------------------------------------
   26. Stripe card fields
   Card number / expiry / CVC are Stripe Elements iframes. Their text colour is
   set by Stripe, not by this stylesheet, and it defaults to near-black. So the
   fields get a light background instead of a dark one — otherwise the digits a
   customer types are black on navy and effectively invisible.
   -------------------------------------------------------------------------- */
#main-body .StripeElement,
#main-body [id*="card-element"],
#main-body [id*="card-number"],
#main-body [id*="card-expiry"],
#main-body [id*="card-cvc"],
#main-body [class*="StripeElement"] {
    background-color: #f7fafc !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: var(--cy-r-sm) !important;
    padding: 11px 12px !important;
}
#main-body .StripeElement--focus,
#main-body [class*="StripeElement"]:focus-within {
    border-color: var(--cy-tide) !important;
    box-shadow: 0 0 0 3px rgba(47, 227, 194, .18) !important;
}
#main-body .StripeElement--invalid { border-color: var(--cy-danger) !important; }

/* The "name for this card" field is an ordinary input — keep it dark but make
   the placeholder readable. */
#main-body input[name*="cardname"],
#main-body input[placeholder*="name for this card"] {
    background-color: rgba(4, 12, 20, .85) !important;
    color: var(--cy-ink) !important;
    border: 1px solid var(--cy-line) !important;
}
#main-body input::placeholder { color: #6f8c9e !important; opacity: 1; }

/* Gateway chooser radios */
#main-body .payment-methods label, #main-body [class*="gateway"] label {
    color: var(--cy-ink-soft) !important;
}


/* --------------------------------------------------------------------------
   27. Notification bars, admin return button, phone input
   These all sit outside #main-body, so the section 25 rules never reached them.
   -------------------------------------------------------------------------- */

/* Email verification / client alert bars */
.client-alert, .alert-verify-email, #verifyEmailAlert,
.alert.alert-warning, .alert.alert-info, .alert.alert-danger, .alert.alert-success,
body > .alert, .master-breadcrumb + .alert {
    background-color: rgba(15, 37, 55, .96) !important;
    border: 1px solid var(--cy-line) !important;
    color: var(--cy-ink) !important;
    border-radius: var(--cy-r) !important;
}
.client-alert *, .alert-verify-email *, #verifyEmailAlert * { color: var(--cy-ink) !important; }
.alert.alert-warning { border-left: 3px solid var(--cy-warn) !important; }
.alert.alert-danger  { border-left: 3px solid var(--cy-danger) !important; }
.alert.alert-success { border-left: 3px solid var(--cy-tide) !important; }
.alert.alert-info    { border-left: 3px solid var(--cy-reef) !important; }
.alert .close, .alert .btn-close { color: var(--cy-ink) !important; opacity: .75; }
.alert .btn { background: rgba(22, 53, 74, .9) !important; color: var(--cy-ink) !important; border-color: var(--cy-line) !important; }

/* Email verification banner — its classes contain neither "alert" nor "verify",
   so it needs naming directly. */
html body .verification-banner,
html body .verification-banner.email-verification {
    background-color: rgba(15, 37, 55, .96) !important;
    border: 1px solid var(--cy-line) !important;
    border-left: 3px solid var(--cy-warn) !important;
    border-radius: var(--cy-r) !important;
    color: var(--cy-ink) !important;
}
html body .verification-banner * { color: var(--cy-ink) !important; }
html body .verification-banner .btn {
    background: rgba(22, 53, 74, .9) !important;
    color: var(--cy-ink) !important;
    border-color: var(--cy-line) !important;
}
html body .verification-banner .btn:hover { background: rgba(22, 53, 74, 1) !important; color: #fff !important; }
html body .verification-banner .close,
html body .verification-banner .btn-close { color: var(--cy-ink) !important; opacity: .75; }

/* Return-to-admin tab — was rendering as a large empty grey panel */
.btn-return-to-admin {
    position: fixed !important;
    right: 0 !important;
    top: 50% !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    max-width: 44px;
    padding: 14px 10px !important;
    background: var(--cy-warn) !important;
    color: #241801 !important;
    border: 0 !important;
    border-radius: var(--cy-r-sm) 0 0 var(--cy-r-sm) !important;
    box-shadow: var(--cy-shadow) !important;
    font-size: .8rem !important;
    line-height: 1.2 !important;
    z-index: 1080 !important;
    overflow: hidden;
}
.btn-return-to-admin * { color: #241801 !important; }

/* International phone input (intl-tel-input) */
.iti__country-list, .iti-mobile .iti__country-list, .country-list {
    background-color: var(--cy-raised) !important;
    border: 1px solid var(--cy-line) !important;
    border-radius: var(--cy-r-sm) !important;
    box-shadow: var(--cy-shadow) !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    z-index: 1090 !important;
    width: 320px;
    max-width: 90vw;
}
.iti__country, .country {
    background-color: transparent !important;
    color: var(--cy-ink-soft) !important;
    padding: 7px 10px !important;
}
.iti__country:hover, .iti__country.iti__highlight, .country:hover, .country.highlight {
    background-color: rgba(47, 227, 194, .16) !important;
    color: #fff !important;
}
.iti__dial-code, .dial-code { color: var(--cy-ink-mute) !important; }
.iti__divider { border-color: var(--cy-line) !important; }
.iti__selected-flag, .selected-flag { background-color: transparent !important; }
.iti__flag { background-color: transparent; }
.iti { width: 100%; }


/* --------------------------------------------------------------------------
   28. Phone country list must overlay, not push the form down
   -------------------------------------------------------------------------- */
.iti { position: relative !important; }
.iti__country-list, .country-list {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin-top: 2px !important;
}
.iti--container, .intl-tel-input.iti-container { z-index: 1090 !important; }

/* Stop ancestors clipping or reserving space for the open list */
.iti__country-list { will-change: transform; }
#main-body .form-group, #main-body .field-container,
.form-group:has(.iti), .field-container:has(.iti) {
    overflow: visible !important;
}


/* --------------------------------------------------------------------------
   29. Let the country list escape its card
   An ancestor with overflow:hidden was clipping the open list at the card edge.
   -------------------------------------------------------------------------- */
#main-body .card,
#main-body .card-body,
#main-body .panel,
#main-body .panel-body,
#main-body .primary-content,
#main-body .row,
#main-body [class^="col-"],
#main-body form,
#main-body fieldset {
    overflow: visible !important;
}

/* Keep the list a sensible height and always scrollable from the top */
.iti__country-list, .country-list {
    max-height: 260px !important;
    overscroll-behavior: contain;
}


/* --------------------------------------------------------------------------
   30. Country list background
   Section 25's "#main-body *" clear outranks a plain class selector, so the
   list needs the id in front of it to keep its surface.
   -------------------------------------------------------------------------- */
#main-body .iti__country-list,
#main-body .country-list,
#main-body .iti--container .iti__country-list,
.iti--container .iti__country-list {
    background-color: #0f2537 !important;
    border: 1px solid var(--cy-line) !important;
    box-shadow: var(--cy-shadow) !important;
}
#main-body .iti__country:hover,
#main-body .iti__country.iti__highlight,
.iti--container .iti__country:hover,
.iti--container .iti__country.iti__highlight {
    background-color: rgba(47, 227, 194, .16) !important;
}
#main-body .iti__divider, .iti--container .iti__divider {
    border-bottom: 1px solid var(--cy-line) !important;
}


/* --------------------------------------------------------------------------
   31. Service status labels
   WHMCS colours these by status with dark text intended for a light table.
   -------------------------------------------------------------------------- */
#main-body .status,
#main-body span.status,
#main-body td .status,
#main-body .label,
#main-body [class*="status-"] {
    color: var(--cy-ink) !important;
    font-weight: 600 !important;
    border-radius: 99px !important;
    padding: .25em .7em !important;
    display: inline-block;
    font-size: .8rem !important;
}
#main-body .status.active, #main-body .status-active,
#main-body .label-active, #main-body .status.Active {
    background-color: rgba(47, 227, 194, .16) !important;
    color: var(--cy-tide) !important;
}
#main-body .status.pending, #main-body .status-pending,
#main-body .status.Pending {
    background-color: rgba(245, 185, 68, .16) !important;
    color: var(--cy-warn) !important;
}
#main-body .status.suspended, #main-body .status-suspended,
#main-body .status.terminated, #main-body .status-terminated,
#main-body .status.cancelled, #main-body .status-cancelled,
#main-body .status.Suspended, #main-body .status.Terminated {
    background-color: rgba(255, 107, 107, .16) !important;
    color: var(--cy-danger) !important;
}

/* --------------------------------------------------------------------------
   Optional self-hosted webfonts
   Upload the .woff2 files to templates/cytide/fonts/ and uncomment.
   Local paths keep template validation happy.
   --------------------------------------------------------------------------
@font-face { font-family: 'Inter'; src: url('../fonts/inter-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-medium.woff2')  format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Sora';  src: url('../fonts/sora-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Sora';  src: url('../fonts/sora-bold.woff2')     format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
*/