/*==========================================
    Beauty Booking UI
==========================================*/

:root{

    --primary:#C98F65;
    --primary-dark:#A96E45;

    --secondary:#1F2937;

    --success:#10B981;
    --danger:#EF4444;

    --border:#ECECEC;

    --bg:#F8F8F8;
    --white:#fff;

    --radius:18px;

    --shadow:
    0 10px 35px rgba(0,0,0,.06);

    --transition:.25s ease;

}

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

html{
    scroll-behavior:smooth;
}

body{

    background:#fafafa;

    color:#222;

    direction:rtl;

    font-family:IRANYekanX,sans-serif;

}

.bb-booking{

    max-width:1180px;

    margin:40px auto;

    padding:0 20px;

}

.bb-page{

    display:none;

    animation:fade .35s;

}

.bb-page.active{

    display:block;

}

@keyframes fade{

from{

opacity:0;
transform:translateY(20px);

}

to{

opacity:1;
transform:none;

}

}
/*==========================================
    Stepper
==========================================*/

.bb-stepper{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:45px;

    position:relative;

    padding:20px 0;

}

.bb-stepper::before{

    content:"";

    position:absolute;

    top:28px;

    right:8%;

    left:8%;

    height:2px;

    background:#ECECEC;

    z-index:0;

}

.bb-step{

    flex:1;

    position:relative;

    text-align:center;

    z-index:2;

}

.bb-step:last-child{

    flex:0;

}

.bb-step span{

    width:56px;

    height:56px;

    border-radius:50%;

    background:#fff;

    border:2px solid #E6E6E6;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    font-weight:700;

    color:#777;

    font-size:18px;

    transition:.3s;

    box-shadow:0 8px 25px rgba(0,0,0,.04);

}

.bb-step label{

    display:block;

    margin-top:14px;

    font-size:14px;

    color:#777;

    font-weight:500;

}

.bb-step.active span{

    background:var(--primary);

    border-color:var(--primary);

    color:#fff;

    transform:scale(1.08);

    box-shadow:0 12px 30px rgba(201,143,101,.35);

}

.bb-step.active label{

    color:#222;

    font-weight:700;

}

.bb-step.done span{

    background:#22C55E;

    border-color:#22C55E;

    color:#fff;

}

.bb-step.done::after{

    content:"";

    position:absolute;

    top:28px;

    right:-50%;

    width:100%;

    height:2px;

    background:#22C55E;

    z-index:-1;

}

.bb-step:last-child.done::after{

    display:none;

}
/*.bb-page{*/

/*    background:#fff;*/

/*    border-radius:24px;*/

/*    padding:40px;*/

/*    box-shadow:*/

/*    0 20px 60px rgba(0,0,0,.05);*/

/*}*/

.bb-page-header{

    margin-bottom:35px;

}

.bb-page-header h3{

    font-size:28px;

    font-weight:800;

    color:#222;

    margin-bottom:10px;

}

.bb-page-header p{

    color:#888;

    font-size:15px;

    line-height:28px;

}
/*==========================================
    Cards
==========================================*/

/*.bb-grid{*/

/*    display:grid;*/

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

/*    gap:28px;*/

/*}*/
.bb-card {
    margin-bottom: 25px;
}

.bb-card{

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:22px;

    padding:22px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    transition:.35s;

    overflow:hidden;

    position:relative;

}

.bb-card::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:5px;

    height:100%;

    background:transparent;

    transition:.3s;

}

.bb-card:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

    box-shadow:

    0 18px 45px rgba(0,0,0,.08);

}

.bb-card:hover::before{

    background:var(--primary);

}

.bb-card.active{

    border-color:var(--primary);

    background:#FFF9F5;

    box-shadow:

    0 18px 45px rgba(201,143,101,.20);

}

.bb-card.active::before{

    background:var(--primary);

}

.bb-card-left{

    display:flex;

    align-items:center;

    gap:18px;

    flex:1;

}

