/*
|--------------------------------------------------------------------------
| Novello Spin — Saudi National Day Theme
|--------------------------------------------------------------------------
|
| Seasonal presentation layer only.
|
| - No wheel logic.
| - No duplicated component architecture.
| - Base CSS remains the source of truth.
| - Theme-specific values live here.
|
*/

/* ========================================================================
   1. Theme Design Tokens
   ======================================================================== */

.nw-theme-national-day {
    /*
     * National Day campaign palette.
     *
     * الأخضر هو الهوية المسيطرة، مع درجات داكنة وفاتحة
     * للحفاظ على عمق التصميم ووضوح القطاعات.
     */
    --nw-theme-primary: #006c35;
    --nw-theme-primary-dark: #004f29;
    --nw-theme-secondary: #00854a;
    --nw-theme-secondary-soft: #1c9a61;

    /*
     * Gold remains a restrained prize accent.
     */
    --nw-theme-accent: #d7ad55;
    --nw-theme-accent-light: #f0d58e;

    --nw-theme-text: #17352a;
    --nw-theme-muted: #60746b;
    --nw-theme-success: #11864d;

    /*
     * Page atmosphere.
     */
    --nw-page-glow: rgba(0, 108, 53, .17);
    --nw-page-start: #ffffff;
    --nw-page-middle: #f1faf5;
    --nw-page-end: #e5f3eb;

    /*
     * Wheel palette.
     *
     * Six deliberate tones preserve sector separation.
     */
    --nw-wheel-color-1: #006c35;
    --nw-wheel-color-2: #0c8750;
    --nw-wheel-color-3: #d7ad55;
    --nw-wheel-color-4: #004f29;
    --nw-wheel-color-5: #2b9b67;
    --nw-wheel-color-6: #7abf94;

    /*
     * Celebration palette.
     */
    --nw-confetti-color-1: #006c35;
    --nw-confetti-color-2: #ffffff;
    --nw-confetti-color-3: #d7ad55;
    --nw-confetti-color-4: #0c8750;
    --nw-confetti-color-5: #004f29;

    --nw-capture-background: #ffffff;

    color: var(--nw-theme-text);
}


/* ========================================================================
   2. Page Canvas
   ======================================================================== */

body.nw-theme-national-day {
    color: var(--nw-theme-text);

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(0, 133, 74, .16),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 42%,
            rgba(215, 173, 85, .08),
            transparent 22%
        ),
        radial-gradient(
            circle at 88% 65%,
            rgba(0, 108, 53, .08),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            var(--nw-page-start),
            var(--nw-page-middle) 48%,
            var(--nw-page-end)
        );
}


/* ========================================================================
   3. Header
   ======================================================================== */

.nw-theme-national-day .nw-header-inner {
    border-color: rgba(255, 255, 255, .92);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .93),
            rgba(241, 250, 245, .88)
        );

    box-shadow:
        0 15px 45px rgba(0, 79, 41, .10);

    backdrop-filter: blur(20px);
}

.nw-theme-national-day .nw-trusted {
    color: #075d34;
    background: rgba(226, 247, 235, .95);
}

.nw-theme-national-day .nw-trusted-dot {
    background: #15965a;

    box-shadow:
        0 0 0 6px rgba(21, 150, 90, .12);
}


/* ========================================================================
   4. Main Card / Campaign Surface
   ======================================================================== */

.nw-theme-national-day .nw-card {
    border-color: rgba(255, 255, 255, .94);

    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(0, 108, 53, .065),
            transparent 35%
        ),
        rgba(255, 255, 255, .96);

    box-shadow:
        0 28px 90px rgba(0, 75, 39, .13),
        inset 0 1px 0 #ffffff;
}

.nw-theme-national-day .nw-card::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(215, 173, 85, .45),
            transparent
        );
}


/* ========================================================================
   5. Campaign Heading
   ======================================================================== */

.nw-theme-national-day .nw-step {
    color: #075d34;
    background: #eaf8f0;
}

.nw-theme-national-day .nw-step-number {
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            #0d9256,
            #005b30
        );
}

.nw-theme-national-day .nw-heading h1 {
    color: #063f27;
}

.nw-theme-national-day .nw-theme-subheading {
    max-width: 620px;
    margin: 11px auto 0;
    padding-inline: 18px;

    color: #3f6856;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
}


/* ========================================================================
   6. Wheel Atmosphere
   ======================================================================== */

.nw-theme-national-day .nw-wheel-glow {
    background:
        radial-gradient(
            circle,
            rgba(0, 133, 74, .24),
            rgba(0, 108, 53, .08) 45%,
            transparent 72%
        );
}

.nw-theme-national-day .nw-wheel-frame {
    background: #ffffff;

    box-shadow:
        0 32px 70px rgba(0, 74, 38, .23),
        0 0 0 3px rgba(215, 173, 85, .90);
}


/* ========================================================================
   7. Pointer
   ======================================================================== */

.nw-theme-national-day .nw-pointer {
    filter:
        drop-shadow(
            0 9px 7px rgba(89, 57, 3, .23)
        );
}

