/* ==========================================================
   WAIN NAKUL — IDENTITY V1
   وين ناكل — الهوية الجديدة

   Architecture:
   - Arabic RTL ready
   - English LTR ready
   - Desktop
   - Tablet / iPad
   - Mobile

   Important:
   The Wain Nakul map + food artwork is the visual STRUCTURE,
   not merely a decorative reference.
========================================================== */

:root {
    --wn-brand: #d01876;
    --wn-brand-dark: #86105f;
    --wn-brand-deep: #650068;
    --wn-purple: #6e38e8;

    --wn-text: #271924;
    --wn-text-soft: #594a55;
    --wn-muted: #8f818b;

    --wn-surface: rgba(255,255,255,.88);
    --wn-surface-strong: rgba(255,255,255,.96);
    --wn-surface-soft: rgba(255,255,255,.68);

    --wn-line: rgba(126,71,113,.13);

    --wn-shadow-sm:
        0 8px 24px rgba(75,27,61,.07);

    --wn-shadow:
        0 18px 50px rgba(75,27,61,.10);

    --wn-radius-sm: 14px;
    --wn-radius-md: 20px;
    --wn-radius-lg: 28px;
    --wn-radius-xl: 36px;

    --wn-container: 1240px;

    --wn-space-page:
        clamp(16px, 3vw, 32px);

    --wn-section-gap:
        clamp(28px, 5vw, 64px);

    --wn-header-height: 78px;

    /*
       This variable will point to the approved
       Wain Nakul master identity artwork in Check 5.
    */
    --wn-identity-image: url('/images/wain-nakul/identity/wain-nakul-master-identity.jpg');
}


/* ==========================================================
   DOCUMENT / DIRECTION
========================================================== */

html {
    scroll-behavior: smooth;
}

html[dir="rtl"] {
    direction: rtl;
}

html[dir="ltr"] {
    direction: ltr;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}


/* ==========================================================
   MASTER WAIN NAKUL STRUCTURE
========================================================== */

.wn-identity-shell {
    position: relative;
    isolation: isolate;
    min-height: 100vh;

    color: var(--wn-text);

    background:
        linear-gradient(
            rgba(255,255,255,.76),
            rgba(255,255,255,.76)
        ),
        var(--wn-identity-image);

    background-position: center top;
    background-repeat: repeat-y;
    background-size: max(100%, 1440px) auto;
}


/*
   A second soft layer keeps the identity visible
   even between cards/sections. No empty white zones.
*/
.wn-identity-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(208,24,118,.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(110,56,232,.06),
            transparent 32%
        );
}


/* ==========================================================
   PAGE
========================================================== */

.wn-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.wn-container {
    width:
        min(
            calc(100% - (var(--wn-space-page) * 2)),
            var(--wn-container)
        );

    margin-inline: auto;
}


/* ==========================================================
   TRANSPARENT IDENTITY SURFACES
========================================================== */

.wn-surface {
    background: var(--wn-surface);
    border: 1px solid var(--wn-line);
    border-radius: var(--wn-radius-lg);

    box-shadow: var(--wn-shadow);

    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.wn-surface-soft {
    background: var(--wn-surface-soft);
    border: 1px solid rgba(255,255,255,.52);

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}


/* ==========================================================
   SECTIONS
========================================================== */

.wn-section {
    position: relative;
    padding-block:
        var(--wn-section-gap);
}

.wn-section + .wn-section {
    padding-block-start: 0;
}

.wn-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-block-end:
        clamp(18px, 3vw, 30px);
}

.wn-section-title {
    margin: 0;

    font-size:
        clamp(24px, 3vw, 38px);

    line-height: 1.2;
}

.wn-section-description {
    margin:
        8px 0 0;

    color: var(--wn-muted);

    font-size:
        clamp(13px, 1.4vw, 16px);

    line-height: 1.8;
}


/* ==========================================================
   RESPONSIVE GRID
========================================================== */

.wn-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 260px), 1fr)
        );

    gap:
        clamp(14px, 2vw, 24px);
}


/* ==========================================================
   CARDS
========================================================== */

.wn-card {
    position: relative;
    overflow: hidden;

    min-width: 0;

    border: 1px solid var(--wn-line);
    border-radius: var(--wn-radius-lg);

    background:
        rgba(255,255,255,.84);

    box-shadow:
        var(--wn-shadow-sm);

    -webkit-backdrop-filter:
        blur(16px);

    backdrop-filter:
        blur(16px);
}

.wn-card-content {
    padding:
        clamp(16px, 2.4vw, 24px);
}


/* ==========================================================
   FORMS
========================================================== */

.wn-field {
    width: 100%;
    min-height: 48px;

    padding-block:
        11px;

    padding-inline:
        15px;

    border:
        1px solid var(--wn-line);

    border-radius:
        var(--wn-radius-sm);

    background:
        rgba(255,255,255,.90);

    color:
        var(--wn-text);

    outline:
        none;
}

.wn-field:focus {
    border-color:
        rgba(208,24,118,.50);

    box-shadow:
        0 0 0 4px rgba(208,24,118,.08);
}


/* ==========================================================
   BUTTONS
========================================================== */

.wn-button {
    min-height: 46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding-block:
        10px;

    padding-inline:
        18px;

    border:
        0;

    border-radius:
        var(--wn-radius-sm);

    cursor:
        pointer;

    font:
        inherit;

    font-weight:
        800;
}

.wn-button-primary {
    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            var(--wn-brand),
            var(--wn-brand-dark)
        );
}


/* ==========================================================
   RTL / LTR SAFE UTILITIES
========================================================== */

.wn-text-start {
    text-align: start;
}

.wn-text-end {
    text-align: end;
}

.wn-push-end {
    margin-inline-start: auto;
}

.wn-icon-text {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;
}


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 1200px) {

    .wn-desktop-only {
        display: initial;
    }

    .wn-mobile-only {
        display: none !important;
    }
}


/* ==========================================================
   TABLET / IPAD
========================================================== */

@media (min-width: 768px) and (max-width: 1199px) {

    :root {
        --wn-header-height: 72px;
        --wn-container: 960px;
    }

    .wn-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    .wn-section-head {
        align-items:
            center;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    :root {
        --wn-header-height: 64px;
        --wn-space-page: 14px;
        --wn-section-gap: 30px;
        --wn-radius-lg: 22px;
        --wn-radius-xl: 26px;
    }

    .wn-identity-shell {
        background-size:
            auto 1000px;
    }

    .wn-section-head {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;
    }

    .wn-grid {
        grid-template-columns:
            minmax(0,1fr);
    }

    .wn-card-content {
        padding:
            16px;
    }

    .wn-button {
        min-height:
            48px;
    }

    .wn-desktop-only {
        display:
            none !important;
    }

    .wn-mobile-only {
        display:
            initial;
    }
}


/* ==========================================================
   VERY SMALL PHONES
========================================================== */

@media (max-width: 380px) {

    :root {
        --wn-space-page: 11px;
    }

    .wn-section-title {
        font-size:
            22px;
    }
}


/* ==========================================================
   LARGE / WIDE SCREENS
========================================================== */

@media (min-width: 1600px) {

    :root {
        --wn-container:
            1360px;
    }
}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

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

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}

/* ==========================================================
   WAIN NAKUL — HOME HERO V1
   Identity: map + route + food world
   RTL/LTR + desktop/tablet/mobile safe
========================================================== */

.wn4-home-page .wn4h-hero {
    position: relative;
    padding-block: clamp(18px, 3vw, 42px);
    isolation: isolate;
}

.wn4-home-page .wn4h-hero .wn4-container {
    position: relative;
    z-index: 2;
}

.wn4-home-page .wn4h-hero-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: clamp(480px, 62vw, 680px);
    padding-block: clamp(34px, 6vw, 76px);
    padding-inline: clamp(22px, 6vw, 84px);
    overflow: hidden;
    border: 1px solid rgba(134, 16, 95, .14);
    border-radius: clamp(28px, 4vw, 48px);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.88),
            rgba(255,247,252,.78)
        ),
        var(--wn-identity-image);

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    box-shadow:
        0 28px 80px rgba(101, 0, 104, .13),
        inset 0 1px 0 rgba(255,255,255,.82);
}

.wn4-home-page .wn4h-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background:
        radial-gradient(
            circle at 15% 22%,
            rgba(208,24,118,.13),
            transparent 24%
        ),
        radial-gradient(
            circle at 82% 70%,
            rgba(110,56,232,.11),
            transparent 27%
        );
}

.wn4-home-page .wn4h-hero-card::after {
    content: "";
    position: absolute;
    inset-block: 8%;
    inset-inline-end: 7%;
    width: clamp(100px, 14vw, 180px);
    height: clamp(100px, 14vw, 180px);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;

    background:
        radial-gradient(
            circle,
            rgba(208,24,118,.12) 0 7%,
            transparent 8% 100%
        );

    border: 2px dashed rgba(134,16,95,.12);
}

.wn4-home-page .wn4h-hero-copy {
    position: relative;
    z-index: 2;
    width: min(100%, 720px);
    margin-inline: auto;
    text-align: center;
}

.wn4-home-page .wn4h-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding-block: 7px;
    padding-inline: 16px;
    margin-block-end: 16px;

    border: 1px solid rgba(208,24,118,.16);
    border-radius: 999px;

    background: rgba(255,255,255,.76);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    color: var(--wn-brand-dark);
    font-weight: 800;
}

.wn4-home-page .wn4h-hero h1 {
    max-width: 820px;
    margin-block: 0 14px;
    margin-inline: auto;

    color: var(--wn-brand-deep);
    font-size: clamp(38px, 6vw, 76px);
    line-height: 1.05;
    letter-spacing: -.03em;
}

.wn4-home-page .wn4h-hero-copy > p {
    max-width: 620px;
    margin-block: 0 28px;
    margin-inline: auto;

    color: #5d4b5c;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.85;
}

