/* =============================================
   ServerStage — ssg2026 brand styles
   Loads after all.min.css; overrides legacy teals.
   Brand: Slate + Cyan bicolor.
   Mark: Two interlocking U-shapes forming an "S".
   "ServerStage connects you and your customers."
   ============================================= */

/* ---------- Palette ---------- */
:root {
    /* Bicolor brand pair — top piece + "Server" */
    --brand:        #cbd5e1;   /* slate-300 */
    /* bottom piece + "Stage" */
    --brand-soft:   #22d3ee;   /* cyan-400 */

    --brand-dark:    #334155;    /* slate-700 — on light bg */
    --brand-light:   #06b6d4;    /* cyan-500  — on light bg */


    /* Surfaces */
    --bg-dark:      #0a0f1c;   /* navbar, footer */
    --bg-darker:    #050810;
    --bg-page:      #f8fafc;
    --surface:      #ffffff;

    /* Text */
    --ink:          #1e293b;   /* slate-800 — body */
    --ink-soft:     #64748b;   /* slate-500 — secondary */
    --ink-on-dark:  #e2e8f0;   /* on dark surfaces */
    --ink-on-dark-soft: #94a3b8;

    /* Accent for primary CTAs */
    --accent:       #22d3ee;   /* cyan-400 */
    --accent-hover: #06b6d4;   /* cyan-500 */
    --accent-ink:   #0a0f1c;   /* text on cyan */

    /* Borders */
    --rule:         #e2e8f0;
    --rule-dark:    #1e293b;

    /* Legacy aliases — preserved for any old references */
    --primary:      var(--accent);
    --primary-dark: var(--accent-hover);
    --dark:         var(--bg-dark);
    --light:        var(--bg-page);

}

/* ---------- Typography ---------- */
/* Bump root size from browser default (16px) so Bootstrap 3's 14px body becomes 17px equivalent.
   All rem-based rules below scale proportionally — no per-rule tweaks needed. */
html {
    font-size: 17px;
}
body {
    font-family: 'Geist', 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem;          /* override Bootstrap's 14px on body */
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg-page);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink);
}

/* Override standard_cart/all.min.css which colors .header-lined h1
 * with a rogue #058 saturated blue that's not part of our palette
 * (slate ink + cyan accent only). */
.header-lined h1 {
    color: var(--ink) !important;
    font-weight: 700;
}

/* Override standard_cart's #0e5077 background on the View Cart
 * button in the top nav. Bring it onto the cyan accent so it reads
 * as a primary CTA, consistent with Order Now buttons elsewhere. */
ul.top-nav > li.primary-action > a.btn {
    background-color: var(--accent) !important;
    color: var(--accent-ink) !important;
    border-radius: 6px;
    font-weight: 600;
}
ul.top-nav > li.primary-action > a.btn:hover,
ul.top-nav > li.primary-action > a.btn:focus {
    background-color: var(--accent-hover) !important;
    color: var(--accent-ink) !important;
}

a { color: var(--accent-hover); }
a:hover, a:focus { color: var(--accent); }

/* ---------- Header strip (logo + top-nav) ---------- */
/* Pure white was too harsh against the dark navbar; a silver-gradient
 * earlier experiment felt skeuomorphic. Flat slate-100 + a slate-300
 * hairline gives a clean, intentional edge that pairs with the rest
 * of the (flat) palette. */
#header {
    background: #f1f5f9 !important;
    border-bottom: 1px solid var(--brand) !important;
    border-radius: 0 !important;
}

/* ---------- Brand lockup (used in header.tpl) ---------- */
.brand-lockup {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    background: none !important;
    text-indent: 0 !important;
}
.brand-lockup:hover { text-decoration: none !important; }

.brand-mark {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-block;
    line-height: 0;
}
.brand-mark svg {
    width: 100%;
    height: auto;
    display: block;
}

