/* =====================================
   JACKSON PREMIUM UI
   PART 1 / 5
===================================== */


/* =========================
   VARIABLES
========================= */


:root{

    --bg-white:#f1f1ef;
    --card-white:#fafafa;

    --text-dark:#111111;
    --text-gray:#666666;

    --black:#151515;

    --red-bg:#100303;
    --red-card:#210707;
    --red:#d7192d;

    --gold:#d7b552;


    --border-light:
    rgba(0,0,0,.10);

    --border-dark:
    rgba(255,255,255,.16);


    --radius-xl:34px;
    --radius-lg:24px;


    --shadow-light:
    0 25px 70px rgba(0,0,0,.12);


    --shadow-red:
    0 25px 80px rgba(255,0,0,.25);


    --transition:
    .35s ease;

}







/* =========================
   RESET
========================= */


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html,
body{

    width:100%;

    min-height:100%;

}



body{

    font-family:
    Tahoma,
    Arial,
    sans-serif;


    direction:rtl;


    overflow-x:hidden;

    overflow-y:auto;


    transition:
    background .4s,
    color .4s;

}





img{

    display:block;

    max-width:100%;

}





button{

    font-family:inherit;

    cursor:pointer;

}





/* =========================
   WHITE THEME
========================= */


body{


    background:

    radial-gradient(
    circle at top,
    #ffffff,
    var(--bg-white)
    );


    color:
    var(--text-dark);

}







/* =========================
   RED THEME
========================= */


body.red-theme{


    background:


    radial-gradient(
    circle at top,
    rgba(220,0,20,.25),
    transparent 40%
    ),


    linear-gradient(
    160deg,
    #050000,
    var(--red-bg)
    );


    color:white;

}







/* =========================
   APP CONTAINER
========================= */


.app{

    width:100%;

    min-height:100vh;


    display:flex;


    justify-content:center;


    align-items:flex-start;


    padding:10px;

}







.booking-container{

    width:100%;

    max-width:520px;

    height:100vh;

    position:relative;

}







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


.page{


    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:10px;



    opacity:0;


    pointer-events:none;


    transform:
    translateY(20px);


    transition:
    var(--transition);

}





.page.active{


    opacity:1;


    pointer-events:auto;


    transform:
    translateY(0);

}







/* =========================
   MAIN CARD
========================= */


.card{


    width:100%;


    padding:

    22px 22px;


    border-radius:

    var(--radius-xl);


    overflow:hidden;


    position:relative;


}






body:not(.red-theme)
.card{


    background:

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


    border:

    1px solid var(--border-light);


    box-shadow:

    var(--shadow-light);


    backdrop-filter:
    blur(20px);

}






body.red-theme
.card{


    background:

    rgba(255,255,255,.06);


    border:

    1px solid var(--border-dark);


    box-shadow:

    var(--shadow-red);


    backdrop-filter:
    blur(20px);

}





/* پایان PART 1 */
/* =====================================
   BRAND + HERO
   PART 2 / 5
===================================== */


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


.top-bar{


    width:100%;


    display:flex;


    justify-content:space-between;


    align-items:center;


    margin-bottom:8px;


}





.theme-btn{


    width:38px;


    height:38px;


    border-radius:50%;


    display:flex;


    justify-content:center;


    align-items:center;


    background:transparent;


    border:

    1px solid rgba(0,0,0,.15);


    font-size:18px;


}





body.red-theme
.theme-btn{


    color:white;


    border-color:
    rgba(255,255,255,.25);


}






/* =========================
   PROGRESS
========================= */


.progress{


    display:flex;


    gap:7px;


    align-items:center;


}





.progress span{


    width:7px;


    height:7px;


    border-radius:50%;


    background:#cfcfcf;


}





.progress span.active{


    width:25px;


    background:

    var(--gold);


    border-radius:10px;


}








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


.brand{


    text-align:center;


    margin-top:5px;


    margin-bottom:18px;


}





/*
 لوگو و متن باید یک مجموعه دیده شوند
*/


.logo{


    width:115px;


    height:auto;


    margin:

    0 auto 8px;


    object-fit:contain;


}