.wn4-home-page .wn4h-search {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 10px;

    width: min(100%, 680px);
    margin-inline: auto;

    padding: 8px;

    border: 1px solid rgba(134,16,95,.14);
    border-radius: 22px;

    background: rgba(255,255,255,.90);
    box-shadow: 0 16px 42px rgba(101,0,104,.11);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.wn4-home-page .wn4h-search input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 52px;

    padding-block: 10px;
    padding-inline: 18px;

    border: 0;
    outline: 0;
    background: transparent;

    color: #332532;
    font: inherit;
    text-align: start;
}

.wn4-home-page .wn4h-search input::placeholder {
    color: #8d7b89;
}

.wn4-home-page .wn4h-search button {
    flex: 0 0 auto;
    min-width: 104px;
    min-height: 52px;

    padding-inline: 22px;

    border: 0;
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            var(--wn-brand-dark),
            var(--wn-brand)
        );

    color: #fff;
    font: inherit;
    font-weight: 900;
    cursor: pointer;

    box-shadow: 0 10px 24px rgba(208,24,118,.20);
}

.wn4-home-page .wn4h-quick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;

    margin-block-start: 16px;
}

.wn4-home-page .wn4h-quick a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding-inline: 15px;

    border: 1px solid rgba(134,16,95,.12);
    border-radius: 999px;

    background: rgba(255,255,255,.76);
    color: var(--wn-brand-dark);

    font-size: 14px;
    font-weight: 800;
    text-decoration: none;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.wn4-home-page .wn4h-location {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    width: min(100%, 680px);
    margin-block-start: 22px;
    margin-inline: auto;

    padding-block: 14px;
    padding-inline: 16px;

    border: 1px solid rgba(134,16,95,.13);
    border-radius: 22px;

    background: rgba(255,255,255,.84);
    box-shadow: 0 14px 34px rgba(101,0,104,.09);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.wn4-home-page .wn4h-location-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-align: start;
}

.wn4-home-page .wn4h-location-pin {
    display: grid;
    place-items: center;
    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    border-radius: 50%;
    background: rgba(208,24,118,.10);
    font-size: 22px;
}

.wn4-home-page .wn4h-location-info div {
    min-width: 0;
}

.wn4-home-page .wn4h-location-info strong,
.wn4-home-page .wn4h-location-info span,
.wn4-home-page .wn4h-location-info small {
    display: block;
}

.wn4-home-page .wn4h-location-info strong {
    overflow: hidden;
    color: var(--wn-brand-deep);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn4-home-page .wn4h-location > button {
    flex: 0 0 auto;
    min-height: 42px;
    padding-inline: 16px;

    border: 1px solid rgba(208,24,118,.16);
    border-radius: 14px;

    background: rgba(208,24,118,.08);
    color: var(--wn-brand-dark);

    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
    .wn4-home-page .wn4h-hero-card {
        min-height: 560px;
        padding-inline: clamp(28px, 6vw, 60px);
        background-size: cover;
    }
}

/* Phone */
@media (max-width: 767px) {
    .wn4-home-page .wn4h-hero {
        padding-block: 10px 24px;
    }

    .wn4-home-page .wn4h-hero-card {
        min-height: auto;
        padding-block: 34px 26px;
        padding-inline: 16px;
        border-radius: 26px;
        background-position: center top;
    }

    .wn4-home-page .wn4h-hero h1 {
        font-size: clamp(36px, 12vw, 52px);
    }

    .wn4-home-page .wn4h-hero-copy > p {
        margin-block-end: 20px;
        font-size: 15px;
        line-height: 1.7;
    }

    .wn4-home-page .wn4h-search {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        width: 100%;
        padding: 6px;
        border-radius: 18px;
    }

    .wn4-home-page .wn4h-search input {
        min-height: 48px;
        padding-inline: 12px;
        font-size: 14px;
    }

    .wn4-home-page .wn4h-search button {
        min-width: 74px;
        min-height: 48px;
        padding-inline: 14px;
        border-radius: 13px;
    }

    .wn4-home-page .wn4h-location {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .wn4-home-page .wn4h-location > button {
        width: 100%;
    }

    .wn4-home-page .wn4h-quick {
        gap: 6px;
    }

    .wn4-home-page .wn4h-quick a {
        min-height: 34px;
        padding-inline: 12px;
        font-size: 13px;
    }
}

/* Very small phones */
@media (max-width: 380px) {
    .wn4-home-page .wn4h-hero-card {
        padding-inline: 12px;
        border-radius: 22px;
    }

    .wn4-home-page .wn4h-search {
        grid-template-columns: 1fr;
    }

    .wn4-home-page .wn4h-search button {
        width: 100%;
    }
}

/* Future English / LTR */
html[dir="ltr"] .wn4-home-page .wn4h-hero-copy,
html[dir="ltr"] .wn4-home-page .wn4h-location-info {
    direction: ltr;
}

html[dir="rtl"] .wn4-home-page .wn4h-hero-copy,
html[dir="rtl"] .wn4-home-page .wn4h-location-info {
    direction: rtl;
}


/* ==========================================================
   WAIN NAKUL — CLEAN MAP WORLD V1
   Master identity image remains reference only.
   No raster UI/screenshot is stretched across the website.
========================================================== */

.wn-identity-shell {
    --wn-map-line: rgba(134, 16, 95, .075);
    --wn-map-line-soft: rgba(208, 24, 118, .055);
    --wn-map-route: rgba(208, 24, 118, .18);

    position: relative;

    background:
        radial-gradient(
            circle at 14% 18%,
            rgba(208,24,118,.10),
            transparent 25%
        ),
        radial-gradient(
            circle at 82% 34%,
            rgba(110,56,232,.075),
            transparent 28%
        ),
        radial-gradient(
            circle at 44% 78%,
            rgba(208,24,118,.075),
            transparent 26%
        ),
        #fffafd;

    background-attachment: scroll;
}

/* clean map grid */
.wn-identity-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background-image:
        linear-gradient(
            28deg,
            transparent 0 47%,
            var(--wn-map-line) 48% 49%,
            transparent 50% 100%
        ),
        linear-gradient(
            -31deg,
            transparent 0 47%,
            var(--wn-map-line-soft) 48% 49%,
            transparent 50% 100%
        ),
        linear-gradient(
            90deg,
            transparent 0 49%,
            rgba(134,16,95,.035) 50%,
            transparent 51% 100%
        );

    background-size:
        260px 180px,
        310px 220px,
        190px 190px;

    opacity: .78;
}

/* route / location atmosphere */
.wn-identity-shell::after {
    content: "";
    position: fixed;
    inset: -10%;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 12% 24%,
            var(--wn-map-route) 0 5px,
            rgba(255,255,255,.90) 6px 11px,
            transparent 12px
        ),
        radial-gradient(
            circle at 34% 64%,
            rgba(134,16,95,.18) 0 6px,
            rgba(255,255,255,.90) 7px 12px,
            transparent 13px
        ),
        radial-gradient(
            circle at 67% 22%,
            rgba(208,24,118,.20) 0 5px,
            rgba(255,255,255,.90) 6px 11px,
            transparent 12px
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(110,56,232,.16) 0 6px,
            rgba(255,255,255,.90) 7px 12px,
            transparent 13px
        );

    opacity: .72;
}

/* Hero is part of the same map world */
.wn4-home-page .wn4h-hero-card {
    background:
        radial-gradient(
            circle at 14% 25%,
            rgba(208,24,118,.12),
            transparent 25%
        ),
        radial-gradient(
            circle at 86% 72%,
            rgba(110,56,232,.09),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            rgba(255,255,255,.82),
            rgba(255,239,248,.76)
        );

    border-color: rgba(134,16,95,.12);
}

/* map roads inside hero */
.wn4-home-page .wn4h-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:
        linear-gradient(
            24deg,
            transparent 0 46%,
            rgba(208,24,118,.09) 47% 49%,
            transparent 50% 100%
        ),
        linear-gradient(
            -28deg,
            transparent 0 46%,
            rgba(134,16,95,.06) 47% 49%,
            transparent 50% 100%
        );

    background-size:
        250px 180px,
        330px 230px;

    opacity: .72;
}

/* subtle location pins — no extra food photos */
.wn4-home-page .wn4h-hero-card::after {
    content: "";
    position: absolute;
    inset-block-start: 12%;
    inset-inline-start: 8%;

    width: clamp(46px, 5vw, 68px);
    height: clamp(46px, 5vw, 68px);

    border-radius: 50% 50% 50% 8%;
    transform: rotate(-45deg);

    background:
        linear-gradient(
            135deg,
            rgba(134,16,95,.82),
            rgba(208,24,118,.70)
        );

    box-shadow:
        0 18px 38px rgba(134,16,95,.16);

    opacity: .24;
    z-index: 0;
    pointer-events: none;
}

/* Keep real sections connected to the background */
.wn4-home-page .wn4h-section {
    position: relative;
    background: transparent;
}

/* translucent surfaces instead of dead white blocks */
.wn4-home-page .wn4h-category,
.wn4-home-page .wn4h-nearby-card,
.wn4-home-page .wn4h-map-card {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
    .wn-identity-shell::before {
        background-size:
            220px 160px,
            270px 200px,
            170px 170px;
    }
}

/* Phone */
@media (max-width: 767px) {
    .wn-identity-shell::before {
        background-size:
            170px 125px,
            210px 155px,
            140px 140px;

        opacity: .58;
    }

    .wn-identity-shell::after {
        opacity: .48;
    }

    .wn4-home-page .wn4h-hero-card::before {
        background-size:
            180px 130px,
            230px 165px;
    }

    .wn4-home-page .wn4h-hero-card::after {
        width: 42px;
        height: 42px;
        opacity: .18;
    }
}

/* Future LTR remains structurally identical */
html[dir="ltr"] .wn-identity-shell,
html[dir="rtl"] .wn-identity-shell {
    background-position: center top;
}


/* ==========================================================
   WAIN NAKUL — OFFERS PAGE V1
========================================================== */

.wn4-offers-page .wn-offers-page {
    position: relative;
    padding-block-end: clamp(48px, 7vw, 90px);
}

.wn4-offers-page .wn-offers-hero {
    padding-block: clamp(22px, 4vw, 48px) 20px;
}

