/**
 *  Nolix Hero Slider — CSS
 *  4-slide hero: brand intro + 3 product banners (Pro Max, eSIM, 17E)
 *  Source: NOX-Home.html + NOX-Banners.html design handoff
 */

/* ---- Hero section wrapper ---- */
.nox-hero-sec { padding: 150px 0 8px; }
.nox-hero-wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px; }

.nox-hero {
    position: relative;
    border-radius: 44px;
    overflow: hidden;
    min-height: 530px;
}

/* ---- Slide stack (grid overlay) ---- */
.nox-hero-slides { display: grid; min-height: 530px; }

.nox-hero-slide {
    grid-area: 1/1/2/2;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .55s ease, transform .55s ease;
    position: relative;
    isolation: isolate;
    min-height: 530px;
    color: #fff;
}

.nox-hero-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

/* ---- Slide 1: brand intro (gradient background) ---- */
.nox-slide-brand {
    background: linear-gradient(270deg, var(--green-deep, #1D3A01) 14%, var(--green-mid, #38640C) 63%, var(--green-bright, #66BE0F) 111%);
}

.nox-slide-brand .nox-hero-copy {
    padding: 64px 70px 64px 30px;
    position: relative;
    z-index: 2;
}

.nox-hero-eyebrow {
    color: rgba(255,255,255,.55);
    font-size: 18px;
    margin-bottom: 18px;
}

.nox-hero-title {
    font-size: 52px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: #fff;
}

.nox-hero-sub {
    margin-top: 22px;
    font-size: 16px;
    color: rgba(255,255,255,.85);
    max-width: 430px;
}

.nox-btn-green {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #5EAC12;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    padding: 10px 18px;
    margin-top: 30px;
    text-decoration: none;
    transition: background .2s;
}

.nox-btn-green:hover { background: #69bd16; color: #fff; }

.nox-btn-green .ar {
    width: 16px; height: 16px;
    stroke: #fff; stroke-width: 2; fill: none;
}

.nox-hero-art {
    position: relative;
    align-self: stretch;
    z-index: 2;
}

.nox-slide-brand .nox-hero-art img {
    position: absolute;
    bottom: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    height: 96%;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 30px 40px rgba(0,0,0,.35));
}

/* Equalizer decoration on slide 1 */
.nox-eq {
    position: absolute;
    top: 34px;
    left: 64px;
    display: none;
    align-items: flex-end;
    gap: 5px;
    height: 26px;
    z-index: 3;
}

.nox-eq span {
    width: 6px;
    border-radius: 4px;
    background: rgba(255,255,255,.5);
}

.nox-eq span:nth-child(1) { height: 14px; }
.nox-eq span:nth-child(2) { height: 26px; background: #5EAC12; }
.nox-eq span:nth-child(3) { height: 18px; }


/* ============================================================
   Slides 2-4: Product banners (from NOX-Banners.html)
   ============================================================ */

.nox-banner-slide {
    overflow: hidden;
}

.nox-banner-slide .nox-bcopy {
    padding: 54px 60px;
    position: relative;
    z-index: 2;
}

.nox-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 100px;
    padding: 7px 16px;
    font-size: 13px;
    color: #fff;
    margin-bottom: 20px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.nox-badge i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #66BE0F;
    box-shadow: 0 0 0 4px rgba(102,190,15,.3);
    display: inline-block;
}

.nox-btitle {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.01em;
    color: #fff;
}

.nox-btitle em {
    font-style: normal;
    color: #cdeeaa;
}

.nox-bsub {
    margin-top: 18px;
    font-size: 15px;
    color: rgba(255,255,255,.82);
    max-width: 400px;
}

/* Mobile-only short copy: full text on desktop, short text hidden.
   Swapped inside the responsive blocks below. */
.nox-txt-mob { display: none; }
.nox-txt-full { display: inline; }

.nox-specs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.nox-specs span {
    background: rgba(255,255,255,.1);
    border-radius: 11px;
    padding: 9px 14px;
    font-size: 13px;
    font-family: 'Modam', 'Peyda', 'Vazirmatn', system-ui, sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
}

.nox-specs span svg {
    width: 15px; height: 15px;
    color: #66BE0F;
}

.nox-bcta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #5EAC12;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: 12px;
    padding: 13px 24px;
    margin-top: 30px;
    transition: background .2s;
    text-decoration: none;
}

.nox-bcta:hover { background: #66BE0F; color: #fff; }

.nox-bcta svg {
    width: 16px; height: 16px;
    stroke: #fff; stroke-width: 2; fill: none;
}

/* Banner art (phone image) column */
.nox-bart {
    position: relative;
    align-self: stretch;
    z-index: 2;
}

.nox-bart img {
    position: absolute;
    inset: 0;
    margin: auto;
    max-height: 92%;
    width: auto;
    filter: drop-shadow(0 28px 40px rgba(0,0,0,.4));
}

/* Wide multi-product composites (PS5, AirPods): fit inside the column by
   width as well, so the side products aren't clipped by overflow:hidden */
.nox-ps5 .nox-bart img,
.nox-airpods .nox-bart img,
.nox-mac .nox-bart img {
    max-width: 94%;
    max-height: 82%;
    width: auto;
    height: auto;
}

/* Price card */
.nox-bprice {
    position: absolute;
    z-index: 3;
    background: #fff;
    color: #1D3A01;
    border-radius: 18px;
    padding: 13px 18px;
    box-shadow: 0 14px 40px rgba(0,0,0,.22);
    bottom: 48px;
    left: 54px;
    text-align: center;
    line-height: 1.3;
}

.nox-bprice small {
    display: block;
    font-size: 11px;
    color: #8a8a8a;
    font-weight: 500;
}

.nox-bprice b {
    font-size: 18px;
    font-family: 'Modam', 'Peyda', 'Vazirmatn', system-ui, sans-serif;
}

/* Decorative elements */
.nox-blob {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    filter: blur(2px);
    opacity: .5;
}

.nox-ring {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.14);
}

.nox-watermark {
    position: absolute;
    z-index: 0;
    font-size: 200px;
    font-weight: 800;
    color: rgba(255,255,255,.05);
    left: -20px;
    bottom: -70px;
    letter-spacing: -.04em;
    line-height: 1;
    font-family: 'Modam', 'Peyda', 'Vazirmatn', system-ui, sans-serif;
}

/* eSIM chip glyph */
.nox-chip {
    width: 54px; height: 42px;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,.5);
    position: relative;
    margin-bottom: 18px;
}