.brand h1{


    margin:0;


    font-size:42px;


    font-weight:900;


    letter-spacing:5px;


    line-height:1;


}






body:not(.red-theme)
.brand h1{


    color:#111;


}





body.red-theme
.brand h1{


    color:white;


}







.brand h2{


    margin-top:7px;


    font-size:11px;


    letter-spacing:6px;


    font-weight:400;


}





body:not(.red-theme)
.brand h2{


    color:#777;


}





body.red-theme
.brand h2{


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


}









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


.hero-image{


    width:100%;


    height:190px;


    border-radius:28px;


    overflow:hidden;


    margin-bottom:18px;


}





.hero-image img{


    width:100%;


    height:100%;


    object-fit:cover;


    object-position:center;


}








/* =========================
   INTRO
========================= */


.intro{


    text-align:center;


    margin-bottom:18px;


}





.intro h3{


    font-size:18px;


    font-weight:700;


    margin-bottom:6px;


}





.intro p{


    font-size:12px;


    color:#777;


}





body.red-theme
.intro p{


    color:

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


}







/* =========================
   MAIN BOOK BUTTON
========================= */


.main-btn{


    width:100%;


    height:58px;


    border-radius:35px;


    border:none;


    display:flex;


    justify-content:center;


    align-items:center;


    gap:12px;


    font-size:16px;


    font-weight:bold;


    transition:.3s;


}





body:not(.red-theme)
.main-btn{


    background:

    linear-gradient(
    90deg,
    #111,
    #292929
    );


    color:white;


    box-shadow:

    0 15px 35px rgba(0,0,0,.18);


}







body.red-theme
.main-btn{


    background:

    linear-gradient(
    90deg,
    #a90018,
    #ff3348
    );


    color:white;


    box-shadow:

    0 15px 40px rgba(255,0,0,.3);


}







.main-btn:hover{


    transform:
    translateY(-3px);


}







/* =========================
   SOCIAL
========================= */


.social{


    display:flex;


    justify-content:center;


    gap:14px;


    margin-top:22px;


}





.social a{


    width:40px;


    height:40px;


    border-radius:50%;


    display:flex;


    justify-content:center;


    align-items:center;


    border:

    1px solid rgba(0,0,0,.15);


}





body.red-theme
.social a{


    color:white;


    border-color:

    rgba(255,255,255,.2);


}
/* =====================================
   SERVICES
   PART 3 / 5
===================================== */



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


.services-preview,
.services-select,
.services{


    width:100%;


    display:grid;


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


    gap:12px;


    margin-top:15px;


}






/* =========================
   SERVICE CARD
========================= */


.service-box,
.service-option,
.service-item{


       min-height:118px;
    height:auto;

    padding:12px 8px;


    border-radius:24px;


    display:flex;


    flex-direction:column;


    align-items:center;


    justify-content:center;


    gap:10px;


    padding:12px;


    cursor:pointer;


    transition:.3s;


}





body:not(.red-theme)
.service-box,
body:not(.red-theme)
.service-option,
body:not(.red-theme)
.service-item{


    background:

    rgba(255,255,255,.85);



    border:

    1px solid rgba(0,0,0,.09);


}






body.red-theme
.service-box,
body.red-theme
.service-option,
body.red-theme
.service-item{


    background:

    rgba(255,255,255,.07);



    border:

    1px solid rgba(255,255,255,.16);


}








.service-box:hover,
.service-option:hover,
.service-item:hover{


    transform:

    translateY(-4px);


}









/* =========================
   ICON SIZE
========================= */


.service-box img,
.service-option img,
.service-item img{


    width:72px;


    height:72px;


    object-fit:contain;


}





/*
 اگر آیکون‌ها خطی هستند
 کمی واضح‌تر دیده شوند
*/


.service-box img,
.service-option img{


    transition:.3s;


}



.service-box:hover img,
.service-option:hover img{


    transform:

    scale(1.08);


}








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


.service-box span,
.service-option span,
.service-item span{


    font-size:13px;

    line-height:1.5;

    max-width:100%;

    white-space:normal;

    overflow-wrap:break-word;


    font-weight:700;


    text-align:center;


    line-height:1.4;


}





