/* =========================================================
   SMART BOOKING UI — SIGN AND CANOPY
   Brand Colors:
   #e44344
   #ff0000
   #1d1739
========================================================= */

.smartbooking-container{
    max-width:760px;
    margin:40px auto;
    padding:0 18px;
    font-family:inherit;
}

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

.booking-header{
    position:relative;
    overflow:hidden;

    text-align:center;

    margin-bottom:40px;

    padding:48px 30px;

    border-radius:28px;

    background:
        linear-gradient(
            135deg,
            #1d1739 0%,
            #e44344 65%,
            #ff0000 100%
        );

    box-shadow:
        0 20px 50px rgba(29,23,57,0.25),
        0 10px 25px rgba(228,67,68,0.18);
}

.booking-header::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.16), transparent 34%),
        radial-gradient(circle at bottom left, rgba(255,255,255,0.10), transparent 34%);
}

.booking-header *{
    position:relative;
    z-index:2;
}

.booking-header h1{
    margin:0 0 14px;

    color:#ffffff !important;

    font-size:38px;
    font-weight:800;
    line-height:1.3;

    text-shadow:0 3px 15px rgba(0,0,0,0.28);
}

.booking-header p{
    margin:0 auto;

    max-width:620px;

    color:rgba(255,255,255,0.94) !important;

    font-size:16px;
    line-height:1.9;
}

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

.booking-card{
    background:#ffffff;

    border-radius:28px;

    padding:38px 34px;

    border:1px solid rgba(228,67,68,0.14);

    box-shadow:
        0 18px 45px rgba(29,23,57,0.08);
}

/* =========================================================
   ALERTS
========================================================= */

.alert-box{
    display:flex;
    align-items:flex-start;
    gap:14px;

    padding:18px 22px;

    margin-bottom:26px;

    border-radius:16px;

    border-left:5px solid;

    font-weight:600;
    line-height:1.7;
}

.alert-error{
    background:rgba(255,0,0,0.06);

    border-color:#ff0000;

    color:#1d1739;
}

.alert-success{
    background:rgba(228,67,68,0.08);

    border-color:#e44344;

    color:#1d1739;
}

/* =========================================================
   FEEDBACK
========================================================= */

.booking-feedback{
    display:none;

    padding:18px 22px;

    border-radius:16px;

    margin-bottom:24px;

    border-left:5px solid transparent;

    font-weight:700;
    line-height:1.7;
}

.booking-feedback.is-success{
    display:block;

    background:rgba(228,67,68,0.08);

    border-color:#e44344;

    color:#1d1739;
}

.booking-feedback.is-error{
    display:block;

    background:rgba(255,0,0,0.06);

    border-color:#ff0000;

    color:#1d1739;
}

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

.booking-success-panel{
    display:none;

    margin-bottom:30px;

    padding:28px;

    border-radius:22px;

    background:#ffffff;

    border:1px solid rgba(228,67,68,0.16);

    box-shadow:
        0 12px 30px rgba(29,23,57,0.08);
}

.booking-success-panel__header{
    display:flex;
    align-items:center;
    gap:16px;

    margin-bottom:22px;
}

.booking-success-panel__icon{
    width:52px;
    height:52px;

    border-radius:50%;

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

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #e44344,
            #ff0000
        );

    box-shadow:
        0 10px 25px rgba(228,67,68,0.24);
}

.booking-success-panel__body{
    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(160px,1fr));

    gap:18px;

    margin-bottom:22px;
}

.booking-success-panel__label{
    display:block;

    margin-bottom:5px;

    color:#777777;

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

    letter-spacing:.08em;

    text-transform:uppercase;
}

.booking-success-panel__actions{
    text-align:center;
}

.booking-success-panel__actions .btn{
    width:auto;
}

/* =========================================================
   FORM SECTIONS
========================================================= */

.form-section{
    margin-bottom:40px;
}

.form-section-title{
    margin-bottom:24px;
    padding-bottom:12px;

    color:#1d1739;

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

    border-bottom:
        2px solid rgba(228,67,68,0.16);
}

/* =========================================================
   FORM GROUP
========================================================= */

.form-group{
    margin-bottom:24px;
}

.form-group label{
    display:block;

    margin-bottom:10px;

    color:#1d1739;

    font-size:15px;
    font-weight:700;
}

