/**
 * Sales Igniter Rentals & Bookings Regular -- the add-on's date pickers and
 * product page layout, on top of the base plugin's skin (sibooking-calendar-ui.css,
 * which this file depends on and follows):
 *
 *  - the "Separate Date Pickers" fields and their popup calendars and time popover
 *  - the "In Line Range Picker" (the guided panel without the popup)
 *  - the fixed rental types: the rental length dropdown and the departure cards
 *  - "Modern Pricing & Layout": the booking bar and the collapsed confirmation row
 *
 * Everything coloured derives from the base skin's custom properties
 * (--sib-accent, --sib-radius and the tokens on .sib-cal / .sib-fp / .sib-pricing).
 */

/* ----------------------------------------------------- separate: fields */
.sib-fields { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 0 0 8px; }
.sib-field-group { flex: 1 1 220px; min-width: 0; position: relative; }
.sib-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sib-soft); margin: 0 0 6px; }
.sib-cal .sibooking-datecontainer { display: flex; gap: 8px; align-items: center; width: 100%; }
.sib-cal .sibooking-datecontainer .flatpickr-input[type="hidden"] { display: none; }
.sib-cal input.sib-input, .sib-cal .sibooking-datecontainer input.form-control {
    height: 46px; padding: 0 14px; border: 1px solid #d5dce5; border-radius: var(--sib-radius); background: var(--sib-card);
    font-size: 15px; color: var(--sib-navy); font-weight: 600; width: 100%; min-width: 0; cursor: pointer; box-shadow: none; margin: 0;
}
.sib-cal .sibooking-datecontainer .form-control { flex: 1 1 60%; }
.sib-cal input.sib-time-field { flex: 0 1 38%; }
.sib-cal input.sib-input:focus, .sib-cal .sibooking-datecontainer input.form-control:focus, .sib-cal input.sib-input.active { outline: none; border-color: var(--sib-accent); box-shadow: 0 0 0 3px var(--sib-tint); }
.sib-cal input.sib-input::placeholder { color: var(--sib-soft); font-weight: 400; }
.sib-cal .sib-fixedlength { margin-bottom: 12px; gap: 10px; }
.sib-style-classic input.sib-input { border-radius: 4px; }

/* the guided panel on a fixed-date product: the departures beside the calendar */
.sib-cal--inline .sib-stage[data-active="period"] .sib-pane--date,
.sib-cal--inline .sib-stage[data-active="period"] .sib-pane--period { display: block; }
@container sibcal (min-width: 640px) {
    .sib-cal--inline.has-time .sib-stage[data-active="period"] .sib-pane--time { display: none; }
}

/* separate: the time pane is a popover under the time field */
.sib-cal--separate { position: relative; }
.sib-cal--separate .sib-stage { position: static; }
.sib-cal--separate .sib-pane--time { display: none; position: absolute; z-index: 9999; width: min(392px, 100%); }
.sib-cal--separate .sib-pane--time.is-open { display: block; }
.sib-cal--separate .sib-stage { min-height: 0; }
.sib-cal--separate .sib-pane--period { margin-top: 10px; }

/* separate: the popup calendars */
.sib-fp.sib-fp--popup.flatpickr-calendar { width: 336px; background: var(--sib-card); border: 1px solid var(--sib-line); border-radius: calc(var(--sib-radius) + 4px); box-shadow: 0 12px 32px rgba(16, 36, 61, .12); padding: 12px; z-index: 99999; font-family: inherit; }
.sib-fp.sib-fp--popup .flatpickr-day { --sib-cell: 40px; }
.sib-fp.sib-fp--popup.flatpickr-calendar::before, .sib-fp.sib-fp--popup.flatpickr-calendar::after { display: none; }
.sib-style-classic .sib-fp.sib-fp--popup.flatpickr-calendar { border-radius: 5px; box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, .08); padding: 6px; }

