/* ============================================================================
   DRAGAN BLOCKER — MATRIX GREEN / DARK THEME  (override layer)
   ----------------------------------------------------------------------------
   This file loads AFTER assets/css/style.css and re-themes the whole site by
   overriding the design tokens defined in :root, plus targeted polish rules.
   No existing markup needs to change.

   Disable the CRT scanline/vignette overlay by setting --mx-scan: 0;
   Disable the animated rain by removing matrix-rain.js from the page.
   ========================================================================== */

:root {
    /* ---- Deep green-black surfaces ------------------------------------- */
    --bg-0: #030704;
    --bg-1: #06100a;
    --bg-2: #0a1810;
    --bg-3: #10241a;

    --border: #143524;
    --border-hi: #1f5c3a;

    /* ---- Text ----------------------------------------------------------- */
    --text-0: #e8fff1;
    --text-1: #a9d8bd;
    --text-2: #6da389;
    --text-3: #42664f;

    /* ---- Accent (emerald core, neon reserved for glows) ----------------- */
    --accent: #22c55e;
    --accent-hi: #4ade80;
    --accent-dim: #0b3b28;

    --green: #10b981;
    --green-dim: #064e3b;
    --red: #ef4444;
    --red-dim: #7f1d1d;
    --amber: #f59e0b;
    --purple: #14b8a6;                 /* teal keeps the palette coherent   */

    /* ---- Typography (same system stack as the original theme) ------------ */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
            "Helvetica Neue", Arial, sans-serif;

    /* ---- Matrix extras --------------------------------------------------- */
    --neon: #00ff41;
    --mx-glow: 0 0 0 1px rgba(0, 255, 65, .12), 0 0 26px rgba(0, 255, 65, .10);
    --mx-scan: .45;                    /* 0 disables the CRT overlay        */
    --mx-mono: ui-monospace, "JetBrains Mono", "Cascadia Mono", Consolas,
               "SF Mono", Menlo, monospace;
}

/* ============================================================================
   1. BASE — put the rain canvas behind the page
   ========================================================================== */

html {
    background: var(--bg-0);
}

body {
    background: transparent;              /* let the canvas show through     */
    color: var(--text-0);
    font-family: var(--font);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

#mx-rain {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: .30;
}

/* Cinematic CRT overlay: faint scanlines + neon top glow + vignette */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
    opacity: var(--mx-scan);
    background:
        repeating-linear-gradient(to bottom,
            rgba(0, 0, 0, .10) 0 1px, transparent 1px 3px),
        radial-gradient(120% 70% at 50% 0%,
            rgba(0, 255, 65, .05), transparent 60%),
        radial-gradient(105% 95% at 50% 100%,
            rgba(0, 0, 0, .55), transparent 55%);
}

/* ============================================================================
   2. TYPE, LINKS, SELECTION, SCROLLBAR
   ========================================================================== */

h1, h2, h3 {
    letter-spacing: -.02em;
    text-shadow: 0 0 24px rgba(0, 255, 65, .12);
}

.grad,
h1 .grad {
    background: linear-gradient(180deg, #eafff2 0%, #4ade80 55%, #10b981 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

a {
    color: var(--accent-hi);
    text-decoration: none;
}

a:hover {
    color: #eafff2;
    text-shadow: 0 0 12px rgba(0, 255, 65, .45);
}

::selection {
    background: rgba(0, 255, 65, .30);
    color: #eafff2;
}

::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1f5c3a, #10b981);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--neon); }

:focus-visible {
    outline: 2px solid var(--neon);
    outline-offset: 2px;
}

/* ============================================================================
   3. BUTTONS — replace the original hardcoded blue with matrix emerald
   ========================================================================== */

/* Base button geometry (mirrors the original stylesheet, so the theme also
   renders correctly if it ever loads before/without style.css) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--radius-sm, 9px);
    font-size: 14.5px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: .01em;
}

.btn svg {
    width: 17px;
    height: 17px;
}

.btn-block { width: 100%; }

.btn-primary {
    background: linear-gradient(180deg, #34d399, #059669);
    color: #04140e;
    border-color: rgba(0, 255, 65, .25);
    box-shadow: 0 0 0 1px rgba(0, 255, 65, .10), 0 6px 20px rgba(16, 185, 129, .28);
}

.btn-primary:hover {
    background: linear-gradient(180deg, #4ade80, #10b981);
    color: #04140e;
    box-shadow: 0 0 0 1px rgba(0, 255, 65, .30), 0 10px 30px rgba(0, 255, 65, .35);
}

.btn-ghost {
    background: var(--bg-2);
    border-color: var(--border-hi);
    color: var(--text-1);
}

.btn-ghost:hover {
    background: var(--bg-3);
    border-color: var(--accent);
    color: #eafff2;
    box-shadow: var(--mx-glow);
}

.btn-green {
    background: linear-gradient(180deg, #4ade80, #10b981);
    color: #04140e;
}

.btn-green:hover {
    color: #04140e;
    box-shadow: 0 0 22px rgba(0, 255, 65, .35);
}

.btn-red {
    background: var(--red-dim);
    color: #fecaca;
    border-color: #991b1b;
}

.btn-red:hover {
    background: #991b1b;
    color: #fff;
}

/* ============================================================================
   4. SURFACES — cards, panels, tables, forms readable over the rain
   ========================================================================== */

.card,
.panel,
.auth-card,
.stat-card,
.table-wrap,
[class*="-card"] {
    background: linear-gradient(180deg,
        rgba(10, 24, 16, .94), rgba(6, 16, 10, .94)) !important;
    border-color: var(--border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02),
                0 18px 40px rgba(0, 0, 0, .45);
}

.card:hover,
.panel:hover,
.stat-card:hover {
    border-color: var(--border-hi) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02),
                0 18px 40px rgba(0, 0, 0, .45),
                var(--mx-glow);
}

table {
    background: transparent;
}

th {
    color: var(--text-2) !important;
    border-bottom-color: var(--border) !important;
    font-family: var(--mx-mono);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

td {
    border-bottom-color: var(--border) !important;
}

tbody tr:hover td {
    background: rgba(0, 255, 65, .045) !important;
}

input,
select,
textarea {
    background: rgba(3, 10, 6, .92) !important;
    border-color: var(--border-hi) !important;
    color: var(--text-0) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .18),
                0 0 22px rgba(0, 255, 65, .12) !important;
    outline: none;
}

::placeholder {
    color: var(--text-3);
}

/* ============================================================================
   5. CHROME — sticky header/nav glass, code accents, status pills
   ========================================================================== */

.site-header,
.navbar,
.main-header,
.topbar {
    background: rgba(3, 7, 4, .72) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    border-bottom-color: var(--border) !important;
}

.nav-links a:hover {
    color: var(--neon);
    background: var(--bg-2);
}

code,
pre,
kbd,
.mono {
    font-family: var(--mx-mono);
}

[class*="badge"],
[class*="pill"],
[class*="tag"] {
    border-color: var(--border-hi);
}

/* Hero: let the matrix rain breathe behind the headline.
   Note: .hero::before / .hero-grid keep their geometry but switch to green */
.hero,
.hero-content {
    background: transparent !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .75);
}