.nw-theme-national-day .nw-pointer::after {
    background:
        linear-gradient(
            145deg,
            #f5da90,
            #d3a749 55%,
            #9f741d
        );
}


/* ========================================================================
   8. Center Spin Control
   ======================================================================== */

.nw-theme-national-day .nw-center-button {
    border-color: #ffffff;
    color: #ffffff;

    background:
        radial-gradient(
            circle at 35% 20%,
            #25a96b,
            #087a47 58%,
            #004b29
        );

    box-shadow:
        0 14px 32px rgba(0, 65, 34, .38),
        inset 0 0 0 4px rgba(215, 173, 85, .82);
}

.nw-theme-national-day .nw-center-button:hover {
    box-shadow:
        0 17px 38px rgba(0, 65, 34, .42),
        0 0 25px rgba(215, 173, 85, .40),
        inset 0 0 0 4px #dfbc69;
}


/* ========================================================================
   9. Primary Spin Button
   ======================================================================== */

.nw-theme-national-day .nw-spin-button {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0f9b5b,
            #006c35 60%,
            #004e29
        );

    box-shadow:
        0 18px 35px rgba(0, 108, 53, .25),
        inset 0 1px 0 rgba(255, 255, 255, .28);
}

.nw-theme-national-day .nw-spin-button:hover {
    box-shadow:
        0 21px 39px rgba(0, 108, 53, .32),
        inset 0 1px 0 rgba(255, 255, 255, .30);
}


/* ========================================================================
   10. Result Card
   ======================================================================== */

.nw-theme-national-day .nw-result {
    border-color: rgba(0, 108, 53, .16);

    background:
        radial-gradient(
            circle at top,
            rgba(0, 108, 53, .08),
            transparent 42%
        ),
        #ffffff;

    box-shadow:
        0 20px 55px rgba(0, 75, 39, .11);
}

.nw-theme-national-day .nw-result-icon {
    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #e2bd66,
            #a97a20
        );

    box-shadow:
        0 15px 34px rgba(157, 111, 24, .26);
}

.nw-theme-national-day .nw-result h2 {
    color: #075d34;
}


/* ========================================================================
   11. Coupon
   ======================================================================== */

.nw-theme-national-day .nw-coupon {
    border-color: rgba(0, 108, 53, .18);
    background: #ffffff;
}

.nw-theme-national-day .nw-coupon-prize {
    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #10985a,
            #006c35
        );
}


/* ========================================================================
   12. Actions
   ======================================================================== */

.nw-theme-national-day .nw-whatsapp {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #23bb64,
            #128b48
        );
}

.nw-theme-national-day .nw-secondary {
    border-color: rgba(0, 108, 53, .20);
    color: #075d34;
    background: #ffffff;
}


/* ========================================================================
   13. Redemption Note
   ======================================================================== */

.nw-theme-national-day .nw-redemption-note {
    border-color: rgba(215, 173, 85, .38);

    color: #5f4b1c;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fdf6e4
        );
}

.nw-theme-national-day .nw-redemption-note strong {
    color: #775b18;
}


/* ========================================================================
   14. Mobile Refinements
   ======================================================================== */

@media (max-width: 600px) {

    .nw-theme-national-day .nw-theme-subheading {
        margin-top: 8px;
        padding-inline: 10px;

        font-size: 13.5px;
        line-height: 1.65;
    }

    .nw-theme-national-day .nw-header-inner {
        background:
            linear-gradient(
                135deg,
                rgba(255, 255, 255, .96),
                rgba(238, 249, 243, .94)
            );
    }

    .nw-theme-national-day .nw-card {
        box-shadow:
            0 18px 48px rgba(0, 75, 39, .11);
    }
}


/* ========================================================================
   15. Reduced Motion
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {

    .nw-theme-national-day .nw-center-button,
    .nw-theme-national-day .nw-spin-button {
        transition-duration: .01ms !important;
    }
}


/* ========================================================================
   16. Landing Page — National Day
   ======================================================================== */

/*
 * نفس الملف الموسمي يخدم Landing + Wheel.
 * الـ nv-* selectors تخص صفحة التسجيل فقط.
 */

.nw-theme-national-day .nv-page {
    color: #163c2b;

    background:
        radial-gradient(
            circle at 72% 18%,
            rgba(0, 133, 74, .14),
            transparent 31%
        ),
        radial-gradient(
            circle at 18% 65%,
            rgba(215, 173, 85, .08),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f1faf5 50%,
            #e6f3eb
        );
}


/* Header */

.nw-theme-national-day .nv-header-inner {
    border-color: rgba(255, 255, 255, .92);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .94),
            rgba(238, 249, 243, .91)
        );

    box-shadow:
        0 14px 44px rgba(0, 74, 38, .10);
}

.nw-theme-national-day .nv-brand-copy strong {
    color: #064b2c;
}

.nw-theme-national-day .nv-brand-copy > span {
    color: #60756a;
}

.nw-theme-national-day .nv-header-badge {
    color: #075d34;
    background: #e9f7ef;
}