.brand-wordmark {
    font-family: 'Geist', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;            /* scaled down to compensate for html 17px base */
    letter-spacing: -0.025em;
    line-height: 1;
    white-space: nowrap;
}
/* Default = light header surface. Use darker pair so it actually reads. */
.brand-wordmark .first  { color: #334155; }       /* slate-700 — "Server" */
.brand-wordmark .second { color: #06b6d4; }       /* cyan-500  — "Stage" */
/* When the lockup sits on a dark surface, switch to lighter pair */
.bg-dark .brand-wordmark .first,
.navbar-main .brand-wordmark .first,
.dark-surface .brand-wordmark .first { color: var(--brand); }
.bg-dark .brand-wordmark .second,
.navbar-main .brand-wordmark .second,
.dark-surface .brand-wordmark .second { color: var(--brand-soft); }
/* SVG mark fill — themed by surface context. CSS overrides the inline fill attribute. */
.brand-mark .ss-top { fill: var(--brand-light); }       /* slate-700 — on light bg */
.brand-mark .ss-bot { fill: var(--brand-dark); }       /* cyan-500  — on light bg */
.bg-dark .brand-mark .ss-top,
.navbar-main .brand-mark .ss-top,
.dark-surface .brand-mark .ss-top { fill: var(--brand-light); }
.bg-dark .brand-mark .ss-bot,
.navbar-main .brand-mark .ss-bot,
.dark-surface .brand-mark .ss-bot { fill: var(--brand-dark); }

/* ---------- Navbar (dark) ---------- */
/* Override legacy teal #0e5077 from all.min.css */
.navbar,
.navbar-main {
    background: var(--bg-dark) !important;
    background-color: var(--bg-dark) !important;
    border: none;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

.navbar-main li.account,
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus {
    background-color: var(--bg-darker) !important;
    color: var(--brand-soft) !important;
}

.navbar-main .navbar-nav > li > a {
    color: var(--ink-on-dark);
    font-weight: 500;
    transition: color 0.15s, background-color 0.15s;
}

.navbar-main .dropdown-menu {
    background: var(--bg-darker);
    border: 1px solid var(--rule-dark);
    border-radius: 8px;
    padding: 6px 0;
}
.navbar-main .dropdown-menu > li > a {
    color: var(--ink-on-dark) !important;
}
.navbar-main .dropdown-menu > li > a:hover,
.navbar-main .dropdown-menu > li > a:focus,
.navbar-main .dropdown-menu > .active > a {
    background-color: var(--brand-soft) !important;
    color: var(--accent-ink) !important;
}

/* Logo link inside header — neutralize legacy styles */
.logo {
    background: none !important;
    padding: 0 !important;
}
.logo img { height: 48px; }

/* ---------- Hero (#home-banner) ---------- */
/* Replaces the legacy teal #0e5077 hero band with slate gradient. */
#home-banner {
    background: linear-gradient(135deg, #0a0f1c 0%, #1e293b 60%, #0f172a 100%) !important;
    color: var(--ink-on-dark);
    padding: 64px 0 72px !important;
    position: relative;
    overflow: hidden;
}
/* Subtle cyan glow accent — visual interest without being loud */
#home-banner::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 50%;
    height: 140%;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.10), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
#home-banner > .container { position: relative; z-index: 1; }
#home-banner h2 {
    color: var(--ink-on-dark) !important;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 28px;
}

/* ---------- Domain search input-group ---------- */
/* Modern flat 6px rectangle, not the legacy 50px pill. Bootstrap
 * 3's `.input-group-lg` rules are highly-specific (3+ classes), so
 * we have to override with comparable specificity and !important
 * to actually win. */
.input-group.input-group-lg > .form-control {
    border-radius: 6px 0 0 6px !important;
    height: 56px;
    font-size: 1.05rem;
    border: 1px solid var(--rule);
}
.input-group.input-group-lg > .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18);
}
.input-group.input-group-lg .input-group-btn .btn {
    border-radius: 0 !important;
    padding: 0 28px;
    font-weight: 600;
    height: 56px;
}
/* Round the right edge of whichever button is last (Search-only
 * and Search+Transfer setups both work). */
.input-group.input-group-lg .input-group-btn:last-child .btn:last-child {
    border-radius: 0 6px 6px 0 !important;
}

/* Same specificity bump for non-lg input-groups elsewhere on the site. */
.input-group > .form-control { border-radius: 6px 0 0 6px; }
.input-group > .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18);
}
.input-group .btn { border-radius: 0; font-weight: 600; }
.input-group .input-group-btn:last-child .btn:last-child,
.input-group > .btn:last-child { border-radius: 0 6px 6px 0; }

/* ---------- Hero search input — outlined-on-dark variant ---------- */
/* Sits in the dark hero band; transparent fill + soft white outline
 * so the widget feels embedded in the hero rather than floating
 * on top. Text colour flips to ink-on-dark so typed values are
 * readable against the dark fill. */
#home-banner .input-group {
    margin-top: 28px;
}
#home-banner .input-group .form-control {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    color: var(--ink-on-dark);
}
#home-banner .input-group .form-control::placeholder {
    color: var(--ink-on-dark-soft);
}
#home-banner .input-group .form-control:focus {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(34, 211, 238, 0.35);
    color: var(--ink-on-dark);
}

/* Search button (custom .btn.search class set by WHMCS form) */
#home-banner .btn.search,
#home-banner input[type=submit].search,
.btn-success {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--accent-ink) !important;
    font-weight: 600;
}
#home-banner .btn.search:hover,
#home-banner input[type=submit].search:hover,
.btn-success:hover,
.btn-success:focus {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    color: var(--accent-ink) !important;
}
/* Transfer button — solid slate so it reads as a deliberate
 * secondary action rather than a ghost that gets lost on the
 * dark hero. */
#home-banner .btn.transfer,
#home-banner input[type=submit].transfer {
    background: var(--brand-dark) !important;     /* slate-700 */
    border: 1px solid var(--brand-dark) !important;
    color: #ffffff !important;
    font-weight: 500;
}
#home-banner .btn.transfer:hover,
#home-banner input[type=submit].transfer:hover {
    background: var(--ink) !important;            /* slate-800 */
    border-color: var(--ink) !important;
    color: #ffffff !important;
}