.wn4-offers-page .wn-offers-hero-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    min-height: 220px;

    padding-block: clamp(30px, 5vw, 58px);
    padding-inline: clamp(24px, 5vw, 64px);

    overflow: hidden;

    border: 1px solid rgba(134,16,95,.12);
    border-radius: clamp(26px, 3vw, 38px);

    background:
        radial-gradient(
            circle at 12% 30%,
            rgba(208,24,118,.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 86% 70%,
            rgba(110,56,232,.08),
            transparent 25%
        ),
        rgba(255,255,255,.78);

    box-shadow:
        0 24px 60px rgba(101,0,104,.10);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.wn4-offers-page .wn-offers-hero-copy {
    max-width: 680px;
}

.wn4-offers-page .wn-offers-eyebrow {
    display: inline-block;
    margin-block-end: 10px;

    color: var(--wn-brand);
    font-weight: 900;
}

.wn4-offers-page .wn-offers-hero h1 {
    margin: 0;

    color: var(--wn-brand-deep);
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.1;
}

.wn4-offers-page .wn-offers-hero p {
    max-width: 620px;

    margin-block: 14px 0;

    color: #665563;
    font-size: 17px;
    line-height: 1.8;
}

.wn4-offers-page .wn-offers-count {
    display: grid;
    place-items: center;
    flex: 0 0 auto;

    min-width: 130px;
    min-height: 130px;

    padding: 18px;

    border: 1px solid rgba(208,24,118,.13);
    border-radius: 30px;

    background: rgba(255,255,255,.76);

    box-shadow:
        0 16px 38px rgba(101,0,104,.09);
}

.wn4-offers-page .wn-offers-count strong {
    color: var(--wn-brand);
    font-size: 38px;
    line-height: 1;
}

.wn4-offers-page .wn-offers-count span {
    margin-block-start: 6px;
    color: #6e5b69;
    font-size: 14px;
    font-weight: 800;
}

.wn4-offers-page .wn-offers-content {
    padding-block-start: 18px;
}

.wn4-offers-page .wn-offers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.wn4-offers-page .wn-offer-card {
    display: flex;
    flex-direction: column;
    min-width: 0;

    overflow: hidden;

    border: 1px solid rgba(134,16,95,.11);
    border-radius: 26px;

    background: rgba(255,255,255,.84);

    box-shadow:
        0 18px 48px rgba(101,0,104,.08);

    color: inherit;
    text-decoration: none;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.wn4-offers-page .wn-offer-card:hover {
    transform: translateY(-4px);
    border-color: rgba(208,24,118,.24);

    box-shadow:
        0 24px 60px rgba(101,0,104,.13);
}

.wn4-offers-page .wn-offer-image {
    position: relative;

    height: 220px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255,239,247,.96),
            rgba(245,234,255,.94)
        );
}

.wn4-offers-page .wn-offer-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.wn4-offers-page .wn-offer-placeholder {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;

    color: var(--wn-brand-dark);
}

.wn4-offers-page .wn-offer-placeholder span {
    font-size: 46px;
    font-weight: 900;
}

.wn4-offers-page .wn-offer-placeholder small {
    font-weight: 800;
}

.wn4-offers-page .wn-offer-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    padding-block: 20px;
    padding-inline: 20px;
}

.wn4-offers-page .wn-offer-activity {
    margin-block-end: 7px;

    color: var(--wn-brand);
    font-size: 13px;
    font-weight: 900;
}

.wn4-offers-page .wn-offer-body h2 {
    margin: 0;

    color: var(--wn-brand-deep);
    font-size: 20px;
    line-height: 1.45;
}

.wn4-offers-page .wn-offer-body p {
    margin-block: 10px 0;

    color: #756572;
    font-size: 14px;
    line-height: 1.75;
}

.wn4-offers-page .wn-offer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-block-start: auto;
    padding-block-start: 18px;
}

.wn4-offers-page .wn-offer-value {
    color: var(--wn-brand-dark);
    font-size: 16px;
}

.wn4-offers-page .wn-offer-open {
    color: var(--wn-brand);
    font-size: 13px;
    font-weight: 800;
}

.wn4-offers-page .wn-offers-empty {
    max-width: 720px;

    margin-inline: auto;

    padding-block: clamp(50px, 8vw, 90px);
    padding-inline: 24px;

    border: 1px solid rgba(134,16,95,.11);
    border-radius: 32px;

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

    box-shadow:
        0 22px 56px rgba(101,0,104,.08);

    text-align: center;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.wn4-offers-page .wn-offers-empty-icon {
    display: grid;
    place-items: center;

    width: 72px;
    height: 72px;

    margin-inline: auto;
    margin-block-end: 18px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(208,24,118,.12),
            rgba(110,56,232,.10)
        );

    color: var(--wn-brand);
    font-size: 34px;
    font-weight: 900;
}

.wn4-offers-page .wn-offers-empty h2 {
    margin: 0;

    color: var(--wn-brand-deep);
    font-size: 27px;
}

.wn4-offers-page .wn-offers-empty p {
    margin-block: 10px 24px;

    color: #786976;
}

@media (max-width: 980px) {
    .wn4-offers-page .wn-offers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .wn4-offers-page .wn-offers-hero-card {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;

        padding-block: 28px;
        padding-inline: 18px;

        border-radius: 26px;
    }

    .wn4-offers-page .wn-offers-count {
        width: 100%;
        min-height: auto;

        grid-template-columns: auto auto;
        justify-content: center;
        gap: 8px;

        border-radius: 18px;
    }

    .wn4-offers-page .wn-offers-count strong {
        font-size: 28px;
    }

    .wn4-offers-page .wn-offers-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .wn4-offers-page .wn-offer-image {
        height: 200px;
    }
}


/* ==========================================================
   WAIN NAKUL — COMMUNITY PAGE V1
   Unified with app-v4 / clean map identity
========================================================== */

.wn4-community-page .wn-community-shell {
    position: relative;
    padding-block:
        clamp(22px, 4vw, 46px)
        clamp(58px, 8vw, 96px);
}

.wn4-community-page .wn-community-stage {
    position: relative;
    width: min(100%, 840px);
    margin-inline: auto;
    padding-inline: 18px;
}

.wn4-community-page .page {
    width: 100%;
    margin-inline: auto;
    padding: 0;
}

