/* =========================================
   CREATIVE STUDIO NI
   CLEAN FOUR STEP BOOKING EXPERIENCE
   ========================================= */

/* Remove large booking hero completely from view */
.booking-page-hero{
    display:none!important;
}

/* Clean introduction */
.cs-booking-intro{
    padding:52px 0 28px;
    background:#f3efe8;
}

.cs-booking-intro .container{
    width:min(960px,calc(100% - 40px))!important;
}

.cs-booking-intro .cs-booking-label{
    margin:0 0 10px;
    font-size:16px!important;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#777067;
}

.cs-booking-intro h1{
    margin:0 0 12px;
    font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;
    font-size:clamp(38px,5vw,58px);
    line-height:1;
    font-weight:400;
    letter-spacing:-.035em;
}

.cs-booking-intro p{
    max-width:650px;
    margin:0;
    font-size:18px!important;
    line-height:1.55;
    color:#706a62;
}


/* Booking section */
#booking-form{
    padding:0 0 78px!important;
    background:#f3efe8!important;
}

#booking-form>.container{
    width:min(960px,calc(100% - 40px))!important;
}

.live-booking{
    display:block!important;
    max-width:960px!important;
    margin:0 auto!important;
}

.booking-flow{
    padding:0!important;
    margin:0!important;
    border:1px solid rgba(23,22,19,.14)!important;
    border-top:4px solid #171613!important;
    border-radius:8px!important;
    background:#fff!important;
    box-shadow:0 14px 40px rgba(30,25,18,.06)!important;
    overflow:hidden!important;
}


/* Top progress area */
.cs-progress-area{
    padding:24px 28px 20px;
    border-bottom:1px solid rgba(23,22,19,.12);
}

.cs-progress-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:15px;
}

.cs-progress-question{
    font-size:16px!important;
    font-weight:650;
    color:#171613;
}

.cs-progress-name{
    font-size:15px!important;
    font-weight:600;
    color:#746e66;
}

.cs-progress-track{
    height:7px;
    overflow:hidden;
    background:#e5e1da;
    border-radius:20px;
}

.cs-progress-bar{
    width:25%;
    height:100%;
    background:#171613;
    border-radius:20px;
    transition:width .25s ease;
}


/* Four step navigation */
.cs-step-nav{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-bottom:1px solid rgba(23,22,19,.12);
}

.cs-step-button{
    appearance:none;
    border:0;
    border-right:1px solid rgba(23,22,19,.11);
    border-radius:0;
    background:#fff;
    padding:16px 18px;
    text-align:left;
    color:#938d84;
    cursor:pointer;
}

.cs-step-button:last-child{
    border-right:0;
}

.cs-step-button strong{
    display:block;
    margin:0 0 3px;
    font-size:14px!important;
    font-weight:600;
}

.cs-step-button span{
    display:block;
    font-size:16px!important;
    font-weight:600;
}

.cs-step-button.is-active{
    background:#f1ede6;
    color:#171613;
}

.cs-step-button.is-complete{
    color:#171613;
}

.cs-step-button.is-complete strong:after{
    content:" ✓";
}

.cs-step-button:disabled{
    cursor:default;
}


/* Only current step visible */
.booking-step.cs-booking-step,
.booking-step.cs-booking-final{
    display:none!important;
}

.booking-step.cs-booking-step.is-active,
.booking-step.cs-booking-final.is-active{
    display:block!important;
}


/* Normal question area */
.booking-step.cs-booking-step{
    padding:30px 28px 34px!important;
    margin:0!important;
    border:0!important;
}

.cs-booking-step .booking-step-head{
    display:block!important;
    margin:0 0 24px!important;
}

.cs-booking-step .booking-step-head>span{
    display:none!important;
}

.cs-booking-step .booking-step-head h3{
    margin:0 0 7px!important;
    font-family:inherit!important;
    font-size:23px!important;
    line-height:1.25!important;
    font-weight:700!important;
    letter-spacing:-.015em!important;
}

.cs-booking-step .booking-step-head p{
    max-width:650px!important;
    margin:0!important;
    font-size:16px!important;
    line-height:1.5!important;
    color:#716b63!important;
}


