*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Vazirmatn',sans-serif;
    background:#fff8f6;
    color:#4b3035;
}


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

@keyframes pageReveal{
    0%{
        opacity:0;
        transform:translateY(10px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }
}

body > *:not(.booking-message-overlay):not(.jalali-calendar-overlay):not(#hobabSplash){
    animation:pageReveal .9s cubic-bezier(.22,.61,.36,1) both;
}


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

.header{
    width:92%;
    margin:20px auto;
    padding:22px 28px;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;

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

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

    border-radius:30px;
    border:4px solid rgba(63,92,67,.85);

    box-shadow:
        0 15px 45px rgba(180,120,120,.12),
        inset 0 1px 0 rgba(255,255,255,.8);

    animation:
        headerReveal 1s
        cubic-bezier(.16,1,.3,1)
        .1s
        both;
}

@keyframes headerReveal{
    0%{
        opacity:0;
        transform:translateY(-18px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }
}


/* =========================================================
   TEXT LOGO
========================================================= */

.logo{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    width:100%;

    color:#a9686d;

    animation:
        logoReveal 1.1s
        cubic-bezier(.16,1,.3,1)
        .25s
        both;
}

@keyframes logoReveal{
    0%{
        opacity:0;
        transform:scale(.94);
        filter:blur(5px);
    }

    100%{
        opacity:1;
        transform:scale(1);
        filter:blur(0);
    }
}

.logo span{
    font-size:27px;
    font-weight:700;
    letter-spacing:5px;
}

.logo small{
    font-size:10px;
    font-weight:500;
    letter-spacing:7px;
    margin-top:3px;
    opacity:.8;
}


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

.top-buttons{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    animation:
        buttonsReveal 1s
        cubic-bezier(.16,1,.3,1)
        .4s
        both;
}

@keyframes buttonsReveal{
    0%{
        opacity:0;
        transform:translateY(12px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }
}

.header .top-buttons .top-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    min-width:90px;
    height:42px;

    padding:0 17px;

    border-radius:18px;

    text-decoration:none;

    color:#5d4146;

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

    border:4px solid rgba(63,92,67,.85);

    box-shadow:
        0 8px 25px rgba(150,100,100,.10),
        inset 0 1px 0 rgba(255,255,255,.9);

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

    font-family:'Vazirmatn',sans-serif;
    font-size:13px;
    font-weight:500;

    transition:.3s ease;
}

.header .top-buttons .top-btn:hover{
    transform:translateY(-3px);

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

    color:#a9686d;

    border-color:#3f5c43;

    box-shadow:
        0 12px 30px rgba(150,100,100,.17),
        inset 0 1px 0 rgba(255,255,255,.95);
}


/* =========================================================
   BOOKING TOP
========================================================= */

.header .top-buttons .booking-top{
    color:white;

    background:
        linear-gradient(
            135deg,
            rgba(217,155,159,.95),
            rgba(183,123,127,.95)
        );

    border:4px solid rgba(63,92,67,.85);

    box-shadow:
        0 10px 25px rgba(183,123,127,.22);
}

.header .top-buttons .booking-top:hover{
    color:white;

    transform:translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #d99b9f,
            #a9686d
        );
}


/* =========================================================
   SERVICES
========================================================= */

.services{
    width:90%;
    margin:45px auto 18px;

    text-align:center;

    animation:
        contentReveal 1s
        cubic-bezier(.16,1,.3,1)
        .45s
        both;
}

.services-toggle{
    width:100%;
    max-width:900px;

    padding:19px 24px;

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

    margin:auto;

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

    color:#4b3035;

    border:4px solid rgba(63,92,67,.85);
    border-radius:23px;

    box-shadow:
        0 12px 30px rgba(180,120,120,.10),
        inset 0 1px 0 rgba(255,255,255,.8);

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

    font-family:inherit;
    font-size:18px;
    font-weight:500;

    cursor:pointer;

    transition:.3s ease;
}

.services-toggle:hover{
    transform:translateY(-2px);
    border-color:#3f5c43;
}

.services-arrow{
    width:30px;
    height:30px;

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

    border-radius:50%;

    color:#a9686d;
    font-size:23px;

    transition:.4s ease;
}

.services-toggle.active .services-arrow{
    transform:rotate(45deg);
}


/* =========================================================
   SERVICES CONTENT
========================================================= */

.services-content{
    max-width:900px;
    margin:0 auto;

    max-height:0;
    overflow:hidden;
    opacity:0;

    transition:
        max-height .5s ease,
        opacity .3s ease,
        margin-top .5s ease;
}

.services-content.open{
    max-height:600px;
    opacity:1;
    margin-top:12px;
}


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

.service-box{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.card{
    background:rgba(255,255,255,.65);

    padding:18px 15px;

    border-radius:20px;

    border:4px solid rgba(63,92,67,.85);

    box-shadow:
        0 15px 35px rgba(180,120,120,.10),
        inset 0 1px 0 rgba(255,255,255,.7);

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

    transition:.35s ease;
}

.card:hover{
    transform:translateY(-5px);

    border-color:#3f5c43;

    box-shadow:
        0 22px 45px rgba(180,120,120,.17);
}

.card h3{
    margin-bottom:7px;

    color:#a9686d;
    font-size:17px;
    font-weight:600;
}

.card p{
    line-height:1.8;
    color:#76565b;
    font-size:12px;
}


/* =========================================================
   BRIDAL
========================================================= */

.bridal-section{
    width:90%;
    margin:15px auto 50px;

    text-align:center;

    animation:
        contentReveal 1s
        cubic-bezier(.16,1,.3,1)
        .55s
        both;
}

.bridal-toggle{
    width:100%;
    max-width:900px;

    padding:19px 24px;

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

    margin:auto;

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

    color:#4b3035;

    border:4px solid rgba(63,92,67,.85);
    border-radius:23px;

    box-shadow:
        0 12px 30px rgba(180,120,120,.10),
        inset 0 1px 0 rgba(255,255,255,.8);

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

    font-family:inherit;
    font-size:18px;
    font-weight:500;

    cursor:pointer;

    transition:.3s ease;
}

.bridal-toggle:hover{
    transform:translateY(-2px);
    border-color:#3f5c43;
}

.bridal-arrow{
    width:30px;
    height:30px;

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

    color:#a9686d;
    font-size:23px;

    transition:.4s ease;
}

.bridal-toggle.active .bridal-arrow{
    transform:rotate(45deg);
}


/* =========================================================
   BRIDAL CONTENT
========================================================= */

.bridal-content{
    max-width:900px;
    margin:0 auto;

    max-height:0;
    overflow:hidden;
    opacity:0;

    transition:
        max-height .5s ease,
        opacity .3s ease,
        margin-top .5s ease;
}

.bridal-content.open{
    max-height:500px;
    opacity:1;
    margin-top:12px;
}

.bridal-box{
    padding:32px 22px;

    border-radius:30px;

    background:
        linear-gradient(
            135deg,
            #f8e8e3,
            #fff8f6
        );

    border:4px solid rgba(63,92,67,.85);

    box-shadow:
        0 20px 50px rgba(180,120,120,.12);
}

.bridal-box h2{
    color:#a9686d;
    font-size:29px;
    margin-bottom:13px;
}

.bridal-box p{
    max-width:600px;
    margin:0 auto 22px;

    line-height:2;

    color:#76565b;
    font-size:14px;
}

.bridal-services{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:9px;
}

.bridal-services span{
    padding:8px 14px;

    border-radius:18px;

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

    border:4px solid rgba(63,92,67,.85);

    color:#6b4b50;

    font-size:12px;

    transition:.3s ease;
}

.bridal-services span:hover{
    border-color:#3f5c43;
    color:#a9686d;
}


/* =========================================================
   OPENING HOURS
========================================================= */

.opening-hours{
    width:90%;
    max-width:900px;

    margin:-20px auto 35px;

    text-align:center;
}

.opening-hours-box{
    width:100%;

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

    gap:15px;

    padding:15px 20px;

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

    border:4px solid rgba(63,92,67,.85);

    border-radius:20px;

    box-shadow:
        0 12px 30px rgba(180,120,120,.08),
        inset 0 1px 0 rgba(255,255,255,.8);

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

.opening-hours-label{
    color:#a9686d;

    font-size:12px;
    font-weight:500;

    white-space:nowrap;
}

.opening-hours-box h2{
    margin:0;

    color:#4b3035;

    font-size:16px;
    font-weight:600;

    white-space:nowrap;
}

.opening-hours-box p{
    margin:0;

    color:#76565b;

    font-size:11px;

    white-space:nowrap;
}


/* =========================================================
   BOOKING
========================================================= */

.booking{
    width:90%;
    margin:50px auto 80px;

    padding:65px 28px;

    border-radius:45px;

    background:
        linear-gradient(
            135deg,
            #fffaf8,
            #f7e4df
        );

    border:4px solid rgba(63,92,67,.85);

    box-shadow:
        0 25px 60px rgba(180,120,120,.12);

    animation:
        contentReveal 1s
        cubic-bezier(.16,1,.3,1)
        .65s
        both;
}

@keyframes contentReveal{
    0%{
        opacity:0;
        transform:translateY(18px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }
}


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

.booking-title{
    text-align:center;
    margin-bottom:40px;
}

.booking-title span{
    color:#a9686d;
    font-size:13px;
    letter-spacing:2px;
}

.booking-title h2{
    margin:12px 0;

    font-size:37px;
    color:#4b3035;
}

.booking-title p{
    color:#76565b;
    font-size:14px;
}

.booking-title::after{
    content:"";

    display:block;

    width:35px;
    height:2px;

    margin:10px auto 0;

    background:#a9686d;

    opacity:.65;

    border-radius:10px;
}


/* =========================================================
   BOOKING BOX
========================================================= */

.booking-box{
    max-width:700px;
    margin:auto;

    display:grid;
    gap:18px;
}


/* =========================================================
   BOOKING STEP
========================================================= */

.booking-step{
    position:relative;

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

    padding:24px;

    border-radius:23px;

    border:4px solid rgba(63,92,67,.85);

    box-shadow:
        0 10px 25px rgba(180,120,120,.07);

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

.booking-step:hover{
    transform:translateY(-2px);

    border-color:#3f5c43;

    box-shadow:
        0 14px 30px rgba(180,120,120,.10);
}


/* =========================================================
   STEP NUMBER
========================================================= */

.step-number{
    display:inline-flex;

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

    min-width:38px;
    height:25px;

    padding:0 8px;

    border-radius:20px;

    background:rgba(79,108,84,.08);

    color:#4f6c54;

    font-size:11px;

    letter-spacing:2px;

    font-weight:700;
}


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

.booking-step h3{
    margin:10px 0 16px;

    color:#4b3035;

    font-size:18px;
    font-weight:600;
}


/* =========================================================
   SELECT + INPUT
========================================================= */

.booking-step select,
.booking-step input{
    width:100%;

    height:52px;

    padding:0 15px;

    border-radius:14px;

    border:4px solid rgba(63,92,67,.85);

    background:#fffdfc;

    color:#4b3035;

    font-family:inherit;
    font-size:14px;

    outline:none;

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

.booking-step select{
    cursor:pointer;
}

.booking-step input{
    margin-bottom:10px;
}

.booking-step select:hover,
.booking-step input:hover{
    border-color:#3f5c43;
    background:#ffffff;
}

.booking-step select:focus,
.booking-step input:focus{
    border-color:#3f5c43;

    background:#ffffff;

    box-shadow:
        0 0 0 4px rgba(79,108,84,.10);
}


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

.booking-step textarea{
    width:100%;

    height:78px;
    min-height:78px;
    max-height:78px;

    padding:13px 15px;

    border-radius:14px;

    border:4px solid rgba(63,92,67,.85);

    background:#fffdfc;

    color:#4b3035;

    font-family:inherit;
    font-size:14px;
    line-height:1.7;

    outline:none;

    resize:none;
    overflow:hidden;

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

.booking-step textarea:hover{
    border-color:#3f5c43;
    background:#ffffff;
}

.booking-step textarea:focus{
    border-color:#3f5c43;

    background:#ffffff;

    box-shadow:
        0 0 0 4px rgba(79,108,84,.10);
}

.booking-step textarea::placeholder,
.booking-step input::placeholder{
    color:#9b7d80;
    opacity:.9;
}


/* =========================================================
   TIME GRID
   فقط صبح / عصر
========================================================= */

.time-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;
}

.time-grid button{
    position:relative;

    width:100%;
    height:52px;

    padding:0 7px;

    border-radius:14px;

    background:#fffdfc;

    color:#6b4b50;

    border:4px solid rgba(63,92,67,.85);

    box-shadow:none;

    font-family:inherit;
    font-size:13px;

    cursor:pointer;

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

.time-grid button:hover{
    background:rgba(79,108,84,.06);

    color:#4f6c54;

    border-color:#3f5c43;

    transform:translateY(-2px);
}

.time-grid button:active{
    transform:scale(.97);
}


/* =========================================================
   SELECTED TIME
========================================================= */

.time-grid button.selected,
.time-grid button.active{
    background:#4f6c54;

    color:#ffffff;

    border-color:#3f5944;

    box-shadow:
        0 8px 20px rgba(79,108,84,.20);

    transform:translateY(-1px);
}

.time-grid button.selected::after,
.time-grid button.active::after{
    content:"✓";

    position:absolute;

    top:6px;
    left:7px;

    width:19px;
    height:19px;

    display:flex;

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

    border-radius:50%;

    background:#ffffff;

    color:#4f6c54;

    font-size:11px;
    font-weight:800;

    box-shadow:
        0 2px 7px rgba(0,0,0,.12);
}


/* =========================================================
   BOOKED / PASSED
========================================================= */

.time-grid button.booked{
    background:#f0eded !important;

    color:#aaa !important;

    border-color:#d8d1d1 !important;

    cursor:not-allowed !important;

    opacity:.65;

    text-decoration:line-through;

    transform:none !important;

    box-shadow:none !important;
}

.time-grid button.booked:hover{
    background:#f0eded !important;

    color:#aaa !important;

    border-color:#d8d1d1 !important;

    transform:none !important;

    box-shadow:none !important;
}

.time-grid button.passed,
.time-grid button:disabled.passed{
    opacity:.30 !important;

    cursor:not-allowed !important;

    pointer-events:none !important;

    text-decoration:line-through;

    filter:grayscale(.7);
}


/* =========================================================
   BOOKING BUTTON
========================================================= */

.booking-button{
    width:100%;

    height:56px;

    padding:0 16px;

    font-size:15px;
    font-weight:600;

    margin-top:3px;

    border:2px solid rgba(79,108,84,.30);

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #d99b9f,
            #a9686d
        );

    color:white;

    font-family:inherit;

    cursor:pointer;

    box-shadow:
        0 12px 25px rgba(190,130,130,.22);

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

.booking-button:hover{
    transform:translateY(-3px);

    filter:brightness(1.03);

    box-shadow:
        0 16px 30px rgba(190,130,130,.30);
}

.booking-button:active{
    transform:translateY(-1px) scale(.99);
}

.booking-button:disabled{
    opacity:.65;

    cursor:not-allowed;

    transform:none !important;

    filter:none;
}


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

.footer{
    margin-top:35px;

    padding:28px 20px 16px;

    text-align:center;

    background:#4b3035;

    color:white;
}

.footer-logo h2{
    font-size:24px;

    letter-spacing:6px;

    margin-bottom:2px;

    font-weight:600;
}

.footer-logo span{
    font-size:9px;

    letter-spacing:5px;

    opacity:.75;
}

.footer p{
    margin:8px 0 0;

    color:#f3dcd7;

    font-size:12px;
}

.copyright{
    margin-top:18px;

    padding-top:12px;

    border-top:2px solid rgba(183,123,127,.25);

    font-size:10px;

    color:#f3dcd7;

    opacity:.7;
}


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

@media(max-width:800px){

    .header{
        width:94%;

        margin:12px auto;

        padding:14px 12px;

        gap:13px;

        border-radius:25px;
    }

    .logo span{
        font-size:23px;
    }

    .logo small{
        font-size:9px;
    }

    .top-buttons{
        width:100%;

        justify-content:center;

        gap:6px;
    }

    .header .top-buttons .top-btn{
        flex:1;

        min-width:0;

        height:37px;

        padding:0 11px;

        border-radius:15px;

        font-size:11px;
    }


    .services{
        width:92%;

        margin:35px auto 14px;
    }

    .services-toggle{
        padding:17px 18px;

        font-size:16px;

        border-radius:20px;
    }

    .services-content.open{
        margin-top:12px;
    }


    .service-box{
        grid-template-columns:1fr 1fr;

        gap:8px;
    }

    .card{
        padding:16px 10px;

        border-radius:18px;
    }

    .card h3{
        font-size:15px;

        margin-bottom:5px;
    }

    .card p{
        font-size:11px;

        line-height:1.7;
    }


    .bridal-section{
        width:92%;

        margin:10px auto 35px;
    }

    .bridal-toggle{
        padding:17px 18px;

        font-size:16px;

        border-radius:20px;
    }

    .bridal-content.open{
        margin-top:12px;
    }

    .bridal-box{
        padding:26px 17px;

        border-radius:25px;
    }

    .bridal-box h2{
        font-size:25px;
    }

    .bridal-box p{
        font-size:13px;
    }

    .bridal-services span{
        font-size:11px;

        padding:7px 10px;
    }


    /* =====================================================
       OPENING HOURS MOBILE
    ===================================================== */

    .opening-hours{
        width:92%;

        margin:-12px auto 25px;
    }

    .opening-hours-box{
        gap:8px;

        padding:13px 10px;

        border-radius:17px;
    }

    .opening-hours-label{
        font-size:9px;
    }

    .opening-hours-box h2{
        font-size:12px;
    }

    .opening-hours-box p{
        font-size:9px;
    }


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

    .booking{
        width:92%;

        margin:35px auto 60px;

        padding:40px 16px;

        border-radius:32px;
    }

    .booking-title{
        margin-bottom:28px;
    }

    .booking-title h2{
        font-size:29px;
    }

    .booking-title p{
        font-size:13px;

        line-height:2;
    }

    .booking-box{
        gap:14px;
    }

    .booking-step{
        padding:19px;

        border-radius:21px;
    }

    .booking-step h3{
        font-size:16px;

        margin-bottom:14px;
    }

    .booking-step select,
    .booking-step input{
        height:50px;

        padding:0 13px;

        font-size:13px;

        border-radius:13px;
    }

    .booking-step textarea{
        height:75px;

        min-height:75px;

        max-height:75px;

        padding:11px 13px;

        font-size:13px;

        line-height:1.7;

        border-radius:13px;
    }


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

    .time-grid{
        grid-template-columns:1fr 1fr;

        gap:8px;
    }

    .time-grid button{
        height:50px;

        min-height:50px;

        padding:0 5px;

        font-size:12px;

        border-radius:13px;
    }

    .time-grid button.selected::after,
    .time-grid button.active::after{
        width:18px;
        height:18px;

        top:5px;
        left:6px;

        font-size:10px;
    }


    .booking-button{
        height:53px;

        border-radius:17px;

        font-size:14px;
    }


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

    .footer{
        padding:25px 15px 13px;

        margin-top:25px;
    }

    .footer-logo h2{
        font-size:21px;

        letter-spacing:5px;
    }

    .footer-logo span{
        font-size:8px;

        letter-spacing:4px;
    }

    .footer p{
        font-size:11px;

        margin-top:7px;
    }

    .copyright{
        margin-top:14px;

        padding-top:10px;

        font-size:9px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

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


/* =========================================================
   CUSTOM JALALI CALENDAR
========================================================= */

.jalali-calendar-overlay{
    position:fixed;

    inset:0;

    z-index:9999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:rgba(45,28,31,.28);

    backdrop-filter:blur(7px);

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

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .2s ease,
        visibility .2s ease;
}

.jalali-calendar-overlay.open{
    opacity:1;

    visibility:visible;

    pointer-events:auto;
}

.jalali-calendar{
    width:min(360px,100%);

    background:#fffaf8;

    border:4px solid rgba(63,92,67,.85);

    border-radius:22px;

    padding:18px;

    box-shadow:
        0 20px 60px rgba(75,48,53,.22);

    transform:
        translateY(12px)
        scale(.97);

    transition:
        transform .25s ease;
}

.jalali-calendar-overlay.open .jalali-calendar{
    transform:
        translateY(0)
        scale(1);
}

.jalali-calendar-header{
    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:16px;
}

.jalali-title{
    font-size:15px;

    font-weight:600;

    color:#4b3035;
}

.jalali-close,
.jalali-today{
    border:0;

    background:transparent;

    font-family:inherit;

    cursor:pointer;
}

.jalali-close{
    width:32px;

    height:32px;

    font-size:24px;

    color:#8f6569;
}

.jalali-today{
    padding:7px 11px;

    border-radius:10px;

    color:#9c676c;

    font-size:12px;

    background:#f8e8e5;
}

.jalali-navigation{
    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:15px;
}

.jalali-month-title{
    font-size:16px;

    font-weight:600;

    color:#4b3035;
}

.jalali-prev,
.jalali-next{
    width:36px;

    height:36px;

    border:0;

    border-radius:10px;

    background:#f8e8e5;

    color:#8d5d62;

    font-family:inherit;

    font-size:22px;

    cursor:pointer;
}

.jalali-prev:active,
.jalali-next:active,
.jalali-today:active{
    transform:scale(.94);
}

.jalali-weekdays{
    display:grid;

    grid-template-columns:repeat(7,1fr);

    margin-bottom:7px;
}

.jalali-weekdays span{
    text-align:center;

    font-size:11px;

    font-weight:600;

    color:#a98285;
}

.jalali-days{
    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:5px;
}

.jalali-days button,
.jalali-empty{
    aspect-ratio:1 / 1;

    min-width:0;

    border-radius:11px;
}

.jalali-days button{
    border:2px solid transparent;

    background:transparent;

    color:#4b3035;

    font-family:inherit;

    font-size:13px;

    cursor:pointer;

    transition:
        background .15s ease,
        color .15s ease,
        border .15s ease;
}

.jalali-days button:hover{
    background:#f8e8e5;
}

.jalali-days button.today{
    border-color:#4f6c54;

    color:#4f6c54;

    font-weight:700;
}

.jalali-days button.selected{
    background:#a9686d;

    color:#ffffff;

    border-color:#a9686d;

    font-weight:600;
}

.jalali-days button.today.selected{
    background:#a9686d;

    color:#ffffff;
}

@media(max-width:600px){

    .jalali-calendar-overlay{
        padding:16px;
    }

    .jalali-calendar{
        width:100%;

        max-width:350px;

        padding:16px;

        border-radius:20px;
    }

    .jalali-days{
        gap:4px;
    }

    .jalali-days button,
    .jalali-empty{
        border-radius:10px;
    }

    .jalali-days button{
        font-size:12px;
    }
}


/* =========================================================
   PREVENT PAGE SCROLL WHILE CALENDAR IS OPEN
========================================================= */

body.calendar-open{
    overflow:hidden;
}


/* =========================================================
   BOOKING SUCCESS / ERROR MODAL
========================================================= */

.booking-message-overlay{
    position:fixed !important;

    inset:0 !important;

    margin:0 !important;

    transform:none !important;

    contain:none !important;

    width:100vw !important;

    height:100vh !important;

    height:100dvh !important;

    z-index:2147483647 !important;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:rgba(45,28,31,.38);

    backdrop-filter:blur(9px);

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

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.booking-message-overlay.open{
    opacity:1 !important;

    visibility:visible !important;

    pointer-events:auto !important;
}


/* =========================================================
   MODAL CARD
========================================================= */

.booking-message-card{
    width:min(390px,100%);

    padding:34px 25px 25px;

    text-align:center;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.97),
            rgba(255,248,246,.98)
        );

    border:2px solid rgba(79,108,84,.55);

    border-radius:30px;

    box-shadow:
        0 25px 70px rgba(75,48,53,.25),
        inset 0 1px 0 rgba(255,255,255,.9);

    transform:
        translateY(20px)
        scale(.94);

    transition:
        transform .35s
        cubic-bezier(.16,1,.3,1);
}

.booking-message-overlay.open .booking-message-card{
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   MODAL ICON
========================================================= */

.booking-message-icon{
    width:70px;

    height:70px;

    margin:0 auto 18px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:34px;

    font-weight:700;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #d99b9f,
            #a9686d
        );

    box-shadow:
        0 12px 30px rgba(183,123,127,.28);
}


/* =========================================================
   SUCCESS
========================================================= */

.booking-message-overlay.success .booking-message-card{
    border-color:
        rgba(79,108,84,.65);
}

.booking-message-overlay.success .booking-message-icon{
    background:
        linear-gradient(
            135deg,
            #6f9075,
            #4f6c54
        );

    box-shadow:
        0 12px 30px rgba(79,108,84,.25);
}


/* =========================================================
   ERROR
========================================================= */

.booking-message-overlay.error .booking-message-card{
    border-color:
        rgba(183,123,127,.65);
}

.booking-message-overlay.error .booking-message-icon{
    background:
        linear-gradient(
            135deg,
            #d99b9f,
            #a9686d
        );
}


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

.booking-message-title{
    margin-bottom:10px;

    color:#4b3035;

    font-size:22px;

    font-weight:700;
}


/* =========================================================
   MODAL TEXT
========================================================= */

.booking-message-text{
    max-width:310px;

    margin:0 auto 24px;

    color:#76565b;

    font-size:13px;

    line-height:2;
}


/* =========================================================
   MODAL BUTTON
========================================================= */

.booking-message-close{
    width:100%;

    height:48px;

    border:2px solid rgba(79,108,84,.35);

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            #d99b9f,
            #a9686d
        );

    color:#fff;

    font-family:'Vazirmatn',sans-serif;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:.3s ease;
}

.booking-message-close:hover{
    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(183,123,127,.25);
}

.booking-message-close:active{
    transform:scale(.98);
}


/* =========================================================
   PREVENT PAGE SCROLL WHILE MESSAGE IS OPEN
========================================================= */

body.booking-message-open{
    overflow:hidden !important;
}


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

@media(max-width:600px){

    .booking-message-overlay{
        padding:16px;

        width:100vw !important;

        height:100vh !important;

        height:100dvh !important;
    }

    .booking-message-card{
        width:100%;

        max-width:350px;

        padding:30px 20px 21px;

        border-radius:27px;
    }

    .booking-message-icon{
        width:64px;

        height:64px;

        font-size:30px;

        margin-bottom:16px;
    }

    .booking-message-title{
        font-size:20px;
    }

    .booking-message-text{
        font-size:12px;

        line-height:1.9;

        margin-bottom:21px;
    }

    .booking-message-close{
        height:46px;

        font-size:12px;
    }
}


/* =========================================================
   SPLASH
========================================================= */

#hobabSplash{
    position:fixed;

    inset:0;

    z-index:999999;

    width:100%;

    height:100dvh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff8f6;

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    overflow:hidden;

    transition:
        opacity .9s cubic-bezier(.22,.61,.36,1),
        visibility .9s ease;
}


/* =========================================================
   SPLASH FRAME
========================================================= */

.splash-frame{
    position:relative;

    width:min(94vw,460px);

    height:min(82vw,390px);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transform:scale(.90);

    animation:
        hobabSplashFrameIn
        1.25s
        cubic-bezier(.22,.61,.36,1)
        .05s
        forwards;

    background:

        linear-gradient(
            90deg,
            rgba(183,123,127,.75),
            rgba(183,123,127,.75)
        )
        left top /
        58px 1px
        no-repeat,

        linear-gradient(
            180deg,
            rgba(183,123,127,.75),
            rgba(183,123,127,.75)
        )
        left top /
        1px 58px
        no-repeat,

        linear-gradient(
            270deg,
            rgba(183,123,127,.75),
            rgba(183,123,127,.75)
        )
        right top /
        58px 1px
        no-repeat,

        linear-gradient(
            180deg,
            rgba(183,123,127,.75),
            rgba(183,123,127,.75)
        )
        right top /
        1px 58px
        no-repeat,

        linear-gradient(
            90deg,
            rgba(183,123,127,.75),
            rgba(183,123,127,.75)
        )
        left bottom /
        58px 1px
        no-repeat,

        linear-gradient(
            0deg,
            rgba(183,123,127,.75),
            rgba(183,123,127,.75)
        )
        left bottom /
        1px 58px
        no-repeat,

        linear-gradient(
            270deg,
            rgba(183,123,127,.75),
            rgba(183,123,127,.75)
        )
        right bottom /
        58px 1px
        no-repeat,

        linear-gradient(
            0deg,
            rgba(183,123,127,.75),
            rgba(183,123,127,.75)
        )
        right bottom /
        1px 58px
        no-repeat;
}


/* =========================================================
   SPLASH GLOW
========================================================= */

.splash-frame::before{
    content:"";

    position:absolute;

    width:72%;

    height:72%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(183,123,127,.22) 0%,
            rgba(183,123,127,.12) 30%,
            rgba(183,123,127,.05) 53%,
            transparent 75%
        );

    filter:blur(28px);

    opacity:0;

    transform:scale(.72);

    animation:
        hobabSplashGlow
        1.7s
        ease
        .2s
        forwards;
}


/* =========================================================
   SPLASH TOP LINE
========================================================= */

.splash-frame::after{
    content:"";

    position:absolute;

    left:50%;

    top:7%;

    width:30%;

    height:1px;

    transform:
        translateX(-50%)
        scaleX(0);

    transform-origin:center;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(183,123,127,.8),
            transparent
        );

    box-shadow:
        0 0 10px rgba(183,123,127,.25);

    opacity:0;

    animation:
        hobabSplashTopLine
        1.15s
        cubic-bezier(.22,.61,.36,1)
        .65s
        forwards;
}


/* =========================================================
   SPLASH LOGO
========================================================= */

.splash-logo-wrap{
    position:relative;

    z-index:5;

    width:92%;

    height:92%;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transform:scale(.86);

    animation:
        hobabSplashLogo
        1.25s
        cubic-bezier(.22,.61,.36,1)
        .15s
        forwards;
}


/* =========================================================
   SPLASH LOGO LINES
========================================================= */

.splash-logo-wrap::before,
.splash-logo-wrap::after{
    content:"";

    position:absolute;

    left:50%;

    width:34%;

    height:1px;

    transform:
        translateX(-50%)
        scaleX(0);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(183,123,127,.78),
            transparent
        );

    box-shadow:
        0 0 9px rgba(183,123,127,.22);

    opacity:0;

    animation:
        hobabSplashLine
        1.1s
        cubic-bezier(.22,.61,.36,1)
        .7s
        forwards;
}

.splash-logo-wrap::before{
    top:2%;
}

.splash-logo-wrap::after{
    bottom:2%;
}


/* =========================================================
   SPLASH IMAGE
========================================================= */

.splash-logo{
    display:block;

    width:100%;

    height:100%;

    object-fit:contain;

    filter:
        drop-shadow(
            0 12px 28px
            rgba(183,123,127,.20)
        );
}


/* =========================================================
   SPLASH ANIMATIONS
========================================================= */

@keyframes hobabSplashFrameIn{

    0%{
        opacity:0;

        transform:
            scale(.90);
    }

    100%{
        opacity:1;

        transform:
            scale(1);
    }
}

@keyframes hobabSplashLogo{

    0%{
        opacity:0;

        transform:
            scale(.86);

        filter:blur(5px);
    }

    60%{
        opacity:1;

        transform:
            scale(1.025);

        filter:blur(0);
    }

    100%{
        opacity:1;

        transform:
            scale(1);

        filter:blur(0);
    }
}

@keyframes hobabSplashGlow{

    0%{
        opacity:0;

        transform:
            scale(.72);
    }

    55%{
        opacity:1;
    }

    100%{
        opacity:1;

        transform:
            scale(1);
    }
}

@keyframes hobabSplashTopLine{

    0%{
        opacity:0;

        transform:
            translateX(-50%)
            scaleX(0);
    }

    100%{
        opacity:1;

        transform:
            translateX(-50%)
            scaleX(1);
    }
}

@keyframes hobabSplashLine{

    0%{
        opacity:0;

        transform:
            translateX(-50%)
            scaleX(0);
    }

    100%{
        opacity:1;

        transform:
            translateX(-50%)
            scaleX(1);
    }
}


/* =========================================================
   SPLASH EXIT
========================================================= */

#hobabSplash.hide{
    opacity:0;

    visibility:hidden;

    pointer-events:none;
}


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

@media(max-width:600px){

    .splash-frame{
        width:94vw;

        height:82vw;

        max-height:390px;
    }

    .splash-logo-wrap{
        width:94%;

        height:94%;
    }

    .splash-frame{
        background-size:
            48px 1px,
            1px 48px,
            48px 1px,
            1px 48px,
            48px 1px,
            1px 48px,
            48px 1px,
            1px 48px;
    }

    .splash-frame::after{
        top:6%;

        width:32%;
    }

    .splash-logo-wrap::before{
        top:1%;
    }

    .splash-logo-wrap::after{
        bottom:1%;
    }
}