.bb-image{

    width:95px;

    height:95px;

    border-radius:18px;

    overflow:hidden;

    background:#F7F7F7;

    flex-shrink:0;

}

.bb-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.bb-card:hover img{

    transform:scale(1.08);

}

.bb-card-body{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.bb-card-title{

    font-size:18px;

    font-weight:800;

    color:#222;

}

.bb-card-desc{

    font-size:14px;

    color:#777;

    line-height:28px;

}

.bb-card-right{

    padding-right:18px;

}
.bb-radio{

    width:28px;

    height:28px;

    border-radius:50%;

    border:2px solid #DDD;

    transition:.3s;

    position:relative;

}

.bb-radio::after{

    content:"";

    width:14px;

    height:14px;

    background:var(--primary);

    border-radius:50%;

    position:absolute;

    left:50%;

    top:50%;

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

    transition:.3s;

}

.bb-card.active .bb-radio{

    border-color:var(--primary);

}

.bb-card.active .bb-radio::after{

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

}
.bb-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:5px 12px;

    background:#F3F4F6;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    color:#555;

}

.bb-price{

    color:var(--primary);

    font-size:16px;

    font-weight:800;

}
/*==========================================
    Samples
==========================================*/

#bbSamples{

    display:grid;

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

    gap:28px;

}

.bb-sample{

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:22px;

    overflow:hidden;

    cursor:pointer;

    transition:.35s;

    position:relative;

}

.bb-sample:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.bb-sample.active{

    border-color:var(--primary);

    box-shadow:

    0 20px 45px rgba(201,143,101,.20);

}

.bb-sample.active::after{

    content:"✓";

    position:absolute;

    top:18px;

    left:18px;

    width:34px;

    height:34px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

}

.bb-sample img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.5s;

}

.bb-sample:hover img{

    transform:scale(1.08);

}

.bb-sample-body{

    padding:20px;

}

.bb-sample-title{

    font-size:18px;

    font-weight:800;

    color:#222;

    margin-bottom:10px;

}

.bb-sample-desc{

    color:#777;

    line-height:30px;

    font-size:14px;

}
/*==========================================
    Slots
==========================================*/

#bbSlots{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(95px,1fr));

    gap:14px;

    margin-top:30px;

}

.bb-slot{

    height:48px;

    border-radius:14px;

    border:1px solid #E7E7E7;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-weight:700;

    background:#fff;

    transition:.25s;

}

.bb-slot:hover{

    background:#FFF5ED;

    border-color:var(--primary);

    color:var(--primary);

}

.bb-slot.active{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

    box-shadow:

    0 12px 25px rgba(201,143,101,.30);

}

.bb-slot.disabled{

    background:#F3F4F6;

    color:#BDBDBD;

    border-color:#EEE;

    cursor:not-allowed;

    opacity:.65;

}

.bb-slot.disabled:hover{

    transform:none;

    box-shadow:none;

}
.bb-loading{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    padding:60px 0;

}

.bb-loading span{

    width:14px;

    height:14px;

    border-radius:50%;

    background:var(--primary);

    animation:bbloading .8s infinite alternate;

}

.bb-loading span:nth-child(2){

    animation-delay:.2s;

}

.bb-loading span:nth-child(3){

    animation-delay:.4s;

}

@keyframes bbloading{

from{

opacity:.3;

transform:translateY(0);

}

to{

opacity:1;

transform:translateY(-10px);

}

}
/*==========================================
    Form
==========================================*/

.bb-form{

    display:grid;

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

    gap:28px;

}

.bb-field{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.bb-field.full{

    grid-column:1/-1;

}

.bb-field label{

    font-size:14px;

    font-weight:700;

    color:#444;

}

.bb-field input,
.bb-field textarea,
.bb-field select{

    width:100%;

    height:56px;

    border:1px solid #E6E6E6;

    border-radius:16px;

    padding:0 18px;

    background:#fff;

    font-size:15px;

    transition:.25s;

    outline:none;

}

.bb-field textarea{

    height:150px;

    resize:vertical;

    padding-top:16px;

    line-height:30px;

}

.bb-field input:focus,
.bb-field textarea:focus,
.bb-field select:focus{

    border-color:var(--primary);

    box-shadow:

    0 0 0 4px rgba(201,143,101,.12);

}

.bb-field input::placeholder,
.bb-field textarea::placeholder{

    color:#AAA;

}
/*==========================================
    Buttons
==========================================*/

.bb-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:40px;

}