body:not(.red-theme)
.service-box span{


    color:#222;


}





body.red-theme
.service-box span{


    color:white;


}









/* =========================
   RADIO HIDE
========================= */


.service-option input{


    display:none;


}








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


.service-option:has(input:checked),
.service-item.active{


    border:

    2px solid var(--gold);


    background:

    rgba(215,181,82,.12);


}







body.red-theme
.service-option:has(input:checked),
body.red-theme
.service-item.active{


    border-color:

    var(--red);


    background:

    rgba(220,20,40,.18);


}








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


.step-header{


    text-align:center;


    margin-bottom:20px;


}





.step-header h2{


    font-size:24px;


    margin-bottom:8px;


}





.step-header p{


    font-size:13px;


    opacity:.7;


}








/* =========================
   DATE / FORM
========================= */


.form-box{


    display:flex;


    flex-direction:column;


    gap:14px;


}





.input{


    width:100%;


    height:56px;


    border-radius:20px;


    padding:0 18px;


    font-size:15px;


    outline:none;


}





body:not(.red-theme)
.input{


    background:white;


    border:

    1px solid rgba(0,0,0,.1);


    color:#111;


}





body.red-theme
.input{


    background:

    rgba(255,255,255,.08);


    border:

    1px solid rgba(255,255,255,.18);


    color:white;


}






.textarea{


    height:110px;


    padding-top:15px;


    resize:none;


}








/* =========================
   SLOTS
========================= */


.slots{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:10px;


    margin:18px 0;


}





.slot,
.slot-btn{


    height:52px;


    border-radius:18px;


    display:flex;


    justify-content:center;


    align-items:center;


    font-size:14px;


    font-weight:bold;


    transition:.3s;


}





body:not(.red-theme)
.slot,
body:not(.red-theme)
.slot-btn{


    background:white;


    border:

    1px solid rgba(0,0,0,.1);


}





body.red-theme
.slot,
body.red-theme
.slot-btn{


    background:

    rgba(255,255,255,.07);


    border:

    1px solid rgba(255,255,255,.16);


    color:white;


}







.slot:hover,
.slot-btn:hover{


    transform:

    translateY(-3px);


}






.slot.active,
.slot.selected,
.slot-btn.selected{


    background:

    var(--gold);


    color:#111;


    border:none;


}






body.red-theme
.slot.active,
body.red-theme
.slot.selected{


    background:

    var(--red);


    color:white;


}
/* =====================================
   SUCCESS + ADMIN UI
   PART 4 / 5
===================================== */



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


.success-card{


    min-height:420px;


    display:flex;


    flex-direction:column;


    align-items:center;


    justify-content:center;


    text-align:center;


}





.success-icon{


    width:90px;


    height:90px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:42px;


    font-weight:bold;


    margin-bottom:22px;


}





body:not(.red-theme)
.success-icon{

background:

linear-gradient(
135deg,
#222,
#555
);

color:#fff;

}




body.red-theme
.success-icon{


    background:

    linear-gradient(
    135deg,
    #b50020,
    #ff4055
    );


    color:white;


}







.success-card h2{


    font-size:26px;


    margin-bottom:10px;


}





.success-card p{


    opacity:.75;


}








.success-info{


    width:100%;


    margin-top:22px;


    padding:20px;


    border-radius:22px;


}





body:not(.red-theme)
.success-info{


    background:#f4f4f2;


}





body.red-theme
.success-info{


    background:

    rgba(255,255,255,.07);


    border:

    1px solid rgba(255,255,255,.12);


}





.success-info div{


    display:flex;


    justify-content:space-between;


    margin-bottom:10px;


    font-size:14px;


}









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


.admin-header{


    display:flex;


    align-items:center;


    justify-content:space-between;


    margin-bottom:20px;


}





.admin-header h2{


    font-size:22px;


}









/* =========================
   ADMIN STATS
========================= */


.dashboard-grid{


    display:grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:12px;


}





.admin-box{


    height:120px;


    border-radius:24px;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    gap:8px;


}





body:not(.red-theme)
.admin-box{


    background:white;


    border:

    1px solid rgba(0,0,0,.08);


}





