/* =========================================================
   MASALA ZONE
   GALLERY MODAL — FINAL PREMIUM VERSION
========================================================= */


/* =========================================================
   MODAL OVERLAY
========================================================= */

.mz-modal{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

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

    backdrop-filter:blur(12px);

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

    display:none;

    align-items:center;
    justify-content:center;

    padding:30px;

    z-index:99999;

    overflow-y:auto;

}


.mz-modal.active{

    display:flex;

}


/* =========================================================
   MODAL BOX
========================================================= */

.mz-modal-box{

    position:relative;

    width:min(1180px,96vw);

    max-height:92vh;

    background:#111;

    border:1px solid rgba(212,175,55,.22);

    border-radius:26px;

    overflow:hidden;

    box-shadow:
        0 35px 90px rgba(0,0,0,.75),
        0 0 0 1px rgba(255,255,255,.03);

    animation:mzGalleryModalIn .4s ease;

}


/* =========================================================
   MODAL ANIMATION
========================================================= */

@keyframes mzGalleryModalIn{

    from{

        opacity:0;

        transform:
            translateY(25px)
            scale(.96);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


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

.mz-modal-grid{

    display:grid;

    grid-template-columns:
        minmax(0,55%)
        minmax(0,45%);

    min-height:650px;

}


/* =========================================================
   LEFT IMAGE
========================================================= */

.mz-modal-image{

    position:relative;

    min-height:650px;

    background:#080808;

    overflow:hidden;

}


.mz-modal-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05),
            rgba(0,0,0,.25)
        );

    pointer-events:none;

}


.mz-modal-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .6s ease;

}


.mz-modal-image:hover img{

    transform:scale(1.03);

}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.mz-modal-content{

    padding:55px 50px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:
        linear-gradient(
            180deg,
            #181818 0%,
            #101010 100%
        );

    overflow-y:auto;

}


/* =========================================================
   BADGE
========================================================= */

.mz-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    padding:9px 17px;

    margin-bottom:20px;

    border-radius:50px;

    background:
        rgba(212,175,55,.10);

    border:
        1px solid
        rgba(212,175,55,.28);

    color:#D4AF37;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}


/* =========================================================
   TITLE
========================================================= */

.mz-modal-content h2{

    margin:0 0 16px;

    color:#fff;

    font-family:
        'Playfair Display',
        Georgia,
        serif;

    font-size:48px;

    line-height:1.1;

    font-weight:700;

}


/* =========================================================
   RATING
========================================================= */

.mz-rating{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:24px;

    color:#D4AF37;

    font-size:17px;

    letter-spacing:2px;

}


.mz-rating span{

    color:#fff;

    font-size:15px;

    font-weight:700;

    letter-spacing:0;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.mz-modal-content p{

    margin:0;

    color:#bcbcbc;

    font-size:16px;

    line-height:1.8;

}


/* =========================================================
   PRICE
========================================================= */

.mz-price{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin:30px 0;

    padding:22px 0;

    border-top:
        1px solid
        rgba(255,255,255,.08);

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

}


.mz-price span{

    color:#8f8f8f;

    font-size:14px;

    font-weight:500;

}


.mz-price strong{

    color:#D4AF37;

    font-size:34px;

    line-height:1;

    font-weight:800;

}


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

.mz-modal-buttons{

    display:flex;

    gap:14px;

    width:100%;

}


.mz-order-btn,
.mz-menu-btn{

    flex:1;

    min-height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    padding:14px 20px;

    border-radius:50px;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

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

}


/* =========================================================
   ORDER BUTTON
========================================================= */

.mz-order-btn{

    background:
        linear-gradient(
            135deg,
            #E8CA61,
            #C89A24
        );

    color:#111;

    border:1px solid transparent;

    box-shadow:
        0 12px 28px
        rgba(212,175,55,.22);

}


.mz-order-btn:hover{

    color:#111;

    transform:translateY(-3px);

    box-shadow:
        0 18px 35px
        rgba(212,175,55,.32);

}


/* =========================================================
   MENU BUTTON
========================================================= */

.mz-menu-btn{

    background:transparent;

    color:#D4AF37;

    border:
        1px solid
        rgba(212,175,55,.38);

}


.mz-menu-btn:hover{

    background:#D4AF37;

    color:#111;

    border-color:#D4AF37;

    transform:translateY(-3px);

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.mz-close{

    position:absolute;

    top:16px;

    right:16px;

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius:50%;

    background:
        rgba(15,15,15,.85);

    color:#fff;

    font-size:18px;

    cursor:pointer;

    z-index:20;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}


.mz-close:hover{

    background:#D4AF37;

    color:#111;

    transform:
        rotate(90deg)
        scale(1.05);

}


/* =========================================================
   QUICK ORDER PANEL
========================================================= */

#quickOrderForm{

    width:100%;

}


.quick-title{

    margin-bottom:8px !important;

    font-size:38px !important;

}


.quick-subtitle{

    margin-bottom:22px !important;

    color:#999 !important;

    font-size:14px !important;

    line-height:1.6 !important;

}


/* =========================================================
   QUICK DISH
========================================================= */

.quick-dish{

    margin:0 0 8px;

    color:#fff;

    font-family:
        'Playfair Display',
        Georgia,
        serif;

    font-size:25px;

}


.quick-rating{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:5px;

    color:#D4AF37;

    font-size:15px;

}


.quick-rating span{

    color:#fff;

    font-weight:700;

}


.quick-price{

    color:#D4AF37 !important;

    font-size:18px !important;

    font-weight:700;

    margin-bottom:20px !important;

}


/* =========================================================
   FORM LABEL
========================================================= */

#quickOrderForm label{

    display:block;

    margin:
        16px 0
        7px;

    color:#d7d7d7;

    font-size:13px;

    font-weight:600;

}