/* Date */
.booking-date-field{
    max-width:100%!important;
}

.booking-date-field label{
    display:none!important;
}

.booking-date-field input{
    width:100%!important;
    min-height:58px!important;
    padding:13px 15px!important;
    border:1px solid #d6d1ca!important;
    border-radius:6px!important;
    background:#f8f9fa!important;
    font-size:17px!important;
}


/* Hours */
.duration-options{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:10px!important;
    border:0!important;
}

.duration-choice>span{
    min-height:70px!important;
    padding:14px 16px!important;
    border:1px solid #d8dce0!important;
    border-radius:6px!important;
    background:#f7f8f9!important;
}

.duration-choice input:checked+span{
    background:#eee9e1!important;
    border-color:#171613!important;
}

.duration-choice strong,
.duration-choice b{
    font-size:16px!important;
}


/* Times */
.time-options{
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    gap:10px!important;
    border:0!important;
}

.time-choice span{
    min-height:56px!important;
    border:1px solid #d8dce0!important;
    border-radius:6px!important;
    background:#f7f8f9!important;
    font-size:16px!important;
}

.time-choice input:checked+span{
    background:#171613!important;
    color:#fff!important;
    border-color:#171613!important;
}

.booking-empty{
    padding:18px!important;
    border:1px solid #ddd8d0!important;
    border-radius:6px!important;
    background:#f8f7f4!important;
    font-size:16px!important;
}


/* STEP FOUR */
.booking-step.cs-booking-final{
    padding:28px!important;
    margin:0!important;
    border:0!important;
    border-bottom:1px solid rgba(23,22,19,.10)!important;
}

.booking-step.cs-booking-final:last-of-type{
    border-bottom:0!important;
}

.cs-booking-final .booking-step-head{
    display:block!important;
    margin:0 0 20px!important;
}

.cs-booking-final .booking-step-head>span{
    display:none!important;
}

.cs-booking-final .booking-step-head h3{
    margin:0 0 6px!important;
    font-size:21px!important;
    font-weight:700!important;
}

.cs-booking-final .booking-step-head p{
    margin:0!important;
    font-size:16px!important;
    color:#716b63!important;
}


/* Details */
.form-grid{
    gap:17px!important;
}

.field label{
    margin-bottom:6px!important;
    font-size:15px!important;
    font-weight:600!important;
    letter-spacing:0!important;
    text-transform:none!important;
}

.field input,
.field textarea,
.field select{
    min-height:52px!important;
    padding:12px 14px!important;
    border:1px solid #d8dce0!important;
    border-radius:6px!important;
    background:#f8f9fa!important;
    font-size:16px!important;
}

.field textarea{
    min-height:100px!important;
}


/* Optional backdrop area */
.backdrop-help{
    margin:0 0 16px!important;
    font-size:15px!important;
    line-height:1.55!important;
}

.backdrop-options{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:10px!important;
    margin:0!important;
    border:0!important;
}

.backdrop-choice>span{
    min-height:78px!important;
    padding:14px!important;
    border:1px solid #d8dce0!important;
    border-radius:6px!important;
    background:#f7f8f9!important;
}

.backdrop-choice input:checked+span{
    background:#171613!important;
    color:#fff!important;
}

.backdrop-choice .backdrop-name,
.backdrop-choice .backdrop-price{
    font-size:16px!important;
}


/* Terms less cluttered */
.booking-rule-grid{
    display:none!important;
}

.terms-message{
    margin:0 0 16px!important;
    padding:16px!important;
    border:0!important;
    border-radius:6px!important;
    background:#f2eee7!important;
    font-size:15px!important;
    line-height:1.55!important;
}

.terms-check{
    margin:0!important;
    padding:15px!important;
    border:1px solid #d8d3cc!important;
    border-radius:6px!important;
    background:#fff!important;
    font-size:15px!important;
    line-height:1.5!important;
}


/* Summary is part of step four */
.live-booking-summary{
    position:static!important;
    display:none!important;
    margin:0!important;
    padding:24px 28px!important;
    border:0!important;
    border-top:1px solid rgba(23,22,19,.12)!important;
    border-bottom:1px solid rgba(23,22,19,.12)!important;
    background:#f5f2ed!important;
}