.form-group label .required{
    margin-left:4px;

    color:#ff0000;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="datetime-local"],
.form-group select,
.form-group textarea{
    width:100%;

    padding:16px 18px;

    border-radius:16px;

    border:
        2px solid rgba(29,23,57,0.12);

    background:#ffffff;

    color:#1d1739;

    font-size:15px;
    line-height:1.6;

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

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    outline:none;

    border-color:#e44344;

    box-shadow:
        0 0 0 4px rgba(228,67,68,0.12);
}

.form-group textarea{
    resize:vertical;

    min-height:120px;
}

/* =========================================================
   SERVICE INFO
========================================================= */

.service-info{
    display:none;

    margin-top:14px;

    padding:26px;

    border-radius:22px;

    background:#ffffff;

    border:
        1px solid rgba(228,67,68,0.14);

    box-shadow:
        0 10px 28px rgba(29,23,57,0.06);
}

.service-info.active{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.service-info-summary{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.service-info-name span{
    display:block;

    color:#1d1739;

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

.service-info-name small{
    color:#777777;

    line-height:1.7;
}

.service-info-status{
    padding:7px 16px;

    border-radius:999px;

    background:
        rgba(228,67,68,0.08);

    color:#e44344;

    font-size:13px;
    font-weight:700;
}

.service-info-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(150px,1fr));

    gap:16px;
}

.service-info-stat{
    padding:16px;

    border-radius:16px;

    background:#ffffff;

    border:
        1px solid rgba(228,67,68,0.12);

    box-shadow:
        0 4px 12px rgba(29,23,57,0.04);
}

.service-info-label{
    display:block;

    margin-bottom:6px;

    color:#777777;

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

    text-transform:uppercase;
    letter-spacing:.08em;
}

.service-info-stat strong{
    color:#1d1739;
}

.service-info-description h4{
    margin:0 0 8px;

    color:#1d1739;

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

.service-info-description p{
    margin:0;

    color:#666666;

    line-height:1.8;
}

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

.form-buttons{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

    margin-top:40px;

    padding-top:32px;

    border-top:
        2px solid rgba(228,67,68,0.14);
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:15px 28px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    text-decoration:none !important;

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

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

.btn:hover{
    transform:translateY(-2px);
}

.btn-primary{
    width:100%;

    color:#ffffff !important;

    background:
        linear-gradient(
            135deg,
            #e44344 0%,
            #ff0000 100%
        );

    box-shadow:
        0 12px 28px rgba(228,67,68,0.24);
}

.btn-primary:hover{
    background:#1d1739;

    box-shadow:
        0 14px 30px rgba(29,23,57,0.26);
}

.btn-secondary{
    width:100%;

    color:#1d1739;

    background:#ffffff;

    border:
        2px solid rgba(228,67,68,0.16);
}

.btn-secondary:hover{
    color:#e44344;

    border-color:#e44344;

    background:
        rgba(228,67,68,0.05);
}

.btn.is-busy{
    pointer-events:none;

    opacity:.75;
}

.btn.is-complete{
    background:#1d1739;
}

.btn.is-complete:hover{
    background:#ff0000;
}

/* =========================================================
   VALIDATION
========================================================= */

.validation-error{
    display:block;

    margin-top:7px;

    color:#ff0000;

    font-size:13px;
    font-weight:700;
}

.input-error{
    border-color:#ff0000 !important;
}

.input-error:focus{
    box-shadow:
        0 0 0 4px rgba(255,0,0,0.10) !important;
}

/* =========================================================
   LOCKED SLOT
========================================================= */

.booking-locked-slot{
    margin-top:12px;

    padding:18px;

    border-radius:16px;

    background:
        rgba(228,67,68,0.06);

    border:
        1px solid rgba(228,67,68,0.16);

    color:#1d1739;

    font-weight:700;
}

.booking-locked-slot small{
    display:block;

    margin-bottom:5px;

    color:#777777;
}

/* =========================================================
   SLOT PICKER
========================================================= */

.slot-picker{
    padding:24px;

    border-radius:22px;

    border:
        2px dashed rgba(228,67,68,0.22);

    background:#ffffff;
}

.slot-picker-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;

    margin-bottom:24px;
}

.slot-picker-header strong{
    display:block;

    color:#1d1739;

    font-size:17px;
    font-weight:800;
}

.slot-picker-header span{
    color:#777777;

    line-height:1.7;
}

.slot-picker .btn-link{
    padding:0;

    background:none;
    border:none;

    color:#e44344;

    font-weight:700;

    cursor:pointer;
}

/* =========================================================
   LOADER
========================================================= */

.slot-loader{
    display:flex;
    align-items:center;
    gap:12px;

    padding:16px 18px;

    border-radius:16px;

    background:
        rgba(228,67,68,0.06);

    border:
        1px solid rgba(228,67,68,0.16);

    color:#1d1739;

    font-weight:700;
}

.slot-loader__spinner{
    width:18px;
    height:18px;

    border-radius:50%;

    border:
        3px solid rgba(228,67,68,0.18);

    border-top-color:#e44344;

    animation:slot-spin .8s linear infinite;
}

@keyframes slot-spin{
    to{
        transform:rotate(360deg);
    }
}

/* =========================================================
   SLOT DATE
========================================================= */

.slot-date-list{
    display:flex;

    gap:12px;

    overflow-x:auto;

    padding:10px 0 18px;

    margin-bottom:10px;
}

.slot-date-btn{
    min-width:95px;

    padding:12px 14px;

    border-radius:16px;

    border:
        1px solid rgba(228,67,68,0.16);

    background:#ffffff;

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

    cursor:pointer;

    color:#1d1739;

    font-weight:700;

    transition:
        all .25s ease;
}

.slot-date-btn:hover{
    border-color:#e44344;

    transform:translateY(-2px);

    box-shadow:
        0 10px 22px rgba(228,67,68,0.12);
}

.slot-date-btn__dow{
    color:#777777;

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

    letter-spacing:.08em;

    text-transform:uppercase;
}

.slot-date-btn__date{
    font-size:15px;
    font-weight:800;
}

.slot-date-btn__count{
    margin-top:4px;

    padding:3px 9px;

    border-radius:999px;

    background:#1d1739;

    color:#ffffff;

    font-size:12px;
    font-weight:800;
}

.slot-date-btn.is-active{
    background:
        rgba(228,67,68,0.08);

    border-color:#e44344;

    box-shadow:
        0 10px 24px rgba(228,67,68,0.16);
}

.slot-date-btn.is-active .slot-date-btn__count{
    background:
        linear-gradient(
            135deg,
            #e44344,
            #ff0000
        );
}

/* =========================================================
   SLOT TIME
========================================================= */

.slot-time-list{
    margin-top:10px;
}

.slot-time-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(140px,1fr));

    gap:14px;
}

.slot-time-btn{
    padding:14px 12px;

    border-radius:16px;

    border:
        1px solid rgba(228,67,68,0.16);

    background:#ffffff;

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

    cursor:pointer;

    color:#1d1739;

    font-weight:700;

    transition:
        all .25s ease;
}

.slot-time-btn:hover{
    border-color:#e44344;

    box-shadow:
        0 8px 18px rgba(228,67,68,0.12);
}

.slot-time-btn.is-selected{
    color:#ffffff;

    border-color:transparent;

    background:
        linear-gradient(
            135deg,
            #e44344,
            #ff0000
        );
}

.slot-time-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
}

