/* =========================================================
   WAIN NAKUL
   FULL NEW WEBSITE DESIGN
   2026-09-09
========================================================= */

:root{
    --wn-primary:#c51b78;
    --wn-primary-2:#a70d68;
    --wn-dark:#351039;
    --wn-text:#322534;
    --wn-muted:#8e7e90;
    --wn-bg:#fffafd;
    --wn-soft:#fff1f7;
    --wn-border:#eee3ea;
    --wn-white:#ffffff;
    --wn-shadow:0 8px 24px rgba(68,20,64,.07);
    --wn-shadow-soft:0 4px 14px rgba(68,20,64,.05);
    --wn-radius:18px;
    --wn-content:1180px;
}

*{
    box-sizing:border-box !important;
}

html{
    width:100%;
    overflow-x:hidden;
}

body{
    margin:0 !important;
    width:100%;
    overflow-x:hidden;
    background:var(--wn-bg) !important;
    color:var(--wn-text);
    font-family:Tahoma,Arial,sans-serif;
}

img,
svg,
video{
    max-width:100%;
}

a{
    text-decoration:none;
}

/* =========================================================
   HEADER
========================================================= */

.site-header{
    position:sticky !important;
    top:0;
    z-index:5000 !important;

    width:100% !important;
    height:74px !important;
    min-height:74px !important;

    padding:0 max(24px,calc((100vw - var(--wn-content))/2)) !important;

    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:22px !important;

    background:#fff !important;
    border:0 !important;
    border-bottom:1px solid #f1e7ed !important;
    box-shadow:none !important;
}

.site-logo{
    order:1 !important;
    flex:0 0 auto !important;
}

.site-logo img{
    display:block !important;
    width:145px !important;
    height:58px !important;
    object-fit:contain !important;
}

.location-picker{
    order:2 !important;
    flex:0 0 auto !important;
}

.header-location{
    height:42px !important;
    min-height:42px !important;
    padding:0 15px !important;

    display:flex !important;
    align-items:center !important;
    gap:7px !important;

    background:#fff !important;
    color:var(--wn-dark) !important;

    border:1px solid var(--wn-border) !important;
    border-radius:13px !important;

    box-shadow:none !important;
    font-size:13px !important;
}

.header-search{
    display:none !important;
}

.header-actions{
    order:3 !important;

    flex:1 1 auto !important;
    min-width:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;

    gap:22px !important;
}

.header-login,
.header-restaurant{
    min-height:0 !important;
    height:auto !important;

    padding:8px 0 !important;

    border:0 !important;
    border-radius:0 !important;

    background:transparent !important;
    background-image:none !important;

    box-shadow:none !important;

    color:var(--wn-dark) !important;

    font-size:14px !important;
    font-weight:700 !important;
    white-space:nowrap !important;
}

.header-login:hover,
.header-restaurant:hover{
    color:var(--wn-primary) !important;
}

.main-menu-wrapper{
    margin-inline-start:auto !important;
}

.header-menu{
    width:40px !important;
    height:40px !important;

    display:grid !important;
    place-items:center !important;

    padding:0 !important;

    border:0 !important;
    border-radius:10px !important;

    background:transparent !important;
    color:var(--wn-dark) !important;

    box-shadow:none !important;
}

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

.hero{
    position:relative !important;

    width:100% !important;
    min-height:430px !important;
    max-height:none !important;

    margin:0 !important;
    padding:55px 24px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:
        linear-gradient(
            rgba(255,255,255,.23),
            rgba(255,255,255,.23)
        ),
        url('/images/wain-nakul/hero-map-bg.png')
        center center / cover no-repeat !important;

    border:0 !important;
    border-radius:0 !important;

    overflow:hidden !important;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,.02),
            rgba(255,255,255,.22)
        );

    pointer-events:none;
}

.hero-brand-mark{
    display:none !important;
}