[data-cs-current-step="4"] .live-booking-summary{
    display:block!important;
}

.live-booking-summary .page-eyebrow{
    margin:0 0 8px!important;
    font-size:15px!important;
}

.summary-row{
    padding:11px 0!important;
}

.summary-row span,
.summary-row strong{
    font-size:15px!important;
}

.summary-price{
    margin-top:5px!important;
}

.summary-price strong{
    font-size:28px!important;
}


/* Payment */
.booking-pay{
    width:calc(100% - 56px)!important;
    margin:24px 28px 30px!important;
    min-height:56px!important;
    border-radius:6px!important;
}

.form-status{
    margin-left:28px!important;
    margin-right:28px!important;
}


/* MOBILE */
@media(max-width:700px){

    .cs-booking-intro{
        padding:26px 0 18px!important;
    }

    .cs-booking-intro .container,
    #booking-form>.container{
        width:calc(100% - 24px)!important;
    }

    .cs-booking-intro h1{
        font-size:35px!important;
    }

    .cs-booking-intro p{
        font-size:16px!important;
    }

    #booking-form{
        padding-bottom:42px!important;
    }

    .booking-flow{
        border-radius:6px!important;
    }

    .cs-progress-area{
        padding:18px 16px 16px!important;
    }

    .cs-progress-question{
        font-size:15px!important;
    }

    .cs-progress-name{
        font-size:14px!important;
    }

    .cs-step-nav{
        grid-template-columns:repeat(4,1fr)!important;
    }

    .cs-step-button{
        padding:12px 6px!important;
        text-align:center!important;
    }

    .cs-step-button strong{
        font-size:13px!important;
    }

    .cs-step-button span{
        font-size:13px!important;
    }

    .booking-step.cs-booking-step,
    .booking-step.cs-booking-final{
        padding:22px 16px!important;
    }

    .cs-booking-step .booking-step-head h3{
        font-size:21px!important;
    }

    .duration-options{
        grid-template-columns:1fr 1fr!important;
    }

    .time-options{
        grid-template-columns:1fr 1fr!important;
    }

    .form-grid{
        grid-template-columns:1fr!important;
    }

    .field.full{
        grid-column:auto!important;
    }

    .backdrop-options{
        grid-template-columns:1fr!important;
    }

    .live-booking-summary{
        padding:20px 16px!important;
    }

    .booking-pay{
        width:calc(100% - 32px)!important;
        margin:20px 16px 24px!important;
    }

    .form-status{
        margin-left:16px!important;
        margin-right:16px!important;
    }
}

/* FINAL BOOKING CLEANUP */

/* Remove the extra booking title area */
.cs-booking-intro{
    display:none!important;
}

/* Bring booking card directly under normal site header */
#booking-form{
    padding-top:34px!important;
}

/* Never show payment before final step */
.booking-pay,
[data-pay-button],
.form-status,
[data-booking-status]{
    display:none!important;
}

/* Only show payment and status on Step 4 */
[data-cs-current-step="4"] .booking-pay,
[data-cs-current-step="4"] [data-pay-button],
[data-cs-current-step="4"] .form-status.show,
[data-cs-current-step="4"] [data-booking-status].show{
    display:block!important;
}

/* Booking summary is also Step 4 only */
.live-booking-summary{
    display:none!important;
}

[data-cs-current-step="4"] .live-booking-summary{
    display:block!important;
}

/* Slightly tighter desktop spacing */
@media(min-width:701px){
    #booking-form{
        padding-top:40px!important;
    }
}

/* Mobile should feel like one focused booking screen */
@media(max-width:700px){
    #booking-form{
        padding-top:18px!important;
    }

    .booking-flow{
        box-shadow:none!important;
    }
}

/* FIX BOOKING CARD CLEARANCE BELOW FIXED HEADER */

#booking-form{
    padding-top:125px!important;
}

@media(max-width:1120px){
    #booking-form{
        padding-top:96px!important;
    }
}