.bb-btn{

    min-width:180px;

    height:56px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    font-size:15px;

    font-weight:700;

    transition:.25s;

}

.bb-btn-primary{

    background:var(--primary);

    color:#fff;

}

.bb-btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

    box-shadow:

    0 15px 30px rgba(201,143,101,.30);

}

.bb-btn-secondary{

    background:#F5F5F5;

    color:#444;

}

.bb-btn-secondary:hover{

    background:#ECECEC;

}

.bb-btn:disabled{

    opacity:.45;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}
/*==========================================
    Summary
==========================================*/
.bb-summary-item {
    display: flex;
    justify-content: space-between;
    gap: 6rem;
    margin-bottom: 20px;
    align-items: center;
}
div#bb-step-6 {
    text-align: center;
}
.bb-summary {
    /* background: #fff; */
    border-radius: 22px;
    padding: 28px;
    /* border: 1px solid #ECECEC; */
    /* box-shadow: 0 12px 35px rgba(0,0,0,.05); */
    display: inline-block;
    background-image: url(https://sormehvasmeh.com/wp-content/uploads/2026/07/Subtract.png);
    background-position: center;
    background-size: contain;
    margin-bottom: 20px;
        text-align: center;
}
.bb-summary img {
    margin-bottom: 20px;
}
.bb-summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

    border-bottom:1px solid #F2F2F2;

}

.bb-summary-row:last-child{

    border-bottom:none;

}

.bb-summary-title{

    color:#777;

    font-size:14px;

}

.bb-summary-value{

    color:#222;

    font-weight:700;

    font-size:15px;

}
/*==========================================
    Empty
==========================================*/

.bb-booking .bb-empty{

    width:100%;

    padding:60px 20px;

    border-radius:20px;

    border:2px dashed #E5E5E5;

    background:#FAFAFA;

    text-align:center;

    color:#999;

    font-size:15px;

}
/*==========================================
    Responsive
==========================================*/

@media(max-width:992px){

.bb-grid{

grid-template-columns:1fr;

}

#bbSamples{

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

}

.bb-form{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.bb-page{

padding:22px;

}

.bb-step span{

width:42px;
height:42px;
font-size:14px;

}

.bb-step label{

display:none;

}

#bbSamples{

grid-template-columns:1fr;

}

#bbSlots{

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

}

.bb-image{

width:75px;
height:75px;

}

.bb-card{

padding:16px;

}

.bb-actions{

flex-direction:column;

gap:14px;

}

.bb-btn{

width:100%;

}

}

@media(max-width:480px){

#bbSlots{

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

}

.bb-summary-row{

flex-direction:column;

align-items:flex-start;

gap:8px;

}

}
/*==========================================
    Section Title
==========================================*/

.bb-title{

    margin-bottom:35px;

}

.bb-title small{

    display:inline-block;

    color:var(--primary);

    font-weight:700;

    margin-bottom:8px;

    letter-spacing:1px;

}

.bb-title h2{

    font-size:34px;

    font-weight:800;

    color:#222;

    margin-bottom:10px;

}