body.red-theme
.admin-box{


    background:

    rgba(255,255,255,.06);


    border:

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


}





.admin-box span{


    font-size:30px;


}





.admin-box h3{


    font-size:14px;


}








/* =========================
   ADMIN BOOKING CARD
========================= */


.booking-card{


    padding:20px;


    border-radius:24px;


    margin-top:15px;


}





body:not(.red-theme)
.booking-card{


    background:white;


    border:

    1px solid rgba(0,0,0,.08);


}





body.red-theme
.booking-card{


    background:

    rgba(255,255,255,.06);


    border:

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


}







.booking-card h3{


    margin-bottom:15px;


    font-size:18px;


}





.booking-card p{


    font-size:14px;


    margin-bottom:8px;


}








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


.action-btn{


    width:100%;


    height:48px;


    border-radius:18px;


    margin-top:12px;


    border:none;


    font-weight:bold;


    transition:.3s;


}





body:not(.red-theme)
.action-btn{


    background:#111;


    color:white;


}





body.red-theme
.action-btn{


    background:

    linear-gradient(
    90deg,
    #b40020,
    #ff3348
    );


    color:white;


}







.action-btn:hover{


    transform:

    translateY(-3px);


}








/* =========================
   LOADING
========================= */


.loading{


    position:fixed;


    inset:0;


    display:none;


    align-items:center;


    justify-content:center;


    flex-direction:column;


    background:

    rgba(0,0,0,.65);


    backdrop-filter:

    blur(15px);


    z-index:9999;


}





.loading.active{


    display:flex;


}





.spinner{


    width:55px;


    height:55px;


    border-radius:50%;


    border:

    5px solid rgba(255,255,255,.25);


    border-top-color:

    #ff3348;


    animation:

    rotate 1s linear infinite;


}





@keyframes rotate{


    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }


}







.loading p{


    color:white;


    margin-top:15px;


}









/* =========================
   TOAST
========================= */


.toast{


    position:fixed;


    bottom:25px;


    left:50%;


    transform:

    translate(-50%,120px);


    padding:14px 25px;


    border-radius:30px;


    z-index:9999;


    transition:.4s;


    font-weight:bold;


}





.toast.show{


    transform:

    translate(-50%,0);


}





body:not(.red-theme)
.toast{


    background:#111;


    color:white;


}





body.red-theme
.toast{


    background:

    #d7192d;


    color:white;


}
/* =====================================
   FINAL RESPONSIVE + POLISH
   PART 5 / 5
===================================== */



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


@media(max-width:600px){



.app{

    padding:6px;

}





.booking-container{

    max-width:100%;

}





.page{

    padding:6px;

}





.card{

    padding:

    20px 16px;


    border-radius:

    30px;

}






/* BRAND */

.logo{

    width:105px;

}





.brand{

    margin-bottom:14px;

}





.brand h1{

    font-size:34px;

    letter-spacing:4px;

}





.brand h2{

    font-size:10px;

    letter-spacing:5px;

}







/* HERO */

.hero-image{

    height:170px;

    border-radius:24px;

    margin-bottom:15px;

}






.intro{

    margin-bottom:15px;

}





.intro h3{

    font-size:16px;

}







/* SERVICES */

.services-preview,
.services-select,
.services{


    gap:10px;

}





.service-box,
.service-option,
.service-item{


    height:105px;

    border-radius:22px;

}





.service-box img,
.service-option img,
.service-item img{


    width:65px;

    height:65px;

}





.service-box span,
.service-option span{


    font-size:12px;

}








/* BUTTON */

.main-btn{


    height:55px;

    font-size:15px;

}





.social{

    margin-top:18px;

}






}








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


@media(max-width:380px){



.card{

    padding:

    18px 12px;

}





.logo{

    width:90px;

}





.brand h1{

    font-size:30px;

}





.hero-image{

    height:145px;

}





.service-box,
.service-option,
.service-item{

    height:95px;

}





.service-box img,
.service-option img{


    width:55px;

    height:55px;

}





.main-btn{

    height:52px;

}







}









/* =========================
   LARGE DISPLAY
========================= */