@media(max-width:480px){
    #booking-form{
        padding-top:88px!important;
    }
}


/* =========================================
   PREMIUM CUSTOM BOOKING CALENDAR
   ========================================= */

.booking-date-field{
    position:relative!important;
    max-width:none!important;
}

/* Keep the real date input for the booking engine,
   but customers use our custom control */
.booking-date-field input[type="date"]{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    opacity:0!important;
    pointer-events:none!important;
    overflow:hidden!important;
}

.cs-date-trigger{
    width:100%;
    min-height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 20px;
    border:1px solid #d4d0ca;
    border-radius:6px;
    background:#f7f8f9;
    color:#171613;
    text-align:left;
    cursor:pointer;
    transition:border-color .2s ease,background .2s ease;
}

.cs-date-trigger:hover,
.cs-date-trigger:focus{
    border-color:#171613;
    background:#fff;
    outline:none;
}

.cs-date-trigger-copy{
    min-width:0;
}

.cs-date-trigger-label{
    display:block;
    margin-bottom:2px;
    font-size:14px;
    line-height:1.2;
    color:#7b756d;
}

.cs-date-trigger-value{
    display:block;
    font-size:18px;
    line-height:1.25;
    font-weight:600;
}

.cs-date-trigger-icon{
    width:44px;
    height:44px;
    flex:0 0 44px;
    display:grid;
    place-items:center;
    border-left:1px solid #ddd8d1;
    font-size:20px;
}

.cs-calendar{
    position:absolute;
    z-index:100;
    top:calc(100% + 10px);
    left:0;
    width:min(420px,100%);
    padding:22px;
    border:1px solid #d5d0c9;
    border-radius:8px;
    background:#fff;
    box-shadow:0 18px 45px rgba(25,21,16,.14);
    display:none;
}

.cs-calendar.is-open{
    display:block;
}

.cs-calendar-head{
    display:grid;
    grid-template-columns:46px 1fr 46px;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
}

.cs-calendar-title{
    text-align:center;
    font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;
    font-size:21px;
    font-weight:400;
}

.cs-calendar-nav{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid #ded9d2;
    border-radius:5px;
    background:#fff;
    color:#171613;
    cursor:pointer;
    font-size:20px;
}

.cs-calendar-nav:hover{
    border-color:#171613;
}

.cs-calendar-weekdays,
.cs-calendar-days{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:5px;
}

.cs-calendar-weekdays{
    margin-bottom:7px;
}

.cs-calendar-weekdays span{
    text-align:center;
    font-size:13px;
    font-weight:650;
    color:#817a71;
}

.cs-calendar-day{
    aspect-ratio:1;
    min-height:42px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid transparent;
    border-radius:5px;
    background:transparent;
    color:#171613;
    cursor:pointer;
    font-size:15px;
}

.cs-calendar-day:hover{
    background:#f0ece5;
}

.cs-calendar-day.is-today{
    border-color:#bbb4aa;
}

.cs-calendar-day.is-selected{
    background:#171613;
    color:#fff;
}

.cs-calendar-day.is-disabled{
    color:#c5c0b9;
    cursor:not-allowed;
    background:transparent;
}

.cs-calendar-day.is-other-month{
    color:#aaa49c;
}

.cs-calendar-footer{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:17px;
    padding-top:15px;
    border-top:1px solid #ebe7e1;
}

.cs-calendar-footer button{
    padding:8px 3px;
    border:0;
    background:transparent;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    color:#5f5952;
}

.cs-calendar-footer button:hover{
    color:#171613;
}

@media(max-width:700px){

    .cs-date-trigger{
        min-height:64px;
        padding:0 15px;
    }

    .cs-date-trigger-value{
        font-size:17px;
    }

    .cs-calendar{
        position:relative;
        top:auto;
        left:auto;
        width:100%;
        margin-top:10px;
        padding:16px;
        box-shadow:none;
    }

    .cs-calendar-day{
        min-height:40px;
        font-size:14px;
    }

    .cs-calendar-title{
        font-size:19px;
    }
}

/* SAFE CALENDAR FIX
   Native field stays visible unless custom calendar is confirmed ready
*/

