/**
 * Sales Igniter Rental -- the rental search widget (widgets/search/markup.phtml, js/search/sibookingSearch.js),
 * Luma and Hyvä alike. Colours and corners come from the Calendar Styler's tokens (--sib-accent, --sib-accent-rgb,
 * --sib-radius; defaults in sibooking-calendar-ui.css), so the form matches the product calendar. The widget prints
 * them itself, with the Search Styler's own colours (--sibs-*), in a <style> scoped to its id
 * (Model\Search\SearchStyle::cssFor(): only the values that differ from the defaults below), so a page with a search
 * form and no product calendar wears the store's colours too. Logical properties throughout (RTL). The layout follows
 * the widget's own width (a container query), so a bar in a narrow sidebar stacks as it does on a phone.
 *
 * Every rule is scoped under .sib-search, .sib-fp--search or .sib-search-panel, so a theme that restyles flatpickr
 * does not leak in and nothing here leaks out.
 *
 * Font sizes in em, not rem: Luma's root is 10px (62.5%), Hyvä's 16px; the widget follows the text around it.
 *
 * Layouts: .sib-search--bar (one row), --stacked (one column), --card (a column on a card), --pill (a rounded row).
 */
.sib-search {
    /* the Search Styler's seven colours (Model\Search\SearchStyle::COLOR_VARS) and their defaults */
    --sibs-ink: #1f2a37;
    --sibs-muted: #5b6b7f;
    --sibs-line: #d5dce6;
    --sibs-field: #ffffff;
    --sibs-button-text: #ffffff;
    --sibs-surface: var(--sibs-card);
    --sibs-card: #ffffff;
    --sibs-ground: #f6f8fb;
    --sibs-accent: var(--sib-accent, #0274be);
    --sibs-accent-rgb: var(--sib-accent-rgb, 2, 116, 190);
    --sibs-radius: var(--sib-radius, 10px);
    --sibs-gap: 12px;
    container-type: inline-size;
    container-name: sibsearch;
    color: var(--sibs-ink);
    margin-block: 0 24px;
    max-inline-size: 100%;
    box-sizing: border-box;
}
.sib-search *, .sib-search *::before, .sib-search *::after { box-sizing: border-box; }
.sib-search [hidden] { display: none !important; }

.sib-search__form { margin: 0; }
.sib-search__heading { font-size: 1.25em; font-weight: 600; margin: 0 0 12px; }
.sib-search__fields { display: flex; flex-wrap: wrap; gap: var(--sibs-gap); align-items: flex-end; }
.sib-search__field { display: flex; flex-wrap: wrap; gap: var(--sibs-gap); flex: 1 1 160px; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.sib-search__field--dates { flex: 2 1 260px; }
.sib-search__field--qty { flex: 0 1 140px; }
.sib-search__field--duration { flex: 2 1 260px; }
.sib-search__control { display: flex; flex-direction: column; gap: 4px; flex: 1 1 120px; min-inline-size: 0; position: relative; }
.sib-search__label, .sib-search__legend {
    font-size: 0.8125em; font-weight: 600; color: var(--sibs-muted); margin: 0; padding: 0; line-height: 1.3;
}
/* .sib-search first: Luma's input[type="text"] (0,1,1) would win over a single class */
.sib-search .sib-search__input, .sib-search .sib-search__select {
    inline-size: 100%; min-block-size: 44px; padding: 8px 12px; margin: 0;
    font: inherit; font-size: 1em; color: var(--sibs-ink); background-color: var(--sibs-field);
    border: 1px solid var(--sibs-line); border-radius: var(--sibs-radius);
    appearance: none; -webkit-appearance: none;
}
.sib-search__select { padding-inline-end: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--sibs-muted) 50%), linear-gradient(135deg, var(--sibs-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] .sib-search__select { background-position: 13px 50%, 18px 50%; }
/* the focus ring: 2 px in the accent colour, on every control (a theme's outline: none must not win) */
.sib-search .sib-search__input:focus, .sib-search .sib-search__select:focus, .sib-search .sib-search__step:focus-visible,
.sib-search .sib-search__submit:focus-visible, .sib-search .sib-search__guests-toggle:focus-visible,
.sib-search .sib-search__chip input:focus-visible + span, .sib-search .sib-search__try-chip:focus-visible {
    outline: 2px solid var(--sibs-accent); outline-offset: 2px; box-shadow: none;
}
.sib-search input[readonly].sib-search__input { cursor: pointer; }

/* steppers: quantity and guests */
.sib-search__stepper { display: flex; align-items: stretch; inline-size: 100%; }
.sib-search__stepper .sib-search__input { text-align: center; border-radius: 0; min-inline-size: 48px; -moz-appearance: textfield; }
.sib-search__stepper .sib-search__input::-webkit-outer-spin-button,
.sib-search__stepper .sib-search__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sib-search__stepper .sib-search__input:first-child:last-child { border-radius: var(--sibs-radius); }
.sib-search__step {
    flex: 0 0 44px; min-block-size: 44px; font: inherit; font-size: 1.25em; line-height: 1; cursor: pointer;
    color: var(--sibs-ink); background: var(--sibs-ground); border: 1px solid var(--sibs-line); padding: 0;
}
.sib-search__step:first-child { border-start-start-radius: var(--sibs-radius); border-end-start-radius: var(--sibs-radius); border-inline-end: 0; }
.sib-search__step:last-child { border-start-end-radius: var(--sibs-radius); border-end-end-radius: var(--sibs-radius); border-inline-start: 0; }
.sib-search__step:disabled { opacity: 0.4; cursor: default; }

/* duration chips (radio inputs) */
.sib-search__chips { display: flex; flex-wrap: wrap; gap: 8px; inline-size: 100%; }
.sib-search__chip { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.sib-search__chip input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; margin: 0; }
.sib-search__chip span {
    display: inline-flex; align-items: center; min-block-size: 44px; padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--sibs-line); background: var(--sibs-card); font-size: 0.9375em; white-space: nowrap;
}
.sib-search__chip input:checked + span { background: var(--sibs-accent); border-color: var(--sibs-accent); color: var(--sibs-button-text); }
/* the Category field as chips (Search Styler > Category style): the select stays, out of sight, for no-JS */
.sib-search__chips--category { margin-block-start: 2px; }
.sib-search__chips--category .sib-search__chip span { min-block-size: 40px; }

/* guests popover */
.sib-search__field--guests { position: relative; }
.sib-search__guests-toggle {
    inline-size: 100%; min-block-size: 44px; padding: 8px 12px; text-align: start; font: inherit; font-size: 1em;
    color: var(--sibs-ink); background: var(--sibs-field); border: 1px solid var(--sibs-line); border-radius: var(--sibs-radius); cursor: pointer;
}
.sib-search__guests { display: flex; flex-direction: column; gap: 10px; inline-size: 100%; }
.sib-search__guests.is-popover {
    position: absolute; z-index: 30; inset-block-start: calc(100% + 6px); inset-inline-start: 0; inline-size: max(100%, 280px);
    padding: 16px; background: var(--sibs-card); border: 1px solid var(--sibs-line); border-radius: var(--sibs-radius);
    box-shadow: 0 12px 32px rgba(16, 36, 61, 0.16);
}
.sib-search__guest-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sib-search__guest-row .sib-search__stepper { inline-size: auto; flex: 0 0 150px; }
.sib-search__guests-done {
    align-self: flex-end; min-block-size: 40px; padding: 6px 16px; font: inherit; cursor: pointer; border-radius: var(--sibs-radius);
    background: transparent; color: var(--sibs-accent); border: 1px solid var(--sibs-accent);
}

/* submit */
.sib-search__actions { display: flex; align-items: flex-end; }
.sib-search__submit {
    min-block-size: 44px; padding: 10px 24px; font: inherit; font-size: 1em; font-weight: 600; cursor: pointer;
    color: var(--sibs-button-text); background: var(--sibs-accent); border: 1px solid var(--sibs-accent); border-radius: var(--sibs-radius);
    text-transform: none; letter-spacing: normal; box-shadow: none;
}
.sib-search__submit:hover { filter: brightness(0.94); }
/* Hyvä's and Luma's button styles must not repaint ours (.action.primary) */
.sib-search .sib-search__submit.action.primary, .sib-search .sib-search__submit.action.primary:hover {
    color: var(--sibs-button-text); background: var(--sibs-accent); border-color: var(--sibs-accent);
}
.sib-search__message { margin: 8px 0 0; color: #b8560d; font-size: 0.875em; }
.sib-search__sr { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Search Styler > Hide the labels: out of sight, never removed (screen readers and the inputs' for= keep them) */
.sib-search--labels-hidden .sib-search__label, .sib-search--labels-hidden .sib-search__legend {
    position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0;
}
.sib-search--labels-hidden .sib-search__guest-row .sib-search__label { position: static !important; inline-size: auto; block-size: auto; clip: auto; overflow: visible; }

/* the shadow (Search Styler > Shadow; default: card only) and the panel colour (--sibs-surface) */
.sib-search--surface .sib-search__form, .sib-search--shadow .sib-search__form {
    padding: 16px; background: var(--sibs-surface); border-radius: calc(var(--sibs-radius) + 4px);
}
.sib-search--shadow .sib-search__form { box-shadow: 0 8px 24px rgba(16, 36, 61, 0.1); }

/* bar: one row, the button at its end */
.sib-search--bar .sib-search__form, .sib-search--pill .sib-search__form { display: flex; flex-wrap: wrap; gap: var(--sibs-gap); align-items: flex-end; }
.sib-search--bar .sib-search__heading, .sib-search--pill .sib-search__heading { flex: 1 0 100%; }
.sib-search--bar .sib-search__fields, .sib-search--pill .sib-search__fields { flex: 1 1 auto; }
.sib-search--bar .sib-search__message, .sib-search--pill .sib-search__message { flex: 1 0 100%; }

/* stacked and card: one column */
.sib-search--stacked .sib-search__fields, .sib-search--card .sib-search__fields { flex-direction: column; align-items: stretch; }
.sib-search--stacked .sib-search__field, .sib-search--card .sib-search__field { flex: 0 0 auto; }
.sib-search--stacked .sib-search__actions, .sib-search--card .sib-search__actions { margin-block-start: var(--sibs-gap); }
.sib-search--stacked .sib-search__submit, .sib-search--card .sib-search__submit { inline-size: 100%; }
.sib-search--card .sib-search__form {
    padding: 20px; background: var(--sibs-surface); border: 1px solid var(--sibs-line); border-radius: calc(var(--sibs-radius) + 4px);
}
.sib-search--card.sib-search--flat .sib-search__form { box-shadow: none; }

/* pill: a rounded row */
.sib-search--pill .sib-search__form {
    padding: 8px 8px 8px 20px; background: var(--sibs-surface); border: 1px solid var(--sibs-line); border-radius: 999px;
    align-items: center;
}
.sib-search--pill.sib-search--shadow .sib-search__form { box-shadow: 0 6px 20px rgba(16, 36, 61, 0.1); }
[dir="rtl"] .sib-search--pill .sib-search__form { padding: 8px 20px 8px 8px; }
.sib-search--pill .sib-search__input, .sib-search--pill .sib-search__select, .sib-search--pill .sib-search__guests-toggle { border-color: transparent; background-color: transparent; }
.sib-search--pill .sib-search__submit { border-radius: 999px; }

/* narrow (the widget's own width): every layout stacks, the button spans the width */
@container sibsearch (max-width: 640px) {
    .sib-search__form, .sib-search--bar .sib-search__form, .sib-search--pill .sib-search__form { display: block; }
    .sib-search__fields { flex-direction: column; align-items: stretch; }
    .sib-search__field, .sib-search__field--dates, .sib-search__field--qty, .sib-search__field--duration { flex: 0 0 auto; }
    .sib-search__actions { margin-block-start: var(--sibs-gap); }
    .sib-search__submit { inline-size: 100%; }
    .sib-search--pill .sib-search__form { border-radius: calc(var(--sibs-radius) + 8px); padding: 16px; }
    .sib-search--pill .sib-search__input, .sib-search--pill .sib-search__select, .sib-search--pill .sib-search__guests-toggle { border-color: var(--sibs-line); background-color: var(--sibs-field); }
}

/* a phone: the guests popover is a bottom sheet */
@media (max-width: 640px) {
    .sib-search__guests.is-popover {
        position: fixed; inset-inline: 0; inset-block-end: 0; inset-block-start: auto; inline-size: 100%; z-index: 1000;
        border-radius: 16px 16px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
        box-shadow: 0 -12px 32px rgba(16, 36, 61, 0.2);
    }
}

/* ---- the search's pop-up calendar (flatpickr, appended to <body>: .sib-fp--search, js/popupPlacement.js) -------------
   The skin is the Calendar Styler's .sib-fp--popup (sibooking-calendar-ui.css); the widget's <style> gives it the
   search's accent and radius through [data-sib-search="<id>"]. Under or over its field, or, on a phone without the
   room, a bottom sheet over the dimmed page. */
.sib-fp.sib-fp--search.flatpickr-calendar { z-index: 100000; }
.sib-fp.sib-fp--search.sib-fp--sheet.flatpickr-calendar {
    position: fixed !important; inset-inline: 0; inset-block-end: 0; top: auto !important; left: 0 !important; right: 0 !important;
    width: auto !important; max-width: none !important; max-height: 92vh; overflow-y: auto; margin: 0;
    border-radius: calc(var(--sib-radius) + 8px) calc(var(--sib-radius) + 8px) 0 0; border-block-end: 0;
    padding: 14px 12px max(14px, env(safe-area-inset-bottom)); box-shadow: 0 -12px 32px rgba(16, 36, 61, 0.2);
}
.sib-search-backdrop { position: fixed; inset: 0; background: rgba(16, 36, 61, 0.45); z-index: 99998; }
html.sib-search-sheet-open, html.sib-search-sheet-open body { overflow: hidden; }
@keyframes sib-search-sheet-in { from { transform: translateY(32px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
    .sib-fp.sib-fp--search.sib-fp--sheet.flatpickr-calendar.open, .sib-search-panel.is-sheet { animation: sib-search-sheet-in 0.2s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
    .sib-fp.sib-fp--search.flatpickr-calendar.animate.open { animation: none; }
}

/* the guided calendar (phase 4): the one range calendar of the search carries the Calendar Styler's steps, the line
   that says what to pick, and Start over / Done (js/search/sibookingSearch.js guide()). The rules mirror the Rental
   Calendar widget's .sib-cal ones, scoped to the search's pop-up. */
.sib-fp--search .sib-search-guide { margin: 2px 2px 8px; line-height: 1.3; text-align: start; }
/* flatpickr's month arrows sit at the top of its pop-up: keep them on the month row, under the steps (a padded month
   row, as in the bold skin, stays inside the pop-up) */
.sib-fp--search.sib-fp--guided .flatpickr-months { position: relative; box-sizing: border-box; }
.sib-fp--search .sib-steps { display: flex; gap: 6px; margin: 0 0 10px; }
.sib-fp--search .sib-step { flex: 1 1 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0; padding: 0;
    background: none; border: 0; box-shadow: none; text-align: start; font: inherit; color: inherit; cursor: default; }
.sib-fp--search .sib-step.is-reachable { cursor: pointer; }
.sib-fp--search .sib-step:disabled { opacity: 1; }
.sib-fp--search .sib-step-bar { display: block; height: 4px; border-radius: 2px; background: var(--sib-line); }
.sib-fp--search .sib-step.is-done .sib-step-bar, .sib-fp--search .sib-step.is-on .sib-step-bar { background: var(--sib-accent); }
.sib-fp--search .sib-step.is-on .sib-step-bar { box-shadow: 0 0 0 2px var(--sib-tint-strong); }
.sib-fp--search .sib-step-t { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7a8c;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sib-fp--search .sib-step.is-done .sib-step-t, .sib-fp--search .sib-step.is-on .sib-step-t { color: var(--sib-navy); }
.sib-fp--search .sib-step-v { font-size: 12px; color: var(--sib-muted); min-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sib-fp--search .sib-step.is-done .sib-step-v { color: var(--sib-accent); font-weight: 700; }
.sib-fp--search .sib-step.is-reachable:focus-visible { outline: none; }
.sib-fp--search .sib-step.is-reachable:focus-visible .sib-step-bar { box-shadow: 0 0 0 3px var(--sib-tint-strong); }
.sib-fp--search .sib-pane-head { margin: 0; min-height: 15px; }
.sib-fp--search .sib-pane-head .sib-h { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sib-muted); }
/* the bold skin's dark band (sibooking-calendar-ui.css .sib-style-bold .sib-pane-head) keeps its light text */
.sib-fp--search.sib-style-bold .sib-pane-head { border-radius: var(--sib-radius); padding: 10px 14px; }
.sib-fp--search.sib-style-bold .sib-pane-head .sib-h { color: rgba(255, 255, 255, .85); }
.sib-fp--search .sib-search-panelfoot { display: flex; justify-content: space-between; align-items: center; gap: 8px; line-height: 1.3;
    margin: 10px 2px 2px; padding-top: 10px; border-top: 1px solid var(--sib-line); }
.sib-fp--search .sib-reset, .sib-fp--search .sib-search-done { display: inline-flex; align-items: center; justify-content: center;
    height: 36px; margin: 0; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
    cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: normal; }
.sib-fp--search .sib-reset { border: 1px solid var(--sib-line); background: var(--sib-card); color: var(--sib-muted); }
.sib-fp--search .sib-reset:hover { border-color: var(--sib-accent); color: var(--sib-accent); }
.sib-fp--search .sib-search-done { border: 1px solid var(--sib-accent); background: var(--sib-accent); color: var(--sibs-button-text, #fff); }
.sib-fp--search .sib-search-done:hover { filter: brightness(0.94); }
.sib-fp--search .sib-reset:focus-visible, .sib-fp--search .sib-search-done:focus-visible { outline: 2px solid var(--sib-accent); outline-offset: 2px; }

/* a category or quick-search page honouring the searched dates (Block\Search\DateBar, phase 8) */
.sirent-search-datebar > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.sirent-search-datebar__dates { font-weight: 600; }
.sirent-search-datebar .sirent-search-where, .sirent-search-datebar .sirent-search-qty { color: #5b6b7f; }
.sirent-search-datebar__clear { margin-inline-start: auto; white-space: nowrap; }
/* mark mode: a rental that is not free for the dates stays listed, greyed, saying so (Model\Search\CardPrice) */
.sirent-search-unavailable { margin: 0 0 4px; font-weight: 600; color: #8a4a12; }
.product-item:has(.sirent-search-price.is-unavailable) .product-item-photo,
.product-item:has(.sirent-search-price.is-unavailable) .product-image-photo { opacity: .45; filter: grayscale(1); }
.product-item:has(.sirent-search-price.is-unavailable) .product-item-name,
.product-item:has(.sirent-search-price.is-unavailable) .sirent-search-from { opacity: .65; }