/* ============================================================
   BFT BOOKING FINAL
   This stylesheet is intentionally loaded LAST.
   ============================================================ */

#booking{
    --hu-green:#477050;
    --hu-green-soft:rgba(71,112,80,.14);

    --ink:#111111;

    --border:#d8d3cc;
    --border-soft:#e8e4df;
}


/* ============================================================
   LAYOUT
   ============================================================ */

#booking .booking-wrapper{
    display:grid !important;

    grid-template-columns:
        minmax(350px,410px)
        minmax(360px,1fr) !important;

    gap:18px !important;

    align-items:start !important;
}


/* ============================================================
   CALENDAR CARD
   ============================================================ */

#booking .calendar-container{
    width:100% !important;
    max-width:410px !important;

    padding:14px 15px 16px !important;

    border-radius:22px !important;
}


/* ============================================================
   MONTH NAV
   ============================================================ */

#booking .calendar-nav{
    display:grid !important;

    grid-template-columns:
        82px
        minmax(0,1fr)
        82px !important;

    align-items:center !important;

    gap:8px !important;

    margin-bottom:8px !important;
}


#booking .calendar-nav .btn,
#booking .calendar-nav button{
    width:100% !important;
    min-width:0 !important;

    height:34px !important;
    min-height:34px !important;

    padding:0 7px !important;

    background:#fff !important;
    color:#111 !important;

    border:1px solid #bcb6ae !important;
    border-radius:10px !important;

    box-shadow:none !important;

    font-size:9px !important;
    font-weight:700 !important;
}


#booking .calendar-nav .btn:hover:not(:disabled),
#booking .calendar-nav button:hover:not(:disabled){
    background:#f4f7f4 !important;

    color:var(--hu-green) !important;

    border-color:var(--hu-green) !important;

    box-shadow:
        0 0 0 2px
        var(--hu-green-soft) !important;
}


#booking .cal-month-label{
    font-size:13px !important;
    line-height:1.08 !important;

    font-weight:800 !important;

    text-align:center !important;

    margin:0 !important;
}


/* ============================================================
   DAYS
   ============================================================ */

#booking .calendar-grid{
    gap:4px !important;
}


#booking .cal-day-header{
    padding:4px 0 !important;

    color:#111 !important;

    font-size:9px !important;
    font-weight:700 !important;
}


#booking .cal-day{
    min-height:43px !important;
    height:43px !important;

    padding:3px 2px !important;

    background:#fff !important;

    color:#111 !important;

    border:
        1px solid
        var(--border-soft) !important;

    border-radius:8px !important;

    box-shadow:none !important;

    outline:none !important;

    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease !important;
}


/*
 * Las fechas pasadas/vacías no tienen borde rosa.
 */

#booking .cal-day.past{
    border-color:transparent !important;

    background:transparent !important;

    color:#b7b7b7 !important;
}


#booking .cal-day.available{
    background:#fff !important;

    color:#111 !important;

    border-color:var(--border) !important;

    box-shadow:none !important;
}


#booking .cal-day.available:hover{
    background:#f4f7f4 !important;

    color:#111 !important;

    border-color:var(--hu-green) !important;

    box-shadow:
        0 0 0 2px
        var(--hu-green-soft) !important;
}


/*
 * Seleccionado = negro.
 */

#booking .cal-day.selected,
#booking .cal-day.selected:hover{
    background:#111 !important;

    color:#fff !important;

    border-color:#111 !important;

    box-shadow:none !important;
}


#booking .cal-day.selected *{
    color:#fff !important;
}


#booking .cal-day.today:not(.selected){
    outline:
        1px solid
        #111 !important;

    outline-offset:1px !important;
}


#booking .cal-date-number{
    color:inherit !important;

    font-size:10px !important;
    line-height:1 !important;

    font-weight:800 !important;
}


/* ============================================================
   LANGUAGE FLAGS INSIDE DAYS
   ============================================================ */

#booking .cal-language-flags{
    display:flex !important;

    flex-wrap:wrap !important;

    width:22px !important;

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

    gap:1px !important;

    margin:
        2px auto
        0 !important;
}