.slot-time-btn__utc,
.slot-time-btn__local{
    font-size:12px;
}

/* =========================================================
   LOGIN NOTE
========================================================= */

.booking-login-note{
    padding:14px 16px;

    border-radius:14px;

    background:
        rgba(228,67,68,0.06);

    border:
        1px solid rgba(228,67,68,0.14);

    color:#1d1739;

    line-height:1.7;
}

/* =========================================================
   SELECTED SLOT SUMMARY
========================================================= */

.selected-slot-summary{
    display:none;

    margin-bottom:20px;

    padding:18px 20px;

    border-radius:16px;

    background:
        rgba(228,67,68,0.06);

    border:
        1px solid rgba(228,67,68,0.16);

    color:#1d1739;

    font-weight:700;
}

.selected-slot-summary.is-visible,
.selected-slot-summary:not([style]){
    display:block;
}

.selected-slot-summary__title{
    margin-bottom:6px;

    color:#e44344;

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

    letter-spacing:.08em;

    text-transform:uppercase;
}

.selected-slot-summary__body{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.selected-slot-summary__toggle{
    border:none;
    background:none;

    color:#e44344;

    font-weight:700;

    cursor:pointer;
}

/* =========================================================
   SLOT ACCORDION
========================================================= */

.slot-accordion{
    border-radius:18px;

    overflow:hidden;

    border:
        1px solid rgba(228,67,68,0.16);
}

.slot-accordion__header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:16px 18px;

    background:
        rgba(228,67,68,0.05);

    color:#1d1739;

    font-weight:700;
}

