/* ============================================================
   Botly Marketing Design System
   ============================================================
   Loaded by app/templates/layouts/marketing.html. Provides the
   dark/glass aesthetic used on /, /ninjatrader, /brokers, /auth/*,
   and other public-facing pages. Only loaded for pages that
   extend layouts/marketing.html — does NOT affect the authenticated
   app UI.

   Source of truth was originally an inline <style> block in
   app/templates/index.html. Extracted here so other public pages
   can share the same visual language. See GitHub issue #2.
   ============================================================ */

/* ── Page chrome (body, nav, footer) ────────────────────── */

body {
    background-color: #060b14;
}

.landing-bg {
    background-color: #060b14;
    background-image:
        linear-gradient(rgba(99, 102, 241, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, .06) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* Logo always white on marketing pages */
nav img[src*="botly-logo"] {
    filter: brightness(0) invert(1) !important;
}

/* Dark navbar */
nav {
    background-color: rgba(8, 13, 24, 0.97) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    margin-bottom: 20px !important;
    overflow: visible !important;
}

nav > div,
nav > div > div {
    overflow: visible !important;
}

/* Public nav links (slate, lighten on hover) */
nav a[href="/ninjatrader"],
nav a[href="/brokers"] {
    color: rgba(148, 163, 184, .75) !important;
    transition: color .2s;
}

nav a[href="/ninjatrader"]:hover,
nav a[href="/brokers"]:hover {
    color: #e2e8f0 !important;
}

/* Login link */
nav a[href="/auth/login"] {
    color: rgba(148, 163, 184, .85) !important;
    transition: color .2s;
}

nav a[href="/auth/login"]:hover {
    color: #fff !important;
}

/* Sign Up button — matches hero orange */
nav a[href="/auth/register"] {
    background: linear-gradient(135deg, #f59e0b, #f97316) !important;
    color: #fff !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 20px rgba(249, 115, 22, .4) !important;
    transition: box-shadow .25s, transform .2s !important;
}

nav a[href="/auth/register"]:hover {
    box-shadow: 0 0 32px rgba(249, 115, 22, .65) !important;
    transform: translateY(-1px) !important;
}

/* Footer — match panel dark gray */
footer {
    background-color: #0c1220 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(148, 163, 184, 0.75) !important;
}

footer a {
    color: rgba(148, 163, 184, 0.75);
    transition: color .2s;
}

footer a:hover {
    color: #60a5fa !important;
}

footer .text-gray-500 {
    color: rgba(100, 116, 139, 0.7) !important;
}

/* ── Typography ─────────────────────────────────────────── */

/* Gradient heading — violet → cyan → mint */
.grad-text {
    background: linear-gradient(135deg, #a78bfa 0%, #38bdf8 50%, #34d399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Price accent colors */
.price-orange {
    color: #fb923c;
}

.price-violet {
    color: #a78bfa;
}

/* Section divider — thin glow line */
.glow-line {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(139, 92, 246, .4),
        rgba(56, 189, 248, .4),
        transparent
    );
}

/* ── Cards ──────────────────────────────────────────────── */

/* Glassmorphic card */
.glass {
    background: rgba(255, 255, 255, .03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .08);
}

.glass:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(139, 92, 246, .4);
    box-shadow: 0 0 30px rgba(139, 92, 246, .15);
}

/* Featured card — orange glow */
.card-featured {
    background: rgba(249, 115, 22, .05);
    border: 1px solid rgba(249, 115, 22, .35);
    box-shadow:
        0 0 40px rgba(249, 115, 22, .12),
        inset 0 0 40px rgba(249, 115, 22, .03);
}

/* ── Buttons ────────────────────────────────────────────── */

/* Primary CTA — orange glow */
.btn-hero {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    box-shadow:
        0 0 32px rgba(249, 115, 22, .5),
        0 4px 15px rgba(0, 0, 0, .4);
    transition: box-shadow .3s ease, transform .2s ease;
}

.btn-hero:hover {
    box-shadow:
        0 0 48px rgba(249, 115, 22, .7),
        0 4px 20px rgba(0, 0, 0, .5);
    transform: translateY(-2px) scale(1.03);
}

/* Outline CTA — violet */
.btn-outline-hero {
    border: 1px solid rgba(139, 92, 246, .5);
    color: #a78bfa;
    transition: background .3s, box-shadow .3s, transform .2s;
}

.btn-outline-hero:hover {
    background: rgba(139, 92, 246, .15);
    box-shadow: 0 0 24px rgba(139, 92, 246, .3);
    transform: translateY(-2px);
}

/* Broker CTA — blue/indigo */
.btn-broker {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    box-shadow: 0 0 24px rgba(99, 102, 241, .35);
    transition: box-shadow .3s, transform .2s;
}

.btn-broker:hover {
    box-shadow: 0 0 36px rgba(99, 102, 241, .55);
    transform: translateY(-2px);
}

/* ── Misc ───────────────────────────────────────────────── */

/* Icon circle — used in feature cards */
.icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Toggle pill — used in pricing monthly/yearly switch */
.toggle-pill {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
}

.toggle-pill button {
    transition: background .25s, color .25s;
}

.toggle-active {
    background: rgba(139, 92, 246, .8) !important;
    color: #fff !important;
}

/* Checkmark accent colors */
.check-orange {
    color: #f97316;
}

.check-green {
    color: #34d399;
}

/* Limited-time badge — fire gradient */
.badge-fire {
    background: linear-gradient(135deg, #f97316, #dc2626);
    box-shadow: 0 4px 16px rgba(249, 115, 22, .45);
}

/* ── Form controls (dark theme) ─────────────────────────
   Used by auth/* pages (login, register, forgot/reset password,
   resend verification) and any other form-driven public page. */

.input-dark {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #e2e8f0;
    transition: background .2s, border-color .2s, box-shadow .2s;
}

.input-dark::placeholder {
    color: rgba(148, 163, 184, .5);
}

.input-dark:focus {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(167, 139, 250, .6);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, .15);
    outline: none;
}

.input-dark:autofill,
.input-dark:-webkit-autofill {
    /* Stop the browser from forcing a white background on autofilled inputs */
    -webkit-box-shadow: 0 0 0 1000px rgba(15, 23, 42, .98) inset !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}

.label-dark {
    color: rgba(226, 232, 240, .9);
}

.checkbox-violet {
    background-color: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .25);
    color: #a78bfa;
    /* color: is what Tailwind's text-violet-400 would set; carries through
       as the checkmark fill when the checkbox is checked. */
}

.checkbox-violet:focus {
    box-shadow: 0 0 0 3px rgba(167, 139, 250, .25);
    outline: none;
}

.link-violet {
    color: #a78bfa;
    transition: color .2s;
}

.link-violet:hover {
    color: #c4b5fd;
}

.help-text-dark {
    color: rgba(148, 163, 184, .75);
}

/* Alert variants for dark backgrounds */
.alert-error-dark {
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .25);
    color: #fca5a5;
    border-radius: .5rem;
    padding: .75rem 1rem;
}

.alert-success-dark {
    background: rgba(52, 211, 153, .08);
    border: 1px solid rgba(52, 211, 153, .25);
    color: #6ee7b7;
    border-radius: .5rem;
    padding: .75rem 1rem;
}