.hero-content{
    position:relative !important;
    z-index:2 !important;

    width:min(760px,calc(100% - 30px)) !important;
    max-width:760px !important;

    margin:0 auto !important;
    padding:0 !important;

    text-align:center !important;
}

.hero h1{
    margin:0 0 8px !important;

    color:#311035 !important;

    font-size:46px !important;
    font-weight:900 !important;
    line-height:1.18 !important;
}

.hero p{
    margin:0 0 24px !important;

    color:#563b59 !important;

    font-size:17px !important;
    font-weight:600 !important;
    line-height:1.7 !important;
}

/* =========================================================
   MAIN SEARCH
========================================================= */

.search-box{
    width:min(690px,100%) !important;
    min-height:60px !important;

    margin:0 auto !important;
    padding:5px !important;

    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:5px !important;

    background:#fff !important;

    border:1px solid #eadfe6 !important;
    border-radius:999px !important;

    box-shadow:0 8px 25px rgba(69,18,66,.10) !important;

    overflow:hidden !important;
}

.search-box input{
    flex:1 1 auto !important;
    min-width:0 !important;

    height:48px !important;
    padding:0 22px !important;

    border:0 !important;
    outline:0 !important;

    background:transparent !important;

    color:#4c3a4d !important;

    font-size:14px !important;
    text-align:right !important;
}

.search-box button{
    flex:0 0 50px !important;

    width:50px !important;
    min-width:50px !important;
    height:50px !important;

    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    border:0 !important;
    border-radius:50% !important;

    background:var(--wn-primary) !important;
    background-image:none !important;

    color:#fff !important;

    font-size:0 !important;
}

.search-box button::before{
    content:"⌕";
    color:#fff;
    font-size:25px;
    line-height:1;
}

.quick{
    display:none !important;
}

/* =========================================================
   CURRENT LOCATION
========================================================= */

.home-current-location{
    width:min(var(--wn-content),calc(100% - 40px)) !important;
    min-height:86px !important;

    margin:18px auto 30px !important;
    padding:13px 22px !important;

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

    gap:18px !important;

    direction:rtl !important;

    background:#fff0f6 !important;

    border:1px solid #f3dce8 !important;
    border-radius:18px !important;

    box-shadow:none !important;
}

.home-current-location-main{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    min-width:0 !important;
}

.home-current-location-pin{
    flex:0 0 48px !important;

    width:48px !important;
    height:48px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:50% !important;

    background:#f8d8e8 !important;

    font-size:21px !important;
}

.home-current-location-info{
    min-width:0 !important;
}

.home-current-location-title{
    color:#422145 !important;
    font-size:13px !important;
}

.home-current-location-title strong{
    display:block !important;

    margin-top:2px !important;

    color:#311035 !important;

    font-size:18px !important;
    font-weight:900 !important;
}

.home-current-location-distance{
    margin-top:3px !important;

    color:#927f91 !important;

    font-size:11px !important;
}

.home-current-location-change{
    flex:0 0 auto !important;

    min-width:110px !important;
    min-height:46px !important;

    padding:0 17px !important;

    display:grid !important;
    place-items:center !important;

    background:#fff !important;

    color:var(--wn-primary) !important;

    border:1px solid #f2dce8 !important;
    border-radius:13px !important;

    font-size:12px !important;
    font-weight:800 !important;

    box-shadow:none !important;
}

/* =========================================================
   MAIN HOME CONTENT
========================================================= */

.activities-section{
    width:min(var(--wn-content),calc(100% - 40px)) !important;

    margin:0 auto !important;

    padding:0 0 60px !important;
}

.home-strip-section{
    width:100% !important;

    margin:0 0 34px !important;
    padding:0 !important;
}

.activities-header{
    width:100% !important;

    margin:0 0 15px !important;

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

    gap:14px !important;
}

