/* Outlets Live — "Midnight Bazaar" dark theme
   Override layer: load it AFTER style.css, INSTEAD OF theme-vibrant.css (both define the
   same token names, so use one at a time). style.css is not edited.
   Rollback = delete the <link> to this file.

   In landing-page.php:
     1. Fonts: the same link as theme-vibrant, so switching themes never touches it again:
        <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Figtree:wght@400;500;600;700&display=swap" rel="stylesheet">
     2. Add, right after the style.css <link>:
        <link rel="stylesheet" href="<?php echo $assets; ?>theme-midnight.css">

   Idea: a deep aubergine-black page where the colour comes from light, not paint —
   glows lighting cards from a corner, coloured rims, marigold as the one "buy" colour.
   Accents are the brighter siblings of the light theme's palette so they hold up on dark. */

/* ─── Tokens ─── */
:root {
    color-scheme: dark;
    --pAs: #FF4D9D;   /* pink   */
    --sAs: #9B7BFF;   /* violet */
    --tAs: #2DD4BF;   /* teal   */
    --wAs: #FFC23D;   /* marigold: the buy colour */
    --oAs: #FF7A59;   /* coral  */
    --kAs: #5AA9FF;   /* sky    */
    --ink: #1A1030;   /* text on marigold / bright fills */
    --bg: #0E0B1F;
    --bg2: #120E2C;
    --bxBg: #151030;
    --bxBdrC: #2A2350;
    --bxSw: 0 20px 50px -30px rgba(0, 0, 0, .9);
    --hd: #F6F3FF;    /* headings */
    --tx: #C4BEE8;    /* body text */
    --tx2: #9992C7;   /* muted text (6.7:1 on --bg) */
    --g1: #9B7BFF;
    --g2: #FF4D9D;
    --g3: #FFC23D;
    --gMain: linear-gradient(120deg, var(--g1), var(--g2) 55%, var(--g3));
    --gBuy: linear-gradient(135deg, #FFC23D, #FF9F1C);
    --fHd: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --fBd: 'Figtree', 'Segoe UI', system-ui, sans-serif;
}

/* ─── Base & type ─── */
html { background: var(--bg); }
body { font-family: var(--fBd); color: var(--tx); background: var(--bg); }
::selection { background: var(--pAs); color: #fff; }
h1, h2, h3, h4, .logo, .stat-num, .step-num, .price-amount, .perf-score {
    font-family: var(--fHd);
    letter-spacing: -.02em;
}
h1, h2, h3, h4 { color: var(--hd); }
/* style.css hard-codes these to slate at class specificity, so the element rule above can't reach them. */
.section-header h2, .feature-card h3, .logo { color: var(--hd); }
.faq-item p { color: var(--tx2); }
.cta-box h2 { color: #fff; }
.gradient-text { background-image: linear-gradient(100deg, #FFC23D, #FF4D9D 55%, #9B7BFF); }
.section-alt { background: var(--bg2); }
.section-header p, .col-text p { color: var(--tx2); }

/* Each section hands its colour to its badge (and to any card that doesn't set its own). */
#features { --cAs: var(--pAs); }
#details { --cAs: var(--sAs); }
#how-it-works { --cAs: var(--tAs); }
.col-text { --cAs: var(--kAs); }
#app { --cAs: var(--oAs); }
#pricing { --cAs: var(--pAs); }
#faq { --cAs: var(--sAs); }

.section-badge {
    background: rgba(155, 123, 255, .14);
    border: 1px solid rgba(155, 123, 255, .35);
    color: #C9B8FF;
    background: color-mix(in srgb, var(--cAs, var(--pAs)) 16%, transparent);
    border-color: color-mix(in srgb, var(--cAs, var(--pAs)) 42%, transparent);
    color: var(--cAs, var(--pAs));
}

/* ─── Buttons: marigold is the only "buy" colour ─── */
.btn, .btn-lg { border-radius: 999px; }
.btn-primary, .btn-white {
    background: var(--gBuy); color: var(--ink);
    box-shadow: 0 0 0 1px rgba(255, 194, 61, .5), 0 10px 30px -8px rgba(255, 194, 61, .55);
}
.btn-primary:hover, .btn-white:hover {
    box-shadow: 0 0 0 1px rgba(255, 194, 61, .8), 0 14px 38px -8px rgba(255, 194, 61, .75);
}
.btn-outline { border-color: rgba(255, 255, 255, .26); color: var(--hd); }
.btn-outline:hover { border-color: var(--wAs); color: var(--wAs); background: rgba(255, 194, 61, .08); }
.btn-ghost { color: var(--hd); }
.btn-ghost:hover { color: var(--wAs); }

/* ─── Navigation ─── */
.logo-icon { color: var(--wAs); }
.nav-links a { color: var(--tx); }
.nav-links a:hover { color: var(--wAs); }
.nav.scrolled { background: rgba(11, 8, 32, .82); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.nav::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--gMain); opacity: 0; transition: opacity .3s ease;
}
.nav.scrolled::after { opacity: .9; }
.nav-toggle span { background: var(--hd); }
.nav-links.active {
    background: var(--bxBg);
    border-bottom: 1px solid var(--bxBdrC);
    box-shadow: 0 24px 40px rgba(0, 0, 0, .55);
}

/* ─── Hero: aurora over a faint dot grid ─── */
.hero {
    background:
        radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 28px 28px,
        radial-gradient(45% 60% at 12% 8%, rgba(155, 123, 255, .40), transparent),
        radial-gradient(40% 55% at 92% 28%, rgba(255, 77, 157, .30), transparent),
        radial-gradient(45% 55% at 68% 100%, rgba(45, 212, 191, .24), transparent),
        #0B0820;
}
.hero h1 { color: #fff; letter-spacing: -.03em; }
.hero-sub { color: var(--tx); }
.hero .badge { background: rgba(255, 194, 61, .12); border: 1px solid rgba(255, 194, 61, .38); color: #FFD777; }
.trust-item { color: var(--tx); }
/* banner1.webp has a bright lavender backdrop; ease it down so it lights the hero, not glares. */
.hero-banner {
    filter: brightness(.93);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 90px -30px rgba(155, 123, 255, .6);
}

/* ─── Stats ─── */
.stats-bar { background: #0F0B26; border-color: #211A44; }
.stat-num { font-size: 40px; text-shadow: 0 0 28px rgba(255, 255, 255, .14); }
.stat-item:nth-child(1) .stat-num { color: var(--pAs); }
.stat-item:nth-child(2) .stat-num { color: var(--sAs); }
.stat-item:nth-child(3) .stat-num { color: var(--tAs); }
.stat-item:nth-child(4) .stat-num { color: var(--wAs); }
.stat-label { color: var(--tx2); }

/* ─── Feature + detail cards: each one lit from a corner in the next colour ─── */
:is(.feature-card, .detail-card):nth-child(6n+1) { --cAs: var(--pAs); }
:is(.feature-card, .detail-card):nth-child(6n+2) { --cAs: var(--sAs); }
:is(.feature-card, .detail-card):nth-child(6n+3) { --cAs: var(--tAs); }
:is(.feature-card, .detail-card):nth-child(6n+4) { --cAs: var(--wAs); }
:is(.feature-card, .detail-card):nth-child(6n+5) { --cAs: var(--oAs); }
:is(.feature-card, .detail-card):nth-child(6n+6) { --cAs: var(--kAs); }

.feature-card {
    background: var(--bxBg);
    background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--cAs) 20%, transparent), transparent 65%), var(--bxBg);
    border: 1px solid var(--bxBdrC);
    border-radius: 18px;
    box-shadow: var(--bxSw);
}
.feature-card:hover {
    border-color: #4A3F92;
    border-color: color-mix(in srgb, var(--cAs) 60%, transparent);
    box-shadow: 0 24px 50px -26px var(--cAs);
}
.feature-icon {
    display: grid; place-items: center;
    width: 56px; height: 56px; border-radius: 16px;
    background: #241C4F;
    border: 1px solid #3A3070;
    background: color-mix(in srgb, var(--cAs) 20%, var(--bxBg));
    border-color: color-mix(in srgb, var(--cAs) 45%, transparent);
    font-size: 28px;
}
.feature-card p, .detail-card p { color: var(--tx2); }
.detail-card {
    background: var(--bxBg);
    border: 1px solid var(--bxBdrC);
    border-left: 3px solid var(--cAs);
    border-radius: 12px;
}

/* ─── Steps: a real sequence, so haloed numbers are earned ─── */
.step-card:nth-child(3n+1) { --cAs: var(--pAs); }
.step-card:nth-child(3n+2) { --cAs: var(--sAs); }
.step-card:nth-child(3n+3) { --cAs: var(--tAs); }
.step-card { background: var(--bxBg); border: 1px solid var(--bxBdrC); border-radius: 22px; }
.step-card p { color: var(--tx2); }
.step-num {
    background: var(--cAs); color: var(--ink);
    box-shadow: 0 0 0 7px rgba(155, 123, 255, .16), 0 12px 30px -6px var(--cAs);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--cAs) 18%, transparent), 0 12px 30px -6px var(--cAs);
}

/* ─── Infrastructure ─── */
.check-list li { color: var(--tx); }
.col-visual {
    padding: 40px; border-radius: 32px;
    border: 1px solid #241D4A;
    background:
        radial-gradient(60% 60% at 0% 0%, rgba(155, 123, 255, .28), transparent),
        radial-gradient(60% 60% at 100% 100%, rgba(45, 212, 191, .22), transparent),
        radial-gradient(50% 50% at 100% 0%, rgba(255, 77, 157, .18), transparent),
        #100C28;
}
.perf-card { background: var(--bxBg); border-color: var(--bxBdrC); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8); }
.perf-score { color: var(--hd); }
.perf-label { color: var(--tx2); }
.perf-item { color: var(--tx); }
.perf-ring circle:first-of-type { stroke: #2A2350; }
#grad stop:first-child { stop-color: var(--tAs); }
#grad stop:last-child { stop-color: var(--sAs); }

/* ─── Android app ─── */
.app-section { background: linear-gradient(160deg, #150F35 0%, var(--bg) 70%); }
.app-lead, .app-points li { color: var(--tx); }
.app-lead strong, .app-points strong { color: var(--hd); }
.app-points li::before { background: rgba(45, 212, 191, .16); color: var(--tAs); }
.app-fine { color: var(--tx2); }
/* A pool of light behind the phone. */
.app-visual::before {
    content: ''; position: absolute; inset: 6% 0; z-index: 0; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 77, 157, .38), rgba(155, 123, 255, .18) 60%, transparent);
    filter: blur(28px);
}
.phone { z-index: 1; background: #050312; box-shadow: 0 0 0 1px #3A3070, 0 40px 90px -20px rgba(155, 123, 255, .55); }
.phone-notch { background: #050312; }
.app-icon-float { z-index: 2; }
.app-icon { background: var(--gBuy); color: var(--ink); box-shadow: 0 6px 16px -4px rgba(255, 159, 28, .7); }

/* ─── Admin app band ─── */
.admin-app-band { background: linear-gradient(135deg, #171235 0%, #1D1548 100%); border-color: #2E2660; }
.aa-icon { background: linear-gradient(135deg, var(--tAs), var(--sAs)); color: var(--ink); box-shadow: 0 8px 22px -6px rgba(45, 212, 191, .55); }
.aa-tier { background: rgba(255, 255, 255, .08); color: var(--tAs); }
.aa-copy > p, .aa-points li { color: var(--tx2); }
.aa-points strong { color: var(--hd); }
.ph-dot { background: linear-gradient(135deg, var(--sAs), var(--pAs)); }
.ph-alert { border-left-color: var(--pAs); }

/* ─── Pricing ─── */
#pricing {
    background:
        radial-gradient(60% 40% at 50% 0%, rgba(255, 77, 157, .22), transparent 70%),
        radial-gradient(40% 40% at 100% 100%, rgba(45, 212, 191, .16), transparent),
        var(--bg);
}
.price-card:nth-child(1) { --cAs: var(--tAs); }
.price-card:nth-child(2) { --cAs: var(--sAs); }
.price-card:nth-child(3) { --cAs: var(--pAs); }
.price-card:nth-child(4) { --cAs: var(--wAs); }
.price-card:nth-child(5) { --cAs: var(--sAs); }
.price-card {
    background: var(--bxBg);
    background: linear-gradient(180deg, color-mix(in srgb, var(--cAs) 16%, var(--bxBg)) 0%, var(--bxBg) 55%);
    border: 1px solid var(--bxBdrC);
    border-top-color: #4A3F92;
    border-top-color: color-mix(in srgb, var(--cAs) 65%, var(--bxBdrC));
    border-radius: 22px;
    box-shadow: var(--bxSw);
}
.price-tier { color: var(--cAs); }
.price-amount { color: #fff; }
.period, .price-was s { color: var(--tx2); }
.price-off { background: rgba(74, 222, 128, .16); color: #4ADE80; }
.price-desc { color: var(--tx2); }
.price-features li { color: var(--tx); border-bottom-color: rgba(255, 255, 255, .07); }
.price-features li::before { color: var(--cAs); }

/* Most Popular: gradient rim and a pink halo. (.price-card.popular already lifts it 4%.) */
.price-card.popular {
    border: 2px solid transparent;
    background: linear-gradient(#171236, #171236) padding-box, var(--gMain) border-box;
    box-shadow: 0 0 70px -14px rgba(255, 77, 157, .55), var(--bxSw);
}
.popular-badge { background: linear-gradient(120deg, #FFC23D, #FF4D9D); color: var(--ink); }

/* Compound selector on purpose: style.css declares .price-card-custom BEFORE .price-card,
   so its dashed border and tint lose the cascade there. */
.price-card.price-card-custom { border: 2px dashed #4A3F92; background: transparent; box-shadow: none; }
.price-amount-custom { color: #C9B8FF; }

.price-card .btn { background: transparent; border: 2px solid var(--cAs); color: var(--cAs); box-shadow: none; }
.price-card .btn:hover {
    background: var(--cAs); border-color: var(--cAs); color: var(--ink);
    transform: translateY(-2px); box-shadow: 0 12px 26px -10px var(--cAs);
}
.price-card.popular .btn { background: linear-gradient(120deg, #FFC23D, #FF4D9D); border-color: transparent; color: var(--ink); }
.price-card.popular .btn:hover { border-color: transparent; }
.pricing-compare a { color: var(--wAs); }

/* ─── Ecommerce plans: teal leads, the nearest palette colour to WhatsApp green ─── */
#ecom-plans {
    --cAs: var(--tAs);
    background:
        radial-gradient(55% 45% at 50% 0%, rgba(45, 212, 191, .18), transparent 70%),
        radial-gradient(40% 40% at 0% 100%, rgba(155, 123, 255, .14), transparent),
        var(--bg);
}
/* Ministore: coral, so the separate product does not read as a third Ecom plan. */
#ministore {
    --cAs: var(--oAs);
    background:
        radial-gradient(50% 45% at 50% 0%, rgba(255, 122, 89, .16), transparent 70%),
        var(--bg2);
}
#ministore .price-card { --cAs: var(--oAs); }

/* The cards are .price-card, so they take the pricing colours above; only the link and the table need styling here. */
.ep-toggle { color: var(--wAs); }
.ep-first { color: var(--tx2); }
.ep-setup { background: var(--bxBg); border-color: var(--bxBdrC); box-shadow: var(--bxSw); }
.ep-setup li { color: var(--tx2); }
.ep-setup li::before { color: var(--tAs); }
.ep-first strong { color: var(--hd); }
.ep-cmp-box { background: var(--bxBg); border-color: var(--bxBdrC); box-shadow: var(--bxSw); }
.ep-cmp thead th { font-family: var(--fHd); color: var(--hd); border-bottom-color: var(--bxBdrC); }
.ep-cmp thead .ep-hl { color: var(--wAs); }
.ep-cmp .ep-grp th { background: rgba(45, 212, 191, .12); color: var(--tAs); }
.ep-cmp tbody th[scope="row"], .ep-cmp tbody td { border-bottom-color: var(--bxBdrC); }
.ep-cmp tbody th[scope="row"] { color: var(--hd); }
.ep-cmp tbody td { color: var(--tx); }
.ep-cmp .ep-diff > * { background: rgba(255, 194, 61, .08); }
.ep-yes { color: var(--tAs); }
.ep-no { color: #4B4470; }
.ep-val { color: var(--hd); }

/* ─── FAQ ─── */
.faq-item:nth-child(3n+1) { --cAs: var(--pAs); }
.faq-item:nth-child(3n+2) { --cAs: var(--sAs); }
.faq-item:nth-child(3n+3) { --cAs: var(--tAs); }
.faq-item {
    background: var(--bxBg);
    border: 1px solid var(--bxBdrC);
    border-left: 4px solid var(--cAs);
    border-radius: 14px;
}
.faq-item summary { color: var(--hd); }
.faq-item summary::after { color: var(--cAs); }
.faq-item[open] { background: #191338; background: color-mix(in srgb, var(--cAs) 8%, var(--bxBg)); }

/* ─── Closing CTA ─── */
.cta-box {
    background:
        radial-gradient(50% 90% at 100% 100%, rgba(255, 194, 61, .5), transparent),
        radial-gradient(50% 90% at 0% 0%, rgba(45, 212, 191, .3), transparent),
        linear-gradient(120deg, #5B21B6, #C2006A);
    box-shadow: 0 40px 90px -40px rgba(255, 77, 157, .6);
}

/* ─── Footer ─── */
.footer {
    background: #080618;
    border-top: 3px solid transparent;
    border-image: var(--gMain) 1;
}
.footer .logo { color: #fff; }
.footer-brand p { color: var(--tx2); }
.footer-col h4 { color: var(--wAs); }
.footer-col a { color: var(--tx); }
.footer-col a:hover { color: var(--wAs); }
.footer-bottom { border-top-color: rgba(255, 255, 255, .1); color: var(--tx2); }

/* ─── Quality floor ─── */
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 3px solid var(--wAs);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .btn, .feature-card, .nav::after { transition: none; }
}
@media (max-width: 768px) {
    .col-visual { padding: 24px; border-radius: 24px; }
    .stat-num { font-size: 34px; }
}