/* =============================================================================
   KoopsDesk Public Booking Widget — widget.css
   ============================================================================= */

/* ---- Reset & base ---------------------------------------------------------- */
.booking-widget-body{
    margin: 0;
    padding: 0;
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: #1a1a1a;
}.bw-widget{
    max-width: 960px;
    margin: 0 auto;
    padding: 16px;
    position: relative;
}/* ---- Step indicator -------------------------------------------------------- */
.bw-steps{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}.bw-step{
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.45;
    transition: opacity 0.2s;
}.bw-step--active,
.bw-step--completed{ opacity: 1; }.bw-step-num{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #d0d5dd;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}.bw-step--active    .bw-step-num{ background: #4594A2; }.bw-step--completed .bw-step-num{ background: #2d7a86; }.bw-step-label{
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}/* ---- Property selector — custom dropdown ------------------------------------ */
.bw-property-bar{
    margin: -8px 0 20px;
    max-width: 400px;
}.bw-prop-dd{
    position: relative;
}.bw-prop-trigger{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: #fff;
    border: 2px solid #e4e7ec;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.15s;
    text-align: left;
}.bw-prop-trigger:hover{ border-color: #4594A2; }.bw-prop-trigger[aria-expanded="true"]{
    border-color: #4594A2;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}.bw-prop-chevron{
    flex-shrink: 0;
    margin-left: 8px;
    color: #4594A2;
    transition: transform 0.2s;
}.bw-prop-trigger[aria-expanded="true"] .bw-prop-chevron{ transform: rotate(180deg); }.bw-prop-menu{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid #4594A2;
    border-top: none;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    z-index: 200;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}.bw-prop-option{
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    border-top: 1px solid #f0f0f0;
    font-size: 14px;
    font-family: inherit;
    color: #333;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s, color 0.1s;
}.bw-prop-option:first-child{ border-top: none; }.bw-prop-option:hover{ background: #f0fafb; color: #4594A2; }.bw-prop-option--active{ color: #4594A2; font-weight: 600; }.bw-prop-option--active::before{ content: '\2713'; font-size: 12px; }.bw-prop-option:not(.bw-prop-option--active)::before{ content: ''; display: inline-block; width: 12px; }/* Property name caption row shown above each property's rooms in "All" mode */
.bw-rooms-property-caption{
    background: rgba(255,255,255,0.22);
    color: #fff;
    border-left: 3px solid rgba(255,255,255,0.7);
    padding: 5px 8px;
    margin: 10px 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 0 6px 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-column: 1 / -1;
}.bw-rooms-property-caption:first-child{ margin-top: 0; }.bw-step-connector{
    flex: 1;
    min-width: 20px;
    height: 2px;
    background: #d0d5dd;
    margin: 0 8px;
}/* ---- Panel ----------------------------------------------------------------- */
.bw-panel{ display: none; }.bw-panel--active{ display: block; }.bw-panel-footer{
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding: 16px 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
}/* ---- Buttons --------------------------------------------------------------- */
.bw-btn{
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s, opacity 0.15s;
    touch-action: manipulation; /* no 300ms delay; prevents WebView scroll-gesture capture */
}.bw-btn--primary{ background: #4594A2; color: #fff; }.bw-btn--primary:hover:not(:disabled){ background: #2d7a86; }.bw-btn--primary:disabled{ opacity: 0.45; cursor: default; }.bw-btn--secondary{ background: #f2f4f7; color: #344054; }.bw-btn--secondary:hover{ background: #e4e7ec; }/* ---- Staged reveal on initial load --------------------------------------- */
/* Items start invisible and slide up when JS adds .bw--visible */
@keyframes bwFadeUp{
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}.bw-rooms-panel,
.bw-calendar-panel{
    opacity: 0;
    visibility: hidden;
}.bw-rooms-panel.bw--visible{
    opacity: 1;
    visibility: visible;
    animation: bwFadeUp 0.35s ease both;
}.bw-calendar-panel.bw--visible{
    opacity: 1;
    visibility: visible;
    animation: bwFadeUp 0.35s ease both;
}/* ---- Step 1 layout --------------------------------------------------------- */
/* Balloon: hidden until JS removes bw-hint--wait after staged reveal */
.bw-select-hint.bw-hint--wait{
    display: none !important;
}/* After reveal: hidden when a room is selected */
.bw-select-hint.bw-hint--hidden{
    display: none !important;
}.bw-step1-layout{
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    align-items: start;
}.bw-step1-layout--no-sidebar{
    grid-template-columns: 1fr;
}
@media (max-width: 680px) {.bw-step1-layout{ grid-template-columns: 1fr; }
}/* ---- Sidebar --------------------------------------------------------------- */
.bw-rooms-panel{
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 520px;
    overflow-y: auto;
    scrollbar-width: thin;
}/* Section label (Rooms / Cars) */
.bw-section-label{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    padding: 10px 4px 6px;
}.bw-section-label:first-child{ padding-top: 0; }.bw-section-icon{ font-size: 14px; }/* Items list */
.bw-items-list{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 4px;
}/* ---- Item card (room or car) ----------------------------------------------- */
.bw-item-card{
    box-sizing: border-box; /* padding/border must not push a grid column wider than its track */
    min-width: 0;
    background: #fff;
    border: 2px solid #e4e7ec;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    outline: none;
    user-select: none;
}.bw-item-card:hover{ border-color: #4594A2; }.bw-item-card:focus{ border-color: #4594A2; box-shadow: 0 0 0 3px rgba(69,148,162,.2); }.bw-item-card--selected{
    border-color: #4594A2;
    background: #eef7f8;
}.bw-item-card--disabled{
    opacity: 0.38;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: not-allowed;
}/* Slot picker overlay / modal */
.bw-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}/* Slot picker — transparent full-screen backdrop (iOS-safe, no pointer-events tricks) */
.bw-overlay--anchored{
    background: rgba(0,0,0,0.08);
}.bw-slot-modal{
    background: #fff;
    border-radius: 14px;
    width: min(360px, 94vw);
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}.bw-slot-modal-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e4e7ec;
    font-size: 15px;
}.bw-slot-modal-close{
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #667085;
    line-height: 1;
}.bw-slot-modal-body{
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 60vh;
    overflow-y: auto;
}.bw-slot-modal-label{
    font-size: 12px;
    font-weight: 600;
    color: #667085;
    text-transform: uppercase;
    letter-spacing: .04em;
}.bw-slot-date-input{
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}.bw-slot-option{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}.bw-slot-option:hover{ border-color: #4594A2; background: #f0fafb; }.bw-slot-option input{ flex-shrink: 0; accent-color: #4594A2; }.bw-slot-name{ flex: 1; font-size: 13px; font-weight: 600; }.bw-slot-time{ font-size: 12px; color: #667085; }/* Booked (disabled) slot row */
.bw-slot-option--booked{
    background: #f9fafb;
    border-color: #e4e7ec;
    cursor: not-allowed;
    opacity: .65;
}.bw-slot-option--booked:hover{ border-color: #e4e7ec; background: #f9fafb; }.bw-slot-booked-label{
    font-size: 11px;
    font-weight: 600;
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}.bw-slot-modal-footer{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #e4e7ec;
}/* Button row inside slot modal footer */
.bw-slot-modal-btns{
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}/* Simple toast for public widget */
.bw-toast{
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #344054;
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 13px;
    z-index: 10000;
    pointer-events: none;
    animation: bw-toast-in .2s ease;
}
@keyframes bw-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}.bw-item-header{
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
    min-width: 0; /* let flex children below shrink instead of forcing the row to overflow */
}.bw-item-icon{ font-size: 15px; flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }.bw-item-name{ flex: 1; min-width: 0; overflow-wrap: break-word; font-weight: 600; font-size: 13px; line-height: 1.3; }.bw-item-capacity{ font-size: 12px; color: #667085; white-space: nowrap; flex-shrink: 0; }/* Selected state replaces the bed/car icon with a checkmark badge in the same spot,
instead of showing both — keeps exactly one icon at the front of the card. */
.bw-item-icon--selected{
    font-size: 12px;
    background: #4594A2;
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
}.bw-no-items{
    font-size: 13px;
    color: #98a2b3;
    text-align: center;
    padding: 12px 4px;
}/* ---- Calendar panel -------------------------------------------------------- */
.bw-calendar-panel{
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    padding: 16px;
    position: relative;
}/* Two months side by side */
.cal-months-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 640px) {.cal-months-wrap{ grid-template-columns: 1fr; }
}.cal-month-block{}.cal-month-label{
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #344054;
    text-transform: capitalize;
    margin-bottom: 6px;
}.bw-cal-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}.bw-cal-footer-actions{
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}.bw-hint{
    font-size: 13px;
    color: #667085;
    margin: 0;
    min-height: 20px;
    flex: 1;
}/* "(N Nights)" moves to a new line as a whole unit when the row is too narrow for it,
instead of breaking apart between the number and the word. */
.bw-hint-nights{ white-space: nowrap; }/* Narrow phones: the date-range text and two buttons side by side left the text
   squeezed into a cramped multi-line column next to the buttons. Stack them —
   date range on its own full-width line,
buttons in an equal-width row below. */
@media (max-width: 480px){
    .bw-cal-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .bw-hint {
        text-align: center;
        min-height: 0;
    }
    .bw-cal-footer-actions {
        margin-left: 0;
        width: 100%;
    }
    .bw-cal-footer-actions .bw-btn {
        flex: 1;
    }
}.bw-number-input{
    display: flex;
    align-items: center;
    gap: 4px;
}.bw-num-btn{
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #d0d5dd;
    background: #f9fafb;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #344054;
    transition: background 0.1s;
    padding: 0;
    touch-action: manipulation;
}.bw-num-btn:hover{ background: #e4e7ec; }.bw-number-input input[type="number"]{
    width: 40px;
    text-align: center;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    padding: 3px 4px;
    font-size: 14px;
    font-weight: 600;
    color: #101828;
    -moz-appearance: textfield;
}.bw-number-input input[type="number"]::-webkit-outer-spin-button,
.bw-number-input input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; }/* Max-persons info line */
.bw-persons-warning{
    font-size: 12px;
    color: #667085;
    margin: 0 0 8px;
    padding: 4px 8px;
    background: #f9fafb;
    border-radius: 6px;
    border-left: 3px solid #4594A2;
}/* ---- Calendar nav ---------------------------------------------------------- */
.cal-nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    position: relative;
}.cal-btn-nav{
    background: #f2f4f7;
    border: none;
    border-radius: 6px;
    width: 32px; height: 32px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #344054;
    transition: background 0.15s;
    flex-shrink: 0;
    touch-action: manipulation;
}.cal-btn-nav:hover:not(:disabled){ background: #e4e7ec; }.cal-btn-nav:disabled{ opacity: 0.3; cursor: default; }/* Month title is now a button */
.cal-month-title{
    background: none;
    border: none;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    color: #101828;
    text-transform: capitalize;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s;
}.cal-month-title:hover{ background: #f2f4f7; }.cal-title-caret{ font-size: 10px; color: #98a2b3; }/* Month picker dropdown */
.cal-month-picker{
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: 8px;
    min-width: 260px;
    max-height: 240px;
    overflow-y: auto;
}/* One column per year (ascending, left to right) instead of a flat grid that mixes years
   within a row — each column lists its year's months top to bottom. */
.cal-mp-grid{
    display: flex;
    gap: 4px;
    align-items: flex-start;
}.cal-mp-col{
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
}.cal-mp-item{
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 4px;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: background 0.12s;
    color: #344054;
}.cal-mp-item:hover{ background: #f2f4f7; }.cal-mp-item--active{ background: #4594A2; color: #fff; border-color: #4594A2; }/* ---- Calendar grid --------------------------------------------------------- */
.cal-grid{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}.cal-cell{
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    user-select: none;
    position: relative;
    overflow: hidden;
    touch-action: manipulation;
}.cal-cell--header{
    font-size: 11px;
    font-weight: 600;
    color: #98a2b3;
    text-transform: uppercase;
    letter-spacing: .03em;
    aspect-ratio: auto;
    padding: 4px 0;
}.cal-cell--empty{ background: transparent; }/* Available — light green tint */
.cal-cell--available{
    cursor: pointer;
    color: #101828;
    background: #edf7f0;
}/* When no room selected{
    cursor: default;
}/* Occupied — diagonal line over entire cell (no text strikethrough) */
.cal-cell--occupied{
    background: #f2f4f7;
    color: #b0b7c3;
    cursor: not-allowed;
}.cal-cell--occupied::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top right,
        transparent calc(50% - 0.7px),
        #c5cad4,
        transparent calc(50% + 0.7px)
    );
    pointer-events: none;
}/* Checkin day (r.from — arrival): green,
right-half diagonal (incoming booking hint) */
.cal-cell--checkin-day::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top right,
        transparent calc(50% - 0.7px),
        #c5cad4,
        transparent calc(50% + 0.7px)
    );
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
    pointer-events: none;
}/* Checkout day (r.to — departure): green,
left-half diagonal (outgoing booking hint) */
.cal-cell--checkout-day::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top right,
        transparent calc(50% - 0.7px),
        #c5cad4,
        transparent calc(50% + 0.7px)
    );
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    pointer-events: none;
}/* Step-blocked boundary cells: visually available but not interactive at current step */
.cal-cell--step-blocked{
    cursor: default !important;
}/* Past dates — always show diagonal (reuses occupied ::after),
faded text */
.cal-cell--past{
    color: #d0d5dd;
    background: transparent !important;
    cursor: default !important;
}/* Selection range */
.cal-cell--selected{
    background: rgba(69,148,162,.16);
    color: #101828;
    cursor: pointer;
}.cal-cell--range-start,
.cal-cell--range-end{
    background: #4594A2 !important;
    color: #fff !important;
    font-weight: 700;
}.cal-cell--hover{
    background: rgba(69,148,162,.10);
}.cal-day-num{ pointer-events: none; line-height: 1; }/* ---- Calendar legend ------------------------------------------------------- */
.cal-legend{
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 12px;
    flex-wrap: wrap;
}.cal-legend-item{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #667085;
}.cal-legend-dot{
    width: 12px; height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}.cal-legend-dot--available{
    background: #edf7f0;
    border: 1px solid #9fd3ae;
}.cal-legend-dot--occupied{
    background: #f2f4f7;
    border: 1px solid #d0d5dd;
}.cal-legend-dot--occupied::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top right,
        transparent calc(50% - 0.6px),
        #c5cad4,
        transparent calc(50% + 0.6px)
    );
}.cal-legend-dot--selected{
    background: #4594A2;
}/* Car unavailability warning — shown when a car + room are both selected but the car
   is occupied for the chosen dates. Room booking is not blocked; this is advisory only. */