.booking-date-field input[type="date"]{
    position:static!important;
    width:100%!important;
    height:auto!important;
    min-height:64px!important;
    opacity:1!important;
    pointer-events:auto!important;
    overflow:visible!important;
}

.booking-date-field.cs-calendar-ready input[type="date"]{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    min-height:1px!important;
    opacity:0!important;
    pointer-events:none!important;
    overflow:hidden!important;
}

.booking-date-field.cs-calendar-ready .cs-date-trigger{
    display:flex!important;
}

.cs-date-trigger{
    display:none!important;
}

.cs-calendar.is-open{
    display:block!important;
}


/* FINAL CALENDAR FIX */

.booking-flow{
    overflow:visible!important;
}

.booking-date-field{
    position:relative!important;
    z-index:50!important;
}

.cs-calendar{
    z-index:9999!important;
}

.booking-date-field .cs-date-trigger{
    width:100%!important;
}

/* only one date control */
.booking-date-field .cs-date-trigger ~ .cs-date-trigger{
    display:none!important;
}

@media(max-width:700px){
    .cs-calendar{
        position:relative!important;
        width:100%!important;
        top:auto!important;
        left:auto!important;
        margin-top:10px!important;
    }
}


/* DESKTOP CALENDAR POSITION + PROPORTIONS */

@media(min-width:701px){

    .cs-calendar{
        top:auto!important;
        bottom:calc(100% + 10px)!important;
        left:0!important;
        right:0!important;
        width:100%!important;
        max-width:none!important;

        padding:16px 20px!important;
    }

    .cs-calendar-head{
        grid-template-columns:42px 1fr 42px!important;
        margin-bottom:10px!important;
    }

    .cs-calendar-nav{
        width:42px!important;
        height:42px!important;
    }

    .cs-calendar-weekdays{
        margin-bottom:5px!important;
    }

    .cs-calendar-weekdays,
    .cs-calendar-days{
        gap:4px!important;
    }

    .cs-calendar-day{
        aspect-ratio:auto!important;
        min-height:36px!important;
        height:36px!important;
        font-size:15px!important;
    }

    .cs-calendar-title{
        font-size:20px!important;
    }
}


/* CENTER CALENDAR ON DESKTOP */

@media(min-width:701px){

    .cs-calendar{
        position:fixed!important;
        top:50%!important;
        left:50%!important;
        right:auto!important;
        bottom:auto!important;

        width:min(860px,calc(100vw - 80px))!important;
        max-width:860px!important;

        transform:translate(-50%,-50%)!important;

        padding:20px 24px!important;

        z-index:10050!important;

        box-shadow:0 24px 70px rgba(20,18,15,.22)!important;
    }

    .cs-calendar-head{
        grid-template-columns:44px 1fr 44px!important;
        margin-bottom:12px!important;
    }

    .cs-calendar-day{
        height:38px!important;
        min-height:38px!important;
    }
}


/* ==================================================
   FINAL MOBILE BOOKING WIDTH LOCK
   Prevent every booking control leaving the screen
   ================================================== */