.wn4-community-page .topbar {
    padding-block: 24px;
    padding-inline: clamp(20px, 4vw, 34px);
    margin-block-end: 18px;

    border: 1px solid rgba(134,16,95,.12);
    border-radius: 28px;

    background:
        radial-gradient(
            circle at 12% 30%,
            rgba(208,24,118,.11),
            transparent 32%
        ),
        rgba(255,255,255,.80);

    box-shadow:
        0 20px 52px rgba(101,0,104,.08);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.wn4-community-page .title h1 {
    color: var(--wn-brand-deep);
    font-size: clamp(26px, 4vw, 38px);
}

.wn4-community-page .title p {
    color: #756472;
}

.wn4-community-page .home {
    border-color: rgba(134,16,95,.13);
    background: rgba(255,255,255,.78);
    color: var(--wn-brand-dark);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.wn4-community-page .community-feed-tabs {
    position: relative;

    padding: 7px;
    margin-block-end: 18px;

    border: 1px solid rgba(134,16,95,.11);
    border-radius: 20px;

    background: rgba(255,255,255,.76);

    box-shadow:
        0 12px 34px rgba(101,0,104,.06);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.wn4-community-page .community-feed-tab {
    border-radius: 14px;
}

.wn4-community-page .community-feed-tab.active {
    background:
        linear-gradient(
            135deg,
            rgba(208,24,118,.12),
            rgba(110,56,232,.09)
        );

    color: var(--wn-brand-dark);
}

.wn4-community-page .composer,
.wn4-community-page .post,
.wn4-community-page .login-box {
    border-color: rgba(134,16,95,.11);

    background: rgba(255,255,255,.84);

    box-shadow:
        0 18px 46px rgba(101,0,104,.07);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.wn4-community-page .composer,
.wn4-community-page .post {
    border-radius: 24px;
}

.wn4-community-page textarea,
.wn4-community-page select,
.wn4-community-page input {
    background-color: rgba(255,255,255,.78);
}

.wn4-community-page .publish {
    background:
        linear-gradient(
            135deg,
            var(--wn-brand-dark),
            var(--wn-brand)
        );

    box-shadow:
        0 10px 26px rgba(208,24,118,.18);
}

.wn4-community-page .success,
.wn4-community-page .errors {
    border-radius: 18px;
}

@media (max-width: 767px) {

    .wn4-community-page .wn-community-shell {
        padding-block: 12px 84px;
    }

    .wn4-community-page .wn-community-stage {
        padding-inline: 10px;
    }

    .wn4-community-page .topbar {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;

        padding-block: 20px;
        padding-inline: 16px;

        border-radius: 22px;
    }

    .wn4-community-page .community-top-actions {
        width: 100%;
    }

    .wn4-community-page .home {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .wn4-community-page .community-feed-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .wn4-community-page .community-feed-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .wn4-community-page .composer,
    .wn4-community-page .post {
        padding: 15px;
        border-radius: 20px;
    }
}


/* ==========================================================
   WAIN NAKUL — HERO MAP FILL V2
   Remove dead pink area and make the whole hero a map world
========================================================== */

.wn4-home-page .wn4h-hero-card {
    background:
        radial-gradient(
            circle at 12% 22%,
            rgba(208,24,118,.09),
            transparent 22%
        ),
        radial-gradient(
            circle at 76% 66%,
            rgba(110,56,232,.07),
            transparent 26%
        ),
        linear-gradient(
            rgba(255,255,255,.72),
            rgba(255,248,252,.72)
        );

    overflow: hidden;
}

.wn4-home-page .wn4h-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:

        /* main route */
        linear-gradient(
            25deg,
            transparent 0 43%,
            rgba(208,24,118,.18) 44% 46%,
            transparent 47% 100%
        ),

        /* secondary route */
        linear-gradient(
            -31deg,
            transparent 0 45%,
            rgba(134,16,95,.11) 46% 48%,
            transparent 49% 100%
        ),

        /* map streets */
        linear-gradient(
            88deg,
            transparent 0 48%,
            rgba(134,16,95,.055) 49% 50%,
            transparent 51% 100%
        ),

        linear-gradient(
            4deg,
            transparent 0 48%,
            rgba(208,24,118,.045) 49% 50%,
            transparent 51% 100%
        );

    background-size:
        360px 240px,
        420px 280px,
        170px 170px,
        220px 180px;

    background-position:
        center,
        center,
        center,
        center;

    opacity: .95;
}

/* distributed location points */
.wn4-home-page .wn4h-hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    transform: none;

    background:

        radial-gradient(
            circle at 12% 28%,
            rgba(208,24,118,.68) 0 6px,
            rgba(255,255,255,.96) 7px 12px,
            rgba(134,16,95,.15) 13px 14px,
            transparent 15px
        ),

        radial-gradient(
            circle at 29% 66%,
            rgba(134,16,95,.62) 0 6px,
            rgba(255,255,255,.96) 7px 12px,
            rgba(134,16,95,.14) 13px 14px,
            transparent 15px
        ),

        radial-gradient(
            circle at 47% 24%,
            rgba(208,24,118,.62) 0 5px,
            rgba(255,255,255,.96) 6px 11px,
            rgba(134,16,95,.13) 12px 13px,
            transparent 14px
        ),

        radial-gradient(
            circle at 71% 72%,
            rgba(110,56,232,.54) 0 6px,
            rgba(255,255,255,.96) 7px 12px,
            rgba(110,56,232,.12) 13px 14px,
            transparent 15px
        ),

        radial-gradient(
            circle at 89% 33%,
            rgba(208,24,118,.58) 0 5px,
            rgba(255,255,255,.96) 6px 11px,
            rgba(134,16,95,.13) 12px 13px,
            transparent 14px
        );

    opacity: .82;
}

/* keep content readable over map */
.wn4-home-page .wn4h-hero-copy,
.wn4-home-page .wn4h-location {
    position: relative;
    z-index: 2;
}

.wn4-home-page .wn4h-hero-copy {
    padding-block: clamp(18px, 3vw, 34px);
    padding-inline: clamp(18px, 3vw, 34px);

    border-radius: 28px;

    background:
        linear-gradient(
            rgba(255,255,255,.60),
            rgba(255,255,255,.52)
        );

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

@media (max-width: 767px) {

    .wn4-home-page .wn4h-hero-card::before {
        background-size:
            250px 180px,
            290px 210px,
            135px 135px,
            170px 145px;
    }

    .wn4-home-page .wn4h-hero-card::after {
        opacity: .60;
    }

    .wn4-home-page .wn4h-hero-copy {
        padding-block: 16px;
        padding-inline: 12px;
        border-radius: 22px;
    }
}


/* ==========================================================
   WAIN NAKUL — HOME HERO FINAL STRUCTURE V1
   Real visual column: map + location + food identity
========================================================== */

.wn4-home-page .wn4h-hero-card {
    display: grid;
    grid-template-columns:
        minmax(320px, .88fr)
        minmax(520px, 1.12fr);

    grid-template-areas:
        "visual copy"
        "location location";

    align-items: center;
    gap:
        clamp(20px, 3vw, 46px)
        clamp(28px, 5vw, 72px);

    min-height: 520px;

    padding-block:
        clamp(42px, 5vw, 68px)
        24px;

    padding-inline:
        clamp(28px, 5vw, 64px);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.92),
            rgba(255,243,250,.89)
        );

    overflow: hidden;
}

/*
 * Old pseudo map layers are disabled here.
 * The map is now a real structural element.
 */
.wn4-home-page .wn4h-hero-card::before,
.wn4-home-page .wn4h-hero-card::after {
    content: none;
    display: none;
}

.wn4-home-page .wn4h-hero-copy {
    grid-area: copy;

    width: 100%;
    max-width: 680px;

    margin-inline: 0;

    padding: 0;

    background: transparent;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    text-align: start;
}

.wn4-home-page .wn4h-location {
    grid-area: location;

    position: relative;
    z-index: 5;

    width: 100%;
    margin-block-start: 6px;
}


/* ==========================================================
   MAP VISUAL
========================================================== */

.wn4-home-page .wn4h-hero-visual {
    grid-area: visual;

    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 340px;

    align-self: stretch;

    overflow: hidden;

    border:
        1px solid rgba(134,16,95,.10);

    border-radius:
        clamp(28px, 4vw, 44px);

    background:
        radial-gradient(
            circle at 22% 20%,
            rgba(208,24,118,.15),
            transparent 24%
        ),
        radial-gradient(
            circle at 78% 76%,
            rgba(110,56,232,.11),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.76),
            rgba(255,236,247,.72)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        0 22px 50px rgba(101,0,104,.08);

    isolation: isolate;
}


/* subtle map grid */
.wn4-home-page .wn4h-hero-visual::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    background-image:
        linear-gradient(
            24deg,
            transparent 0 48%,
            rgba(134,16,95,.055) 49% 50%,
            transparent 51% 100%
        ),
        linear-gradient(
            -31deg,
            transparent 0 48%,
            rgba(208,24,118,.065) 49% 50%,
            transparent 51% 100%
        ),
        linear-gradient(
            90deg,
            transparent 0 49%,
            rgba(134,16,95,.035) 50%,
            transparent 51% 100%
        );

    background-size:
        190px 145px,
        240px 175px,
        115px 115px;

    opacity: .9;
}


/* atmosphere */
.wn4-home-page .wn4h-hero-visual::after {
    content: "";

    position: absolute;
    inset: 12%;

    z-index: -1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(208,24,118,.14),
            rgba(208,24,118,.035) 42%,
            transparent 70%
        );

    filter: blur(4px);
}


/* ==========================================================
   BRAND
========================================================== */

.wn4-home-page .wn4h-map-brand {
    position: absolute;

    inset-block-start: 50%;
    inset-inline-start: 50%;

    width:
        clamp(116px, 12vw, 168px);

    aspect-ratio: 1 / 1;

    display: grid;
    place-items: center;

    transform:
        translate(-50%, -50%);

    border:
        1px solid rgba(208,24,118,.14);

    border-radius: 36%;

    background:
        rgba(255,255,255,.88);

    box-shadow:
        0 22px 55px rgba(101,0,104,.16);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.wn4-home-page .wn4h-map-brand img {
    width: 74%;
    height: 74%;

    object-fit: contain;
}


/* ==========================================================
   ROUTES
========================================================== */

.wn4-home-page .wn4h-map-route {
    position: absolute;

    height: 10px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(208,24,118,.10),
            rgba(208,24,118,.44),
            rgba(110,56,232,.18)
        );

    box-shadow:
        0 0 0 4px rgba(255,255,255,.48);
}

.wn4-home-page .wn4h-map-route-a {
    width: 72%;

    inset-block-start: 28%;
    inset-inline-start: -8%;

    transform: rotate(-20deg);
}

.wn4-home-page .wn4h-map-route-b {
    width: 76%;

    inset-block-start: 66%;
    inset-inline-start: 30%;

    transform: rotate(24deg);
}

.wn4-home-page .wn4h-map-route-c {
    width: 55%;

    inset-block-start: 48%;
    inset-inline-start: -6%;

    transform: rotate(33deg);

    opacity: .68;
}


/* ==========================================================
   LOCATION POINTS
========================================================== */

.wn4-home-page .wn4h-map-point {
    position: absolute;

    width: 19px;
    height: 19px;

    border:
        5px solid rgba(255,255,255,.96);

    border-radius: 50%;

    background:
        var(--wn-brand);

    box-shadow:
        0 8px 20px rgba(134,16,95,.20);
}

.wn4-home-page .wn4h-map-point-a {
    inset-block-start: 17%;
    inset-inline-start: 16%;
}

.wn4-home-page .wn4h-map-point-b {
    inset-block-start: 24%;
    inset-inline-end: 16%;
}

.wn4-home-page .wn4h-map-point-c {
    inset-block-end: 18%;
    inset-inline-start: 21%;
}

.wn4-home-page .wn4h-map-point-d {
    inset-block-end: 20%;
    inset-inline-end: 14%;

    background:
        var(--wn-purple);
}


/* ==========================================================
   FOOD SIGNS
========================================================== */

.wn4-home-page .wn4h-map-food-sign {
    position: absolute;

    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;

    border:
        1px solid rgba(134,16,95,.12);

    border-radius: 18px;

    background:
        rgba(255,255,255,.88);

    box-shadow:
        0 14px 30px rgba(101,0,104,.10);

    font-size: 24px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.wn4-home-page .wn4h-map-food-sign-a {
    inset-block-start: 16%;
    inset-inline-end: 30%;
}

.wn4-home-page .wn4h-map-food-sign-b {
    inset-block-end: 17%;
    inset-inline-start: 34%;
}


/* ==========================================================
   TABLET
========================================================== */

@media (min-width: 768px) and (max-width: 1100px) {

    .wn4-home-page .wn4h-hero-card {
        grid-template-columns:
            minmax(250px, .78fr)
            minmax(420px, 1.22fr);

        gap: 26px;

        padding-inline:
            clamp(22px, 4vw, 40px);
    }

    .wn4-home-page .wn4h-hero-visual {
        min-height: 300px;
    }

    .wn4-home-page .wn4h-map-brand {
        width: 118px;
    }
}


/* ==========================================================
   PHONE
========================================================== */

@media (max-width: 767px) {

    .wn4-home-page .wn4h-hero-card {
        grid-template-columns: 1fr;

        grid-template-areas:
            "visual"
            "copy"
            "location";

        gap: 20px;

        min-height: auto;

        padding-block: 18px 18px;
        padding-inline: 14px;
    }

    .wn4-home-page .wn4h-hero-visual {
        min-height: 220px;

        border-radius: 24px;
    }

    .wn4-home-page .wn4h-map-brand {
        width: 100px;

        border-radius: 30px;
    }

    .wn4-home-page .wn4h-map-food-sign {
        width: 44px;
        height: 44px;

        border-radius: 15px;

        font-size: 20px;
    }

    .wn4-home-page .wn4h-hero-copy {
        text-align: center;
    }

    .wn4-home-page .wn4h-location {
        margin-block-start: 0;
    }
}


/* ==========================================================
   FUTURE LTR
========================================================== */

html[dir="ltr"] .wn4-home-page .wn4h-hero-card,
html[dir="rtl"] .wn4-home-page .wn4h-hero-card {
    direction: inherit;
}


/* ==========================================================
   WAIN NAKUL — HOME HERO VISUAL BALANCE V2
   Map first / brand second
========================================================== */

.wn4-home-page .wn4h-hero-visual {
    min-height: 360px;

    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(208,24,118,.13),
            transparent 22%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(110,56,232,.10),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.88),
            rgba(255,239,248,.82)
        );
}