/* =========================================================
   INPUTS
========================================================= */

#quickOrderForm input,
#quickOrderForm textarea{

    width:100%;

    box-sizing:border-box;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:12px;

    background:#191919;

    color:#fff;

    outline:none;

    font-family:inherit;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


#quickOrderForm input{

    height:48px;

    padding:
        0 15px;

}


#quickOrderForm textarea{

    min-height:95px;

    padding:13px 15px;

    resize:vertical;

}


#quickOrderForm input::placeholder,
#quickOrderForm textarea::placeholder{

    color:#707070;

}


#quickOrderForm input:focus,
#quickOrderForm textarea:focus{

    border-color:
        rgba(212,175,55,.65);

    background:#1c1c1c;

    box-shadow:
        0 0 0 3px
        rgba(212,175,55,.08);

}


/* =========================================================
   QUANTITY BOX
========================================================= */

.qty-box{

    display:flex;

    align-items:center;

    width:150px;

    height:48px;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:12px;

    background:#191919;

}


.qty-box button{

    width:48px;

    height:100%;

    padding:0;

    border:0;

    background:transparent;

    color:#D4AF37;

    font-size:24px;

    line-height:1;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease;

}


.qty-box button:hover{

    background:#D4AF37;

    color:#111;

}


.qty-box input{

    width:54px !important;

    height:100% !important;

    padding:0 !important;

    border:0 !important;

    border-left:
        1px solid
        rgba(255,255,255,.06) !important;

    border-right:
        1px solid
        rgba(255,255,255,.06) !important;

    border-radius:0 !important;

    background:transparent !important;

    text-align:center;

    color:#fff;

    font-weight:700;

}


/* =========================================================
   QUICK ORDER TOTAL
========================================================= */

#quickOrderForm .mz-price{

    margin:22px 0;

    padding:18px 0;

}


#quickOrderForm .mz-price strong{

    font-size:28px;

}


/* =========================================================
   WHATSAPP SUBMIT
========================================================= */

.mz-order-submit{

    width:100%;

    min-height:56px;

    border:0;

    border-radius:50px;

    background:
        linear-gradient(
            135deg,
            #25D366,
            #18B957
        );

    color:#fff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 12px 28px
        rgba(37,211,102,.18);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.mz-order-submit:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 35px
        rgba(37,211,102,.28);

}


/* =========================================================
   BODY SCROLL LOCK
========================================================= */

body.mz-gallery-modal-open{

    overflow:hidden;

}


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

@media (max-width:900px){

    .mz-modal{

        padding:20px;

    }


    .mz-modal-box{

        width:96vw;

        max-height:94vh;

        border-radius:22px;

    }


    .mz-modal-grid{

        grid-template-columns:1fr;

        min-height:auto;

    }


    .mz-modal-image{

        height:360px;

        min-height:360px;

    }


    .mz-modal-content{

        padding:38px 32px;

        max-height:calc(94vh - 360px);

    }


    .mz-modal-content h2{

        font-size:38px;

    }


    .mz-price strong{

        font-size:30px;

    }

}


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

@media (max-width:600px){

    .mz-modal{

        padding:10px;

        align-items:flex-start;

    }


    .mz-modal-box{

        width:100%;

        max-height:96vh;

        margin-top:2vh;

        border-radius:18px;

    }


    .mz-modal-grid{

        display:block;

    }


    .mz-modal-image{

        width:100%;

        height:280px;

        min-height:280px;

    }


    .mz-modal-content{

        padding:28px 20px 24px;

        max-height:none;

        overflow:visible;

    }


    .mz-close{

        top:10px;

        right:10px;

        width:40px;

        height:40px;

        font-size:16px;

        background:
            rgba(0,0,0,.72);

    }


    .mz-modal-content h2{

        font-size:31px;

        line-height:1.15;

    }


    .mz-rating{

        margin-bottom:18px;

        font-size:15px;

    }


    .mz-modal-content p{

        font-size:14px;

        line-height:1.7;

    }


    .mz-price{

        margin:22px 0;

        padding:18px 0;

    }


    .mz-price strong{

        font-size:27px;

    }


    .mz-modal-buttons{

        flex-direction:column;

        gap:10px;

    }


    .mz-order-btn,
    .mz-menu-btn{

        width:100%;

        min-height:52px;

    }


    .quick-title{

        font-size:30px !important;

    }


    .quick-subtitle{

        font-size:13px !important;

    }


    .quick-dish{

        font-size:22px;

    }


    .qty-box{

        width:140px;

    }


    #quickOrderForm input{

        height:46px;

    }


    #quickOrderForm textarea{

        min-height:85px;

    }


    .mz-order-submit{

        min-height:52px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width:380px){

    .mz-modal{

        padding:6px;

    }


    .mz-modal-box{

        margin-top:1vh;

        max-height:98vh;

    }


    .mz-modal-image{

        height:235px;

        min-height:235px;

    }


    .mz-modal-content{

        padding:24px 16px 20px;

    }


    .mz-modal-content h2{

        font-size:27px;

    }


    .mz-price strong{

        font-size:24px;

    }


    .mz-close{

        width:36px;

        height:36px;

    }

}