/* ==========================================================================
   TAPZI DARK — Premium dark skin with lime accent
   Loaded last: overrides the compiled Tailwind + template styles globally
   ========================================================================== */

:root {
    --td-bg: #0a0a0a;
    --td-bg-2: #0f0f0f;
    --td-surface: #141414;
    --td-surface-2: #1a1a1a;
    --td-border: #262626;
    --td-border-2: #333333;
    --td-text: #f5f5f4;
    --td-text-2: #d4d4d8;
    --td-muted: #a1a1aa;
    --td-muted-2: #71717a;
    --td-lime: #a3e635;
    --td-lime-2: #84cc16;
    --td-lime-dim: rgba(163, 230, 53, 0.12);
    --td-lime-glow: rgba(163, 230, 53, 0.35);
}

/* ---------- Fonts ---------- */
body,
.font-body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.font-heading {
    font-family: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
    letter-spacing: -0.02em;
}

/* ---------- Base ---------- */
html { background: var(--td-bg); }

body,
.bg-body {
    background-color: var(--td-bg) !important;
    color: var(--td-text) !important;
}

::selection { background: var(--td-lime); color: #0a0a0a; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--td-bg); }
::-webkit-scrollbar-thumb { background: #2e2e2e; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #3f3f3f; }

/* ---------- Kill light gradients / animated header backgrounds ---------- */
.bg-gradient-amber2, .bg-gradient-blue2, .bg-gradient-cyan2, .bg-gradient-emerald2,
.bg-gradient-fuchsia2, .bg-gradient-gray2, .bg-gradient-green2, .bg-gradient-indigo2,
.bg-gradient-lime2, .bg-gradient-neutral2, .bg-gradient-orange2, .bg-gradient-pink2,
.bg-gradient-purple2, .bg-gradient-red2, .bg-gradient-rose2, .bg-gradient-sky2,
.bg-gradient-slate2, .bg-gradient-stone2, .bg-gradient-teal2, .bg-gradient-violet2,
.bg-gradient-yellow2, .bg-gradient-zinc2 {
    background: transparent !important;
    background-image: none !important;
}

/* "Try now" / accent gradient buttons -> lime gradient */
.bg-gradient-amber, .bg-gradient-blue, .bg-gradient-cyan, .bg-gradient-emerald,
.bg-gradient-fuchsia, .bg-gradient-gray, .bg-gradient-green, .bg-gradient-indigo,
.bg-gradient-lime, .bg-gradient-neutral, .bg-gradient-orange, .bg-gradient-pink,
.bg-gradient-purple, .bg-gradient-red, .bg-gradient-rose, .bg-gradient-sky,
.bg-gradient-slate, .bg-gradient-stone, .bg-gradient-teal, .bg-gradient-violet,
.bg-gradient-yellow, .bg-gradient-zinc {
    background: linear-gradient(120deg, var(--td-lime), var(--td-lime-2)) !important;
}

/* ---------- Surfaces ---------- */
.bg-white { background-color: var(--td-surface) !important; }
.bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-slate-100,
.bg-zinc-50, .bg-zinc-100, .bg-neutral-50, .bg-neutral-100, .bg-stone-100 {
    background-color: var(--td-bg-2) !important;
}
.bg-gray-200, .bg-slate-200, .bg-zinc-200 { background-color: var(--td-surface-2) !important; }
.bg-gray-800 { background-color: var(--td-surface-2) !important; }
.bg-gray-900, .bg-black { background-color: var(--td-bg-2) !important; }

/* ---------- Typography ---------- */
.text-gray-900, .text-gray-800, .text-black,
.text-slate-900, .text-slate-800, .text-zinc-900, .text-neutral-900 {
    color: var(--td-text) !important;
}
.text-gray-700, .text-gray-600, .text-slate-700, .text-slate-600,
.text-zinc-700, .text-zinc-600, .text-neutral-600 {
    color: var(--td-muted) !important;
}
.text-gray-500, .text-gray-400, .text-slate-500, .text-slate-400 {
    color: var(--td-muted) !important;
}
.text-gray-300 { color: var(--td-muted-2) !important; }
a.text-gray-900:hover, a.text-gray-800:hover, .hover\:text-gray-700:hover { color: var(--td-lime) !important; }

/* ---------- Borders ---------- */
.border, .border-t, .border-b, .border-l, .border-r,
.border-gray-100, .border-gray-200, .border-gray-300,
.border-slate-200, .border-zinc-200, .border-neutral-200,
.divide-gray-100 > * + *, .divide-gray-200 > * + * {
    border-color: var(--td-border) !important;
}

/* ---------- Shadows -> bordered dark cards ---------- */
.shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl, .shadow-sm {
    box-shadow: 0 0 0 1px var(--td-border), 0 18px 45px -18px rgba(0, 0, 0, 0.85) !important;
}

/* ---------- Lime accent chips (feature icons etc.) ---------- */
[class*="bg-lime-100"], .bg-lime-50 {
    background-color: var(--td-lime-dim) !important;
}
[class*="text-lime-600"], [class*="text-lime-500"] { color: var(--td-lime) !important; }

/* Any template-color chip (if admin switches accent color, still readable on dark) */
[class*="-100"][class*="bg-"] { background-color: rgba(255, 255, 255, 0.06); }

/* ---------- Buttons ---------- */
button[class*="bg-"][class*="-800"], a[class*="bg-"][class*="-800"] {
    background-color: var(--td-lime) !important;
    color: #0a0a0a !important;
    border-radius: 9999px !important;
}
button[class*="bg-"][class*="-800"] p, a[class*="bg-"][class*="-800"] p { color: #0a0a0a !important; }

.td-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--td-lime);
    color: #0a0a0a !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.9rem 1.75rem;
    border-radius: 9999px;
    transition: all 0.25s ease;
    box-shadow: 0 0 0 0 var(--td-lime-glow);
}
.td-btn-primary:hover {
    background: #b9f04d;
    box-shadow: 0 0 32px 0 var(--td-lime-glow);
    transform: translateY(-1px);
}
.td-btn-primary i { font-size: 18px !important; }

.td-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--td-text) !important;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.9rem 1.75rem;
    border-radius: 9999px;
    border: 1px solid var(--td-border-2);
    transition: all 0.25s ease;
}
.td-btn-outline:hover { border-color: var(--td-lime); color: var(--td-lime) !important; }