.hero::before {
    background:
        radial-gradient(ellipse 700px 450px at 50% -10%, rgba(0, 255, 65, .10), transparent 65%),
        radial-gradient(ellipse 500px 400px at 85% 20%, rgba(16, 185, 129, .08), transparent 60%);
}

.hero-grid {
    background-image:
        linear-gradient(rgba(31, 92, 58, .5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 92, 58, .5) 1px, transparent 1px);
}

/* Hero headline gradient: emerald instead of blue→pink.
   Same specificity as style.css (".hero h1 .grad") and loaded after it. */
.hero h1 .grad,
.grad {
    background: linear-gradient(120deg, #eafff2 0%, #4ade80 45%, #10b981 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================================================
   6. LOGO
   ========================================================================== */

.mx-logo {
    display: inline-block;
    height: 38px;
    width: auto;
    border-radius: 9px;
    object-fit: contain;
    vertical-align: middle;
    background: #04140e;
    box-shadow: 0 0 0 1px rgba(0, 255, 65, .22), 0 0 22px rgba(0, 255, 65, .20);
}

a.mx-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.mx-hero-logo {
    max-width: min(560px, 86vw);
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 0 0 1px rgba(0, 255, 65, .25),
                0 0 60px rgba(0, 255, 65, .18),
                0 30px 70px rgba(0, 0, 0, .6);
}

/* Footer wordmark inherits the neon treatment */
footer,
.site-footer {
    border-top-color: var(--border) !important;
}

/* ============================================================================
   7. PAGE-SPECIFIC POLISH — matched to the real Dragan Blocker markup
   ========================================================================== */

/* Hero banner logo: centred block above the headline */
.mx-hero-logo {
    display: block;
    margin: 0 auto 30px;
}

/* Feature icon tints: keep the whole palette green/teal */
.card-icon.blue {
    background: rgba(20, 184, 166, .12);
    border-color: rgba(20, 184, 166, .32);
    color: #2dd4bf;
}

.card-icon.purple {
    background: rgba(16, 185, 129, .12);
    border-color: rgba(16, 185, 129, .32);
    color: #34d399;
}

.badge-blue {
    background: rgba(20, 184, 166, .14);
    color: #5eead4;
}

.alert-info {
    background: rgba(20, 184, 166, .10);
    border-color: rgba(20, 184, 166, .30);
    color: #99f6e4;
}

/* Auth pages: green glow instead of blue */
.auth-wrap {
    background: radial-gradient(ellipse 600px 400px at 50% 0%,
        rgba(0, 255, 65, .07), transparent 60%);
}

/* Pricing: emerald glow on the featured card */
.price-card.featured {
    box-shadow: 0 0 0 1px var(--accent), 0 22px 60px -18px rgba(16, 185, 129, .45);
}

.price-badge {
    box-shadow: 0 5px 16px rgba(16, 185, 129, .45);
}

/* Dashboard: sidebar + country picker accents */
.side-nav a.active {
    background: rgba(0, 255, 65, .10);
    color: var(--accent-hi);
}

.country-item.checked {
    background: rgba(0, 255, 65, .10);
    border-color: rgba(0, 255, 65, .35);
}

/* Data tables: green hover row */
table.data tbody tr:hover {
    background: rgba(0, 255, 65, .05) !important;
}

@media (prefers-reduced-motion: reduce) {
    body::after { animation: none; }
}