/* Shared hero search pill: home hero + results-page search bar.
   Extracted verbatim from pages/home.css (2026-11-03) so the two cannot
   drift. Loaded right after home.css on home and before search.css on
   results; both still precede style.css. Results-page ids are added as
   alternates to the home-id selectors (#daterange-btn/#daterange-btn1,
   #front-search-form/#front-search-form-shul, .kbnb-pill-host). */

/* ==========================================================================
   Airbnb-style unified search pill (kbnb branding, not Airbnb's colors).
   New, uniquely-named classes -- avoids fighting style.css's legacy rules on
   the shared .main_formbg / .checkinout / .form-control selectors, which
   carry !important in places and load AFTER this file.
   ========================================================================== */

@media (min-width: 992px) {
    /* Distinct bordered field cards, not one seamless invisible-until-focus
       pill -- each control reads as its own thing at rest, not just on
       interaction. */
    .kbnb-pill-bar {
        border-radius: 14px !important;
        box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04), 0 8px 24px rgba(16, 16, 16, 0.07) !important;
        padding: 8px !important;
        background: #fff;
        border: 1px solid #e9e9e9 !important;
        transition: box-shadow 0.2s ease;
    }

    .kbnb-pill-bar:hover {
        box-shadow: 0 2px 4px rgba(16, 16, 16, 0.05), 0 12px 32px rgba(16, 16, 16, 0.09) !important;
    }

    .kbnb-pill-row {
        display: flex !important;
        align-items: stretch;
        flex-wrap: nowrap !important;
        gap: 8px;
        margin: 0 !important;
    }

    .kbnb-pill-seg {
        position: relative;
        flex: 1 1 0;
        padding: 10px 18px !important;
        border: 1px solid #e5e5e5 !important;
        border-radius: 9px;
        background: #fafafa;
        transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
        cursor: pointer;
    }

    .kbnb-pill-seg:hover {
        border-color: #c7c7c7 !important;
        background: #fff;
    }

    .kbnb-pill-seg:focus-within {
        background: #fff !important;
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 3px rgba(163, 36, 59, 0.1);
        transform: translateY(-1px);
    }

    .kbnb-pill-seg--submit {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        border: none !important;
        background: transparent !important;
        padding: 0 0 0 4px !important;
    }

    .kbnb-pill-seg--submit:hover {
        background: transparent !important;
    }

    .kbnb-pill-label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.1px;
        text-transform: none;
        color: #6b6b6b;
        margin: 0 0 3px;
    }

    .kbnb-pill-label .kbnb-pill-label-icon {
        font-size: 11px;
        color: #9a9a9a;
    }

    .kbnb-pill-input {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
        height: auto !important;
        font-size: 14.5px !important;
        font-weight: 500;
        color: #222222;
        width: 100%;
    }

    .kbnb-pill-input::placeholder {
        color: #9a9a9a;
    }

    .kbnb-pill-input--date {
        cursor: pointer;
    }

    /* .gst-srch/.right-gst-rgt/.front-search are shared legacy classes used
       on booking/search/property pages too -- scope every override to
       .kbnb-pill-seg--submit so this doesn't leak there. Without this the
       geo icon and Search button just fall in normal flow with whatever
       that page's default happens to be, which is what made the icon read
       as an unlabeled, oddly-placed glyph rather than a button. */
    .kbnb-pill-seg--submit .gst-srch,
    .kbnb-pill-seg--submit .right-gst-rgt,
    .kbnb-pill-seg--submit .front-search {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .kbnb-pill-seg--submit .front-search {
        gap: 8px;
    }

    .kbnb-pill-seg--submit .kbnb-pill-submit {
        /* Was flex:1 1 auto to share the row with the now-removed geo
           button; left growing, it stretches to fill the whole segment
           and reads as an oversized, empty block. Size to content. */
        flex: 0 0 auto;
    }

    /* A round ghost button, not a bare glyph -- same 40px target Airbnb uses
       for its map-pin toggle, with a hover state so it reads as clickable
       before the title-attribute tooltip ever shows. */
    .kbnb-pill-geo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 50%;
        padding: 0 !important;
        top: 0 !important;
        transition: background-color 0.15s ease;
    }

    .kbnb-pill-geo:hover {
        background: #f2f2f2;
    }

    .kbnb-pill-geo .getLocationButton {
        color: #717171;
        font-size: 15px !important;
    }

    /* Full pill radius (height/2) instead of the segments' 9px -- makes it
       read as THE call-to-action against the card-radius'd fields beside
       it, not just another form control. A dedicated colored shadow gives
       it the lift the flat 9px block was missing next to the bar's own
       soft, floating card shadow. */
    .kbnb-pill-submit {
        height: 52px;
        min-width: 120px;
        border-radius: 26px !important;
        padding: 0 26px !important;
        gap: 9px;
        background: var(--primary-color) !important;
        box-shadow: 0 4px 14px rgba(163, 36, 59, 0.35) !important;
        transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
        overflow: hidden;
    }

    .kbnb-pill-submit:hover {
        background: #8a1f34 !important;
        box-shadow: 0 6px 18px rgba(163, 36, 59, 0.42) !important;
        transform: translateY(-1px);
    }

    .kbnb-pill-submit:active {
        background: #741a2b !important;
        box-shadow: 0 2px 8px rgba(163, 36, 59, 0.3) !important;
        transform: translateY(0);
    }

    .kbnb-pill-submit:hover .kbnb-pill-submit-icon {
        transform: translateX(1px) scale(1.05);
    }

    .kbnb-pill-submit .serch-txt-mob {
        display: inline-block !important;
        font-size: 14.5px;
        font-weight: 600;
        letter-spacing: 0.2px;
    }

    .kbnb-pill-submit-icon {
        filter: brightness(0) invert(1);
        height: 16px !important;
        width: 16px !important;
        transition: transform 0.15s ease;
    }
}