/* --------------------------------------------------------- fixed dates */
.sib-cal .sib-pane--period .sib-pane-head { margin-bottom: 10px; }
.sib-cal .sib-period-empty { margin: 0; padding: 14px; border: 1px dashed #d5dce5; border-radius: var(--sib-radius); color: var(--sib-muted); font-size: 13px; text-align: center; }
.sib-periods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sib-cal .sib-period {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-block: 10px; padding-inline: 12px 26px; margin: 0;
    border-radius: var(--sib-radius); border: 1px solid #d5dce5; background: var(--sib-card); color: var(--sib-ink);
    font: inherit; line-height: 1.25; text-align: start; cursor: pointer; width: 100%;
}
.sib-cal .sib-period:hover, .sib-cal .sib-period:focus-visible { border-color: var(--sib-accent); outline: none; }
.sib-cal .sib-period.sibooking-fixeddate-chosen, .sib-cal .sib-period.sibooking-fixeddate-chosen:hover { background: var(--sib-accent); border-color: var(--sib-accent); color: #fff; }
.sib-period-when { font-size: 14px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.sib-period-t { white-space: nowrap; }
.sib-period-arrow { color: var(--sib-soft); font-weight: 400; }
.sib-cal .sib-period.sibooking-fixeddate-chosen::after { content: "\2713"; position: absolute; top: 8px; inset-inline-end: 10px; font-size: 12px; line-height: 1; }
.sib-legend-bar { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--sib-accent); vertical-align: middle; margin-inline-end: 6px; }
.sib-cal .sib-period.sibooking-fixeddate-chosen .sib-period-arrow { color: rgba(255, 255, 255, .8); }
.sib-period-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; color: var(--sib-muted); }
.sib-period-dur { font-weight: 600; }
.sib-period-until::before { content: "·"; margin-inline-end: 6px; }
.sib-cal .sib-period.sibooking-fixeddate-chosen .sib-period-meta { color: rgba(255, 255, 255, .85); }
.sib-cal .sib-period.sibooking-fixeddate-chosen .sib-left { background: rgba(255, 255, 255, .25); color: #fff; }
/* days that have a departure carry a small accent bar under the number */
.sib-fp .flatpickr-day.sib-has-period:not(.selected)::before { content: ""; position: absolute; bottom: 5px; width: 14px; height: 3px; border-radius: 2px; background: var(--sib-accent); opacity: .8; }
.sib-fp .flatpickr-day.sib-has-period { font-weight: 700; }
.sib-cal--separate .sib-periods { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.sib-style-bold .sib-pane--period { padding: 14px 16px; }

/* =============================================================================
   "Modern Pricing & Layout" (Calendar Styler > Product page layout): the booking
   bar (.sib-summary) and the collapsed confirmation row. "Modern Pricing" gets the
   card but not .sib-layout-modern, so these rules apply to the full layout only.
   ============================================================================= */

/* ------------------------------------------------------------ booking bar */
.sib-layout-modern .sib-summary { position: relative; z-index: 4; margin: 14px 0 0; padding: 12px 16px; gap: 10px 14px; align-items: center; background: var(--sib-card); border: 1px solid var(--sib-line); border-radius: calc(var(--sib-radius) + 2px); box-shadow: 0 -10px 30px rgba(16, 36, 61, .12); color: var(--sib-ink); }
/* the inline picker's bar sticks to the bottom of the viewport while the calendar is on screen */
.sib-layout-modern.sib-cal--inline:not(.sib-cal--popup) .sib-summary { position: sticky; bottom: 0; }
.sib-layout-modern.sib-cal--inline:not(.sib-cal--popup).is-collapsed .sib-summary { position: relative; box-shadow: none; background: var(--sib-ground); }
.sib-layout-modern .sib-summary-text { flex: 1 1 160px; min-width: 0; gap: 1px; }
.sib-layout-modern .sib-summary-text b { font-size: 20px; font-weight: 800; color: var(--sib-accent); letter-spacing: -.02em; line-height: 1.2; }
.sib-layout-modern .sib-summary-text b .woocommerce-Price-amount, .sib-layout-modern .sib-summary-text b bdi { color: inherit; font-size: inherit; font-weight: inherit; }
.sib-layout-modern .sib-summary-text b.sib-wait { font-size: 15px; font-weight: 700; color: var(--sib-navy); letter-spacing: 0; }
.sib-layout-modern .sib-summary-text small { font-size: 12.5px; color: var(--sib-muted); line-height: 1.35; }
.sib-summary-lines { display: none; flex: 1 1 100%; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; font-size: 13.5px; font-variant-numeric: tabular-nums; padding-bottom: 8px; border-bottom: 1px dashed var(--sib-line); }
.sib-layout-modern.is-complete .sib-summary-lines:not(:empty) { display: grid; }
.sib-summary-lines .sib-line-k { color: var(--sib-muted); min-width: 0; }
.sib-summary-lines .sib-line-v { text-align: end; white-space: nowrap; }
.sib-summary-lines .sib-line-v .woocommerce-Price-amount { color: inherit; font-weight: inherit; }
.sib-summary-lines .sib-line--discount { color: var(--sib-ok); }
/* How many and Reserve (with its total) can be wider than the bar: they wrap, Reserve to a row of its own, and
   never stick out of the card (a theme's larger type made "Reserve · $135.00" overhang it by 50px) */
.sib-summary-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; flex: 0 1 auto; min-inline-size: 0; max-inline-size: 100%; margin-inline-start: auto; }
.sib-summary-actions:empty { display: none; }
.sib-layout-modern .sib-summary .quantity { margin: 0; float: none; display: inline-flex; align-items: center; }
.sib-layout-modern .sib-summary .quantity input.qty { height: 40px; width: 64px; min-width: 0; margin: 0; border: 1px solid var(--sib-line); border-radius: var(--sib-radius); background: var(--sib-card); color: var(--sib-ink); text-align: center; font-weight: 700; padding: 0 4px; }
/* min-width: max-content is load-bearing. refreshPrice() appends .sib-btn-total ("· $900.00")
   to the button after it has been laid out, and themes commonly set an explicit width on
   .single_add_to_cart_button -- Astra does -- which a plain `width: auto` here loses to on
   specificity. The button then keeps its pre-price width and the total prints straight over
   its right padding and off the edge of the blue box. min-width wins over width in CSS
   sizing whatever the theme declares, so the button always grows to fit its own label. */
.sib-layout-modern .sib-summary .single_add_to_cart_button { margin: 0; height: 40px; line-height: 40px; padding: 0 20px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--sib-radius); float: none; flex: 0 0 auto; min-width: max-content; max-width: 100%; }
.sib-layout-modern .sib-summary .single_add_to_cart_button.sib-needs-dates, .sib-layout-modern .sib-summary .single_add_to_cart_button.sib-needs-dates:hover { background: var(--sib-line); border-color: var(--sib-line); color: var(--sib-soft); cursor: not-allowed; opacity: 1; }
.sib-btn-total { font-weight: 400; opacity: .92; white-space: nowrap; margin-inline-start: 6px; }
.sib-btn-total .woocommerce-Price-amount { color: inherit; font-weight: inherit; }
.sib-layout-modern .sib-summary .sib-reset { order: 10; height: auto; padding: 0; border: 0; background: none; color: var(--sib-muted); text-decoration: underline; text-underline-offset: 3px; font-size: 12.5px; }
.sib-layout-modern .sib-summary .sib-reset:hover { color: var(--sib-accent); }
.sib-layout-modern .sib-summary .sibooking-before-button-container { order: 5; }
/* phones: full-width bottom bar while the calendar is open (same 640px breakpoint as the popup sheet) */
@media (max-width: 640px) {
    .sib-layout-modern.sib-cal--inline:not(.sib-cal--popup):not(.is-collapsed) .sib-summary { width: 100vw; max-width: 100vw; margin-inline-start: calc(50% - 50vw); border-radius: 0; border-inline-start: 0; border-inline-end: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
    .sib-layout-modern .sib-summary-text b { font-size: 18px; }
    .sib-layout-modern .sib-summary .single_add_to_cart_button { padding: 0 16px; }
    /* How many (a round − / + stepper) and Reserve do not fit one phone row: Reserve takes a row of its own */
    .sib-layout-modern .sib-summary-actions { flex: 1 1 100%; flex-wrap: wrap; row-gap: 10px; }
    .sib-layout-modern .sib-summary-actions > .single_add_to_cart_button { flex: 1 1 100%; }
}

/* ------------------------------------------------------- confirmation row */
.sib-confirm { display: none; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--sib-line); border-radius: calc(var(--sib-radius) + 2px); background: var(--sib-card); font-size: 14px; max-width: 460px; }
.sib-cal--inline.has-time .sib-confirm { max-width: 760px; }
.sib-cal.is-collapsed .sib-confirm { display: flex; }
.sib-cal.is-collapsed .sib-stage { display: none; }
.sib-confirm-ok { width: 22px; height: 22px; border-radius: 50%; background: var(--sib-ok-bg); color: var(--sib-ok); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sib-confirm-ok svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sib-confirm-text { min-width: 0; }
.sib-confirm-text b { color: var(--sib-navy); }
.sib-confirm-len { color: var(--sib-muted); }
.sib-cal .sib-confirm-change { margin-inline-start: auto; color: var(--sib-accent); font-weight: 700; font-size: 13px; cursor: pointer; background: none; border: 0; padding: 4px 0; flex: 0 0 auto; }
.sib-cal .sib-confirm-change:hover { text-decoration: underline; text-underline-offset: 3px; background: none; color: var(--sib-accent); }
.sib-style-bold .sib-confirm { background: var(--sib-navy); color: #fff; border-color: var(--sib-navy); }
.sib-style-bold .sib-confirm-text b { color: #fff; }
.sib-style-bold .sib-confirm-len { color: #b9c6d6; }

/* ------------------------------------------------------ the party in the bar */
.sib-summary .sib-guests { margin: 0; max-width: none; flex: 0 1 auto; }
/* the booking bar sticks to the bottom of the screen: its dialog opens upwards */
.sib-summary .sib-guests--multi.is-enhanced .sib-guests-pop { inset-block-start: auto; inset-block-end: calc(100% + 8px); }
.sib-style-bold .sib-summary .sib-guests-label, .sib-style-bold .sib-summary .sib-guests-value, .sib-style-bold .sib-summary .sib-guests-title { color: #fff; }
@media (max-width: 640px) {
    .sib-summary .sib-guests--multi.is-enhanced .sib-guests-pop { position: fixed; inset-inline: 0; inset-block-start: auto; inset-block-end: 0; z-index: 100001; inline-size: auto; max-inline-size: none; max-block-size: 85vh; overflow-y: auto; border-radius: 16px 16px 0 0; padding-block-end: calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(16, 36, 61, .22); }
}

/* ------------------------------------ the phone booking bar, after the collapse
   While the calendar is open the bar sticks to the bottom of the calendar; once
   every step is done it docks to the bottom of the screen instead, so the total
   and Reserve stay in reach wherever the page is scrolled. */
@media (max-width: 640px) {
    .sib-layout-modern.sib-cal--inline:not(.sib-cal--popup).is-collapsed .sib-summary { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 9990; width: auto; max-width: none; margin: 0; border-radius: 0; border-inline-start: 0; border-inline-end: 0; border-block-end: 0; background: var(--sib-card); box-shadow: 0 -10px 30px rgba(16, 36, 61, .14); padding-block: 10px calc(10px + env(safe-area-inset-bottom)); padding-inline: 16px; }
    .sib-layout-modern.sib-cal--inline:not(.sib-cal--popup).is-collapsed .sib-summary .sib-summary-lines,
    .sib-layout-modern.sib-cal--inline:not(.sib-cal--popup).is-collapsed .sib-summary .sib-reset { display: none; }
    body.sib-bar-docked { padding-block-end: 96px; }
}

/* the fixed-length "Rental Length" choice, drawn like the other fields (it was the browser's select: 20px tall
   and in Arial in a block theme, under a 22px light label) */
.sib-cal .sibooking-flex-label label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--sib-navy); }
.sib-cal .sibooking-datecontainer select { inline-size: 100%; min-block-size: 44px; margin: 0; padding-block: 0; padding-inline: 12px; border: 1px solid #d5dce5; border-radius: var(--sib-radius); background-color: var(--sib-card); color: var(--sib-ink); font-family: inherit; font-size: 15px; line-height: 1.3; box-shadow: none; }
.sib-cal .sibooking-datecontainer select:focus-visible { outline: 2px solid var(--sib-accent); outline-offset: 2px; border-color: var(--sib-accent); }