#booking .cal-language-flag{
    display:flex !important;

    width:9px !important;
    height:9px !important;

    flex:
        0 0
        9px !important;

    align-items:center !important;
    justify-content:center !important;
}


#booking
.cal-language-flag
.lang-flag-circle{
    --flag-size:8px !important;

    width:8px !important;
    height:8px !important;

    flex:
        0 0
        8px !important;
}


/* ============================================================
   RIGHT PANEL
   ============================================================ */

#booking .slots-container{
    min-height:220px !important;

    padding:18px !important;

    border-radius:22px !important;
}


#booking .slots-placeholder{
    color:#777 !important;

    font-size:11px !important;

    text-align:center !important;
}


/* ============================================================
   TOUR / AVAILABLE SLOTS
   ============================================================ */

#booking .slots-group h3{
    color:#111 !important;

    margin-bottom:9px !important;

    padding-bottom:7px !important;

    font-size:14px !important;
}


#booking .phase2-slot-list{
    display:grid !important;

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

    gap:8px !important;
}


#booking .phase2-slot{
    min-height:44px !important;

    padding:7px 9px !important;

    background:#fff !important;

    color:#111 !important;

    border:
        1px solid
        var(--border) !important;

    border-radius:10px !important;

    box-shadow:none !important;

    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease !important;
}


#booking button.phase2-slot:hover{
    background:#f4f7f4 !important;

    color:#111 !important;

    border-color:var(--hu-green) !important;

    box-shadow:
        0 0 0 2px
        var(--hu-green-soft) !important;
}


/*
 * Por seguridad, aunque el backend ya no los envía.
 */

#booking .phase2-slot.locked,
#booking .phase2-slot.blocked,
#booking [data-hidden-blocked="1"]{
    display:none !important;
}


#booking .slot-main strong{
    font-size:11px !important;
}


#booking .slot-main span{
    font-size:9px !important;
}


#booking
.slot-lang-flag
.lang-flag-circle{
    --flag-size:15px !important;
}


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

#bookingModal
.booking-modal,
#bookingModal{
    color:#111 !important;
}


#bookingModal .modal-content{
    max-width:620px !important;

    padding:22px !important;

    background:#fff !important;

    color:#111 !important;

    border-radius:17px !important;
}


#bookingModal .modal-content h2{
    color:#111 !important;

    font-size:20px !important;

    margin-bottom:16px !important;
}


#bookingModal .booking-summary{
    padding:13px !important;

    background:#f6f4f1 !important;

    color:#111 !important;

    border:
        1px solid
        #ded8d0 !important;

    border-radius:10px !important;
}


#bookingModal .booking-summary-tour{
    text-align:center !important;

    color:#111 !important;

    font-size:14px !important;
}


#bookingModal .booking-summary-meta{
    text-align:center !important;

    color:#555 !important;

    font-size:10px !important;

    opacity:1 !important;
}


#bookingModal .form-group label{
    color:#333 !important;

    font-size:10px !important;
}


#bookingModal
.form-group input,
#bookingModal
.form-group select,
#bookingModal
.form-group textarea{
    min-height:36px !important;

    padding:6px 8px !important;

    background:#fff !important;
    color:#111 !important;

    border:
        1px solid
        #cec8c0 !important;

    border-radius:8px !important;

    font-size:11px !important;
}


#bookingModal
.form-group input:focus,
#bookingModal
.form-group select:focus,
#bookingModal
.form-group textarea:focus{
    border-color:var(--hu-green) !important;

    box-shadow:
        0 0 0 2px
        var(--hu-green-soft) !important;
}


/* botones modal = negro */
#bookingModal .btn-primary{
    background:#111 !important;

    color:#fff !important;

    border-color:#111 !important;

    box-shadow:none !important;
}


#bookingModal .btn-primary:hover{
    background:#222 !important;

    color:#fff !important;

    border-color:#222 !important;
}


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

@media(max-width:900px){

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


    #booking .calendar-container{
        max-width:100% !important;
    }


    #booking .slots-container{
        min-height:160px !important;
    }
}