/* Flight Search module - all colors/sizes come from CSS custom properties
   set inline per-instance (see tmpl/default.php), so multiple instances
   with different admin-configured designs can coexist on one page. */

.b2f-flightsearch {
    --b2f-radius: 8px;
    position: relative;
    z-index: 1;
    background: var(--b2f-bg, #10193b);
    color: var(--b2f-text, #ffffff);
    font-family: var(--b2f-font, inherit);
    border-radius: var(--b2f-radius);
    padding: 20px;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
}

.b2f-flightsearch *,
.b2f-flightsearch *::before,
.b2f-flightsearch *::after {
    box-sizing: border-box;
    font-family: inherit;
}

.b2f-flightsearch__intro {
    margin: 0 0 16px 0;
}

/* --- Tabs (Book Flight / Scenic Flight / Find Reservation) --- */
.b2f-flightsearch__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 18px;
}

.b2f-flightsearch__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--b2f-text, #fff);
    padding: 12px 20px;
    border-radius: var(--b2f-radius);
    cursor: pointer;
    font-size: var(--b2f-label-size, 13px);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.65;
}

.b2f-flightsearch__tab[aria-selected="true"] {
    opacity: 1;
    background: var(--b2f-accent, #c0281c);
    color: #fff;
}

.b2f-flightsearch__tab svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

/* --- One-way / Return switch --- */
.b2f-flightsearch__switch-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px 4px;
    font-size: var(--b2f-label-size, 13px);
}

.b2f-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex: none;
}

.b2f-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.b2f-switch__track {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    transition: background 0.15s ease;
    cursor: pointer;
}

.b2f-switch__track::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.b2f-switch input:checked + .b2f-switch__track {
    background: var(--b2f-accent, #c0281c);
}

.b2f-switch input:checked + .b2f-switch__track::before {
    transform: translateX(18px);
}

/* --- Field row (lives directly in the card - the card itself already
   provides the navy background/padding/rounding, so the form doesn't need
   its own) --- */
.b2f-flightsearch__form,
.b2f-flightsearch__group-reservation {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--b2f-spacing, 10px);
    align-items: stretch;
}

.b2f-flightsearch__form.is-vertical {
    flex-direction: column;
    align-items: stretch;
}

/* --- Uniform-height boxes: every field (select, date, passengers, text
   input) is wrapped in one of these, all sharing the same height via
   --b2f-box-height. min-height (not a fixed height) so the row still grows
   to fit its content if configured font sizes need more room, rather than
   ever clipping it - align-items: stretch on the parent row keeps every
   box in that row matched to whichever one ends up tallest.

   justify-content is deliberately flex-start with a fixed top padding,
   NOT center. Centering a variable-height (label+gap+value) block meant
   the label's own vertical position depended on the value element's
   total rendered height - and a <select>, a <button>, and a <div> can
   each render at very slightly different natural heights even with
   identical CSS (browsers apply their own baseline/line-box metrics
   per element type). That's what caused labels to visibly sit at
   different heights across boxes in the same row - Departure
   Point/Choose Scenic Flight (both <select>) lined up with each other,
   Depart (<button>) and Passengers (<div>) did not. Anchoring every
   label to the same fixed offset from the top of its box removes that
   dependency entirely - the label position no longer varies with
   what's rendered below it. --- */
.b2f-flightsearch__box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 14px;
    gap: var(--b2f-label-gap, 5px) !important;
    flex: 1 1 180px;
    min-width: 140px;
    min-height: var(--b2f-box-height, 80px);
    background: var(--b2f-input-bg, #fff);
    border-radius: var(--b2f-radius);
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 10px;
    position: relative;
}

.b2f-flightsearch__form.is-vertical .b2f-flightsearch__box {
    flex: 1 1 auto;
    width: 100%;
}

.b2f-flightsearch__box[data-field="passengers"] {
    flex: 0 1 130px;
    min-width: 110px;
}