.nox-chip::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 3px;
    border: 1.5px solid rgba(255,255,255,.4);
}

.nox-chip::after {
    content: "";
    position: absolute;
    top: 8px; bottom: 8px;
    left: 50%;
    width: 1.5px;
    background: rgba(255,255,255,.4);
}


/* ---- Theme A: Pro Max (deep luxe) ---- */
.nox-promax {
    background: radial-gradient(120% 140% at 85% 10%, #38640C 0%, #1D3A01 60%);
}

.nox-promax .nox-ring.r1 { width: 520px; height: 520px; top: -160px; left: -120px; }
.nox-promax .nox-ring.r2 { width: 340px; height: 340px; top: -70px; left: -30px; }
.nox-promax .nox-blob { width: 260px; height: 260px; background: radial-gradient(circle, rgba(102,190,15,.45), transparent 70%); top: 30%; left: 8%; }


/* ---- Theme B: eSIM (bright fresh) ---- */
.nox-esim {
    background: linear-gradient(255deg, #1D3A01 8%, #38640C 52%, #66BE0F 116%);
}

.nox-esim .nox-blob { width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); bottom: -80px; right: 30%; }
.nox-esim .nox-ring.r1 { width: 460px; height: 460px; bottom: -200px; right: -120px; }


/* ---- Theme C: 17E (clean two-tone) ---- */
.nox-17e {
    background: #1D3A01;
}

.nox-17e .nox-panel {
    position: absolute;
    inset: 0 0 0 42%;
    background: linear-gradient(220deg, #66BE0F, #38640C);
    z-index: 1;
    border-radius: 0 0 0 120px;
}

.nox-17e .nox-ring.r1 {
    width: 380px; height: 380px;
    top: -120px; left: 8%;
    border-color: rgba(255,255,255,.18);
}


/* ---- Theme D: PlayStation 5 (gaming, dramatic) ---- */
.nox-ps5 {
    background: radial-gradient(120% 140% at 18% 8%, #38640C 0%, #142A01 62%);
}

.nox-ps5 .nox-ring.r1 { width: 520px; height: 520px; top: -170px; right: -130px; }
.nox-ps5 .nox-ring.r2 { width: 330px; height: 330px; top: -80px; right: -40px; }
.nox-ps5 .nox-blob { width: 280px; height: 280px; background: radial-gradient(circle, rgba(102,190,15,.4), transparent 70%); bottom: 6%; right: 10%; }


/* ---- Theme E: AirPods (clean, airy) ---- */
.nox-airpods {
    background: linear-gradient(245deg, #15300A 6%, #2E5A0A 52%, #5EAC12 122%);
}

.nox-airpods .nox-blob { width: 320px; height: 320px; background: radial-gradient(circle, rgba(255,255,255,.2), transparent 70%); top: -60px; left: 28%; }
.nox-airpods .nox-ring.r1 { width: 440px; height: 440px; bottom: -190px; left: -130px; }


/* ---- Theme F: iPad (fresh two-tone) ---- */
.nox-ipad {
    background: radial-gradient(130% 130% at 82% 86%, #66BE0F 0%, #38640C 38%, #16300A 84%);
}

.nox-ipad .nox-ring.r1 { width: 460px; height: 460px; top: -150px; left: -120px; border-color: rgba(255,255,255,.16); }
.nox-ipad .nox-blob { width: 260px; height: 260px; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); top: 24%; left: 6%; }


/* ---- Theme G: Mac (pro, deep green) ---- */
.nox-mac {
    background: radial-gradient(125% 135% at 80% 15%, #4E8F0E 0%, #2C520A 52%, #132705 100%);
}

.nox-mac .nox-ring.r1 { width: 500px; height: 500px; top: -160px; right: -120px; border-color: rgba(255,255,255,.14); }
.nox-mac .nox-ring.r2 { width: 320px; height: 320px; top: -70px; right: -30px; }
.nox-mac .nox-blob { width: 300px; height: 300px; background: radial-gradient(circle, rgba(102,190,15,.4), transparent 70%); bottom: 4%; right: 12%; }


/* ============================================================
   Slider controls: dots + arrows
   ============================================================ */

.nox-hero-ctrl {
    position: absolute;
    bottom: 24px;
    right: 50%;
    transform: translateX(50%);
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 5;
}

.nox-hero-dots {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Uniform circular dots — override Flatsome's default button styling */
.nox-hero-dots button,
.nox-hero-dots button:not(.icon) {
    width: 11px !important;
    height: 11px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.4) !important;
    box-shadow: none !important;
    line-height: 0 !important;
    cursor: pointer;
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.nox-hero-dots button:hover,
.nox-hero-dots button:not(.icon):hover {
    background: rgba(255,255,255,.7) !important;
}

.nox-hero-dots button.on,
.nox-hero-dots button.on:not(.icon) {
    background: #fff !important;
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(255,255,255,.28) !important;
}

.nox-hero-arrow,
.nox-hero-arrow:not(.icon) {
    width: 36px !important;
    height: 36px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.16) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s;
}

.nox-hero-arrow:hover,
.nox-hero-arrow:not(.icon):hover { background: #5EAC12 !important; }

.nox-hero-arrow svg {
    width: 18px !important;
    height: 18px !important;
    flex: none !important;
    stroke: #fff; stroke-width: 2; fill: none;
}

/* SVG icons inside banners */
.nox-icn {
    width: 15px; height: 15px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}


/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1024px) {
    .nox-hero,
    .nox-hero-slides { min-height: 0; }

    /* Hard-cap the hero height on mobile so it stays compact regardless of
       per-slide content. Slides scroll-free inside this fixed band. */
    .nox-hero { height: 580px; }
    .nox-hero-slides { height: 580px; }
    .nox-hero-slide { height: 580px; overflow: hidden; }

    /* Swap to the short, mobile-only copy. */
    .nox-txt-full { display: none; }
    .nox-txt-mob { display: inline; }

    .nox-hero-slide {
        grid-template-columns: 1fr;
        /* Let each slide size to its own (compact) content instead of stretching
           to fill a fixed height. The hero overall still equals the tallest
           slide, but with no artificial stretch there's no empty band. */
        min-height: 0;
        align-content: start;
    }

    /* Image column first, then copy — natural height, no stretch-to-fill. */
    .nox-banner-slide,
    .nox-slide-brand {
        display: flex;
        flex-direction: column;
    }

    .nox-banner-slide .nox-bcopy,
    .nox-slide-brand .nox-hero-copy {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
    }

    /* Reserve space at the bottom of every slide for the slider controls
       (dots + arrows) so the CTA button never sits underneath them. The control
       bar sits ~24px tall at bottom:16px, so ~74px of clearance keeps every
       CTA safely above it on the tallest slides. */
    .nox-banner-slide .nox-bcopy,
    .nox-slide-brand .nox-hero-copy {
        padding-bottom: 74px;
    }

    /* Keep the control bar clear of the content above it on small screens. */
    .nox-hero-ctrl {
        bottom: 12px;
    }

    /* ---- Brand slide (slide 1): least content. Centre the copy block in the
       leftover space, but lay its rows out top-down with generous gaps (NOT
       space-evenly, which pushed the CTA down onto the dots). ---- */
    .nox-slide-brand {
        justify-content: flex-start;
    }

    /* Copy block: open, top-aligned rows with comfortable gaps. */
    .nox-slide-brand .nox-hero-copy {
        flex: 1 1 auto;
        justify-content: center;
        gap: 16px;
    }

    .nox-slide-brand .nox-btn-green {
        margin-top: 6px;
    }

    .nox-slide-brand .nox-hero-art {
        padding-top: 0;
    }

    /* Slide 1 responsive */
    .nox-slide-brand .nox-hero-copy {
        padding: 22px 44px 64px;
        text-align: center;
    }

    /* Open up the breathing room between the brand-slide lines. */
    .nox-slide-brand .nox-hero-title { line-height: 1.4; }
    .nox-slide-brand .nox-hero-eyebrow { margin-bottom: 0; }
    .nox-slide-brand .nox-hero-sub { line-height: 1.7; margin-top: 0; }

    .nox-hero-title { font-size: 36px; }

    .nox-hero-sub {
        margin-left: auto;
        margin-right: auto;
    }

    .nox-btn-green {
        margin-left: auto;
        margin-right: auto;
    }

    .nox-slide-brand .nox-hero-art {
        height: auto;
        order: -1;
        padding-top: 12px;
    }

    .nox-slide-brand .nox-hero-art img {
        position: static;
        width: auto;
        max-height: 175px;
        /* Reset the desktop absolute-centering (left:50% + translateX) which
           otherwise lingers and shoves the image off to the left on mobile. */
        left: auto;
        right: auto;
        transform: none;
        margin: 0 auto;
        display: block;
    }

    .nox-eq { display: none; }

    .nox-hero-ctrl {
        right: 50%;
        transform: translateX(50%);
    }

    /* Banner slides: spread image + copy across the full height so the slide
       never looks sparse, and let the copy block breathe with even spacing. */
    .nox-banner-slide {
        justify-content: space-between;
    }

    .nox-banner-slide .nox-bcopy {
        padding: 8px 26px 72px;
        text-align: center;
        flex: 1 1 auto;
        justify-content: flex-start;
        gap: 7px;
    }

    /* Now that every description is the short mobile copy, open the line spacing
       back up — generous gaps read better than a cramped centred cluster. */
    .nox-btitle { font-size: 32px; line-height: 1.18; }
    .nox-badge { margin-bottom: 0; }
    .nox-bsub { margin-top: 0; line-height: 1.6; }

    .nox-ps5 .nox-bsub,
    .nox-airpods .nox-bsub,
    .nox-ipad .nox-bsub {
        font-size: 15px;
        line-height: 1.6;
        margin-top: 0;
    }

    .nox-bsub,
    .nox-specs {
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    .nox-specs { margin-top: 0; gap: 7px; }
    .nox-specs span { padding: 7px 12px; font-size: 12.5px; }

    .nox-bcta {
        margin-left: auto;
        margin-right: auto;
        margin-top: 4px;
    }

    /* Art on top, sized to the image (no wasted empty band), price centered under it.
       Horizontal padding keeps the device art clear of the green card's rounded
       edges so wide composites (PS5 / AirPods) never bleed outside the frame. */
    .nox-bart {
        height: auto;
        order: -1;
        padding: 16px 26px 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .nox-bart img {
        position: static;
        margin: 0 auto;
        max-width: 100%;
        max-height: 116px;
    }

    /* Keep wide composites height-capped AND width-contained on small screens so
       the side devices stay inside the padded card area instead of overflowing. */
    .nox-ps5 .nox-bart img,
    .nox-airpods .nox-bart img,
    .nox-mac .nox-bart img {
        max-width: 100%;
        max-height: 90px;
        width: auto;
        height: auto;
    }

    .nox-bprice {
        position: static;
        display: inline-block;
        margin: 16px auto 0;
    }

    .nox-17e .nox-panel {
        inset: 0 0 55% 0;
        border-radius: 0 0 80px 80px;
    }

    .nox-watermark { display: none; }
}

@media (max-width: 560px) {
    .nox-hero { border-radius: 30px; }

    /* Even more compact on phones */
    .nox-hero,
    .nox-hero-slides,
    .nox-hero-slide { height: 560px; }
    .nox-hero-title { font-size: 28px; line-height: 1.3; }
    .nox-btitle { font-size: 26px; line-height: 1.22; }

    /* Brand slide */
    .nox-slide-brand .nox-hero-title { font-size: 30px; line-height: 1.35; }
    .nox-slide-brand .nox-hero-eyebrow { font-size: 16px; margin-bottom: 0; }
    .nox-slide-brand .nox-hero-sub { font-size: 15px; line-height: 1.7; }

    .nox-slide-brand .nox-hero-copy,
    .nox-banner-slide .nox-bcopy {
        padding: 18px 18px 56px;
    }

    .nox-hero-eyebrow { font-size: 15px; }
    .nox-hero-sub,
    .nox-bsub { font-size: 14px; line-height: 1.6; }

    /* Short mobile copy on all slides — keep the spacing open, not cramped. */
    .nox-ps5 .nox-bsub,
    .nox-airpods .nox-bsub,
    .nox-ipad .nox-bsub {
        font-size: 14px;
        line-height: 1.6;
        margin-top: 0;
    }

    .nox-bart img { max-height: 110px; }
    .nox-ps5 .nox-bart img,
    .nox-airpods .nox-bart img { max-height: 84px; }
    .nox-slide-brand .nox-hero-art img { max-height: 150px; }

    .nox-specs span { font-size: 12px; padding: 7px 10px; }
}

/* ===== Slide 9: Samsung Galaxy (nox-samsung) ===== */
.nox-samsung {
    background: radial-gradient(125% 140% at 86% 14%, #4E8F0E 0%, #2C520A 46%, #16300A 100%);
}
.nox-samsung .nox-ring.r1 { width: 520px; height: 520px; top: -170px; left: -120px; border-color: rgba(255,255,255,.14); }
.nox-samsung .nox-ring.r2 { width: 330px; height: 330px; top: -80px; left: -30px; }
.nox-samsung .nox-blob { width: 300px; height: 300px; background: radial-gradient(circle, rgba(102,190,15,.4), transparent 70%); bottom: 6%; left: 10%; }
.nox-samsung .nox-bart img { max-width: 94%; max-height: 82%; width: auto; height: auto; }
@media (max-width: 980px) {
  .nox-samsung .nox-bart img { max-width: 100%; max-height: 90px; width: auto; height: auto; }
  .nox-samsung .nox-bsub { font-size: 14px; line-height: 1.6; margin-top: 0; }
}
@media (max-width: 560px) {
  .nox-samsung .nox-bart img { max-height: 84px; }
}