.bw-car-warning{
    background: #fff8ec;
    border: 1px solid #f79009;
    border-left: 4px solid #f79009;
    border-radius: 6px;
    color: #b54708;
    font-size: 13px;
    line-height: 1.45;
    padding: 10px 36px 10px 14px;
    margin-bottom: 12px;
    position: relative;
}.bw-warning-close{
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: #b54708;
    font-size: 16px;
    line-height: 1;
    padding: 2px 4px;
    opacity: 0.7;
}.bw-warning-close:hover{ opacity: 1; }/* ---- Summary panel --------------------------------------------------------- */
.bw-summary-card{
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    padding: 20px;
    max-width: 520px;
    margin: 0 auto;
}.bw-summary-row{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px solid #f2f4f7;
}.bw-summary-row:last-child{ border-bottom: none; }.bw-summary-row--total span,
.bw-summary-row--total strong{ font-size: 16px; }.bw-summary-divider{ height: 1px; background: #e4e7ec; margin: 4px 0; }.bw-summary-row--tax{ font-size: 12px; color: #6c757d; padding: 1px 0; }.bw-summary-row--tax span:last-child{ font-variant-numeric: tabular-nums; }.bw-summary-subrow{ display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #6c757d; padding: 1px 0 1px 16px; }.bw-summary-subrow span:last-child{ font-variant-numeric: tabular-nums; }/* Input rows (steppers / checkbox) inside summary card */
.bw-summary-row--input{
    align-items: center;
}.bw-summary-row--input .bw-number-input{
    /* shrink so it doesn't push the label */
}/* Combined Adults/Children/Infants row — up to 3 compact steppers side by side */
.bw-summary-row--guests{
    justify-content: space-between;
    gap: 16px;
}.bw-guest-stepper{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}.bw-guest-stepper-label{
    font-size: 12px;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}.bw-guest-stepper .bw-number-input input[type="number"]{
    width: 32px;
}/* FX conversion row below grand total */
.bw-fx-rates{
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    font-size: 16px;
    color: #1a1a1a;
    padding-top: 4px;
}.bw-fx-rates:empty{ display: none; }/* Toggle switch for breakfast */
.bw-toggle{
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}.bw-toggle input{ opacity: 0; width: 0; height: 0; position: absolute; }.bw-toggle-slider{
    width: 36px;
    height: 20px;
    background: #d0d5dd;
    border-radius: 20px;
    transition: background 0.2s;
    position: relative;
}.bw-toggle-slider::after{
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}.bw-toggle input:checked + .bw-toggle-slider{ background: #4594A2; }.bw-toggle input:checked + .bw-toggle-slider::after{ transform: translateX(16px); }/* Rate (avg/night) + total column inside summary rows */
.bw-summary-rate-total{
    display: flex;
    gap: 16px;
    align-items: baseline;
    white-space: nowrap;
}.bw-rate-avg{
    font-size: 12px;
    color: #98a2b3;
    font-weight: 400;
}/* ---- Guest form ------------------------------------------------------------ */
.bw-form{ max-width: 640px; margin: 0 auto; }.bw-form-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 500px) {.bw-form-row{ grid-template-columns: 1fr; }
}.bw-form-group{
    display: flex;
    flex-direction: column;
    gap: 6px;
}.bw-form-group label{
    font-size: 13px;
    font-weight: 500;
    color: #344054;
}.bw-required{ color: #e53e3e; margin-left: 2px; }.bw-form-group input[type="text"],
.bw-form-group input[type="email"],
.bw-form-group input[type="tel"],
.bw-form-group input[type="date"],
.bw-form-group select,
.bw-form-group textarea{
    padding: 9px 12px;
    border: 1.5px solid #d0d5dd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #101828;
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}.bw-form-group input:focus,
.bw-form-group select:focus,
.bw-form-group textarea:focus{
    border-color: #4594A2;
    box-shadow: 0 0 0 3px rgba(69,148,162,.15);
}.bw-form-group input[readonly]{
    background: #f2f4f7;
    color: #667085;
    cursor: default;
    border-color: #e4e7ec;
}.bw-form-group textarea{ resize: vertical; min-height: 80px; }/* ---- Booking confirmation modal ------------------------------------------- */
.bw-modal-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 24px;
    box-sizing: border-box;
}.bw-modal-card{
    background: #fff;
    border-radius: 20px;
    padding: 36px 28px 28px;
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    animation: bwModalIn .2s ease-out;
}
@keyframes bwModalIn {
    from { opacity: 0; transform: scale(.92) translateY(12px); }
    to   { opacity: 1; transform: scale(1)  translateY(0); }
}.bw-modal-icon{
    font-size: 48px;
    line-height: 1;
    margin-bottom: 16px;
}.bw-modal-title{
    font-size: 20px;
    font-weight: 700;
    color: #101828;
    margin: 0 0 12px;
}.bw-modal-message{
    font-size: 15px;
    color: #344054;
    line-height: 1.6;
    margin: 0 0 16px;
}.bw-modal-ref{
    font-size: 13px;
    color: #667085;
    background: #f2f4f7;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0 0 24px;
}.bw-modal-ok{
    width: 100%;
    padding: 13px;
    font-size: 16px;
}/* ---- Loader ---------------------------------------------------------------- */
.bw-loader{
    position: absolute;
    inset: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 100;
    border-radius: 12px;
    font-size: 14px;
    color: #667085;
    opacity: 1;
    transition: opacity 0.35s ease;
    pointer-events: auto;
}.bw-loader--fading{
    opacity: 0;
    pointer-events: none;
}.bw-spinner{
    width: 36px; height: 36px;
    border: 3px solid #e4e7ec;
    border-top-color: #4594A2;
    border-radius: 50%;
    animation: bw-spin 0.7s linear infinite;
}
@keyframes bw-spin { to { transform: rotate(360deg); } }/* ---- Errors ---------------------------------------------------------------- */
.bw-error{
    background: #fff3f3;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 12px;
}.bw-error-static{
    text-align: center;
    padding: 32px;
    color: #b91c1c;
}/* ---- Room-selection balloon hint (floats over calendar, arrow → left panel) */
.bw-select-hint{
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
    z-index: 10;
    background: #0e7490;
    color: #fff;
    border-radius: 16px;
    padding: 20px 28px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    max-width: 300px;
    box-shadow: 0 8px 32px rgba(14,116,144,.35);
    pointer-events: none;
    animation: bwBalloonFloat 2s ease-in-out infinite;
}/* Arrow pointing LEFT (toward the rooms panel) */
.bw-select-hint::before{
    content: '';
    position: absolute;
    top: 50%;
    left: -36px;
    transform: translateY(-50%);
    border: 24px solid transparent;
    border-right-color: #0e7490;
}
@keyframes bwBalloonFloat {
    0%, 100% { transform: translateY(-50%); }
    50%       { transform: translateY(calc(-50% - 7px)); }
}/* Balloon float animation when centred horizontally (mobile) */
@keyframes bwBalloonFloatMobile{
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}/* ---- Mobile / Responsive overrides --------------------------------------- */
@media (max-width: 680px){

    /* Step indicator: stays on one line, left-aligned, scrolls horizontally.
       JS calls stepsEl.scrollTo() to bring the active step to the left edge. */
    .bw-steps {
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: visible;
        scroll-behavior: smooth;
        scrollbar-width: none;       /* Firefox */
        -ms-overflow-style: none;    /* IE/Edge */
        gap: 0;
        flex-wrap: nowrap;
        margin-bottom: 20px;
        padding-bottom: 2px;         /* room for focus ring */
    }
    .bw-steps::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

    /* Keep connectors visible — they indicate progress between steps */
    .bw-step-connector {
        min-width: 20px;
        flex: 0 0 20px;
    }

    /* Ensure step labels don't wrap and push steps off-screen */
    .bw-step-label { white-space: nowrap; }

    /* Rooms / Cars: 2-column grid to save vertical space.
       minmax(0, 1fr), not bare 1fr — a bare 1fr track still won't shrink below its
       content's natural (max-content) width, which is exactly what was pushing the
       2nd column off the edge of narrow phone screens. */
    .bw-items-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
    }
    /* Tighten the card itself too — a 2-column card is only ~150px wide on a phone, and a
       single-word room name (e.g. "Schildpad", "Palmboom") has nowhere to break, so it was
       wrapping mid-word ("Palmboo" / "m"). Truncate with an ellipsis instead of wrapping —
       keeps every card the same height — and free up a little extra width for the name. */
    .bw-item-card   { padding: 8px 10px; }
    .bw-item-header { gap: 4px; }
    .bw-item-icon,
    .bw-item-icon--selected { width: 16px; height: 16px; font-size: 13px; }

    /* iOS: inputs smaller than 16px trigger auto-zoom on focus — prevent it */
    .bw-form-group input[type="text"],
    .bw-form-group input[type="email"],
    .bw-form-group input[type="tel"],
    .bw-form-group input[type="date"],
    .bw-form-group select,
    .bw-form-group textarea {
        font-size: 16px;
    }

    /* Balloon: calendar is BELOW rooms panel on mobile, so arrow points UP
       and the balloon is centred horizontally near the top of the calendar  */
    .bw-select-hint {
        top: 56px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        max-width: calc(100% - 32px);
        width: max-content;
        box-sizing: border-box;
        animation: bwBalloonFloatMobile 2s ease-in-out infinite;
    }
    /* Override left-pointing arrow → upward-pointing arrow */
    .bw-select-hint::before {
        top: -48px;
        left: 50%;
        transform: translateX(-50%);
        border: 24px solid transparent;
        border-bottom-color: #0e7490;
        border-right-color: transparent;
    }

    /* Smaller type on phones — the desktop sizes felt oversized on a narrow iframe embed */
    .booking-widget-body  { font-size: 14px; }
    .bw-step-label        { font-size: 12px; }
    .bw-step-num          { font-size: 12px; }
    .bw-prop-trigger,
    .bw-prop-option       { font-size: 13px; }
    .bw-item-name         {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bw-item-capacity     { font-size: 10px; }
    .bw-hint               { font-size: 12px; }
    .bw-btn                { font-size: 14px; padding: 9px 20px; }
    .cal-month-title       { font-size: 14px; }
    .cal-cell               { font-size: 12px; }
    .cal-cell--header       { font-size: 10px; }

    /* Step 2 "Your Selection" summary card — the main content of that whole step, missed in
       the first pass above (only the room-list/step-1 sizes were covered there). */
    .bw-summary-row                      { font-size: 13px; }
    .bw-summary-row--total span,
    .bw-summary-row--total strong,
    .bw-fx-rates                          { font-size: 15px; }
    .bw-summary-row--tax,
    .bw-summary-subrow                    { font-size: 11px; }
    .bw-guest-stepper-label               { font-size: 11px; }
    .bw-persons-warning,
    .bw-car-warning                       { font-size: 12px; }

    /* Step 3 "Your Details" form */
    .bw-form-group label                  { font-size: 12px; }

    /* Slot picker modal */
    .bw-slot-modal-header                 { font-size: 14px; }
    .bw-slot-name                         { font-size: 12px; }
    .bw-slot-time,
    .bw-slot-modal-label                  { font-size: 11px; }

    /* Adults/Children/Infants steppers: up to 3 fixed-width groups don't reliably fit on one
       row on narrow phones (long translated labels make it worse) — wrap onto a 2nd row
       instead of letting them visually overlap, and shrink the +/- buttons a bit to help
       more cases fit on a single row in the first place. */
    .bw-summary-row--guests {
        flex-wrap: wrap;
        row-gap: 12px;
    }
    .bw-guest-stepper {
        flex: 1 1 30%;
        min-width: 84px;
    }
    .bw-num-btn {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
    .bw-guest-stepper .bw-number-input input[type="number"] {
        width: 26px;
    }
}.bw-version-label{
    margin-top: 12px;
    padding: 0 4px;
    font-size: 11px;
    color: #9ca3af;
    letter-spacing: 0.03em;
}

/* "Bedrooms occupied" choice for a multi-bedroom unit (House, Apartment, …) in the summary card */
.bw-summary-row--bedrooms .bw-bedrooms-select{
    font-size: 12px;
    padding: 3px 6px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #fff;
    color: #101828;
    max-width: 58%;
}
.bw-summary-row--bedrooms .bw-bedrooms-select:focus{
    outline: none;
    border-color: #98a2b3;
}

/* A guest stepper that does not apply right now (e.g. Children when the adults already fill the
   room) keeps its slot in the row so its neighbours never shift — see compactStepper(). */
.bw-guest-stepper--hidden{
    visibility: hidden;
    pointer-events: none;
}