/* Stronger visible map network */
.wn4-home-page .wn4h-hero-visual::before {
    background-image:

        linear-gradient(
            22deg,
            transparent 0 46%,
            rgba(208,24,118,.13) 47% 49%,
            transparent 50% 100%
        ),

        linear-gradient(
            -30deg,
            transparent 0 46%,
            rgba(134,16,95,.10) 47% 49%,
            transparent 50% 100%
        ),

        linear-gradient(
            76deg,
            transparent 0 47%,
            rgba(110,56,232,.065) 48% 50%,
            transparent 51% 100%
        ),

        linear-gradient(
            -6deg,
            transparent 0 48%,
            rgba(208,24,118,.055) 49% 50%,
            transparent 51% 100%
        );

    background-size:
        210px 150px,
        260px 190px,
        180px 150px,
        145px 125px;

    opacity: 1;
}


/* Logo becomes a location landmark, not the whole scene */
.wn4-home-page .wn4h-map-brand {
    width: 108px;
    height: 108px;
    aspect-ratio: auto;

    border-radius: 30px;

    background:
        rgba(255,255,255,.92);

    box-shadow:
        0 18px 42px rgba(101,0,104,.16);
}

.wn4-home-page .wn4h-map-brand img {
    width: 78px;
    height: 78px;

    object-fit: contain;
}


/* Main routes */
.wn4-home-page .wn4h-map-route {
    height: 7px;

    background:
        linear-gradient(
            90deg,
            rgba(208,24,118,.08),
            rgba(208,24,118,.48),
            rgba(110,56,232,.28)
        );

    box-shadow:
        0 0 0 3px rgba(255,255,255,.56);
}

.wn4-home-page .wn4h-map-route-a {
    width: 78%;
    inset-block-start: 26%;
    inset-inline-start: -8%;
    transform: rotate(-18deg);
}

.wn4-home-page .wn4h-map-route-b {
    width: 82%;
    inset-block-start: 69%;
    inset-inline-start: 25%;
    transform: rotate(20deg);
}

.wn4-home-page .wn4h-map-route-c {
    width: 62%;
    inset-block-start: 50%;
    inset-inline-start: -8%;
    transform: rotate(31deg);
}


/* Larger, clearer map points */
.wn4-home-page .wn4h-map-point {
    width: 16px;
    height: 16px;

    border-width: 4px;

    box-shadow:
        0 7px 18px rgba(134,16,95,.24);
}

.wn4-home-page .wn4h-map-point-a {
    inset-block-start: 17%;
    inset-inline-start: 14%;
}

.wn4-home-page .wn4h-map-point-b {
    inset-block-start: 24%;
    inset-inline-end: 13%;
}

.wn4-home-page .wn4h-map-point-c {
    inset-block-end: 16%;
    inset-inline-start: 18%;
}

.wn4-home-page .wn4h-map-point-d {
    inset-block-end: 17%;
    inset-inline-end: 13%;
}


/* Food becomes part of the map */
.wn4-home-page .wn4h-map-food-sign {
    width: 50px;
    height: 50px;

    border-radius: 16px;

    font-size: 22px;

    background:
        rgba(255,255,255,.93);

    box-shadow:
        0 12px 28px rgba(101,0,104,.12);
}

.wn4-home-page .wn4h-map-food-sign-a {
    inset-block-start: 15%;
    inset-inline-end: 29%;
}

.wn4-home-page .wn4h-map-food-sign-b {
    inset-block-end: 15%;
    inset-inline-start: 31%;
}


/* Copy remains clean with no large white panel */
.wn4-home-page .wn4h-hero-copy {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* Tablet */
@media (min-width: 768px) and (max-width: 1100px) {

    .wn4-home-page .wn4h-map-brand {
        width: 92px;
        height: 92px;
    }

    .wn4-home-page .wn4h-map-brand img {
        width: 66px;
        height: 66px;
    }

    .wn4-home-page .wn4h-hero-visual {
        min-height: 310px;
    }
}


/* Phone */
@media (max-width: 767px) {

    .wn4-home-page .wn4h-hero-visual {
        min-height: 220px;
    }

    .wn4-home-page .wn4h-map-brand {
        width: 82px;
        height: 82px;

        border-radius: 24px;
    }

    .wn4-home-page .wn4h-map-brand img {
        width: 58px;
        height: 58px;
    }

    .wn4-home-page .wn4h-map-food-sign {
        width: 42px;
        height: 42px;

        font-size: 19px;
    }
}


/* ==========================================================
   HERO VISUAL — HARD SIZE VERIFICATION
========================================================== */

.wn4-home-page .wn4h-map-brand {
    width: 104px !important;
    height: 104px !important;
    max-width: 104px !important;
    max-height: 104px !important;

    aspect-ratio: 1 / 1 !important;

    overflow: hidden !important;

    border-radius: 30px !important;
}

.wn4-home-page .wn4h-map-brand img {
    display: block !important;

    width: 76px !important;
    height: 76px !important;

    max-width: 76px !important;
    max-height: 76px !important;

    object-fit: contain !important;

    margin: auto !important;
}

.wn4-home-page .wn4h-hero-visual {
    min-height: 360px !important;
}

@media (max-width: 767px) {

    .wn4-home-page .wn4h-map-brand {
        width: 78px !important;
        height: 78px !important;
        max-width: 78px !important;
        max-height: 78px !important;
    }

    .wn4-home-page .wn4h-map-brand img {
        width: 56px !important;
        height: 56px !important;
        max-width: 56px !important;
        max-height: 56px !important;
    }
}


/* ==========================================================
   WAIN NAKUL — CATEGORY FAMILY V1
   Restaurants + Cafes + Coffee Shops + Food Trucks
   Buffets + Bakeries + Home Made + Omani Sweets
========================================================== */

.wn4-restaurants-page .wn4r-page,
.wn4-activity-list-page .wn4r-page {
    position: relative;

    width: min(100%, 1280px);

    margin-inline: auto;

    padding-block:
        clamp(22px, 4vw, 46px)
        clamp(70px, 8vw, 110px);

    padding-inline:
        clamp(16px, 3vw, 28px);
}


/* ==========================================================
   TOP ACTIONS
========================================================== */

.wn4-restaurants-page .wn4r-top-actions,
.wn4-activity-list-page .wn4r-top-actions {
    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-block-end: 16px;
}

.wn4-restaurants-page .wn4r-back-btn,
.wn4-activity-list-page .wn4r-back-btn {
    min-height: 42px;

    padding-inline: 16px;

    border:
        1px solid rgba(134,16,95,.12);

    border-radius: 14px;

    background:
        rgba(255,255,255,.80);

    color:
        var(--wn-brand-dark);

    box-shadow:
        0 8px 24px rgba(101,0,104,.06);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    cursor: pointer;
}


/* ==========================================================
   HERO
========================================================== */

.wn4-restaurants-page .wn4r-hero,
.wn4-activity-list-page .wn4r-hero {
    position: relative;

    margin-block-end:
        clamp(24px, 4vw, 40px);
}

.wn4-restaurants-page .wn4r-hero-card,
.wn4-activity-list-page .wn4r-hero-card {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap:
        clamp(20px, 4vw, 50px);

    min-height:
        clamp(220px, 26vw, 330px);

    padding-block:
        clamp(30px, 5vw, 58px);

    padding-inline:
        clamp(24px, 5vw, 64px);

    overflow: hidden;

    border:
        1px solid rgba(134,16,95,.11);

    border-radius:
        clamp(28px, 4vw, 42px);

    background:
        radial-gradient(
            circle at 14% 22%,
            rgba(208,24,118,.12),
            transparent 27%
        ),
        radial-gradient(
            circle at 84% 75%,
            rgba(110,56,232,.08),
            transparent 28%
        ),
        rgba(255,255,255,.76);

    box-shadow:
        0 24px 64px rgba(101,0,104,.09);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}


/* map roads inside category hero */
.wn4-restaurants-page .wn4r-hero-card::before,
.wn4-activity-list-page .wn4r-hero-card::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            24deg,
            transparent 0 47%,
            rgba(208,24,118,.08) 48% 49%,
            transparent 50% 100%
        ),
        linear-gradient(
            -31deg,
            transparent 0 47%,
            rgba(134,16,95,.055) 48% 49%,
            transparent 50% 100%
        ),
        linear-gradient(
            88deg,
            transparent 0 48%,
            rgba(110,56,232,.035) 49% 50%,
            transparent 51% 100%
        );

    background-size:
        210px 155px,
        270px 190px,
        145px 145px;

    opacity: .72;
}


/* location points */
.wn4-restaurants-page .wn4r-hero-card::after,
.wn4-activity-list-page .wn4r-hero-card::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 12% 25%,
            rgba(208,24,118,.45) 0 4px,
            white 5px 8px,
            transparent 9px
        ),
        radial-gradient(
            circle at 36% 74%,
            rgba(134,16,95,.38) 0 4px,
            white 5px 8px,
            transparent 9px
        ),
        radial-gradient(
            circle at 73% 24%,
            rgba(110,56,232,.32) 0 4px,
            white 5px 8px,
            transparent 9px
        ),
        radial-gradient(
            circle at 90% 70%,
            rgba(208,24,118,.42) 0 4px,
            white 5px 8px,
            transparent 9px
        );

    opacity: .72;
}