.nw-theme-national-day .nv-header-badge i {
    background: #14965a;

    box-shadow:
        0 0 0 6px rgba(20, 150, 90, .12);
}


/* Hero */

.nw-theme-national-day .nv-hero h1 {
    color: #063f27;
}

.nw-theme-national-day .nv-hero h1 span {
    color: #087747;
}

.nw-theme-national-day .nv-hero-lead {
    color: #547064;
}

.nw-theme-national-day .nv-theme-kicker {
    width: fit-content;
    margin: 0 0 14px auto;

    padding: 8px 13px;

    border: 1px solid rgba(0, 108, 53, .12);
    border-radius: 999px;

    color: #075d34;
    background: #edf9f2;

    font-size: 14px;
    font-weight: 800;
}


/* Registration card */

.nw-theme-national-day .nv-form-card {
    border-color: rgba(0, 108, 53, .10);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(248, 253, 250, .97)
        );

    box-shadow:
        0 25px 70px rgba(0, 75, 39, .13);
}

.nw-theme-national-day .nv-field label {
    color: #254b39;
}

.nw-theme-national-day .nv-input-wrap {
    border-color: rgba(0, 108, 53, .16);
    background: #ffffff;
}

.nw-theme-national-day .nv-input-wrap:focus-within {
    border-color: rgba(0, 128, 70, .55);

    box-shadow:
        0 0 0 4px rgba(0, 128, 70, .08);
}

.nw-theme-national-day .nv-input-icon {
    color: #087747;
}


/* Consent */

.nw-theme-national-day .nv-consent {
    color: #61756b;
}


/* Primary CTA */

.nw-theme-national-day .nv-primary-button {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0f9b5b,
            #006c35 62%,
            #004d29
        );

    box-shadow:
        0 17px 34px rgba(0, 108, 53, .25);
}

.nw-theme-national-day .nv-primary-button:hover {
    box-shadow:
        0 21px 40px rgba(0, 108, 53, .30);
}


/* Footer */

.nw-theme-national-day .nv-footer {
    border-top-color: rgba(0, 108, 53, .08);

    background:
        rgba(255, 255, 255, .82);
}

.nw-theme-national-day .nv-footer-title {
    color: #075d34;
}

.nw-theme-national-day .nv-footer-copy,
.nw-theme-national-day .nv-footer-bottom {
    color: #65766e;
}


/* Mobile */

@media (max-width: 700px) {

    .nw-theme-national-day .nv-theme-kicker {
        margin-inline: auto;
        margin-bottom: 10px;

        font-size: 12px;
    }

    .nw-theme-national-day .nv-hero h1 {
        color: #063f27;
    }

    .nw-theme-national-day .nv-form-card {
        box-shadow:
            0 18px 44px rgba(0, 75, 39, .11);
    }
}


/* ========================================================================
   17. National Day — Landing Visual Polish
   ======================================================================== */

/* Remove the remaining Default pink accent from the registration card */
.nw-theme-national-day .nv-form-card::before {
    background:
        linear-gradient(
            90deg,
            #006c35 0%,
            #15965a 58%,
            #d7ad55 100%
        );
}


/* Hero hierarchy */
.nw-theme-national-day .nv-hero {
    max-width: 690px;
}

.nw-theme-national-day .nv-hero h1 {
    max-width: 660px;
    margin-inline: auto;

    font-size: clamp(44px, 4.7vw, 68px);
    line-height: 1.14;
    letter-spacing: -.025em;
}

.nw-theme-national-day .nv-hero h1 span {
    display: block;
}

.nw-theme-national-day .nv-hero-lead {
    max-width: 610px;
    margin-inline: auto;
}


/* Campaign kicker */
.nw-theme-national-day .nv-theme-kicker {
    margin-inline: auto;
}


/* ========================================================================
   Mobile
   ======================================================================== */

@media (max-width: 700px) {

    .nw-theme-national-day .nv-stage {
        gap: 22px;
    }

    .nw-theme-national-day .nv-hero {
        padding-top: 0;
        padding-bottom: 4px;
    }

    .nw-theme-national-day .nv-theme-kicker {
        margin-bottom: 9px;

        padding: 6px 11px;

        font-size: 11px;
        line-height: 1.4;
    }

    .nw-theme-national-day .nv-hero h1 {
        max-width: 350px;

        font-size: clamp(29px, 8.1vw, 35px);
        line-height: 1.22;
        letter-spacing: -.015em;
    }

    .nw-theme-national-day .nv-hero-lead {
        max-width: 340px;
        margin-top: 13px;

        font-size: 13px;
        line-height: 1.75;
    }

    .nw-theme-national-day .nv-form-card {
        margin-top: 0;

        box-shadow:
            0 18px 44px rgba(0, 75, 39, .11);
    }
}


/* Very small screens */
@media (max-width: 390px) {

    .nw-theme-national-day .nv-hero h1 {
        max-width: 320px;

        font-size: 28px;
    }

    .nw-theme-national-day .nv-hero-lead {
        max-width: 310px;
        font-size: 12.5px;
    }
}