@media(min-width:900px){



.booking-container{

    max-width:560px;

}



.card{

    padding:32px;

}



}









/* =========================
   SMOOTH PAGE TRANSITION
========================= */


.page.active .card{


    animation:

    fadeUp .45s ease;


}





@keyframes fadeUp{


from{


    opacity:0;


    transform:

    translateY(25px);

}



to{


    opacity:1;


    transform:

    translateY(0);

}



}








/* =========================
   IMAGE POLISH
========================= */


.hero-image img{


    filter:

    contrast(1.03)
    saturate(.95);


}






/* =========================
   WHITE THEME FINAL
========================= */


body:not(.red-theme){


    background:


    linear-gradient(
    145deg,
    #ffffff,
    #ededeb
    );


}








/* =========================
   RED THEME FINAL
========================= */


body.red-theme{


    background:


    radial-gradient(
    circle at top,
    rgba(255,40,50,.22),
    transparent 35%
    ),


    #090000;


}






body.red-theme .hero-image{


    border:

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

}








/* =========================
   REMOVE DEFAULT EFFECTS
========================= */


button,
.service-box,
.service-option,
.slot,
.slot-btn{


    user-select:none;


}






input,
textarea{


    direction:rtl;


}





::-webkit-scrollbar{


    width:0;


}
/* ==============================
   FINAL HERO POLISH
============================== */


/* Theme Button */

.theme-btn{

    width:48px;
    height:48px;

    font-size:22px;

    border-radius:50%;

}



/* Brand Fix */

.brand{

    margin-top:0;
    margin-bottom:14px;

}


.logo{

    width:95px;

    margin-bottom:2px;

}



.brand h1{

    margin-top:0;

    font-size:38px;

    letter-spacing:6px;

}


.brand h2{

    margin-top:4px;

}





/* Hero Bigger */


.hero-image{

    height:260px;

    margin-bottom:0;

    position:relative;

}




.hero-image img{

    object-fit:cover;

}





/* Text over image */


.intro{

    position:absolute;

    left:25px;

    right:25px;

    top:410px;

    z-index:5;

    margin:0;

    padding:18px;

    border-radius:20px;

    backdrop-filter:blur(8px);

}





body:not(.red-theme)
.intro{

    background:

    rgba(255,255,255,.72);

}





body.red-theme
.intro{

    background:

    rgba(0,0,0,.35);

}





.intro h3{

    margin-bottom:4px;

}







/* Services move down */

.services-preview{

    margin-top:65px;

}





/* Booking Button spacing */


.main-btn{

    margin-top:25px;

    margin-bottom:30px;

}







/* Bottom Buttons */


.social{

    gap:12px;

}



.social a{

    width:95px;

    height:42px;

    border-radius:22px;

    font-size:12px;

    gap:5px;

}





.social a::after{

    font-size:11px;

}




/* White theme */

body:not(.red-theme)
.social a{

    background:white;

    color:#111;

    border:

    1px solid rgba(0,0,0,.12);

}



/* Red theme */


body.red-theme
.social a{

    background:

    rgba(255,255,255,.08);

    color:white;

}





/* remove blue links */


.social a,
.social a:visited,
.social a:hover{

    color:inherit;

    text-decoration:none;

}
/* =========================
   FINAL VISUAL ADJUSTMENT
========================= */


/* حذف لوگو تصویر */

.logo{

    display:none;

}


/* نزدیک کردن برند به بالا */


.brand{

    margin-top:25px;

    margin-bottom:15px;

}



.brand h1{

    font-size:44px;

    letter-spacing:7px;

}


.brand h2{

    font-size:12px;

    letter-spacing:7px;

}





/* بزرگ کردن عکس اصلی */


.hero-image{


    height:320px;


    border-radius:32px;


    margin-top:10px;


}




.hero-image img{


    object-fit:cover;


    object-position:center;


}






/* متن روی تصویر */


.intro{


    top:auto;


    bottom:auto;


    margin-top:-65px;


    position:relative;


    z-index:5;


    margin-left:15px;


    margin-right:15px;


    margin-bottom:20px;


    padding:18px;


    border-radius:22px;


}





/* سرویس ها کمی پایین تر */