.wn4-restaurants-page .wn4r-hero-copy,
.wn4-activity-list-page .wn4r-hero-copy,
.wn4-restaurants-page .wn4r-hero-icon,
.wn4-activity-list-page .wn4r-hero-icon {
    position: relative;
    z-index: 2;
}

.wn4-restaurants-page .wn4r-hero-copy h1,
.wn4-activity-list-page .wn4r-hero-copy h1 {
    margin-block:
        4px 12px;

    color:
        var(--wn-brand-deep);

    font-size:
        clamp(34px, 5vw, 58px);

    line-height: 1.12;
}

.wn4-restaurants-page .wn4r-hero-copy p,
.wn4-activity-list-page .wn4r-hero-copy p {
    max-width: 680px;

    color: #6f5d6b;

    font-size:
        clamp(14px, 1.6vw, 17px);

    line-height: 1.8;
}

.wn4-restaurants-page .wn4r-hero-icon,
.wn4-activity-list-page .wn4r-hero-icon {
    display: grid;
    place-items: center;

    width:
        clamp(86px, 10vw, 130px);

    height:
        clamp(86px, 10vw, 130px);

    border:
        1px solid rgba(208,24,118,.13);

    border-radius:
        clamp(24px, 3vw, 36px);

    background:
        rgba(255,255,255,.86);

    box-shadow:
        0 18px 42px rgba(101,0,104,.10);

    font-size:
        clamp(38px, 5vw, 62px);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* ==========================================================
   SECTION HEADINGS
========================================================== */

.wn4-restaurants-page .wn4r-section,
.wn4-activity-list-page .wn4r-section {
    position: relative;

    margin-block-start:
        clamp(24px, 4vw, 44px);
}

.wn4-restaurants-page .wn4r-section-heading,
.wn4-activity-list-page .wn4r-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 16px;

    margin-block-end: 18px;
}

.wn4-restaurants-page .wn4r-section-heading h2,
.wn4-activity-list-page .wn4r-section-heading h2 {
    margin: 0;

    color:
        var(--wn-brand-deep);

    font-size:
        clamp(24px, 3vw, 34px);
}


/* ==========================================================
   GRID
========================================================== */

.wn4-restaurants-page .wn4r-grid,
.wn4-activity-list-page .wn4r-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        clamp(16px, 2.5vw, 24px);
}


/* ==========================================================
   CARDS
========================================================== */

.wn4-restaurants-page .wn4r-card,
.wn4-activity-list-page .wn4r-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    border:
        1px solid rgba(134,16,95,.10);

    border-radius: 26px;

    background:
        rgba(255,255,255,.84);

    box-shadow:
        0 16px 44px rgba(101,0,104,.07);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

@media (hover: hover) {

    .wn4-restaurants-page .wn4r-card:hover,
    .wn4-activity-list-page .wn4r-card:hover {
        transform:
            translateY(-4px);

        border-color:
            rgba(208,24,118,.23);

        box-shadow:
            0 24px 58px rgba(101,0,104,.12);
    }
}


.wn4-restaurants-page .wn4r-card img,
.wn4-activity-list-page .wn4r-card img {
    display: block;

    width: 100%;

    object-fit: cover;
}


.wn4-restaurants-page .wn4r-card-body,
.wn4-activity-list-page .wn4r-card-body {
    padding-block: 18px 20px;
    padding-inline: 19px;
}


.wn4-restaurants-page .wn4r-card-title-row,
.wn4-activity-list-page .wn4r-card-title-row {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px;
}


.wn4-restaurants-page .wn4r-card h2,
.wn4-activity-list-page .wn4r-card h2,
.wn4-restaurants-page .wn4r-card h3,
.wn4-activity-list-page .wn4r-card h3 {
    color:
        var(--wn-brand-deep);
}


/* ==========================================================
   FILTERS / SEARCH / CHIPS
========================================================== */

.wn4-restaurants-page .wn4r-filter,
.wn4-activity-list-page .wn4r-filter,
.wn4-restaurants-page .wn4r-filters,
.wn4-activity-list-page .wn4r-filters,
.wn4-restaurants-page .wn4r-search,
.wn4-activity-list-page .wn4r-search {
    border:
        1px solid rgba(134,16,95,.10);

    border-radius: 20px;

    background:
        rgba(255,255,255,.80);

    box-shadow:
        0 12px 32px rgba(101,0,104,.05);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* ==========================================================
   EMPTY STATES
========================================================== */

.wn4-restaurants-page .wn4r-empty,
.wn4-activity-list-page .wn4r-empty {
    padding-block:
        clamp(44px, 7vw, 80px);

    padding-inline: 22px;

    border:
        1px solid rgba(134,16,95,.10);

    border-radius: 28px;

    background:
        rgba(255,255,255,.80);

    box-shadow:
        0 18px 44px rgba(101,0,104,.07);

    text-align: center;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1050px) {

    .wn4-restaurants-page .wn4r-grid,
    .wn4-activity-list-page .wn4r-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* ==========================================================
   PHONE
========================================================== */

@media (max-width: 767px) {

    .wn4-restaurants-page .wn4r-page,
    .wn4-activity-list-page .wn4r-page {
        padding-block:
            12px 90px;

        padding-inline: 10px;
    }

    .wn4-restaurants-page .wn4r-hero-card,
    .wn4-activity-list-page .wn4r-hero-card {
        grid-template-columns: 1fr;

        gap: 18px;

        min-height: auto;

        padding-block: 24px;
        padding-inline: 18px;

        border-radius: 24px;
    }

    .wn4-restaurants-page .wn4r-hero-icon,
    .wn4-activity-list-page .wn4r-hero-icon {
        width: 72px;
        height: 72px;

        border-radius: 21px;

        font-size: 34px;
    }

    .wn4-restaurants-page .wn4r-grid,
    .wn4-activity-list-page .wn4r-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .wn4-restaurants-page .wn4r-section-heading,
    .wn4-activity-list-page .wn4r-section-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 7px;
    }

    .wn4-restaurants-page .wn4r-card,
    .wn4-activity-list-page .wn4r-card {
        border-radius: 21px;
    }
}


/* ==========================================================
   FUTURE ENGLISH / LTR
========================================================== */

html[dir="ltr"] .wn4-restaurants-page .wn4r-page,
html[dir="ltr"] .wn4-activity-list-page .wn4r-page,
html[dir="rtl"] .wn4-restaurants-page .wn4r-page,
html[dir="rtl"] .wn4-activity-list-page .wn4r-page {
    direction: inherit;
}


/* ==========================================================
   WAIN NAKUL — DETAIL FAMILY V1
   Restaurant + all activity detail pages
========================================================== */

.wn4-restaurant-details-page .wn4d-page,
.wn4-activity-details-page .wn4d-page {
    position: relative;
    width: min(100%, 1280px);
    margin-inline: auto;

    padding-block:
        clamp(22px, 4vw, 46px)
        clamp(72px, 8vw, 110px);

    padding-inline:
        clamp(16px, 3vw, 28px);
}


/* ==========================================================
   TOP ACTIONS
========================================================== */

.wn4-restaurant-details-page .wn4d-top-actions,
.wn4-activity-details-page .wn4d-top-actions {
    position: relative;
    z-index: 8;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-block-end: 18px;
}

.wn4-restaurant-details-page .wn4d-back-btn,
.wn4-activity-details-page .wn4d-back-btn,
.wn4-restaurant-details-page .wn4d-icon-btn,
.wn4-activity-details-page .wn4d-icon-btn {
    border:
        1px solid rgba(134,16,95,.12);

    background:
        rgba(255,255,255,.84);

    color:
        var(--wn-brand-dark);

    box-shadow:
        0 8px 24px rgba(101,0,104,.06);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* ==========================================================
   HERO
========================================================== */

.wn4-restaurant-details-page .wn4d-hero,
.wn4-activity-details-page .wn4d-hero {
    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(134,16,95,.11);

    border-radius:
        clamp(26px, 4vw, 40px);

    background:
        rgba(255,255,255,.76);

    box-shadow:
        0 24px 64px rgba(101,0,104,.09);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.wn4-restaurant-details-page .wn4d-hero::before,
.wn4-activity-details-page .wn4d-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 16% 18%,
            rgba(208,24,118,.11),
            transparent 28%
        ),
        radial-gradient(
            circle at 86% 78%,
            rgba(110,56,232,.07),
            transparent 30%
        );

    z-index: 0;
}

.wn4-restaurant-details-page .wn4d-hero-media,
.wn4-activity-details-page .wn4d-hero-media,
.wn4-restaurant-details-page .wn4d-hero-info,
.wn4-activity-details-page .wn4d-hero-info {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   HERO MEDIA / IMAGE
========================================================== */

.wn4-restaurant-details-page .wn4d-hero-media,
.wn4-activity-details-page .wn4d-hero-media {
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(208,24,118,.09),
            transparent 42%
        ),
        rgba(255,245,250,.72);
}

.wn4-restaurant-details-page .wn4d-hero-media img,
.wn4-activity-details-page .wn4d-hero-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.wn4-restaurant-details-page .wn4d-placeholder,
.wn4-activity-details-page .wn4d-placeholder,
.wn4-restaurant-details-page .wn4d-hero-placeholder,
.wn4-activity-details-page .wn4d-hero-placeholder {
    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(208,24,118,.12),
            transparent 34%
        ),
        rgba(255,247,251,.78);

    color:
        var(--wn-brand);
}


/* ==========================================================
   HERO INFORMATION
========================================================== */

.wn4-restaurant-details-page .wn4d-hero-info,
.wn4-activity-details-page .wn4d-hero-info {
    background:
        rgba(255,255,255,.72);
}

.wn4-restaurant-details-page .wn4d-hero-info h1,
.wn4-activity-details-page .wn4d-hero-info h1 {
    color:
        var(--wn-brand-deep);

    font-size:
        clamp(28px, 3.2vw, 46px);

    line-height: 1.15;
}

.wn4-restaurant-details-page .wn4d-type,
.wn4-activity-details-page .wn4d-type,
.wn4-restaurant-details-page .wn4d-eyebrow,
.wn4-activity-details-page .wn4d-eyebrow {
    color:
        var(--wn-brand);
}


