/* Custom Styles - Variação 6 (mottu.top - design descontomottu.top) */
/* Import base styles */
@import url('style.css');

/* ================= THEME VARIABLES - ZINC + GREEN ================= */
:root {
    /* Paleta de referência descontomottu.top */
    --accent: #22c55e;           /* Green-500 */
    --accent-hover: #16a34a;     /* Green-600 */
    --accent-contrast: #ffffff;
    --accent-soft: #4ade80;      /* Green-400 */

    --minha: #22c55e;            /* green-500 */
    --ilimitado: #16a34a;        /* green-600 */
    --conquiste: #15803d;        /* green-700 */

    --notice-bg: #0f3a2a;        /* dark greenish notice bg */
    --notice-border: #16a34a;    /* green-600 */
    --notice-text: #d1fae5;      /* emerald-100 */

    /* Background System */
    --bg-page: #09090b;          /* zinc-950 */
    --bg-card: #18181b;          /* zinc-900 */
    --bg-card-hover: #27272a;    /* zinc-800 */
    --bg-surface: #09090b;      /* zinc-950 */
    --border-subtle: rgba(39, 39, 42, 0.5); /* zinc-800/50 */

    /* Popup */
    --popup-bg-start: #09090b;
    --popup-bg-end: #18181b;
    --popup-overlay-opacity: 0.38;
}

/* ================= FONTS ================= */
body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', 'Inter', sans-serif;
}

/* ================= BACKGROUND - ZINC-950 ================= */
body {
    background-color: #09090b;
    background-image:
        radial-gradient(1200px 420px at -10% 0%, rgba(34, 197, 94, 0.08), rgba(0,0,0,0) 60%),
        radial-gradient(900px 360px at 110% 100%, rgba(34, 197, 94, 0.06), rgba(0,0,0,0) 60%);
    background-attachment: fixed, fixed;
    background-repeat: no-repeat;
}

/* ================= HEADINGS - UPPERCASE ITALIC BLACK ================= */
h1, h2, h3 {
    text-transform: uppercase;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 0.95;
}

/* H4+ headings: uppercase bold but not italic */
h4, h5, h6 {
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* ================= HIGHLIGHTED WORD EFFECT ================= */
/* The "MOTTU" or key word highlighted in accent */
.heading-accent,
h1 strong, h2 strong, h3 strong {
    color: var(--accent) !important;
    font-style: italic;
}

/* ================= BUTTONS - PILL STYLE ================= */
.btn-primary {
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    box-shadow:
        0 0 30px rgba(34, 197, 94, 0.15),
        0 10px 24px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: scale(1.03);
    box-shadow:
        0 0 40px rgba(34, 197, 94, 0.25),
        0 12px 28px rgba(0, 0, 0, 0.35);
}

/* ================= CARDS - ROUNDED + ZINC ================= */
/* Override Tailwind bg-zinc-800 and bg-zinc-900 for zinc palette */
.bg-zinc-800 {
    background-color: #18181b !important; /* zinc-900 */
}

.bg-zinc-900 {
    background-color: #09090b !important; /* zinc-950 */
}

.border-zinc-700 {
    border-color: rgba(39, 39, 42, 0.5) !important; /* zinc-800/50 */
}

.border-zinc-800 {
    border-color: rgba(39, 39, 42, 0.5) !important;
}

/* ================= FAQ ACCORDION - ELEVATED ================= */
details {
    border-radius: 1rem !important;
    overflow: hidden;
}

details summary {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

/* ================= SCROLLBAR ================= */
::-webkit-scrollbar-track {
    background: #09090b !important;
}