.bb-title p{

    color:#888;

    line-height:32px;

    max-width:650px;

}
/*==========================================
    Scrollbar
==========================================*/

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-track{

    background:#F5F5F5;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}
.bb-dp-footer{

    margin-top:18px;

}

.bb-btn-today{

    width:100%;

    height:46px;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.bb-btn-today:hover{

    background:var(--primary-dark);

}
/*==========================================
    Toast
==========================================*/

.bb-toast{

    position:fixed;

    top:30px;

    left:30px;

    min-width:320px;

    background:#fff;

    border-radius:18px;

    padding:18px 22px;

    box-shadow:0 20px 60px rgba(0,0,0,.12);

    display:flex;

    align-items:center;

    gap:14px;

    z-index:999999;

    transform:translateY(-30px);

    opacity:0;

    pointer-events:none;

    transition:.35s;

}

.bb-toast.show{

    opacity:1;

    transform:none;

    pointer-events:auto;

}

.bb-toast.success{

    border-right:5px solid #22C55E;

}

.bb-toast.error{

    border-right:5px solid #EF4444;

}

.bb-toast.warning{

    border-right:5px solid #F59E0B;

}

.bb-toast-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:18px;

}

.bb-toast.success .bb-toast-icon{

    background:#22C55E;

}

.bb-toast.error .bb-toast-icon{

    background:#EF4444;

}

.bb-toast.warning .bb-toast-icon{

    background:#F59E0B;

}

.bb-toast-content{

    flex:1;

}

.bb-toast-title{

    font-weight:800;

    margin-bottom:4px;

}

.bb-toast-text{

    font-size:13px;

    color:#777;

}
/*==========================================
    Badge
==========================================*/

.bb-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:28px;

    padding:0 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

}

.bb-badge.success{

    background:#DCFCE7;

    color:#15803D;

}

.bb-badge.warning{

    background:#FEF3C7;

    color:#B45309;

}

.bb-badge.danger{

    background:#FEE2E2;

    color:#B91C1C;

}

.bb-badge.primary{

    background:#FDF2E9;

    color:var(--primary);

}
.bb-card,
.bb-sample,
.bb-slot,
.bb-btn,
.bb-day,
.bb-month-item,
.bb-year-item{

    transition:

        transform .28s,

        box-shadow .28s,

        background .28s,

        border-color .28s,

        color .28s;

}
@keyframes bbFade{

from{

opacity:0;

transform:translateY(18px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes bbZoom{

from{

opacity:0;

transform:scale(.92);

}

to{

opacity:1;

transform:scale(1);

}

}

.bb-page.active{

    animation:bbFade .35s;

}

.bb-datepicker.active{

    animation:bbZoom .25s;

}
.bb-btn:focus,
.bb-day:focus,
.bb-slot:focus,
.bb-card:focus,
.bb-sample:focus{

    outline:none;

    box-shadow:

    0 0 0 4px rgba(201,143,101,.18);

}
::placeholder{

    color:#B7B7B7;

    opacity:1;

}
.bb-card.active{

    transform:translateY(-5px);

}

.bb-sample.active{

    transform:translateY(-8px);

}
 .bb-image:empty{

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F5F5F5;

}

.bb-image:empty::before{

    content:"🖼";

    font-size:28px;

    opacity:.3;

}



/*edited*/
.bb-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:10px
}
input#bbReserveDate {
    border-color: #D3D3D3;
    width: 50%;
    border-radius: 8px;
}
.bb-field {
    margin-top: 24px;
}
button#bbSubmitBooking,
button#bbNextCustomer,
button#bbNextCalendar,
button#bbNextSample,
button.bb-btn.bb-btn-secondary.bb-prev,
button#bbNextService,
button#bbNextBranch {
    border-color: green;
    color: green;
    width:83px;
    height:40px;
}
button#bbSubmitBooking:hover,
button#bbNextCustomer:hover,
button#bbNextCalendar:hover,
button#bbNextSample:hover,
button.bb-btn.bb-btn-secondary.bb-prev:hover,
button#bbNextService:hover,
button#bbNextBranch:hover {
    background-color: green;
    color: white;
}

/*==================================================
    Payment Summary
==================================================*/

.bb-summary-price{
    border-color:#d8b165;
    background:#fffaf1;
}

.bb-summary-price strong{
    color:#3f6d5b;
    font-size:17px;
}

.bb-payment-note{
    margin:0;
    padding:14px 16px;
    border-radius:12px;
    background:#f2f7f4;
    color:#3f6d5b;
    line-height:1.9;
    font-size:14px;
}