/* ---------- Service icons / .home-shortcuts strip ---------- */
/* Was a flat teal band; now: subtle slate band with cyan icon accents on hover */
.home-shortcuts {
    background: var(--bg-page) !important;
    border-bottom: 1px solid var(--rule);
    padding: 28px 0 !important;
}
.home-shortcuts .lead {
    color: var(--ink);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    margin: 0;
    padding-top: 14px;
    line-height: 1.25;
}
.home-shortcuts ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.home-shortcuts li {
    flex: 1 1 0;
    min-width: 140px;
    border: none !important;          /* kill legacy WHMCS theme vertical separators */
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
    display: flex;                    /* make the li itself a flex container... */
    align-items: stretch;             /* ...so the inner <a> fills full li height */
}
.home-shortcuts li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 12px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 12px;
    color: var(--ink);
    text-decoration: none;
    text-align: center;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.2s, color 0.15s;
    flex: 1;                          /* fill the li (cross-axis stretches via parent) */
    width: 100%;
    min-height: 116px;                /* baseline so 1-line and 2-line tiles match visually */
}
.home-shortcuts li a p {
    min-height: 2.5em;                /* reserve space for 2 lines so 1-liners center properly */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.home-shortcuts li a:hover {
    border-color: var(--accent);
    color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    text-decoration: none;
}
.home-shortcuts li a i {
    font-size: 1.6rem;
    color: var(--ink-soft);
    transition: color 0.15s;
}
.home-shortcuts li a:hover i { color: var(--accent); }
.home-shortcuts li a p {
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.home-shortcuts li a span { color: var(--accent); margin-left: 2px; }

/* ---------- Bootstrap legacy bg variants — neutralize  ---------- */
.bg-info,
.bg-primary {
    background: var(--bg-dark) !important;
    color: var(--ink-on-dark);
}
/* btn-info — was light cyan, now quiet slate outline */
.btn-info {
    background: var(--surface) !important;
    border: 1px solid var(--rule) !important;
    color: var(--ink) !important;
}
.btn-info:hover, .btn-info:focus {
    background: var(--bg-page) !important;
    border-color: var(--accent) !important;
    color: var(--accent-hover) !important;
}

/* ---------- Cards ---------- */
.card,
.panel,
.well {
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
    border: 1px solid var(--rule);
    background: var(--surface);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.10);
}

.panel-default > .panel-heading {
	border-radius: 14px !important;
}

/* Collapse empty .panel-footer slots — several WHMCS templates render
 * the footer div unconditionally, leaving a visual gap below panels
 * that never set footer HTML. :empty doesn't fire because Smarty leaves
 * whitespace between the tags, so check for the absence of child
 * elements with :has() instead. */
.panel-footer:not(:has(*)) { display: none; }

/* ---------- Add Funds promo panel ----------
 * Tied to _hooks/serverstage-addfunds-promo.php. Reuses the brand
 * cyan stripe + lift treatment from .service-card so the promo reads
 * as a featured panel without introducing any new colours. Scoped to
 * the unique `menuitemname` the hook puts on the panel — when the
 * hook file is removed the selector matches nothing (harmless). */
.panel[menuitemname="serverstage-promo-addfunds"] {
    position: relative;
    border-color: rgba(34, 211, 238, 0.45);
    box-shadow: 0 6px 22px rgba(34, 211, 238, 0.18),
                0 4px 20px rgba(15, 23, 42, 0.06);
    overflow: hidden; /* keeps the ::before stripe inside the radius */
}
.panel[menuitemname="serverstage-promo-addfunds"]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
}

/* ---------- News / announcements ---------- */
.news-date,
.announcement-single .label-default {
    background: var(--ink) !important;
    color: var(--ink-on-dark) !important;
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    border: none;
}
.announcement-single .label-warning {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
    border-radius: 6px;
}

/* ---------- Buttons ---------- */
.btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--accent-ink) !important;
    border-radius: 10px;
    padding: 11px 26px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(34, 211, 238, 0.25);
    transition: transform 0.15s, box-shadow 0.2s, background-color 0.15s;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    color: var(--accent-ink) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(34, 211, 238, 0.35);
}

.btn-default {
    background: var(--surface);
    border-color: var(--rule);
    color: var(--ink);
    border-radius: 10px;
    font-weight: 500;
}
.btn-default:hover {
    background: var(--bg-page);
    border-color: var(--ink-soft);
    color: var(--ink);
}

/* ---------- Pagination + active list rows ---------- */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    background-color: var(--bg-dark) !important;
    border-color: var(--bg-dark) !important;
    color: var(--ink-on-dark) !important;
}
.pagination > li > a {
    color: var(--ink);
}
.pagination > li > a:hover {
    color: var(--accent-hover);
}

/* ---------- Footer ---------- */
footer,
.footer-bar {
    background: var(--bg-dark);
    color: var(--ink-on-dark-soft);
}
footer a,
.footer-bar a {
    color: var(--ink-on-dark);
}
footer a:hover,
.footer-bar a:hover {
    color: var(--brand-soft);
}

/* ---------- Misc small tweaks ---------- */
hr { border-top-color: var(--rule); }

/* Selection */
::selection {
    background: var(--accent);
    color: var(--accent-ink);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .brand-wordmark { font-size: 1.3rem; }
    .brand-mark { width: 36px; height: 36px; }
}
@media (max-width: 768px) {
    .input-group .form-control,
    .input-group .btn,
    .input-group-btn .btn {
        height: 50px;
    }
    .brand-wordmark { font-size: 1.15rem; }
    .brand-mark { width: 32px; height: 32px; }
}

/* ---------- Home intro band (between shortcuts and news) ---------- */
.home-intro {
    padding: 56px 0 48px;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
}
.home-intro .container { max-width: 880px; }