.activities-header h2,
.activities-header .wn-heading-with-icon{
    margin:0 !important;

    display:flex !important;
    align-items:center !important;
    gap:7px !important;

    color:#321338 !important;

    font-size:23px !important;
    font-weight:900 !important;
    line-height:1.3 !important;
}

.activities-view-all{
    color:var(--wn-primary) !important;

    font-size:13px !important;
    font-weight:800 !important;
}

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

#home-nearby-status{
    margin:0 0 12px !important;

    color:#8b7c8d !important;

    font-size:12px !important;
}

#home-nearby-list{
    width:100% !important;

    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;

    gap:16px !important;

    overflow:visible !important;
}

.home-nearby-card{
    width:100% !important;
    min-width:0 !important;

    display:block !important;

    overflow:hidden !important;

    background:#fff !important;

    border:1px solid var(--wn-border) !important;
    border-radius:16px !important;

    box-shadow:var(--wn-shadow-soft) !important;

    color:var(--wn-text) !important;
}

.home-nearby-card img{
    display:block !important;

    width:100% !important;
    height:150px !important;

    object-fit:cover !important;
}

.home-nearby-card-body{
    min-height:82px !important;

    padding:11px 13px 12px !important;
}

.home-nearby-card-body strong{
    display:block !important;

    margin:0 0 6px !important;

    color:#2f2231 !important;

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

.home-nearby-meta{
    color:#8a7d8b !important;

    font-size:11px !important;
    line-height:1.6 !important;
}

/* =========================================================
   OFFERS
========================================================= */

.home-offers-cards{
    width:100% !important;

    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;

    gap:18px !important;

    overflow:visible !important;
}

.home-offer-card{
    width:100% !important;
    min-width:0 !important;

    display:grid !important;
    grid-template-columns:42% 58% !important;

    min-height:175px !important;

    overflow:hidden !important;

    background:#fff !important;

    border:1px solid var(--wn-border) !important;
    border-radius:17px !important;

    box-shadow:var(--wn-shadow-soft) !important;
}

.home-offer-image{
    width:100% !important;
    height:100% !important;
    min-height:175px !important;
}

.home-offer-image img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
}

.home-offer-content{
    min-width:0 !important;

    padding:18px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
}

.home-offer-content strong{
    color:#38223a !important;

    font-size:17px !important;
    font-weight:900 !important;
}

.home-offer-content span{
    margin-top:6px !important;

    color:#8b7c8d !important;

    font-size:12px !important;
}

/* =========================================================
   CATEGORIES
========================================================= */

.home-carousel-shell{
    position:relative !important;
    width:100% !important;
}

.home-category-cards{
    width:100% !important;

    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;

    gap:12px !important;

    padding:0 !important;

    overflow:visible !important;
}

.home-category-card{
    width:100% !important;
    min-width:0 !important;
    min-height:132px !important;

    padding:16px 8px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:9px !important;

    background:#fff !important;

    border:1px solid var(--wn-border) !important;
    border-radius:17px !important;

    box-shadow:var(--wn-shadow-soft) !important;

    color:var(--wn-text) !important;

    text-align:center !important;
}

.home-category-icon{
    width:50px !important;
    height:50px !important;

    margin:0 !important;

    display:grid !important;
    place-items:center !important;

    border-radius:50% !important;

    background:#fff0f6 !important;

    color:var(--wn-primary) !important;
}

.home-category-card strong{
    color:#312432 !important;

    font-size:13px !important;
    font-weight:800 !important;

    line-height:1.45 !important;
}

.home-category-count{
    display:none !important;
}

.home-carousel-arrow{
    position:absolute !important;
    z-index:5 !important;
    top:50% !important;

    width:34px !important;
    height:34px !important;

    margin-top:-17px !important;

    display:grid !important;
    place-items:center !important;

    padding:0 !important;

    background:#fff !important;

    border:1px solid var(--wn-border) !important;
    border-radius:50% !important;

    color:var(--wn-primary) !important;

    box-shadow:0 4px 14px rgba(50,10,50,.10) !important;
}

