/* Diwali Fest (was Navratri): mobile sale strip + home hero slider (markup in components/navratri-fest.php) */

.nvr-strip,
.nvr-banner {
    --nvr-navy: #0B2A6B;
    --nvr-blue: #2563EB;
    --nvr-sky: #EAF4FE;
    --nvr-marigold: #F59E0B;
    --nvr-gold: #FCD34D;
    --nvr-night: #0E1640;
    --nvr-text: 'Anek Latin', 'Segoe UI', system-ui, sans-serif;
}

/* ---------- Sale strip (mobile only) ---------- */

.nvr-strip {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 34px;
    overflow: hidden;
    background: var(--nvr-navy);
    color: #fff;
    font-family: var(--nvr-text);
    text-decoration: none;
}

.nvr-strip__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: nvr-ticker 22s linear infinite;
    will-change: transform;
}

.nvr-strip__run {
    display: flex;
    align-items: center;
    flex: none;
}

.nvr-strip__item {
    display: flex;
    align-items: center;
    font-size: 12.500px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nvr-strip__item::after {
    content: '';
    width: 6px;
    height: 6px;
    margin: 0 16px;
    background: var(--nvr-marigold);
    transform: rotate(45deg);
}

@keyframes nvr-ticker {
    to { transform: translateX(-50%); }
}

@media (min-width: 1024px) {
    .nvr-strip { display: none; }
}

/* ---------- Hero banner ---------- */

.nvr-banner {
    width: 100%;
    margin-bottom: 2.500rem;
    overflow: hidden;
    border-radius: 2rem;
    background: var(--nvr-blue);
    color: var(--nvr-navy);
    font-family: var(--nvr-text);
    scroll-margin-top: 120px;
    box-shadow: 0 18px 32px -18px rgba(37, 99, 235, .55);
}

.nvr-stage { position: relative; }

.nvr-slides {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    outline: none;
}

.nvr-slides::-webkit-scrollbar { display: none; }

.nvr-slide {
    position: relative;
    isolation: isolate;
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1;
    min-height: 320px;
    padding: 22px 20px 48px;
    overflow: hidden;
    background: linear-gradient(105deg, #fff 0%, #EEF6FE 45%, #D6EBFC 100%);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* studio photo behind the copy: objects sit right/bottom, copy sits top-left */
.nvr-photo,
.nvr-photo img {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.nvr-photo img {
    object-fit: cover;
    object-position: right bottom;
    transform-origin: 85% 80%;
}

.nvr-slide.is-active .nvr-photo img { animation: nvr-settle 2.400s cubic-bezier(.2, .6, .2, 1) both; }

@keyframes nvr-settle {
    from { transform: scale(1.070); }
}

/* ---------- Diwali night slides: white and gold copy over the dark photos ---------- */

.nvr-slide--night { background: linear-gradient(105deg, #232C66 0%, #283270 50%, #2E3A80 100%); }
.nvr-slide--night .nvr-slide__copy { color: #fff; text-shadow: 0 2px 14px rgba(5, 10, 40, .55); }
.nvr-slide--night .nvr-eyebrow { color: var(--nvr-gold); }
.nvr-slide--night .nvr-title { color: #fff; }
.nvr-slide--night .nvr-title em { color: var(--nvr-gold); }
.nvr-slide--night .nvr-line { color: rgba(255, 255, 255, .86); }

/* fest copy runs the full width on phones so "Dhamaka Sale" stays on one line above the scene */
@media (max-width: 1023px) {
    .nvr-slide--fest .nvr-slide__copy { max-width: 100%; }
    .nvr-slide--fest .nvr-line { max-width: 30ch; }
}

/* "Sale" stamped in shimmering diya gold */
.nvr-slide--fest.nvr-slide--night .nvr-title em {
    background: linear-gradient(110deg, var(--nvr-marigold) 0%, #FDE68A 45%, var(--nvr-marigold) 65%) 0 0 / 250% 100%;
    color: var(--nvr-night);
    text-shadow: none;
    box-shadow: 0 0 26px rgba(252, 211, 77, .45);
}

.nvr-slide--night .nvr-cta {
    background: var(--nvr-gold);
    color: var(--nvr-night);
    text-shadow: none;
    box-shadow: 0 3px 0 #B45309, 0 0 22px rgba(252, 211, 77, .35);
}

.nvr-slide--night .nvr-cta:active { box-shadow: 0 0 0 #B45309; }
.nvr-slide--night .nvr-cta:focus-visible { outline-color: #fff; }

/* ---------- Slide copy ---------- */

.nvr-slide__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 64%;
}

.nvr-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 11.500px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--nvr-blue);
}

.nvr-eyebrow--ruled::after {
    content: '';
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--nvr-marigold);
}

.nvr-title {
    margin: 0;
    font-size: clamp(2rem, 9.800vw, 2.500rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.025em;
    color: var(--nvr-navy);
}

.nvr-title span { display: block; }
.nvr-title em { font-style: normal; color: var(--nvr-blue); }

/* "Sale" stamped in brand blue */
.nvr-slide--fest .nvr-title em {
    display: inline-block;
    margin-top: .06em;
    padding: .05em .22em .09em;
    border-radius: .16em;
    background: var(--nvr-blue);
    color: #fff;
    transform: rotate(-2deg);
}

.nvr-title--sub { font-size: clamp(1.850rem, 9vw, 2.300rem); }

.nvr-line {
    max-width: 19ch;
    margin: 10px 0 0;
    font-size: 14.500px;
    font-weight: 600;
    line-height: 1.350;
    color: #23407C;
}

.nvr-perks { display: none; }

.nvr-loc {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.300;
    color: var(--nvr-blue);
}

.nvr-loc svg { flex: none; margin-top: 1px; }

.nvr-loc #userLocation {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* "Not Supported" badge the location script appends */
.nvr-loc #userLocation span {
    background: #C81E1E !important;
    color: #fff !important;
}

.nvr-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 11px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--nvr-blue);
    color: #fff;
    font-family: var(--nvr-text);
    font-size: 14.500px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--nvr-navy);
    transition: transform .15s ease, box-shadow .15s ease;
}

.nvr-cta:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 var(--nvr-navy);
}

.nvr-cta:focus-visible,
.nvr-dot:focus-visible,
.nvr-slides:focus-visible {
    outline: 2px solid var(--nvr-navy);
    outline-offset: 3px;
}

.nvr-slides:focus-visible { outline-offset: -4px; }

.nvr-cta:disabled { opacity: .7; cursor: default; }
.nvr-cta svg { transition: transform .2s ease; }
.nvr-cta:hover svg { transform: translateX(3px); }

.nvr-chip {
    margin: 14px 0 0;
    padding: 8px 14px;
    border: 1.500px dashed currentColor;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ---------- Location slide artwork ---------- */

.nvr-slide--loc { background: #DCECFC; }

/* street map with a pickup route marching toward the pin */
.nvr-map {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, .4) 30%, #000 75%);
    mask-image: linear-gradient(100deg, rgba(0, 0, 0, .4) 30%, #000 75%);
}

.nvr-map__route { animation: nvr-march 1s linear infinite; }

@keyframes nvr-march {
    to { stroke-dashoffset: -12; }
}

.nvr-pin {
    position: absolute;
    right: 2px;
    bottom: 34px;
    z-index: -1;
    width: clamp(108px, 33vw, 146px);
    aspect-ratio: 1;
}

.nvr-pin svg { width: 100%; height: 100%; }

.nvr-pin__ripple {
    fill: none;
    stroke: var(--nvr-blue);
    stroke-width: 2.500;
    transform-origin: 100px 162px;
    animation: nvr-ripple 2.800s ease-out infinite;
}

.nvr-pin__ripple--late { animation-delay: -1.400s; }
.nvr-pin__marker { animation: nvr-hop 2.800s cubic-bezier(.4, 0, .3, 1) infinite; }

@keyframes nvr-ripple {
    from { opacity: .9; transform: scale(.25); }
    to { opacity: 0; transform: scale(1.150); }
}

@keyframes nvr-hop {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

/* Photo with no desktop version: phones only */
@media (min-width: 1024px) {
    .nvr-photo--phone { display: none; }
}

/* Doorstep-pickup artwork on phones. It already carries the headline, so the
   copy hides and only the detected location shows, as a chip at the bottom.
   If the city isn't served, the artwork steps aside for the map and message. */
@media (max-width: 1023px) {
    .nvr-slide--loc-art { background: #0B1F4A; }
    .nvr-slide--loc-art .nvr-map,
    .nvr-slide--loc-art .nvr-pin { display: none; }

    .nvr-slide--loc-art .nvr-slide__copy {
        position: absolute;
        right: 12px;
        bottom: 12px;
        max-width: 62%;
    }

    .nvr-slide--loc-art .nvr-loc {
        margin: 0;
        padding: 6px 11px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .95);
        color: var(--nvr-navy);
        font-size: 12px;
        box-shadow: 0 4px 14px rgba(5, 10, 40, .3);
    }

    .nvr-slide--loc-art #serviceNormalView {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .nvr-slide--loc-art:has(#serviceNotSupportedView:not(.hidden)),
    .nvr-slide--loc-art:has(#serviceRequestReview:not(.hidden)) { background: #DCECFC; }

    .nvr-slide--loc-art:has(#serviceNotSupportedView:not(.hidden)) .nvr-photo,
    .nvr-slide--loc-art:has(#serviceRequestReview:not(.hidden)) .nvr-photo { display: none; }

    .nvr-slide--loc-art:has(#serviceNotSupportedView:not(.hidden)) :is(.nvr-map, .nvr-pin),
    .nvr-slide--loc-art:has(#serviceRequestReview:not(.hidden)) :is(.nvr-map, .nvr-pin) { display: block; }

    .nvr-slide--loc-art:has(#serviceNotSupportedView:not(.hidden)) .nvr-slide__copy,
    .nvr-slide--loc-art:has(#serviceRequestReview:not(.hidden)) .nvr-slide__copy { position: static; max-width: 64%; }

    .nvr-slide--loc-art:has(#serviceNotSupportedView:not(.hidden)) .nvr-loc,
    .nvr-slide--loc-art:has(#serviceRequestReview:not(.hidden)) .nvr-loc {
        margin: 0 0 10px;
        padding: 0;
        background: none;
        color: var(--nvr-blue);
        box-shadow: none;
    }
}

/* Dark pickup map on desktop: copy turns white and gold, like the other slides */
@media (min-width: 1024px) {
    .nvr-slide--loc-wide { background: #0A1740; }
    .nvr-slide--loc-wide :is(.nvr-map, .nvr-pin) { display: none; }
    .nvr-slide--loc-wide .nvr-slide__copy { color: #fff; text-shadow: 0 2px 14px rgba(5, 10, 40, .55); }
    .nvr-slide--loc-wide .nvr-loc { color: var(--nvr-gold); }
    .nvr-slide--loc-wide .nvr-title { color: #fff; }
    .nvr-slide--loc-wide .nvr-line { color: rgba(255, 255, 255, .86); }

    .nvr-slide--loc-wide .nvr-cta {
        background: var(--nvr-gold);
        color: var(--nvr-night);
        text-shadow: none;
        box-shadow: 0 3px 0 #B45309, 0 0 22px rgba(252, 211, 77, .35);
    }
}

/* ---------- Dots ---------- */

.nvr-dots {
    position: absolute;
    left: 16px;
    bottom: 12px;
    display: flex;
    gap: 6px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(11, 42, 107, .55);
}

/* the button is the tap target; ::before is the visible dot, ::after its progress fill */
.nvr-dot {
    position: relative;
    width: 7px;
    height: 21px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: width .3s ease;
}

.nvr-dot::before,
.nvr-dot::after {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    width: 100%;
    height: 7px;
    border-radius: 999px;
}

.nvr-dot::before { background: rgba(255, 255, 255, .45); }
.nvr-dot.is-active { width: 26px; }

.nvr-dot.is-active::after {
    background: #fff;
    transform-origin: 0 50%;
}

.nvr-banner.is-playing .nvr-dot.is-active::after { animation: nvr-progress 2s linear both; }

@keyframes nvr-progress {
    from { transform: scaleX(0); }
}

/* ---------- Search band ---------- */

.nvr-foot { padding: 12px 12px 14px; }
.nvr-foot__hint { display: none; }

.nvr-search {
    position: relative;
    width: 100%;
}

.nvr-search input {
    width: 100%;
    padding: 15px 60px 15px 18px;
    border: 0;
    border-radius: 18px;
    background: #fff;
    color: #0F172A;
    font-family: var(--nvr-text);
    font-size: 15px;
    font-weight: 600;
    outline: none;
    transition: box-shadow .2s ease;
}

.nvr-search input::placeholder { color: #7C8BA6; font-weight: 500; }
.nvr-search input:focus { box-shadow: 0 0 0 3px var(--nvr-marigold); }

.nvr-search button {
    position: absolute;
    top: 50%;
    right: 7px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 13px;
    background: var(--nvr-navy);
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
    transition: transform .15s ease;
}

.nvr-search button:active { transform: translateY(-50%) scale(.94); }

/* ---------- Slide entrance (replays each time a slide becomes active) ---------- */

.nvr-slide.is-active .nvr-slide__copy > *,
.nvr-slide.is-active #serviceNormalView > *,
.nvr-slide.is-active #serviceNotSupportedView > *,
.nvr-slide.is-active #serviceRequestReview > * {
    animation: nvr-rise .55s cubic-bezier(.2, .7, .2, 1) both;
}

.nvr-slide.is-active .nvr-slide__copy > :nth-child(2) { animation-delay: .07s; }
.nvr-slide.is-active .nvr-slide__copy > :nth-child(3) { animation-delay: .14s; }
.nvr-slide.is-active .nvr-slide__copy > :nth-child(4) { animation-delay: .21s; }
.nvr-slide--fest.is-active .nvr-title em {
    animation: nvr-stamp .45s cubic-bezier(.2, 1.4, .4, 1) .5s both, nvr-shimmer 2.600s ease-in-out 1s infinite;
}
.nvr-slide.is-active .nvr-pin { animation: nvr-rise .7s cubic-bezier(.2, .7, .2, 1) .1s both; }

@keyframes nvr-rise {
    from { opacity: 0; transform: translateY(10px); }
}

@keyframes nvr-stamp {
    from { opacity: 0; transform: rotate(-9deg) scale(1.350); }
}

@keyframes nvr-shimmer {
    to { background-position: 100% 0; }
}

/* ---------- Desktop ---------- */

@media (min-width: 1024px) {
    .nvr-banner { border-radius: 2.500rem; }

    .nvr-slide {
        justify-content: center;
        aspect-ratio: 2400 / 793;
        min-height: 300px;
        padding: 24px 48px 34px;
    }

    .nvr-slide__copy { max-width: 54%; }
    .nvr-eyebrow { margin-bottom: 12px; font-size: 13px; }
    .nvr-eyebrow--ruled::before,
    .nvr-eyebrow--ruled::after { content: ''; width: 44px; height: 2px; border-radius: 2px; background: var(--nvr-marigold); }
    .nvr-title { font-size: clamp(3rem, 4.600vw, 4.250rem); }
    .nvr-title span { display: inline; }
    .nvr-title--sub { font-size: clamp(2.750rem, 4.200vw, 3.750rem); }
    .nvr-line { max-width: 46ch; margin-top: 14px; font-size: 18px; }
    .nvr-loc { font-size: 14px; }
    .nvr-cta { margin-top: 20px; padding: 13px 22px; font-size: 15.500px; }

    .nvr-perks {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 22px;
        margin: 20px 0 0;
        padding: 0;
        list-style: none;
        font-size: 15px;
        font-weight: 700;
    }

    .nvr-perks li { display: flex; align-items: center; gap: 8px; }

    /* tick drawn in CSS so it stays crisp at any size */
    .nvr-perks li::before {
        content: '';
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--nvr-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.500 10.400l3 3 6-6.500' fill='none' stroke='%23fff' stroke-width='2.200' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
    }

    .nvr-pin { right: 12%; bottom: 26px; width: 210px; }
    .nvr-dots { left: 42px; bottom: 14px; }

    .nvr-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 14px 32px 14px 48px;
    }

    .nvr-foot__hint {
        display: block;
        margin: 0;
        font-size: 17px;
        font-weight: 600;
        color: #fff;
    }

    .nvr-search { width: 24rem; }
}

@media (prefers-reduced-motion: reduce) {
    .nvr-strip *,
    .nvr-banner,
    .nvr-banner * {
        animation: none !important;
    }
}