/* Mobile: Airbnb's own mobile search is not a shrunk desktop pill -- it's a
   single tap target that expands into a full-screen search panel. Same
   fields/ids/JS as desktop (autocomplete, flatpickr, submit), just two
   presentation states toggled by a class on .kbnb-pill-bar. */
.kbnb-mobile-trigger,
.kbnb-mobile-panel-header {
    display: none;
}

@media (max-width: 991.98px) {
    .kbnb-pill-bar {
        border-radius: 14px !important;
        box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04), 0 8px 20px rgba(16, 16, 16, 0.08) !important;
        border: 1px solid #e9e9e9 !important;
        padding: 0 !important;
        background: #fff;
    }

    /* Collapsed state: a single rounded button, fields hidden. */
    .kbnb-mobile-trigger {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 14px 18px;
        background: transparent;
        border: none;
        text-align: left;
        cursor: pointer;
        transition: transform 0.15s ease;
    }

    .kbnb-mobile-trigger:active {
        transform: scale(0.98);
    }

    .kbnb-mobile-trigger-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        min-width: 38px;
        border-radius: 9px;
        background: var(--primary-color);
        color: #fff;
        font-size: 13px;
    }

    .kbnb-mobile-trigger-text {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .kbnb-mobile-trigger-text strong {
        font-size: 15px;
        color: #222222;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kbnb-mobile-trigger-text small {
        font-size: 13px;
        color: #717171;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* The panel is always in the DOM as a fixed full-screen layer, parked
       off-screen (translateY + opacity + visibility) rather than
       display:none -- display can't be transitioned, so an instant toggle
       is the only other option and that's exactly the "not smooth" gap.
       pointer-events:none while parked keeps it from swallowing clicks meant
       for the trigger underneath. */
    .kbnb-pill-bar form {
        display: block;
        position: fixed;
        inset: 0;
        background: #fff;
        overflow-y: auto;
        padding: 16px 20px 32px;
        z-index: 100000;
        transform: translateY(100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
                    opacity 0.25s ease,
                    visibility 0s linear 0.35s;
    }

    .kbnb-pill-label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.1px;
        text-transform: none;
        color: #6b6b6b;
    }

    .kbnb-pill-label .kbnb-pill-label-icon {
        font-size: 11px;
        color: #9a9a9a;
    }

    .kbnb-pill-seg {
        border: 1px solid #e5e5e5 !important;
        border-radius: 9px;
        background: #fafafa;
        padding: 12px 16px !important;
        transition: border-color 0.15s ease, background-color 0.15s ease;
    }

    .kbnb-pill-seg:focus-within {
        background: #fff !important;
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 3px rgba(163, 36, 59, 0.1);
    }

    .kbnb-pill-input {
        font-size: 14.5px !important;
        font-weight: 500;
    }

    .kbnb-pill-submit {
        border-radius: 9px !important;
        height: 50px;
        background: var(--primary-color) !important;
        box-shadow: none !important;
        transition: background-color 0.15s ease;
    }

    .kbnb-pill-submit:active {
        background: #741a2b !important;
    }

    /* Expanded state: full-screen panel, same fields as desktop stacked. */
    .kbnb-pill-bar.kbnb-mobile-open {
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        position: fixed;
        inset: 0;
        z-index: 100000;
    }

    .kbnb-pill-bar.kbnb-mobile-open .kbnb-mobile-trigger {
        display: none;
    }

    .kbnb-pill-bar.kbnb-mobile-open form {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
                    opacity 0.3s ease;
    }

    .kbnb-mobile-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .kbnb-mobile-panel-title {
        font-size: 16px;
        font-weight: 700;
        color: #222222;
    }

    .kbnb-mobile-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid #dddddd;
        background: #fff;
        font-size: 20px;
        line-height: 1;
        color: #222222;
        cursor: pointer;
        transition: transform 0.15s ease, background-color 0.15s ease;
    }

    .kbnb-mobile-close:active {
        transform: scale(0.9);
        background-color: #f2f2f2;
    }

    .kbnb-pill-bar.kbnb-mobile-open .kbnb-pill-seg {
        margin-bottom: 12px;
    }

    /* Suggestions push the rest of the panel down instead of floating over
       it -- floating, they covered the By Location / By Shul toggle, so a
       tap meant for the toggle picked a destination instead. */
    .kbnb-pill-bar.kbnb-mobile-open .autocomplete-results {
        position: static;
        max-height: none;
        margin-top: 8px;
    }

    /* Bottom scroll-affordance -- hints there's more below the fold on a
       full-screen panel without a visible scrollbar cue otherwise. */
    .kbnb-pill-bar.kbnb-mobile-open::after {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 28px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 100%);
        pointer-events: none;
        z-index: 100001;
    }
}