.home-intro .intro-slogan {
    font-family: 'Geist', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3.8vw, 2.4rem);
    letter-spacing: -0.025em;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 18px;
}
.home-intro .intro-slogan .accent {
    color: var(--accent-hover);
    font-style: italic;
    font-weight: 700;
}
.home-intro .intro-slogan .amp {
    color: var(--ink-soft);
    font-weight: 500;
    font-style: italic;        /* matches neighbors → removes italic-upright bearing mismatch entirely */
}
.home-intro .intro-lead {
    font-family: 'Geist', 'Inter', sans-serif;
    font-size: 1.05rem;
    color: var(--ink-soft);
    line-height: 1.65;
    max-width: 720px;
    margin: 0 auto;
}
.home-intro .intro-lead .lead-strong {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.015em;
}
.home-intro .intro-lead .lead-detail {
    font-size: 0.98rem;
    color: var(--ink-soft);
}
.home-intro .intro-bullets {
    list-style: none;
    padding: 0;
    margin: 22px auto 0;
    max-width: 600px;
    text-align: left;       /* parent has text-center; bullets need left-align inside */
    display: inline-block;  /* shrink-to-fit + still center via parent text-align */
}
.home-intro .intro-bullets li {
    position: relative;
    padding: 6px 0 6px 32px;
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 1.5;
}
.home-intro .intro-bullets li::before {
    content: "✓";
    position: absolute;
    left: 4px;
    top: 6px;
    color: var(--accent-hover);
    font-weight: 700;
    font-size: 1.1rem;
}

/* ---------- News section — bring everything into proportion with the rest of the page ---------- */
.home-news {
    padding: 40px 0 20px;
}
.home-news h2 {
    font-size: 1.4rem !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule);
}
/* Announcement entry titles (date label + linked title) */
.home-news .announcement-single h3,
.home-news h3 {
    font-size: 1.1rem !important;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.4;
    margin: 0 0 8px;
}
.home-news .announcement-single h3 a {
    color: var(--accent-hover);
}
.home-news .announcement-single h3 a:hover {
    color: var(--accent);
}
/* Announcement body — match intro-lead */
.home-news .announcement-single,
.home-news .announcement-single p,
.home-news blockquote,
.home-news blockquote p {
    font-size: 1.05rem !important;
    line-height: 1.65;
    color: var(--ink);
}
.home-news blockquote {
    border-left: 3px solid var(--rule);
    padding: 4px 16px;
    margin: 0 0 18px;
}
.home-news .announcement-single {
    margin-bottom: 22px;
}
/* Date label inline with title */
.home-news .label-default {
    font-size: 0.72rem !important;
    letter-spacing: 0.5px;
}
/* "Read More »" inline pill */
.home-news .label-warning {
    font-size: 0.72rem !important;
    padding: 3px 10px;
    margin-left: 4px;
    vertical-align: middle;
}

@media (max-width: 600px) {
    .home-intro { padding: 40px 0 32px; }
}

/* ---------- Contact page two-column ---------- */
.contact-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 14px;
}
.contact-row > [class^="col-"] { float: none; }   /* override Bootstrap 3 float */

.panel.contact-side {
    border: 1px solid var(--rule);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    margin-bottom: 18px;
}
.panel.contact-side .panel-heading {
    background: var(--bg-page);
    border-bottom: 1px solid var(--rule);
    border-radius: 12px 12px 0 0;
    padding: 14px 18px;
}
.panel.contact-side .panel-title {
    color: var(--ink);
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
    letter-spacing: -0.01em;
}
.panel.contact-side .panel-body {
    padding: 18px 20px;
    color: var(--ink);
    line-height: 1.6;
}
.panel.contact-impressum .panel-body p { color: var(--ink-soft); font-size: 0.92rem; }
.panel.contact-impressum .panel-body strong { color: var(--ink); }

@media (max-width: 991px) {
    .contact-row { display: block; }
    .contact-row .col-md-5 { margin-top: 28px; }
}


/* ============================================================
 * Home services strip — 6 promoted products with price + CTA.
 * Sits between the hero/intro and .home-news on the front page.
 * Section wrapper is intentionally chrome-less — the cards carry
 * the visual weight and the section blends into whatever sits
 * above/below it.
 * ============================================================ */
.home-services-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
}
.home-services-head h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin: 0 0 12px;
    letter-spacing: -0.025em;
    color: var(--ink);
}
.home-services-head .lead {
    color: var(--ink-soft);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* Equal-height cards via flexbox on the row container.
 * (Bootstrap 3 doesn't ship with flex grid, so opt in locally.) */
.service-grid {
    display: flex;
    flex-wrap: wrap;
}
.service-grid > [class^="col-"] {
    display: flex;            /* stretch the inner card to fill the column */
    margin-bottom: 24px;
}

.service-card {
    position: relative;
    background: var(--surface);
    border: 1px solid #cbd5e1;          /* slate-300 — bolder than --rule */
    border-radius: 12px;
    padding: 28px 24px 22px;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                0 4px 12px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;                   /* keeps the top stripe inside the radius */
}
.service-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
}
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06),
                0 18px 40px rgba(15, 23, 42, 0.12);
    border-color: rgba(34, 211, 238, 0.55);
}