.slot-accordion__toggle{
    border:none;
    background:none;

    color:#e44344;

    font-weight:700;

    cursor:pointer;
}

.slot-accordion__panel{
    padding:18px;
}

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

.slot-grid{
    display:grid;
    gap:20px;
}

.slot-card{
    padding:22px;

    border-radius:20px;

    background:#ffffff;

    border:
        1px solid rgba(228,67,68,0.16);

    box-shadow:
        0 12px 28px rgba(29,23,57,0.06);

    transition:
        all .25s ease;
}

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

    border-color:#e44344;

    box-shadow:
        0 16px 35px rgba(29,23,57,0.12);
}

.slot-card.is-disabled{
    opacity:.55;
}

.slot-card__header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;

    margin-bottom:16px;
}

.slot-card__date strong{
    display:block;

    color:#1d1739;

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

.slot-card__dow{
    color:#777777;

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

    text-transform:uppercase;
    letter-spacing:.08em;
}

.slot-card__time{
    display:inline-flex;
    align-items:center;
    gap:7px;

    padding:7px 14px;

    border-radius:999px;

    background:
        rgba(228,67,68,0.08);

    color:#1d1739;

    font-weight:700;
}

.slot-card__time-icon{
    width:8px;
    height:8px;

    border-radius:50%;

    background:#e44344;
}

.slot-card__info .slot-card__title{
    display:block;

    margin-bottom:6px;

    color:#1d1739;

    font-size:16px;
    font-weight:700;
}

.slot-card__description{
    margin:0;

    color:#666666;

    line-height:1.8;
}

.slot-card__meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-top:14px;
}

.slot-card__badge{
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:7px 12px;

    border-radius:999px;

    background:
        rgba(228,67,68,0.08);

    color:#e44344;

    font-size:13px;
    font-weight:700;
}

.slot-card__badge--ghost{
    background:transparent;

    border:
        1px solid rgba(228,67,68,0.16);
}

.slot-card__badge-dot{
    width:6px;
    height:6px;

    border-radius:50%;

    background:currentColor;
}

.slot-card__footer{
    display:flex;
    justify-content:center;

    margin-top:18px;
}

.slot-card__select{
    width:100%;
    min-width:150px;
}

/* =========================================================
   SINGLE BUTTON CENTER
========================================================= */

.btn-primary,
a.btn-primary,
button.btn-primary,
input.btn-primary{
    display:flex;

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

    text-align:center;
}

.form-buttons.form-buttons--single{
    display:flex;
    justify-content:center;
}

.form-buttons.form-buttons--single .btn-primary{
    width:auto;
    min-width:240px;
}

/* =========================================================
   CENTER GROUP
========================================================= */

.form-group--center{
    text-align:center;
}

.form-group--center label{
    text-align:center;
}

.form-group--center .tracking-input-group{
    display:flex;
    justify-content:center;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:768px){

    .booking-card{
        padding:26px 22px;
    }

    .booking-header{
        padding:38px 24px;
    }

    .booking-header h1{
        font-size:30px;
    }

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

    .service-info-summary{
        flex-direction:column;
        align-items:flex-start;
    }

}

@media(max-width:600px){

    .smartbooking-container{
        padding:0 12px;
    }

    .booking-header{
        border-radius:22px;
    }

    .booking-card{
        border-radius:22px;
    }

    .slot-card__header{
        flex-direction:column;
        align-items:flex-start;
    }

    .slot-card__footer{
        width:100%;
    }

    .slot-card__select{
        width:100%;
    }

    .selected-slot-summary__body{
        flex-direction:column;
        align-items:flex-start;
    }

}