body.kbnb-scroll-lock {
    overflow: hidden;
}

/* The site header is position:absolute in its own stacking context near the
   top of <body>, so a numerically higher z-index on the search panel alone
   doesn't reliably paint over it (the two never end up compared in the same
   stacking context). Hiding it outright while the full-screen panel is open
   is simpler than chasing the stacking-context chain, and matches how a
   real full-screen takeover should look anyway -- no site chrome bleeding
   through behind it. */
@media (max-width: 991.98px) {
    body.kbnb-scroll-lock .header_area {
        display: none !important;
    }
}
/* ==========================================================================
   Rounded variant: leans back toward the pre-redesign homepage look (one
   continuous pill bar, round search button, pill toggle above it) while
   keeping the unified search, trust row and compact hero. Overrides the
   card-style segments above by source order + the same selectors.
   ========================================================================== */

.kbnb-mode-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #ececec;
    box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04);
}

.kbnb-mode-toggle button {
    border: none;
    background: transparent;
    border-radius: 999px;
    padding: 7px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.kbnb-mode-toggle button i {
    margin-right: 6px;
    font-size: 12px;
}

.kbnb-mode-toggle button.is-active {
    background: var(--primary-color);
    color: #fff;
}

.kbnb-mode-toggle-wrap {
    text-align: center;
}

@media (min-width: 992px) {
    .kbnb-pill-bar {
        border-radius: 999px !important;
        padding: 6px 6px 6px 10px !important;
        border: 1px solid #e6e6e6 !important;
    }

    .kbnb-pill-row {
        gap: 0;
        align-items: center;
    }

    /* Seamless segments split by thin dividers, each its own rounded hover
       target -- the old single-pill bar, not separate field cards. */
    .kbnb-pill-seg {
        border: none !important;
        border-radius: 999px;
        background: transparent;
        padding: 10px 24px !important;
    }

    .kbnb-pill-seg + .kbnb-pill-seg::before,
    #daterange-btn-home .kbnb-pill-seg + .kbnb-pill-seg::before,
    .kbnb-pill-row #daterange-btn .kbnb-pill-seg + .kbnb-pill-seg::before,
    .kbnb-pill-row #daterange-btn1 .kbnb-pill-seg + .kbnb-pill-seg::before,
    .padding_empty::before {
        content: "";
        position: absolute;
        left: 0;
        top: 22%;
        bottom: 22%;
        width: 1px;
        background: #e3e3e3;
    }

    .padding_empty {
        position: relative;
    }

    .kbnb-pill-seg--submit::before {
        display: none;
    }

    .kbnb-pill-seg:hover {
        background: #f4f4f4;
    }

    .kbnb-pill-seg:focus-within {
        background: #fff !important;
        box-shadow: 0 4px 16px rgba(16, 16, 16, 0.12);
        transform: none;
    }

    .kbnb-pill-seg--submit:hover,
    .kbnb-pill-seg--submit:focus-within {
        background: transparent !important;
        box-shadow: none;
    }

    .kbnb-pill-submit {
        height: 54px;
        border-radius: 999px !important;
    }
}

@media (max-width: 991.98px) {
    /* style.css's mobile .mob-form-bg rule loads after this file and zeroes
       the radius; the extra ancestor outranks it. */
    .main-area-banner .kbnb-pill-bar,
    .kbnb-pill-host .kbnb-pill-bar {
        border-radius: 999px !important;
        box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04), 0 8px 20px rgba(16, 16, 16, 0.08) !important;
    }

    .main-area-banner .kbnb-pill-bar.kbnb-mobile-open,
    .kbnb-pill-host .kbnb-pill-bar.kbnb-mobile-open {
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Drop the white card behind toggle + bar so both sit on the hero band. */
    .main-area-banner .by-country-location.home_page_location {
        background: transparent !important;
        padding: 0 !important;
    }

    .kbnb-mobile-trigger {
        padding: 10px 12px 10px 20px;
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .kbnb-mobile-trigger-icon {
        border-radius: 50%;
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .kbnb-pill-seg {
        border-radius: 14px;
    }

    .kbnb-pill-submit {
        border-radius: 999px !important;
    }

    .kbnb-mode-toggle {
        margin-bottom: 12px;
    }

    .kbnb-mode-toggle button {
        padding: 6px 14px;
        font-size: 13px;
    }
}

/* Desktop search bar alignment. Bootstrap's col-xl-5/5/2 widths, the date
   inputs' p-3 padding (44px tall vs 22px for the search input) and the legacy
   .vbtn-default `left: 32px` pushed the Search button against the bar's right
   edge and left the row 101px tall with misaligned labels. Flex sizing +
   explicit specificity here; mobile (<992px) is untouched. */
@media (min-width: 992px) {
    .kbnb-pill-bar { padding: 8px 8px 8px 12px !important; }
    .kbnb-pill-row { flex-wrap: nowrap !important; align-items: center; }
    .kbnb-pill-row > .kbnb-pill-seg--search { flex: 1.2 1 0; width: auto; max-width: none; }
    .kbnb-pill-row > .padding_empty { flex: 1 1 0; width: auto; max-width: none; }
    .kbnb-pill-row > .kbnb-pill-seg--submit { flex: 0 0 auto; width: auto; max-width: none; padding: 0 0 0 10px !important; }
    #daterange-btn-home, .kbnb-pill-row #daterange-btn, .kbnb-pill-row #daterange-btn1 { display: flex; flex-wrap: nowrap; margin: 0 !important; }
    #daterange-btn-home > .kbnb-pill-seg--date, .kbnb-pill-row #daterange-btn > .kbnb-pill-seg--date, .kbnb-pill-row #daterange-btn1 > .kbnb-pill-seg--date { flex: 1 1 0; width: auto; max-width: none; }
    #front-search-form-home .kbnb-pill-seg .kbnb-pill-input, #front-search-form .kbnb-pill-seg .kbnb-pill-input, #front-search-form-shul .kbnb-pill-seg .kbnb-pill-input { padding: 0 24px 0 8px !important; height: 22px !important; line-height: 22px; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
    .kbnb-pill-seg--date .check-date-icon { top: 50%; bottom: auto; right: 20px; transform: translateY(2px); display: flex; align-items: center; }
    .kbnb-pill-seg--submit .gst-srch, .kbnb-pill-seg--submit .right-gst-rgt, .kbnb-pill-seg--submit .front-search { width: auto; }
    .kbnb-pill-seg--submit .kbnb-pill-submit { position: static; left: auto !important; top: auto !important; margin: 0 !important; height: 56px; min-width: 128px; padding: 0 28px !important; white-space: nowrap; }
}