.service-card .service-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(34, 211, 238, 0.12);
    color: var(--accent-hover);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.service-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
    color: var(--ink);
}
.service-card p {
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 18px;
    flex: 1;            /* pushes the price + CTA to the bottom edge */
}
.service-card .service-price {
    color: var(--ink-soft);
    font-size: 0.95rem;
    margin-bottom: 14px;
}
.service-card .service-price strong {
    color: var(--ink);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-right: 2px;
}
.service-card .service-price-unit {
    font-size: 0.85rem;
    color: var(--ink-soft);
}
.service-card .btn {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink) !important;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 7px;
    transition: background 0.15s, border-color 0.15s;
}
.service-card .btn:hover,
.service-card .btn:focus {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

@media (max-width: 767px) {
    .home-services-head { margin-bottom: 28px; }
}

/* ============================================================
 * Home trust strip — "Why ServerStage"
 * ============================================================ */
.home-trust {
    padding: 48px 0 40px;
}
.home-trust-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 36px;
}
.home-trust-head h2 {
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    margin: 0 0 10px;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.home-trust-head .lead {
    color: var(--ink-soft);
    font-size: 1rem;
    margin: 0;
}
.trust-grid {
    display: flex;
    flex-wrap: wrap;
}
.trust-grid > [class^="col-"] {
    display: flex;
    margin-bottom: 20px;
}
.trust-card {
    width: 100%;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.trust-card .trust-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(34, 211, 238, 0.12);
    color: var(--accent-hover);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.trust-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.trust-card p {
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

/* ============================================================
 * Home FAQ — accordion of common pre-sales questions
 * ============================================================ */
.home-faq {
    padding: 48px 0 56px;
}
.home-faq-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 28px;
}
.home-faq-head h2 {
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.home-faq-head .lead {
    color: var(--ink-soft);
    font-size: 1rem;
    margin: 0;
}

.faq-grid {
    max-width: 860px;
    margin: 0 auto;
}
.faq-item.panel {
    border: 1px solid var(--rule);
    border-radius: 8px !important;
    box-shadow: none;
    margin-bottom: 10px;
    overflow: hidden;
}
.faq-item .panel-heading {
    background: var(--surface);
    border: 0;
    padding: 0;
}
.faq-item .panel-title { font-size: 1rem; }
.faq-item .panel-title > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}
.faq-item .panel-title > a:hover,
.faq-item .panel-title > a:focus {
    background: rgba(34, 211, 238, 0.06);
    color: var(--ink);
}
.faq-item .faq-chev {
    color: var(--accent-hover);
    font-size: 0.85rem;
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.faq-item .panel-title > a[aria-expanded="true"] .faq-chev,
.faq-item .panel-title > a:not(.collapsed) .faq-chev {
    transform: rotate(90deg);
}
.faq-item .panel-collapse .panel-body {
    border-top: 1px solid var(--rule);
    padding: 16px 18px 18px;
    color: var(--ink-soft);
    font-size: 0.97rem;
    line-height: 1.6;
    background: var(--surface);
}

@media (max-width: 767px) {
    .home-trust { padding: 36px 0 28px; }
    .home-trust-head { margin-bottom: 24px; }
    .home-faq { padding: 36px 0 40px; }
}

/* ============================================================
 * Footer — multi-column with company info, links, payment methods.
 * Background matches the #home-banner hero gradient so the page
 * bookends visually.
 * ============================================================ */
#footer {
    /* Same gradient as #home-banner so the page top and bottom mirror */
    background: linear-gradient(135deg, #0a0f1c 0%, #1e293b 60%, #0f172a 100%);
    color: var(--ink-on-dark);
    /* Zero padding here so .footer-main + .footer-bottom each manage their
     * own padding cleanly, and the legal bar at the bottom touches the
     * actual bottom edge of the section. The page-level sticky-footer
     * behaviour (footer at viewport bottom on short pages) is handled by
     * the body flex column rules above — keep #footer itself a normal
     * block so it doesn't fight that layout. */
    padding: 0 !important;
    margin-top: 56px;
    position: relative;
}
#footer .back-to-top {
    position: absolute;
    top: -22px;
    right: 30px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s, background 0.15s;
    z-index: 2;
}
/* Reset the legacy all.min.css rule that pads + greys + box-rounds the
 * <i> chevron inside the button. The legacy selector (.back-to-top i)
 * carries no !important but lives in a stylesheet loaded earlier, and
 * something downstream is winning specificity — force the reset. */
#footer .back-to-top i {
    padding: 0 !important;
    background-color: transparent !important;
    color: inherit !important;
    border-radius: 0 !important;
    opacity: 1 !important;
}
#footer .back-to-top:hover {
    transform: translateY(-2px);
    background: var(--accent-hover);
    color: var(--accent-ink);
}

#footer .footer-main {
    padding: 48px 15px 32px;
}
#footer .footer-col {
    margin-bottom: 24px;
    color: var(--ink-on-dark-soft);
}
#footer .footer-heading {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    margin: 0 0 14px;
}

#footer .footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
#footer .footer-brand .brand-mark { width: 40px; height: 40px; line-height: 0; }
#footer .footer-brand .brand-mark svg {
    width: 100%; height: auto; display: block;
    /* No drop-shadow — the two-tone fill carries the mark on its own. */
}
/* Two-tone mark on the dark gradient: whitesmoke top, cyan bottom.
 * Both naturally readable on the dark background — no glow needed. */
#footer .footer-brand .brand-mark .ss-top { fill: whitesmoke; }
#footer .footer-brand .brand-mark .ss-bot { fill: var(--brand-light); }   /* #06b6d4 cyan-500 */