.home-carousel-arrow-right{
    right:-17px !important;
}

.home-carousel-arrow-left{
    left:-17px !important;
}

/* =========================================================
   SPECIAL
========================================================= */

.home-special-row{
    width:100% !important;

    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;

    gap:16px !important;
}

.home-special-card{
    min-height:105px !important;

    padding:16px 20px !important;

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

    gap:15px !important;

    background:#fff !important;

    border:1px solid var(--wn-border) !important;
    border-radius:17px !important;

    box-shadow:var(--wn-shadow-soft) !important;

    color:var(--wn-text) !important;
}

.home-special-icon{
    flex:0 0 95px !important;

    width:95px !important;
    min-height:72px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:13px !important;

    background:#fff7fb !important;
}

.home-special-card strong{
    display:block !important;

    margin-bottom:5px !important;

    color:#342637 !important;

    font-size:15px !important;
    font-weight:900 !important;
}

.home-special-card span{
    color:#8b7d8c !important;

    font-size:11px !important;
}

/* =========================================================
   GOVERNORATES
========================================================= */

.home-governorates-section{
    margin-top:35px !important;
}

.home-governorate-cards{
    width:100% !important;

    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;

    gap:10px !important;

    overflow:visible !important;
}

.home-governorate-card{
    width:100% !important;
    min-width:0 !important;
    min-height:78px !important;

    padding:12px 8px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    background:#fff !important;

    border:1px solid var(--wn-border) !important;
    border-radius:14px !important;

    box-shadow:var(--wn-shadow-soft) !important;

    text-align:center !important;
}

.home-governorate-card strong{
    color:#342637 !important;

    font-size:12px !important;
}

.home-governorate-card span{
    margin-top:4px !important;

    color:#968797 !important;

    font-size:10px !important;
}

/* =========================================================
   FOOTER
========================================================= */

footer,
.site-footer{
    margin-top:20px !important;

    background:linear-gradient(135deg,#70106f,#a01879) !important;
    color:#fff !important;
}

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

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

    :root{
        --wn-content:920px;
    }

    .site-header{
        height:66px !important;
        min-height:66px !important;

        padding:0 18px !important;

        gap:13px !important;
    }

    .site-logo img{
        width:118px !important;
        height:50px !important;
    }

    .header-actions{
        gap:13px !important;
    }

    .header-login,
    .header-restaurant{
        font-size:12px !important;
    }

    .hero{
        min-height:360px !important;
        padding:44px 20px !important;
    }

    .hero-content{
        width:min(650px,calc(100% - 30px)) !important;
    }

    .hero h1{
        font-size:38px !important;
    }

    .hero p{
        font-size:15px !important;
    }

    .search-box{
        width:min(620px,100%) !important;
    }

    .home-current-location,
    .activities-section{
        width:calc(100% - 36px) !important;
    }

    #home-nearby-list{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }

    .home-category-cards{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }

    .home-governorate-cards{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }
}

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