/* ==========================================================
   META / CHIPS
========================================================== */

.wn4-restaurant-details-page .wn4d-meta,
.wn4-activity-details-page .wn4d-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.wn4-restaurant-details-page .wn4d-meta > *,
.wn4-activity-details-page .wn4d-meta > * {
    border:
        1px solid rgba(134,16,95,.10);

    background:
        rgba(255,255,255,.78);

    border-radius: 999px;
}


/* ==========================================================
   CONTENT GRID
========================================================== */

.wn4-restaurant-details-page .wn4d-grid,
.wn4-activity-details-page .wn4d-grid,
.wn4-restaurant-details-page .wn4d-content-grid,
.wn4-activity-details-page .wn4d-content-grid {
    gap:
        clamp(18px, 2.5vw, 28px);
}


/* ==========================================================
   SECTIONS / CARDS
========================================================== */

.wn4-restaurant-details-page .wn4d-card,
.wn4-activity-details-page .wn4d-card,
.wn4-restaurant-details-page .wn4d-section,
.wn4-activity-details-page .wn4d-section {
    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(134,16,95,.10);

    border-radius:
        clamp(20px, 2.5vw, 28px);

    background:
        rgba(255,255,255,.78);

    box-shadow:
        0 14px 38px rgba(101,0,104,.065);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.wn4-restaurant-details-page .wn4d-card::before,
.wn4-activity-details-page .wn4d-card::before,
.wn4-restaurant-details-page .wn4d-section::before,
.wn4-activity-details-page .wn4d-section::before {
    content: "";

    position: absolute;

    inline-size: 150px;
    block-size: 150px;

    inset-inline-end: -60px;
    inset-block-start: -70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(208,24,118,.07),
            transparent 68%
        );

    pointer-events: none;
}


/* ==========================================================
   SECTION HEADINGS
========================================================== */

.wn4-restaurant-details-page .wn4d-section h2,
.wn4-activity-details-page .wn4d-section h2,
.wn4-restaurant-details-page .wn4d-card h2,
.wn4-activity-details-page .wn4d-card h2 {
    color:
        var(--wn-brand-deep);
}

.wn4-restaurant-details-page .wn4d-section-label,
.wn4-activity-details-page .wn4d-section-label,
.wn4-restaurant-details-page .wn4d-eyebrow,
.wn4-activity-details-page .wn4d-eyebrow {
    color:
        var(--wn-brand);
}


/* ==========================================================
   ACTION BUTTONS
========================================================== */

.wn4-restaurant-details-page .wn4d-action,
.wn4-activity-details-page .wn4d-action,
.wn4-restaurant-details-page .wn4d-map-actions a,
.wn4-activity-details-page .wn4d-map-actions a {
    border:
        1px solid rgba(134,16,95,.12);

    border-radius: 14px;

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

    color:
        var(--wn-brand-dark);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.wn4-restaurant-details-page .wn4d-action:hover,
.wn4-activity-details-page .wn4d-action:hover,
.wn4-restaurant-details-page .wn4d-map-actions a:hover,
.wn4-activity-details-page .wn4d-map-actions a:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(208,24,118,.24);

    box-shadow:
        0 10px 24px rgba(101,0,104,.08);
}


/* ==========================================================
   MAP
========================================================== */

.wn4-restaurant-details-page .wn4d-map-placeholder,
.wn4-activity-details-page .wn4d-map-placeholder {
    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(208,24,118,.10);

    border-radius: 18px;

    background:
        linear-gradient(
            26deg,
            transparent 0 47%,
            rgba(208,24,118,.08) 48% 49%,
            transparent 50% 100%
        ),
        linear-gradient(
            -34deg,
            transparent 0 47%,
            rgba(110,56,232,.055) 48% 49%,
            transparent 50% 100%
        ),
        rgba(255,242,249,.78);

    background-size:
        180px 130px,
        230px 170px,
        auto;

    color:
        var(--wn-brand);
}


/* ==========================================================
   DELIVERY / HOURS / CONTACT / BRANCHES
========================================================== */

.wn4-restaurant-details-page .wn4d-delivery,
.wn4-activity-details-page .wn4d-delivery,
.wn4-restaurant-details-page .wn4d-hours,
.wn4-activity-details-page .wn4d-hours,
.wn4-restaurant-details-page .wn4d-contact,
.wn4-activity-details-page .wn4d-contact,
.wn4-restaurant-details-page .wn4d-branches,
.wn4-activity-details-page .wn4d-branches {
    border-color:
        rgba(134,16,95,.10);

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


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 980px) {

    .wn4-restaurant-details-page .wn4d-hero,
    .wn4-activity-details-page .wn4d-hero {
        grid-template-columns:
            1fr !important;
    }

    .wn4-restaurant-details-page .wn4d-hero-media,
    .wn4-activity-details-page .wn4d-hero-media {
        min-height:
            clamp(250px, 48vw, 390px);
    }
}


@media (max-width: 767px) {

    .wn4-restaurant-details-page .wn4d-page,
    .wn4-activity-details-page .wn4d-page {
        padding-inline: 14px;

        padding-block-start: 16px;

        padding-block-end: 90px;
    }

    .wn4-restaurant-details-page .wn4d-hero,
    .wn4-activity-details-page .wn4d-hero {
        border-radius: 24px;
    }

    .wn4-restaurant-details-page .wn4d-hero-info,
    .wn4-activity-details-page .wn4d-hero-info {
        padding:
            22px !important;
    }

    .wn4-restaurant-details-page .wn4d-hero-info h1,
    .wn4-activity-details-page .wn4d-hero-info h1 {
        font-size:
            clamp(27px, 9vw, 36px);
    }

    .wn4-restaurant-details-page .wn4d-grid,
    .wn4-activity-details-page .wn4d-grid,
    .wn4-restaurant-details-page .wn4d-content-grid,
    .wn4-activity-details-page .wn4d-content-grid {
        grid-template-columns:
            1fr !important;
    }

    .wn4-restaurant-details-page .wn4d-map-actions,
    .wn4-activity-details-page .wn4d-map-actions {
        display: grid;

        grid-template-columns:
            1fr;
    }
}


/* future LTR safety */
html[dir="ltr"]
.wn4-restaurant-details-page .wn4d-top-actions,
html[dir="ltr"]
.wn4-activity-details-page .wn4d-top-actions {
    direction: ltr;
}


/* ==========================================================
   WAIN NAKUL — OFFERS + COMMUNITY FINAL WORLD V1
   ========================================================== */

/* ----------------------------------------------------------
   OFFERS
   ---------------------------------------------------------- */

.wn4-offers-page .wn-offers-page {
    position: relative;
    isolation: isolate;
}

.wn4-offers-page .wn-offers-hero-card {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(134,16,95,.10);

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(208,24,118,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 72%,
            rgba(110,56,232,.08),
            transparent 30%
        ),
        rgba(255,255,255,.76);

    box-shadow:
        0 22px 58px rgba(101,0,104,.09);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.wn4-offers-page .wn-offers-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image:
        linear-gradient(
            25deg,
            transparent 0 47%,
            rgba(208,24,118,.09) 48% 49%,
            transparent 50% 100%
        ),
        linear-gradient(
            -30deg,
            transparent 0 47%,
            rgba(134,16,95,.06) 48% 49%,
            transparent 50% 100%
        ),
        linear-gradient(
            88deg,
            transparent 0 48%,
            rgba(110,56,232,.04) 49% 50%,
            transparent 51% 100%
        );

    background-size:
        210px 155px,
        270px 190px,
        145px 145px;

    opacity: .72;
}

.wn4-offers-page .wn-offers-hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 12% 28%,
            rgba(208,24,118,.45) 0 4px,
            white 5px 8px,
            transparent 9px
        ),
        radial-gradient(
            circle at 72% 20%,
            rgba(110,56,232,.34) 0 4px,
            white 5px 8px,
            transparent 9px
        ),
        radial-gradient(
            circle at 88% 74%,
            rgba(208,24,118,.40) 0 4px,
            white 5px 8px,
            transparent 9px
        );

    opacity: .70;
}

.wn4-offers-page .wn-offers-hero-copy,
.wn4-offers-page .wn-offers-count {
    position: relative;
    z-index: 2;
}

.wn4-offers-page .wn-offer-card {
    border: 1px solid rgba(134,16,95,.10);

    background:
        rgba(255,255,255,.84);

    box-shadow:
        0 16px 44px rgba(101,0,104,.075);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

@media (hover:hover) {
    .wn4-offers-page .wn-offer-card:hover {
        transform: translateY(-4px);
        border-color: rgba(208,24,118,.23);

        box-shadow:
            0 24px 58px rgba(101,0,104,.13);
    }
}

.wn4-offers-page .wn-offer-image {
    background:
        linear-gradient(
            145deg,
            rgba(255,239,247,.96),
            rgba(248,241,255,.92)
        );
}

.wn4-offers-page .wn-offer-placeholder {
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(208,24,118,.12),
            transparent 32%
        ),
        rgba(255,248,252,.94);
}

.wn4-offers-page .wn-offers-empty {
    border: 1px solid rgba(134,16,95,.10);

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(208,24,118,.09),
            transparent 34%
        ),
        rgba(255,255,255,.80);

    box-shadow:
        0 18px 46px rgba(101,0,104,.08);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


/* ----------------------------------------------------------
   COMMUNITY
   ---------------------------------------------------------- */

.wn4-community-page .wn-community-shell {
    position: relative;
    isolation: isolate;
}

.wn4-community-page .wn-community-stage {
    position: relative;
}

.wn4-community-page .topbar {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(134,16,95,.10);

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(208,24,118,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(110,56,232,.07),
            transparent 32%
        ),
        rgba(255,255,255,.78);

    box-shadow:
        0 20px 52px rgba(101,0,104,.08);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.wn4-community-page .topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image:
        linear-gradient(
            24deg,
            transparent 0 47%,
            rgba(208,24,118,.08) 48% 49%,
            transparent 50% 100%
        ),
        linear-gradient(
            -31deg,
            transparent 0 47%,
            rgba(134,16,95,.055) 48% 49%,
            transparent 50% 100%
        );

    background-size:
        210px 155px,
        270px 190px;

    opacity: .65;
}