#footer .footer-brand .brand-wordmark {
    font-family: 'Geist', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.65rem;
    line-height: 1;
    letter-spacing: -0.025em;
}
/* Whole wordmark in whitesmoke — keeps the lockup uniformly readable
 * against the dark gradient; the cyan accent lives in the mark below. */
#footer .footer-brand .brand-wordmark .first,
#footer .footer-brand .brand-wordmark .second { color: whitesmoke; }

#footer .footer-address {
    font-style: normal;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink-on-dark-soft);
    margin-bottom: 14px;
}
#footer .footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.92rem;
}
#footer .footer-contact li { margin: 4px 0; color: var(--ink-on-dark-soft); }
#footer .footer-contact a {
    color: var(--brand-soft);
    text-decoration: none;
}
#footer .footer-contact a:hover { color: #fff; }

#footer .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.92rem;
}
#footer .footer-links li { margin: 6px 0; }
#footer .footer-links a {
    color: var(--ink-on-dark-soft);
    text-decoration: none;
    transition: color 0.12s;
}
#footer .footer-links a:hover { color: var(--brand-soft); }

#footer .footer-payments {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#footer .footer-payments li {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    gap: 2px;
}
#footer .payment-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
}
#footer .payment-pill i { font-size: 1.05rem; color: var(--brand-soft); }
#footer .footer-payments small {
    color: var(--ink-on-dark-soft);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}
#footer .footer-fineprint {
    font-size: 0.82rem;
    color: var(--ink-on-dark-soft);
    line-height: 1.5;
    margin: 12px 0 0;
}

#footer .footer-bottom {
    background: var(--bg-darker);
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
#footer .footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
#footer .footer-copy {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink-on-dark-soft);
}
#footer .footer-legal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 18px;
}
#footer .footer-legal a {
    color: var(--ink-on-dark-soft);
    font-size: 0.85rem;
    text-decoration: none;
}
#footer .footer-legal a:hover { color: var(--brand-soft); }

@media (max-width: 767px) {
    #footer .footer-main { padding: 36px 15px 20px; }
    #footer .footer-bottom .container {
        justify-content: center;
        text-align: center;
    }
    #footer .footer-legal { justify-content: center; }
}

/* ============================================================
 * Legal pages (Datenschutz, future Impressum/AGB if rendered as
 * Smarty rather than static PDF). Long-form text — readable
 * measure, generous spacing between sections.
 * ============================================================ */
.legal-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 16px 0 48px;
    color: var(--ink);
    line-height: 1.65;
}
.legal-page .legal-meta {
    color: var(--ink-soft);
    font-size: 0.9rem;
    margin: 0 0 8px;
}
.legal-page .legal-intro {
    font-size: 1.05rem;
    color: var(--ink-soft);
    margin-bottom: 28px;
}
.legal-page h2 {
    font-size: 1.35rem;
    margin: 36px 0 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.legal-page h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 24px; }
.legal-page h3 {
    font-size: 1.05rem;
    margin: 20px 0 8px;
}
.legal-page p { margin: 0 0 12px; }
.legal-page ul {
    margin: 4px 0 16px;
    padding-left: 22px;
}
.legal-page ul li { margin: 4px 0; }
.legal-page .legal-contact {
    background: var(--bg-subtle, #f6f8fa);
    border-left: 3px solid var(--brand-light);
    padding: 14px 18px;
    margin: 8px 0 18px;
    font-style: normal;
    line-height: 1.6;
    border-radius: 0 4px 4px 0;
}
.legal-page code {
    background: rgba(0, 0, 0, 0.04);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.92em;
}
.legal-page a { word-break: break-word; }

/* ============================================================
 * Store product listings (/store/<group>/) — restyle the default
 * WHMCS standard-cart product card. Actual rendered markup:
 *   <div class="row row-eq-height">
 *     <div class="col-md-6">
 *       <div class="product clearfix" id="productNN">
 *         <header><span id="...-name">Name</span></header>
 *         <div class="product-desc"><p>...</p><ul>...</ul></div>
 *         <footer>
 *           <div class="product-pricing"><span class="price">€X</span><br>Annually<br></div>
 *           <a class="btn btn-success btn-order-now">Order Now</a>
 *         </footer>
 *       </div>
 *     </div>
 *   </div>
 * ============================================================ */

/* Equal-height row — WHMCS already adds `.row-eq-height`; we just
 * activate it via flexbox so cards in the same row line up. */
.row-eq-height {
    display: flex;
    flex-wrap: wrap;
}
.row-eq-height > [class*="col-"] { display: flex; }
.row-eq-height > [class*="col-"] > .product { width: 100%; }

/* Defer background, border, border-radius, and bottom margin to
 * the underlying standard_cart all.min.css rules — only add our
 * own subtle shadow + hover transition on top. */
.product {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
    height: unset;
    padding-bottom: 0 !important;
}
.product:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--brand-light, #06b6d4);
}

/* Title row — WHMCS renders <header><span>Name</span></header>.
 * Keep only the bottom-border separator; defer padding, margin,
 * and background to the underlying standard_cart rules. */