@media (max-width:767px){

    .site-header{
        height:58px !important;
        min-height:58px !important;

        padding:0 9px !important;

        gap:8px !important;
    }

    .site-logo img{
        width:86px !important;
        height:43px !important;
    }

    .location-picker{
        display:none !important;
    }

    .header-actions{
        gap:8px !important;
    }

    .header-actions > .header-restaurant{
        display:none !important;
    }

    .header-login{
        padding:5px 0 !important;

        font-size:10px !important;
    }

    .header-actions form .header-login{
        display:none !important;
    }

    .hero{
        min-height:295px !important;

        padding:32px 12px !important;
    }

    .hero-content{
        width:100% !important;
    }

    .hero h1{
        font-size:27px !important;
        line-height:1.25 !important;
    }

    .hero p{
        margin-bottom:17px !important;

        font-size:12px !important;
    }

    .search-box{
        min-height:50px !important;

        padding:4px !important;
    }

    .search-box input{
        height:42px !important;

        padding:0 13px !important;

        font-size:11px !important;
    }

    .search-box button{
        flex-basis:42px !important;

        width:42px !important;
        min-width:42px !important;
        height:42px !important;
    }

    .home-current-location{
        width:calc(100% - 20px) !important;
        min-height:72px !important;

        margin:12px auto 22px !important;
        padding:9px 10px !important;

        gap:8px !important;

        border-radius:14px !important;
    }

    .home-current-location-main{
        gap:8px !important;
    }

    .home-current-location-pin{
        flex-basis:38px !important;

        width:38px !important;
        height:38px !important;

        font-size:17px !important;
    }

    .home-current-location-title{
        font-size:10px !important;
    }

    .home-current-location-title strong{
        font-size:14px !important;
    }

    .home-current-location-distance{
        font-size:9px !important;
    }

    .home-current-location-change{
        min-width:78px !important;
        min-height:38px !important;

        padding:0 8px !important;

        font-size:10px !important;
    }

    .activities-section{
        width:calc(100% - 20px) !important;

        padding-bottom:40px !important;
    }

    .home-strip-section{
        margin-bottom:25px !important;
    }

    .activities-header{
        margin-bottom:11px !important;
    }

    .activities-header h2,
    .activities-header .wn-heading-with-icon{
        font-size:18px !important;
    }

    #home-nearby-list{
        display:flex !important;

        gap:10px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        padding-bottom:5px !important;

        scrollbar-width:none !important;
    }

    #home-nearby-list::-webkit-scrollbar{
        display:none !important;
    }

    .home-nearby-card{
        flex:0 0 205px !important;
    }

    .home-nearby-card img{
        height:125px !important;
    }

    .home-offers-cards{
        grid-template-columns:1fr !important;

        gap:11px !important;
    }

    .home-offer-card{
        grid-template-columns:42% 58% !important;

        min-height:125px !important;
    }

    .home-offer-image{
        min-height:125px !important;
    }

    .home-offer-content{
        padding:12px !important;
    }

    .home-offer-content strong{
        font-size:14px !important;
    }

    .home-category-cards{
        display:flex !important;

        gap:9px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        padding:2px 1px 7px !important;

        scrollbar-width:none !important;
    }

    .home-category-cards::-webkit-scrollbar{
        display:none !important;
    }

    .home-category-card{
        flex:0 0 108px !important;

        width:108px !important;
        min-height:110px !important;

        padding:12px 6px !important;
    }

    .home-category-icon{
        width:42px !important;
        height:42px !important;
    }

    .home-category-card strong{
        font-size:11px !important;
    }

    .home-carousel-arrow{
        display:none !important;
    }

    .home-special-row{
        grid-template-columns:1fr !important;

        gap:9px !important;
    }

    .home-special-card{
        min-height:82px !important;

        padding:11px 13px !important;
    }

    .home-special-icon{
        flex-basis:68px !important;

        width:68px !important;
        min-height:58px !important;
    }

    .home-governorate-cards{
        display:flex !important;

        gap:9px !important;

        overflow-x:auto !important;

        padding-bottom:5px !important;

        scrollbar-width:none !important;
    }

    .home-governorate-cards::-webkit-scrollbar{
        display:none !important;
    }

    .home-governorate-card{
        flex:0 0 105px !important;

        min-height:68px !important;
    }
}

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

@media (max-width:479px){

    .site-header{
        padding-inline:7px !important;
    }

    .site-logo img{
        width:80px !important;
    }

    .hero{
        min-height:275px !important;
    }

    .hero h1{
        font-size:25px !important;
    }

    .home-current-location,
    .activities-section{
        width:calc(100% - 16px) !important;
    }

    .home-category-card{
        flex-basis:103px !important;
        width:103px !important;
    }
}