/* ---------- Sticky glass nav ---------- */
.custom-menu {
    background: rgba(10, 10, 10, 0.82) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--td-border);
}
.background-animate { animation: none !important; }

/* ---------- Hero ---------- */
.td-hero { position: relative; }
.td-hero-glow {
    position: absolute;
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 620px;
    background: radial-gradient(ellipse at center, rgba(163, 230, 53, 0.16) 0%, rgba(163, 230, 53, 0.05) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.td-badge {
    display: inline-block;
    padding: 0.45rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--td-lime);
    background: var(--td-lime-dim);
    border: 1px solid rgba(163, 230, 53, 0.3);
    border-radius: 9999px;
}
.td-hero-h1 {
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    line-height: 1.05;
    font-weight: 700;
    color: var(--td-text) !important;
    margin-bottom: 1.5rem;
}
.td-hero-h1 .td-accent { color: var(--td-lime); }
.td-hero-sub {
    color: var(--td-muted) !important;
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 2.25rem;
    max-width: 34rem;
}
.td-hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 2.5rem; }
.td-ticks { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; }
.td-tick { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--td-text-2); font-size: 0.9rem; }
.td-tick i { color: var(--td-lime); font-size: 19px !important; }

.td-hero-visual { position: relative; }
.td-hero-visual img, .td-hero-visual svg {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
}
.td-hero-visual::before {
    content: "";
    position: absolute;
    inset: 8% 6%;
    background: radial-gradient(ellipse at center, rgba(163, 230, 53, 0.18), transparent 65%);
    z-index: 0;
}

/* ---------- Stats bar ---------- */
.td-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--td-border);
    border: 1px solid var(--td-border);
    border-radius: 1.25rem;
    overflow: hidden;
    margin-bottom: 3.5rem;
}
@media (min-width: 768px) { .td-stats { grid-template-columns: repeat(4, 1fr); } }
.td-stat { background: var(--td-surface); text-align: center; padding: 1.6rem 1rem; }
.td-stat-value { font-family: 'Space Grotesk', sans-serif; font-size: 1.75rem; font-weight: 700; color: var(--td-lime); }
.td-stat-label { font-size: 0.82rem; color: var(--td-muted); margin-top: 0.25rem; }

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="url"], input[type="search"], textarea, select {
    background-color: var(--td-surface) !important;
    border: 1px solid var(--td-border-2) !important;
    color: var(--td-text) !important;
    border-radius: 0.75rem !important;
}
input::placeholder, textarea::placeholder { color: var(--td-muted-2) !important; }
input:focus, textarea:focus, select:focus {
    outline: none !important;
    border-color: var(--td-lime) !important;
    box-shadow: 0 0 0 3px rgba(163, 230, 53, 0.18) !important;
}
select option { background: var(--td-surface); color: var(--td-text); }

/* ---------- Pricing cards ---------- */
#pricing .bg-white, #pricing [class*="rounded"] .bg-white {
    background: var(--td-surface) !important;
    border: 1px solid var(--td-border);
}
#pricing h3, #pricing h4 { color: var(--td-text) !important; }

/* ---------- Images: soften pure-white artwork on dark ---------- */
.mobile-banner img { border-radius: 1.25rem; }

/* ---------- Footer ---------- */
footer, .footer { background: var(--td-bg-2) !important; border-top: 1px solid var(--td-border); }
footer a:hover { color: var(--td-lime) !important; }

/* ---------- Cookie banner / alerts ---------- */
.js-cookie-consent { background: var(--td-surface) !important; border-top: 1px solid var(--td-border); }

/* ---------- Swiper tweaks ---------- */
.swiper-button-next:after, .swiper-button-prev:after { background: var(--td-surface-2) !important; }
.swiper-pagination-bullet { background: var(--td-muted-2) !important; }
.swiper-pagination-bullet-active { background: var(--td-lime) !important; }

/* ---------- Misc ---------- */
hr { border-color: var(--td-border) !important; }
.journal-scroll::-webkit-scrollbar-track { background-color: var(--td-surface); }
table { color: var(--td-text-2); }
th { color: var(--td-text) !important; }
td, th { border-color: var(--td-border) !important; }