.product > header {
    border-bottom: 1px solid var(--border, #f1f3f5);
}
.product > header span {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink, #0f172a);
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
}

/* Description block. Grows to push the footer to the bottom of the
 * card so all footers line up when cards are equal-height.
 * !important on padding/font-size/width to override standard_cart
 * /templates/orderforms/standard_cart/css/all.min.css which sets a
 * fixed width and tighter typography on .product-desc. */
.product .product-desc {
    padding: 16px 22px 20px !important;
    color: var(--ink-soft, #475569);
    font-size: 0.95rem !important;
    line-height: 1.6;
    flex: 1 1 auto;
    width: auto !important;
}
.product .product-desc > p:first-child {
    margin: 0 0 14px;
    color: var(--ink, #0f172a);
    font-size: 0.98rem;
}
.product .product-desc p { margin: 0 0 10px; }
.product .product-desc p:last-child { margin-bottom: 0; }
.product .product-desc ul {
    margin: 4px 0 0;
    padding-left: 20px;
    list-style: none;
}
.product .product-desc ul li {
    position: relative;
    margin: 6px 0;
    padding-left: 4px;
}
.product .product-desc ul li::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-light, #06b6d4);
}
/* WHMCS emits an empty <ul> after the description; hide it to avoid
 * dead vertical space. */
.product .product-desc ul:empty { display: none; }

/* Product-card lead glyph — opt-in class for the FA icon that
 * leads each product description. Brand-soft tint + slightly larger
 * so it reads as a small badge before the lead sentence. Apply by
 * adding `product-glyph` to the <i> tag in the WHMCS Product
 * Description field, e.g. <i class="fab fa-wordpress product-glyph"></i>.
 * Scoped to its own class so it doesn't tint .fa-cloud / .fa-wordpress
 * used elsewhere on the site (homepage service cards, footer, etc.). */
.product-glyph {
    font-size: x-large;
    margin-right: 0.3em;
    color: var(--brand-soft);
    vertical-align: -0.05em;
}

/* Footer = price block + Order button, side by side. Replaces the
 * dark slab in the default standard-cart skin. `width: auto` and
 * `margin-bottom: 0` to override the fixed width + trailing margin
 * standard_cart's all.min.css sets here. */
.product > footer {
    background: var(--bg-subtle, #f8fafc) !important;
    color: var(--ink, #0f172a) !important;
    border-top: 1px solid var(--border, #f1f3f5);
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    width: auto !important;
    margin: 0 !important;
}

/* Pricing block — the wrapper inherits any dark bg from all.min.css,
 * so force light. The `.price` span is the amount; the cycle text
 * ("Annually"/"Monthly") follows as a naked text node between <br>s. */
.product .product-pricing {
    background: transparent !important;
    color: var(--ink-soft, #64748b) !important;
    padding: 0 !important;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-align: left;
}
.product .product-pricing .price {
    background: transparent !important;
    color: var(--ink, #0f172a) !important;
    display: block;
    padding: 0 !important;
    margin: 0 0 2px;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
/* Collapse the <br>s WHMCS sprinkles between price and cycle text —
 * the .price{display:block} already forces a line break. */
.product .product-pricing br { display: none; }

/* Order Now button — WHMCS renders it as .btn.btn-success. Pick up
 * the brand accent (cyan) instead of Bootstrap green. */
.product .btn-order-now,
.product .btn.btn-success {
    background: var(--accent, #06b6d4) !important;
    border-color: var(--accent, #06b6d4) !important;
    color: var(--accent-ink, #07212d) !important;
    border-radius: 6px;
    font-weight: 600;
    padding: 9px 18px;
    font-size: 0.9rem;
}
.product .btn-order-now:hover,
.product .btn.btn-success:hover {
    background: var(--accent-hover, #0891b2) !important;
    border-color: var(--accent-hover, #0891b2) !important;
    color: var(--accent-ink, #07212d) !important;
}

@media (max-width: 767px) {
    .product > footer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .product .product-pricing { text-align: center; }
    .product .btn-order-now { width: 100%; }
}

/* ============================================================
 * Cart / Checkout (cart.php?a=view) — bring standard_cart's
 * legacy stylesheet (/templates/orderforms/standard_cart/css/
 * all.min.css) onto our slate + cyan palette. Several elements
 * ship with a saturated mid-blue (#0e5077 family) or rogue
 * greys that don't belong with the brand.
 * ============================================================ */

/* "Product/Options · Price/Cycle" column-header bar on the cart
 * line-item list. Repaint from saturated navy to slate so it
 * matches the brand palette. */
#order-standard_cart .view-cart-items-header {
    background: var(--ink) !important;
    color: #fff !important;
    border-radius: 6px 6px 0 0;
    padding: 12px 16px;
    font-weight: 600;
}

/* Order Summary panel — standard_cart paints the wrapper with a
 * #666 mid-grey background and a 3px grey bottom border. Repaint
 * as a clean white card with a subtle border + shadow so it reads
 * as a panel without dragging mid-grey into the palette. */
#order-standard_cart .order-summary {
    background-color: #fff !important;
    border: 1px solid var(--border, #e5e7eb) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Order Summary heading — demote to a plain section title; the
 * card now provides the visual frame. */
#order-standard_cart .order-summary h2 {
    background: transparent !important;
    color: var(--ink) !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-size: 1.35rem;
    line-height: 1.3;
}

/* "Empty Cart" button — was a saturated blue chunk visually
 * competing with Checkout. Demote to a low-key text link so the
 * cyan Checkout CTA is the only primary action on the page. */
#btnEmptyCart,
.empty-cart .btn-link {
    background: transparent !important;
    color: var(--ink-soft) !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
    text-decoration: none;
}
#btnEmptyCart:hover,
.empty-cart .btn-link:hover {
    color: var(--ink) !important;
    text-decoration: underline;
}

/* Edit / Remove links on cart line items — small inline actions,
 * pick up the cyan-accent link colour. */
.view-cart-items .item-title .btn-link,
.view-cart-items .btn-remove-from-cart {
    color: var(--accent-hover) !important;
}
.view-cart-items .item-title .btn-link:hover,
.view-cart-items .btn-remove-from-cart:hover {
    color: var(--accent) !important;
}

/* Domain name under "Domain Registration" — was rendering as a
 * blue link. It's actually a <span>, so demote to secondary text
 * (slate-soft) rather than implying it's clickable. */
.view-cart-items .item-domain {
    color: var(--ink-soft) !important;
    font-weight: 500;
}

/* Continue Shopping link under the Checkout button. */
#continueShopping,
.btn-continue-shopping {
    color: var(--accent-hover) !important;
}
#continueShopping:hover,
.btn-continue-shopping:hover {
    color: var(--accent) !important;
}

/* Promo Code / Estimate Taxes tab links. */
.view-cart-tabs .nav-link {
    color: var(--accent-hover);
}
.view-cart-tabs .nav-link.active {
    color: var(--ink) !important;
    font-weight: 600;
}

/* Checkout CTA — pin to our cyan regardless of what standard_cart
 * paints .btn-success as on this skin. */
.btn-checkout,
.btn.btn-success.btn-checkout {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--accent-ink) !important;
    border-radius: 6px;
    font-weight: 700;
}
.btn-checkout:hover,
.btn.btn-success.btn-checkout:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    color: var(--accent-ink) !important;
}

/* --------------------------------------------------------------------------
   Bootstrap display utilities (d-*) — restored 2026-06-16.
   ssg2026's all.min.css was built WITHOUT the Bootstrap display-utility group,
   so class="d-none" (and the responsive d-{bp}-none / -block pairs the WHMCS
   order form uses) had no effect. Symptom: on cart.php the checkout error box
   <div class="alert alert-danger checkout-error-feedback d-none"> and its
   <li class="vat-error d-none"> rendered as a red warning even with no error,
   because nothing defined .d-none. The full set (not just .d-none) is required:
   the cart uses pairs like "d-none d-sm-block", so without the -block variants
   those elements would be permanently hidden on desktop. Values + breakpoints
   match the stock `six` Bootstrap 4 build (sm576 / md768 / lg992 / xl1200).
   -------------------------------------------------------------------------- */
.d-none{display:none!important}
.d-inline{display:inline!important}
.d-inline-block{display:inline-block!important}
.d-block{display:block!important}
.d-table{display:table!important}
.d-table-row{display:table-row!important}
.d-table-cell{display:table-cell!important}
.d-flex{display:flex!important}
.d-inline-flex{display:inline-flex!important}
@media (min-width:576px){
  .d-sm-none{display:none!important}
  .d-sm-inline{display:inline!important}
  .d-sm-inline-block{display:inline-block!important}
  .d-sm-block{display:block!important}
  .d-sm-table{display:table!important}
  .d-sm-table-row{display:table-row!important}
  .d-sm-table-cell{display:table-cell!important}
  .d-sm-flex{display:flex!important}
  .d-sm-inline-flex{display:inline-flex!important}
}
@media (min-width:768px){
  .d-md-none{display:none!important}
  .d-md-inline{display:inline!important}
  .d-md-inline-block{display:inline-block!important}
  .d-md-block{display:block!important}
  .d-md-table{display:table!important}
  .d-md-table-row{display:table-row!important}
  .d-md-table-cell{display:table-cell!important}
  .d-md-flex{display:flex!important}
  .d-md-inline-flex{display:inline-flex!important}
}
@media (min-width:992px){
  .d-lg-none{display:none!important}
  .d-lg-inline{display:inline!important}
  .d-lg-inline-block{display:inline-block!important}
  .d-lg-block{display:block!important}
  .d-lg-table{display:table!important}
  .d-lg-table-row{display:table-row!important}
  .d-lg-table-cell{display:table-cell!important}
  .d-lg-flex{display:flex!important}
  .d-lg-inline-flex{display:inline-flex!important}
}
@media (min-width:1200px){
  .d-xl-none{display:none!important}
  .d-xl-inline{display:inline!important}
  .d-xl-inline-block{display:inline-block!important}
  .d-xl-block{display:block!important}
  .d-xl-table{display:table!important}
  .d-xl-table-row{display:table-row!important}
  .d-xl-table-cell{display:table-cell!important}
  .d-xl-flex{display:flex!important}
  .d-xl-inline-flex{display:inline-flex!important}
}
@media print{
  .d-print-none{display:none!important}
  .d-print-inline{display:inline!important}
  .d-print-inline-block{display:inline-block!important}
  .d-print-block{display:block!important}
  .d-print-table{display:table!important}
  .d-print-table-row{display:table-row!important}
  .d-print-table-cell{display:table-cell!important}
  .d-print-flex{display:flex!important}
  .d-print-inline-flex{display:inline-flex!important}
}