.services-preview{


    margin-top:25px;


}







/* دکمه رزرو */


.main-btn{


    margin-top:35px;


    margin-bottom:45px;


    height:62px;


}







/* سه دکمه پایین */


.social{


    gap:10px;


}





.social a{


    width:105px;


    height:48px;


    border-radius:25px;


    font-size:13px;


    display:flex;


    align-items:center;


    justify-content:center;


    gap:6px;


}




.social span{


    display:inline;


}




/* موبایل */

@media(max-width:600px){


.hero-image{

    height:290px;

}



.brand h1{

    font-size:38px;

}



.social a{

    width:95px;

}



}
/* =====================================
   MOBILE PREMIUM POLISH
===================================== */



/* HERO BIGGER */

.hero-image{

    height:360px;

    border-radius:34px;

}



.hero-image img{

    object-fit:cover;

    object-position:center;

}



/* متن روی عکس */

.intro{

    margin-top:-75px;

    margin-left:18px;

    margin-right:18px;

    backdrop-filter:blur(14px);

}



/* =========================
   SERVICE ICON EFFECT
========================= */


.service-box img,
.service-option img,
.service-item img{


    width:75px;

    height:75px;


    filter:

    drop-shadow(
    0 8px 8px rgba(0,0,0,.25)
    );


    transition:

    .35s ease;

}



.service-box:hover img,
.service-option:hover img{


    transform:

    translateY(-6px)
    scale(1.08);


}






/* RED THEME ICON FIX */


body.red-theme
.service-box img,
body.red-theme
.service-option img,
body.red-theme
.service-item img{


    filter:

    brightness(1.35)
    contrast(1.15)
    drop-shadow(
    0 8px 12px rgba(255,0,0,.35)
    );


}







body.red-theme
.service-box,
body.red-theme
.service-option{


    background:

    rgba(255,255,255,.10);


}






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


.social{


    gap:12px;

}



.social a{


    width:115px;

    height:52px;


    border-radius:28px;


    font-size:14px;


    box-shadow:

    0 8px 20px rgba(0,0,0,.12);


}




body.red-theme
.social a{


    box-shadow:

    0 8px 25px rgba(255,0,0,.18);


}







/* =========================
   SERVICE CARD SCROLL MOTION
========================= */


.service-box,
.service-option{


    animation:

    serviceFloat .7s ease both;


}





.service-box:nth-child(1),
.service-option:nth-child(1){

    animation-delay:.05s;

}



.service-box:nth-child(2),
.service-option:nth-child(2){

    animation-delay:.1s;

}



.service-box:nth-child(3),
.service-option:nth-child(3){

    animation-delay:.15s;

}



.service-box:nth-child(4),
.service-option:nth-child(4){

    animation-delay:.2s;

}



.service-box:nth-child(5),
.service-option:nth-child(5){

    animation-delay:.25s;

}



.service-box:nth-child(6),
.service-option:nth-child(6){

    animation-delay:.3s;

}







@keyframes serviceFloat{


from{


    opacity:0;


    transform:

    translateY(18px);


}



to{


    opacity:1;


    transform:

    translateY(0);


}



}








/* =========================
   MOBILE SCREEN CONTROL
========================= */


@media(max-width:600px){



.card{


    padding-left:14px;

    padding-right:14px;


}



.brand h1{


    font-size:40px;


}



.hero-image{


    height:330px;


}



.services-preview{


    gap:12px;


}



.service-box{


      min-height:115px;

    height:auto;


}



.main-btn{


    margin-top:30px;

    margin-bottom:55px;


}



}



@media(max-width:380px){



.hero-image{


    height:280px;


}



.service-box img{


    width:65px;

    height:65px;


}



.social a{


    width:100px;


}



}
/* کاهش فاصله دکمه رزرو تا دکمه های پایین */

.main-btn{

    margin-top:25px;

    margin-bottom:20px;

}



.social{

    margin-top:0;

    padding-top:0;

    gap:10px;

}



.social a{

    height:46px;

}






@media(max-width:600px){


.main-btn{

    margin-bottom:18px;

}



.social a{

    height:44px;

    width:105px;

}



}
.date-list{

display:grid;

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

gap:12px;

}