@media(max-width:700px){

    html,
    body{
        max-width:100%!important;
        overflow-x:hidden!important;
    }

    #booking-form,
    #booking-form .container,
    .live-booking,
    .booking-flow,
    .booking-step,
    .cs-progress-area,
    .cs-step-nav,
    .form-grid,
    .duration-options,
    .time-options,
    .backdrop-options,
    .booking-rule-grid,
    .booking-date-field,
    .live-booking-summary{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        box-sizing:border-box!important;
    }

    #booking-form>.container{
        width:calc(100% - 20px)!important;
        max-width:none!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }

    .booking-flow{
        overflow:visible!important;
    }

    .cs-progress-area{
        padding:16px 14px!important;
    }

    .cs-progress-meta{
        min-width:0!important;
        gap:8px!important;
    }

    .cs-progress-question,
    .cs-progress-name{
        min-width:0!important;
        white-space:normal!important;
    }

    .cs-step-nav{
        display:grid!important;
        grid-template-columns:repeat(4,minmax(0,1fr))!important;
    }

    .cs-step-button{
        min-width:0!important;
        width:100%!important;
        padding:11px 3px!important;
        overflow:hidden!important;
    }

    .cs-step-button strong,
    .cs-step-button span{
        min-width:0!important;
        font-size:12px!important;
        white-space:normal!important;
        overflow-wrap:anywhere!important;
    }

    .booking-step.cs-booking-step,
    .booking-step.cs-booking-final{
        padding:20px 14px!important;
    }

    .booking-step-head,
    .booking-step-head>div{
        min-width:0!important;
        width:100%!important;
    }

    .duration-options,
    .time-options{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:8px!important;
    }

    .duration-choice,
    .time-choice,
    .duration-choice>span,
    .time-choice>span{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        box-sizing:border-box!important;
    }

    .duration-choice>span{
        padding:12px!important;
    }

    .duration-choice strong,
    .duration-choice b,
    .time-choice span{
        font-size:15px!important;
    }

    .form-grid{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:14px!important;
    }

    .field,
    .field.full{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        grid-column:auto!important;
    }

    .field input,
    .field textarea,
    .field select{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        box-sizing:border-box!important;
    }

    .backdrop-options{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:8px!important;
    }

    .backdrop-choice,
    .backdrop-choice>span{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        box-sizing:border-box!important;
    }

    .booking-rule-grid{
        grid-template-columns:1fr!important;
    }

    .terms-message,
    .terms-check{
        width:100%!important;
        max-width:100%!important;
        box-sizing:border-box!important;
    }

    .live-booking-summary{
        position:static!important;
        padding:18px 14px!important;
    }

    .summary-row{
        min-width:0!important;
        gap:10px!important;
    }

    .summary-row span,
    .summary-row strong{
        min-width:0!important;
        overflow-wrap:anywhere!important;
    }

    .booking-pay,
    [data-pay-button]{
        width:calc(100% - 28px)!important;
        max-width:calc(100% - 28px)!important;
        margin-left:14px!important;
        margin-right:14px!important;
    }

    /* Calendar stays completely inside mobile screen */

    .cs-calendar{
        position:relative!important;
        top:auto!important;
        right:auto!important;
        bottom:auto!important;
        left:auto!important;
        transform:none!important;

        width:100%!important;
        max-width:100%!important;
        min-width:0!important;

        margin:8px 0 0!important;
        padding:12px!important;

        box-sizing:border-box!important;
    }

    .cs-calendar-head{
        grid-template-columns:40px minmax(0,1fr) 40px!important;
        gap:5px!important;
    }

    .cs-calendar-title{
        min-width:0!important;
        font-size:17px!important;
        white-space:normal!important;
    }

    .cs-calendar-nav{
        width:40px!important;
        height:40px!important;
    }

    .cs-calendar-weekdays,
    .cs-calendar-days{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        grid-template-columns:repeat(7,minmax(0,1fr))!important;
        gap:2px!important;
    }

    .cs-calendar-weekdays span{
        min-width:0!important;
        font-size:11px!important;
    }

    .cs-calendar-day{
        width:100%!important;
        min-width:0!important;
        min-height:36px!important;
        height:36px!important;
        padding:0!important;
        font-size:13px!important;
    }
}

@media(max-width:400px){

    .duration-options,
    .time-options{
        grid-template-columns:1fr!important;
    }

}


/* DETAILS FORM SPACING FIX */

@media(min-width:701px){

    .cs-booking-final .form-grid .field:nth-child(3){
        grid-column:1 / -1!important;
        max-width:480px!important;
    }

}


/* =====================================================
   MOBILE STEP 4
   One small screen at a time
   Desktop untouched
   ===================================================== */

.cs-mobile-final-progress,
.cs-mobile-final-controls{
    display:none;
}

@media(min-width:701px){

    .cs-mobile-final-panel{
        display:contents!important;
    }

}