.wn4-community-page .topbar > * {
    position: relative;
    z-index: 2;
}

.wn4-community-page .community-feed-tabs {
    border: 1px solid rgba(134,16,95,.10);

    background:
        rgba(255,255,255,.76);

    box-shadow:
        0 12px 34px rgba(101,0,104,.055);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.wn4-community-page .community-feed-tab {
    transition:
        background-color .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.wn4-community-page .community-feed-tab.active {
    background:
        linear-gradient(
            135deg,
            rgba(208,24,118,.14),
            rgba(110,56,232,.08)
        );

    color: var(--wn-brand-deep);

    box-shadow:
        inset 0 0 0 1px rgba(208,24,118,.12);
}

.wn4-community-page .composer,
.wn4-community-page .post,
.wn4-community-page .login-box {
    border: 1px solid rgba(134,16,95,.10);

    background:
        rgba(255,255,255,.84);

    box-shadow:
        0 16px 44px rgba(101,0,104,.07);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.wn4-community-page .composer {
    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(208,24,118,.07),
            transparent 25%
        ),
        rgba(255,255,255,.86);
}

.wn4-community-page textarea,
.wn4-community-page select,
.wn4-community-page input {
    border-color:
        rgba(134,16,95,.12);

    background:
        rgba(255,251,253,.86);
}

.wn4-community-page textarea:focus,
.wn4-community-page select:focus,
.wn4-community-page input:focus {
    outline: none;

    border-color:
        rgba(208,24,118,.42);

    box-shadow:
        0 0 0 4px rgba(208,24,118,.07);
}

.wn4-community-page .publish {
    background:
        linear-gradient(
            135deg,
            var(--wn-brand),
            var(--wn-brand-dark)
        );

    box-shadow:
        0 10px 24px rgba(208,24,118,.18);
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 980px) {

    .wn4-offers-page .wn-offers-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 767px) {

    .wn4-offers-page .wn-offers-page,
    .wn4-community-page .wn-community-shell {
        padding-inline: 10px;
        padding-block-end: 90px;
    }

    .wn4-offers-page .wn-offers-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .wn4-community-page .topbar {
        border-radius: 24px;
    }

    .wn4-community-page .composer,
    .wn4-community-page .post,
    .wn4-community-page .login-box {
        border-radius: 21px;
    }
}


/* ----------------------------------------------------------
   FUTURE ENGLISH / LTR
   ---------------------------------------------------------- */

html[dir="rtl"] .wn4-offers-page,
html[dir="ltr"] .wn4-offers-page,
html[dir="rtl"] .wn4-community-page,
html[dir="ltr"] .wn4-community-page {
    direction: inherit;
}


/* ==========================================================
   WAIN NAKUL — FOOTER IDENTITY V2
   Shared footer — map / food world
========================================================== */

.wn4-footer-pro {
    position: relative;
    overflow: hidden;

    margin-block-start:
        clamp(40px, 6vw, 90px);

    padding-block:
        clamp(28px, 4vw, 52px) 22px !important;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(208,24,118,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 84% 72%,
            rgba(110,56,232,.08),
            transparent 30%
        ),
        rgba(255,250,253,.96) !important;

    border-block-start:
        1px solid rgba(153,57,132,.10);

    color:
        #3f2140 !important;
}


/* map routes */
.wn4-footer-pro::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            28deg,
            transparent 0 46%,
            rgba(208,24,118,.10) 46.7% 47.5%,
            transparent 48.2% 100%
        ),
        linear-gradient(
            -31deg,
            transparent 0 46%,
            rgba(110,56,232,.065) 46.7% 47.5%,
            transparent 48.2% 100%
        ),
        linear-gradient(
            90deg,
            transparent 0 48%,
            rgba(208,24,118,.035) 48.6% 49.4%,
            transparent 50% 100%
        );

    background-size:
        280px 190px,
        360px 240px,
        190px 190px;

    opacity: .85;
}


/* location dots */
.wn4-footer-pro::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 8% 28%,
            rgba(208,24,118,.46) 0 3px,
            rgba(255,255,255,.98) 4px 7px,
            transparent 8px
        ),
        radial-gradient(
            circle at 33% 76%,
            rgba(110,56,232,.28) 0 3px,
            rgba(255,255,255,.98) 4px 7px,
            transparent 8px
        ),
        radial-gradient(
            circle at 72% 18%,
            rgba(208,24,118,.34) 0 3px,
            rgba(255,255,255,.98) 4px 7px,
            transparent 8px
        ),
        radial-gradient(
            circle at 92% 70%,
            rgba(110,56,232,.24) 0 3px,
            rgba(255,255,255,.98) 4px 7px,
            transparent 8px
        );

    opacity: .70;
}


.wn4-footer-pro .wn4-container {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   MAIN FOOTER GRID
========================================================== */

.wn4-footer-pro-main {
    display: grid !important;

    grid-template-columns:
        minmax(260px, 1.45fr)
        repeat(3, minmax(170px, 1fr)) !important;

    gap:
        clamp(16px, 2vw, 26px) !important;

    align-items:
        stretch !important;
}


/* ==========================================================
   BRAND CARD
========================================================== */

.wn4-footer-pro-brand {
    display: flex !important;

    align-items:
        flex-start !important;

    gap:
        16px !important;

    padding:
        clamp(20px, 2.4vw, 28px) !important;

    border:
        1px solid rgba(153,57,132,.11);

    border-radius:
        24px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.90),
            rgba(255,248,252,.82)
        );

    box-shadow:
        0 16px 42px rgba(97,24,89,.055);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}


.wn4-footer-pro-logo {
    flex:
        0 0 auto;

    width:
        68px !important;

    height:
        68px !important;

    border-radius:
        20px;

    display:
        grid !important;

    place-items:
        center;

    background:
        rgba(255,255,255,.88);

    border:
        1px solid rgba(208,24,118,.12);

    box-shadow:
        0 10px 28px rgba(97,24,89,.08);
}


.wn4-footer-pro-logo img {
    width:
        54px !important;

    height:
        54px !important;

    object-fit:
        contain;
}


.wn4-footer-pro-brand h2 {
    margin:
        0 0 8px !important;

    color:
        #6b0f65 !important;

    font-size:
        clamp(22px, 1.8vw, 28px) !important;

    line-height:
        1.35 !important;

    font-weight:
        900 !important;
}


.wn4-footer-pro-brand p {
    margin:
        0 !important;

    max-width:
        34ch;

    color:
        #765f76 !important;

    font-size:
        14px !important;

    line-height:
        1.85 !important;
}


/* ==========================================================
   LINK CARDS
========================================================== */

.wn4-footer-pro-group {
    position:
        relative;

    display:
        flex !important;

    flex-direction:
        column;

    align-items:
        stretch !important;

    gap:
        8px !important;

    padding:
        20px !important;

    border:
        1px solid rgba(153,57,132,.10);

    border-radius:
        22px;

    background:
        rgba(255,255,255,.84);

    box-shadow:
        0 14px 36px rgba(97,24,89,.045);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.wn4-footer-pro-group::before {
    content: "";

    position:
        absolute;

    inset-block-start:
        0;

    inset-inline-start:
        20px;

    width:
        48px;

    height:
        3px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #d01876,
            #6e38e8
        );
}


.wn4-footer-pro-group h3 {
    margin:
        6px 0 8px !important;

    color:
        #650068 !important;

    font-size:
        17px !important;

    line-height:
        1.4 !important;

    font-weight:
        850 !important;
}


.wn4-footer-pro-group a {
    position:
        relative;

    display:
        flex !important;

    align-items:
        center;

    min-height:
        40px;

    padding:
        8px 12px !important;

    border-radius:
        12px;

    color:
        #5f4a61 !important;

    font-size:
        14px !important;

    line-height:
        1.45 !important;

    font-weight:
        650 !important;

    text-decoration:
        none !important;

    transition:
        background-color .18s ease,
        color .18s ease,
        transform .18s ease;
}


.wn4-footer-pro-group a::before {
    content:
        "•";

    margin-inline-end:
        9px;

    color:
        #d01876;

    font-size:
        18px;

    line-height:
        1;
}


@media (hover:hover) {
    .wn4-footer-pro-group a:hover {
        color:
            #650068 !important;

        background:
            rgba(208,24,118,.065);

        transform:
            translateY(-1px);
    }
}


/* ==========================================================
   BOTTOM ROW
========================================================== */

.wn4-footer-pro-bottom {
    display:
        flex !important;

    justify-content:
        space-between !important;

    align-items:
        center !important;

    gap:
        12px !important;

    flex-wrap:
        wrap;

    margin-block-start:
        18px !important;

    padding:
        16px 20px !important;

    border:
        1px solid rgba(153,57,132,.09);

    border-radius:
        18px;

    background:
        rgba(255,255,255,.76);

    color:
        #806b82 !important;

    font-size:
        13px !important;

    line-height:
        1.5 !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1100px) {

    .wn4-footer-pro-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .wn4-footer-pro-brand {
        grid-column:
            1 / -1;
    }
}


/* ==========================================================
   PHONE
========================================================== */

@media (max-width: 700px) {

    .wn4-footer-pro {
        margin-block-start:
            34px;
    }

    .wn4-footer-pro-main {
        grid-template-columns:
            1fr !important;

        gap:
            12px !important;
    }

    .wn4-footer-pro-brand {
        grid-column:
            auto;

        flex-direction:
            column;

        align-items:
            center !important;

        text-align:
            center;
    }

    .wn4-footer-pro-brand p {
        max-width:
            none;
    }

    .wn4-footer-pro-group {
        padding:
            18px !important;
    }

    .wn4-footer-pro-group h3 {
        font-size:
            16px !important;
    }

    .wn4-footer-pro-group a {
        min-height:
            44px;

        font-size:
            15px !important;
    }

    .wn4-footer-pro-bottom {
        justify-content:
            center !important;

        text-align:
            center;
    }
}