.date-item{

height:70px;

border-radius:20px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

cursor:pointer;

background:white;

border:1px solid rgba(0,0,0,.1);

transition:.3s;

}


.date-item strong{

font-size:22px;

}


.date-item span{

font-size:12px;

}


.date-item.active{

background:#111;

color:white;

}



body.red-theme .date-item{

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

color:white;

}



body.red-theme .date-item.active{

background:#d7192d;

}
.slot-btn.available{

background:#18a558 !important;

color:white;

border:none;

box-shadow:
0 8px 20px rgba(24,165,88,.25);

}


.slot-btn.blocked{

background:#d8d8d8 !important;

color:#777;

cursor:not-allowed;

opacity:.7;

}


.slot-btn.selected{

background:#111 !important;

color:white;

transform:scale(1.05);

}
/* =========================
   PREMIUM BACK BUTTON
========================= */

.back-btn{

    width:140px;
    height:46px;

    margin-top:18px;

    border-radius:25px;

    border:1px solid rgba(0,0,0,.12);

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

    color:#222;

    font-size:14px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin-left:auto;
    margin-right:auto;

    transition:.3s ease;

    backdrop-filter:blur(10px);

}


.back-btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 10px 25px rgba(0,0,0,.12);

}



.back-btn:active{

    transform:scale(.96);

}



/* RED THEME */

body.red-theme .back-btn{

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

    color:white;

    border-color:
    rgba(255,255,255,.2);

}



body.red-theme .back-btn:hover{

    box-shadow:
    0 10px 25px rgba(255,0,0,.25);

}
/* =========================
   DATE SELECT PAGE
========================= */


.calendar-box{

    width:100%;

    margin-top:20px;

}


.date-list{

    display:grid;

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

    gap:12px;

}



.date-item{

    height:70px;

    border-radius:22px;

    border:1px solid rgba(0,0,0,.1);

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.3s ease;

}



.date-item strong{

    font-size:22px;

    line-height:1;

}



.date-item span{

    font-size:12px;

    margin-top:5px;

    color:#777;

}



.date-item:hover{

    transform:translateY(-3px);

}



/* selected date */

.date-item.active{

    background:#111;

    color:white;

    border-color:#111;

}



.date-item.active span{

    color:white;

}




/* RED THEME */

body.red-theme .date-item{

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

    border-color:
    rgba(255,255,255,.15);

    color:white;

}


body.red-theme .date-item span{

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

}



body.red-theme .date-item.active{

    background:#d7192d;

}
/* =========================
 STEP 2 FINAL POLISH
========================= */


#step2 .main-btn{

    margin-top:28px;

}



#step2 .back-btn{

    width:120px;

    height:42px;

    margin-top:16px;

    font-size:13px;

}



#step2 .date-item.active{

    box-shadow:
    0 10px 25px rgba(0,0,0,.18);

    transform:
    scale(1.03);

}



/* موبایل */

@media(max-width:600px){


#step2 .date-item{

    height:74px;

}


#step2 .main-btn{

    height:58px;

}


}
/* =========================
 STEP HEADER BRAND
========================= */


#step2 .page-brand{

text-align:center;

margin-bottom:18px;

}


#step2 .page-brand h1{

font-size:42px;

letter-spacing:8px;

font-weight:900;

margin-bottom:5px;

}
#step2 .page-brand{

transform:scale(1.05);

}

#step2 .page-brand p{

font-size:11px;

letter-spacing:5px;

color:#777;

}



/* SOCIAL */

#step2 .page-social{

display:flex;

justify-content:center;

gap:8px;

margin-top:20px;

}



#step2 .page-social a{


height:42px;

padding:0 16px;

border-radius:22px;


display:flex;

align-items:center;

justify-content:center;


font-size:12px;


border:
1px solid rgba(0,0,0,.12);


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


color:#111;


text-decoration:none;

}




body.red-theme #step2 .page-social a{


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


color:white;


border-color:
rgba(255,255,255,.2);


}
#step3 .page-brand h1{

font-size:44px;

letter-spacing:9px;

font-weight:900;

}


#step3 .page-brand span{