@media(max-width:700px){

    /* Step 4 becomes compact */
    [data-cs-current-step="4"] .booking-flow{
        min-height:auto!important;
    }

    .cs-mobile-final-progress{
        display:block!important;
        margin:0 0 18px!important;
    }

    .cs-mobile-final-progress > span{
        display:block!important;
        margin-bottom:8px!important;
        font-size:14px!important;
        font-weight:700!important;
    }

    .cs-mobile-final-progress > div{
        height:5px!important;
        overflow:hidden!important;
        background:#e6e1da!important;
        border-radius:20px!important;
    }

    .cs-mobile-final-progress i{
        display:block!important;
        width:25%;
        height:100%!important;
        background:#171613!important;
        transition:width .2s ease!important;
    }

    .cs-mobile-final-panel{
        display:none!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }

    .cs-mobile-final-panel.is-active{
        display:block!important;
    }

    /* Hide all other final sections outside active panel */
    .cs-booking-final{
        display:none!important;
    }

    .cs-booking-final.cs-details{
        display:block!important;
    }

    .cs-mobile-final-panel .cs-booking-final{
        display:block!important;
    }

    /* Contact screen */
    [data-mobile-final="1"] .field,
    [data-mobile-final="2"] .field{
        margin:0 0 14px!important;
    }

    [data-mobile-final="1"] .field:last-child,
    [data-mobile-final="2"] .field:last-child{
        margin-bottom:0!important;
    }

    .field input,
    .field textarea{
        min-height:50px!important;
    }

    .field textarea{
        min-height:82px!important;
        max-height:110px!important;
    }

    /* Extras screen */
    [data-mobile-final="3"] .booking-step{
        padding:0!important;
        margin:0!important;
        border:0!important;
    }

    [data-mobile-final="3"] .booking-step-head{
        margin-bottom:14px!important;
    }

    .backdrop-options{
        gap:7px!important;
    }

    .backdrop-choice>span{
        min-height:60px!important;
        padding:11px 12px!important;
    }

    /* Review screen */
    [data-mobile-final="4"] .booking-step{
        padding:0!important;
        margin:0 0 15px!important;
    }

    [data-mobile-final="4"] .booking-rule-grid{
        display:none!important;
    }

    [data-mobile-final="4"] .terms-message{
        padding:12px!important;
        margin:0 0 12px!important;
        font-size:14px!important;
        line-height:1.4!important;
    }

    [data-mobile-final="4"] .terms-check{
        padding:11px!important;
        font-size:14px!important;
        line-height:1.4!important;
    }

    [data-mobile-final="4"] .live-booking-summary{
        display:block!important;
        padding:14px 0!important;
        margin:0!important;
    }

    [data-mobile-final="4"] .summary-row{
        padding:8px 0!important;
    }

    [data-mobile-final="4"] .booking-pay,
    [data-mobile-final="4"] [data-pay-button]{
        width:100%!important;
        max-width:100%!important;
        min-height:52px!important;
        margin:14px 0 0!important;
    }

    /* Bottom navigation */
    .cs-mobile-final-controls{
        display:flex!important;
        gap:8px!important;
        margin-top:18px!important;
        padding-top:14px!important;
        border-top:1px solid rgba(23,22,19,.12)!important;
    }

    .cs-mobile-final-controls button{
        flex:1 1 0!important;
        min-height:48px!important;
        padding:10px 12px!important;
        border:1px solid rgba(23,23,23,.22)!important;
        border-radius:5px!important;
        background:#f7f4ee!important;
        color:#171717!important;
        font-size:15px!important;
        font-weight:600!important;
    }

    .cs-mobile-final-controls [data-mobile-next]{
        background:#171613!important;
        color:#fff!important;
        border-color:#171613!important;
    }

}


/* FINAL DETAILS FORM ALIGNMENT */

@media(min-width:701px){

    .cs-booking-final .form-grid{
        align-items:start!important;
    }

    .cs-booking-final .field:has(input[name="email"]){
        position:relative!important;
    }

    .cs-booking-final .field:has(input[name="email"])
    .loyalty-check-message.is-visible{
        position:absolute!important;
        top:100%!important;
        left:0!important;
        right:0!important;
        margin-top:12px!important;
        padding-top:12px!important;
    }

    .cs-booking-final .field:has(input[name="phone"]){
        grid-column:1!important;
        margin-top:0!important;
    }

}