.b2f-flightsearch__box-label {
    font-size: var(--b2f-label-size, 12px);
    line-height: 1.3 !important;
    font-weight: 700;
    color: var(--b2f-input-text, #1c2333);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 !important;
}

.b2f-flightsearch__box-select,
.b2f-flightsearch__box-input,
.b2f-flightsearch__date-trigger,
.b2f-flightsearch__pax-summary {
    border: none !important;
    background: transparent;
    color: var(--b2f-input-text, #1c2333);
    font-size: var(--b2f-input-size, 15px);
    font-family: inherit;
    line-height: 1.3 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* A native <select>'s internal text rendering reserves more space above
   its own text than a plain <button>/<div> does, on at least some
   browser/OS/font combinations - confirmed by pixel-measuring the actual
   rendered text position in a real screenshot (14px higher for button/
   div), even though the element boxes themselves measure at identical
   positions via getBoundingClientRect(). This doesn't reproduce in every
   test environment, so rather than keep chasing the exact underlying
   engine behavior, this compensates directly with the measured value. */
.b2f-flightsearch__date-trigger,
.b2f-flightsearch__pax-summary {
    margin-top: var(--b2f-value-text-offset, 14px) !important;
}

.b2f-flightsearch__box-input {
    cursor: text;
}

.b2f-flightsearch__box-select:focus,
.b2f-flightsearch__box-input:focus,
.b2f-flightsearch__date-trigger:focus {
    outline: none;
}

.b2f-flightsearch__box-clear {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--b2f-input-text, #1c2333);
    background: transparent;
    color: var(--b2f-input-text, #1c2333);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}

.b2f-flightsearch__box-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--b2f-input-text, #1c2333);
    pointer-events: none;
}

.b2f-flightsearch__box-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.b2f-flightsearch__box-icon--chevron svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.b2f-flightsearch__box--plain {
    justify-content: center;
}

.b2f-flightsearch__charter-return-switch {
    margin-top: 4px;
}

.b2f-flightsearch__charter-return-label {
    font-size: var(--b2f-label-size, 12px);
    color: var(--b2f-muted);
    margin-top: 4px;
}

.b2f-flightsearch__box-input--plain {
    font-size: var(--b2f-input-size, 15px);
    height: 100%;
}

.b2f-flightsearch__box-input--plain::placeholder {
    color: #6b7280;
    opacity: 1;
    font-weight: 400;
}

/* Origin/Destination (or Departure Point/Scenic Flight) pair with swap
   button between them */
.b2f-flightsearch__odgroup {
    display: flex;
    gap: var(--b2f-spacing, 10px);
    position: relative;
    flex: 2 1 320px;
    align-items: center;
}

.b2f-flightsearch__odgroup .b2f-flightsearch__box {
    flex: 1 1 50%;
}

.b2f-flightsearch__swap {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--b2f-bg, #10193b);
    border: 2px solid var(--b2f-text, #fff);
    color: var(--b2f-text, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    align-self: center;
    margin: 0 -8px;
}

.b2f-flightsearch__swap[disabled] {
    cursor: default;
    opacity: 0.35;
}

.b2f-flightsearch__swap svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.b2f-flightsearch__form.is-vertical .b2f-flightsearch__odgroup {
    flex-direction: column;
}

.b2f-flightsearch__form.is-vertical .b2f-flightsearch__swap {
    margin: -4px auto;
}

/* --- Passengers stepper --- */
.b2f-flightsearch__pax-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    background: #fff;
    color: #1c2333;
    border-radius: var(--b2f-radius);
    padding: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    width: 220px;
    max-width: 90vw;
}

.b2f-flightsearch__pax-panel.is-open {
    display: block;
}

.b2f-flightsearch__pax-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.b2f-flightsearch__pax-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.b2f-flightsearch__pax-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

/* --- Submit button --- */
.b2f-flightsearch__submit-wrap {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 4px;
}

.b2f-flightsearch__submit {
    border: 2px solid transparent;
    cursor: pointer;
    font-weight: 700;
    white-space: nowrap;
}

.b2f-flightsearch__submit.size-small { padding: 6px 14px; font-size: 13px; }
.b2f-flightsearch__submit.size-medium { padding: 10px 20px; font-size: 15px; }
.b2f-flightsearch__submit.size-large { padding: 14px 28px; font-size: 17px; }

.b2f-flightsearch__submit.shape-square { border-radius: 2px; }
.b2f-flightsearch__submit.shape-rounded { border-radius: var(--b2f-radius); }
.b2f-flightsearch__submit.shape-pill { border-radius: 999px; }

.b2f-flightsearch__submit.style-text {
    background: transparent;
    border-color: transparent;
    color: var(--b2f-text, #fff);
}

.b2f-flightsearch__submit.style-filled {
    background: var(--b2f-button-bg, #3b6df0);
    color: var(--b2f-button-text, #fff);
}

.b2f-flightsearch__submit.style-outline {
    background: transparent;
    border-color: var(--b2f-button-bg, #3b6df0);
    color: var(--b2f-button-bg, #3b6df0);
}

[data-b2f-mode="scenic"] .b2f-flightsearch__group-p2p { display: none; }
[data-b2f-mode="pointtopoint"] .b2f-flightsearch__group-scenic { display: none; }
[data-b2f-mode="reservation"] .b2f-flightsearch__group-p2p,
[data-b2f-mode="reservation"] .b2f-flightsearch__group-scenic,
[data-b2f-mode="reservation"] .b2f-flightsearch__group-search { display: none; }
.b2f-flightsearch__group-reservation { display: none; }
[data-b2f-mode="reservation"] .b2f-flightsearch__group-reservation { display: flex; }

[data-b2f-mode="charter"] .b2f-flightsearch__group-p2p,
[data-b2f-mode="charter"] .b2f-flightsearch__group-scenic,
[data-b2f-mode="charter"] .b2f-flightsearch__group-search,
[data-b2f-mode="charter"] .b2f-flightsearch__group-reservation { display: none; }
.b2f-flightsearch__group-charter { display: none; }
[data-b2f-mode="charter"] .b2f-flightsearch__group-charter { display: flex; }

/* Return date disabled visually when one-way is active */
.b2f-flightsearch__field[data-b2f-return].is-disabled,
.b2f-flightsearch__box[data-b2f-return].is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* --- Pricing calendar (Depart / Return) --- */
.b2f-flightsearch__date-field {
    position: relative;
}

.b2f-flightsearch__calendar {
    display: none;
    position: fixed;
    background: #fff;
    color: #1c2333;
    border-radius: var(--b2f-radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    z-index: 9999;
    width: 340px;
    max-width: 90vw;
    padding: 16px;
}

.b2f-flightsearch__calendar.is-open {
    display: block;
}

.b2f-flightsearch__cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 12px;
}

.b2f-flightsearch__cal-nav {
    background: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
    cursor: pointer;
}

.b2f-flightsearch__cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.b2f-flightsearch__cal-dow {
    text-align: center;
    font-size: 0.75rem;
    color: #999;
    padding-bottom: 4px;
}

.b2f-flightsearch__cal-cell {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.85rem;
}

.b2f-flightsearch__cal-cell.is-empty {
    visibility: hidden;
}

.b2f-flightsearch__cal-cell.is-disabled {
    color: #ccc;
}

.b2f-flightsearch__cal-cell.is-available {
    cursor: pointer;
    background: #f3f6ff;
    color: #1c2333;
}

.b2f-flightsearch__cal-cell.is-available:hover {
    background: var(--b2f-accent, #3b6df0);
    color: #fff;
}

.b2f-flightsearch__cal-day {
    font-weight: 600;
    line-height: 1.2;
}

.b2f-flightsearch__cal-price {
    font-size: 0.65rem;
    line-height: 1.2;
}

.b2f-flightsearch__cal-msg {
    font-size: 0.85rem;
    color: #777;
    padding: 1rem 0.25rem;
    text-align: center;
}

/* --- Touch targets: the clear/swap/stepper/nav buttons above are sized
   for a mouse pointer (20-36px). Apple's and Google's own guidelines
   both put reliable tap accuracy at ~44px minimum - anything smaller
   causes real mis-taps on a phone. Only widens them for touch/small
   screens, so the desktop design (built around the smaller size) is
   untouched. */
@media (max-width: 480px), (pointer: coarse) {
    .b2f-flightsearch__box-clear {
        width: 30px;
        height: 30px;
    }

    .b2f-flightsearch__swap {
        width: 44px;
        height: 44px;
    }

    .b2f-flightsearch__pax-btn {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .b2f-flightsearch__cal-nav {
        width: 40px;
        height: 40px;
    }

    .b2f-flightsearch__tab {
        padding: 12px 16px;
    }
}