font-size:9px;

letter-spacing:4px;

}
#step3 .page-brand{

text-align:center;
width:100%;

}


#step3 .page-brand h1{

text-align:center;
margin:0 auto;

}


#step3 .page-brand span{

display:block;
text-align:center;

}
#step3 .step-header h2{

margin-top:25px;

}
#step4 .page-brand{

text-align:center;
width:100%;

}


#step4 .page-brand h1{

font-size:44px;

letter-spacing:9px;

font-weight:900;

text-align:center;

margin:0 auto;

}


#step4 .page-brand span{

display:block;

text-align:center;

font-size:9px;

letter-spacing:4px;

}
#step4 .page-brand{

margin-bottom:25px;

}
.success-social{

margin-top:25px;

display:flex;

justify-content:center;

gap:10px;

}


.success-social a{

font-size:13px;

text-decoration:none;

color:inherit;

}
@media(max-width:380px){

.hero-image{

height:230px;

}


.main-btn{

margin-top:15px;

}


.services-preview{

gap:10px;

}


.service-box{

min-height:120px;

}

}
/* ==========================
   MOBILE FIRST FIX
========================== */


*{
    box-sizing:border-box;
}


body{
    overflow-x:hidden;
}


.app{
    width:100%;
    min-height:100vh;
}


.booking-container{
    width:100%;
    display:flex;
    justify-content:center;
}



.card{

    width:calc(100% - 24px);
    max-width:420px;

    padding:20px 14px;

    border-radius:28px;

}




.brand h1{

    font-size:clamp(32px,9vw,48px);

    letter-spacing:8px;

}



.brand h2{

    font-size:10px;

}



.step-header h2{

    font-size:clamp(22px,6vw,30px);

}



.step-header p{

    font-size:13px;

}




.main-btn{

    width:100%;

    height:52px;

    font-size:15px;

    margin-top:20px;

}




.back-btn{

    margin-top:14px;

    height:42px;

    padding:0 30px;

}




.service-box{

    min-height:120px;

}



.service-box img{

    width:65px;

    height:65px;

}




.slots{

    gap:10px;

}



.slot-btn{

    height:48px;

    font-size:14px;

}





.input{

    height:55px;

    font-size:15px;

}



.textarea{

    min-height:120px;

}



/* گوشی های کوچک */

@media(max-width:390px){


.card{

    padding:16px 10px;

}


.hero-image{

    height:230px;

}



.service-box{

    min-height:110px;

}


.service-box img{

    width:55px;

    height:55px;

}



.main-btn{

    height:48px;

}



}
@media(max-width:600px){

html,
body{

    overflow-y:auto;

    overflow-x:hidden;

}


.booking-container{

    height:auto;

    min-height:100vh;

}


.page{

    overflow-y:auto;

    align-items:flex-start;

}


.card{

    margin-top:10px;

    margin-bottom:40px;

}

}
/* =========================
   STEP 4 BRAND HEADER
========================= */


#step4 .top-bar{

    margin-bottom:5px;

}


#step4 .brand{

    text-align:center;

    margin-top:0;

    margin-bottom:25px;

}


#step4 .brand h1{

    font-size:44px;

    letter-spacing:9px;

    font-weight:900;

    line-height:1;

}



#step4 .brand h2{

    font-size:11px;

    letter-spacing:6px;

    margin-top:6px;

}




#step4 .step-header{

    margin-top:15px;

}




#step4 .theme-btn{

    width:48px;

    height:48px;

    font-size:22px;

}
/* =========================
 SUCCESS BRAND
========================= */


.success-card .brand{

    text-align:center;

    margin-bottom:25px;

}


.success-card .brand h1{

    font-size:44px;

    letter-spacing:9px;

    font-weight:900;

}


.success-card .brand h2{

    font-size:11px;

    letter-spacing:6px;

    margin-top:6px;

}



.success-social{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:25px;

}



.success-social a{

    width:100px;

    height:42px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:12px;

    text-decoration:none;

    color:inherit;

    border:

    1px solid rgba(0,0,0,.12);

}



body.red-theme .success-social a{

    border-color:

    rgba(255,255,255,.2);

}