/**
 * The search bar — one width, even separators, and a quiet guest picker.
 *
 * The bar was 960px wide whatever it held. Tours carries five fields, so they
 * were squeezed until the separators disappeared one by one from the right and
 * the Search button was pushed out of the white pill. Hotel looked fine only
 * because it has fewer fields.
 *
 * So: one width for every tab, wide enough for the busiest of them, and
 * separators drawn by one rule instead of a class the theme applies unevenly.
 *
 * @package Sarisara_Child
 */

/* ==========================================================================
   ONE WIDTH, EVERY TAB
   --------------------------------------------------------------------------
   The bar sits inside an Elementor container capped at 960px, which is what
   actually squeezed it. Only the container holding the search form is widened
   — every other block on the page keeps the layout it was designed with.
   ========================================================================== */
.e-con-inner:has(.st-banner-search-form),
.e-con-inner:has(.st-search-form-el) {
    max-width: 960px !important;
}

.elementor-widget-container:has(> .st-banner-search-form),
.elementor-element:has(> .elementor-widget-container > .st-banner-search-form) {
    width: 100% !important;
    max-width: 100% !important;
}

.st-banner-search-form,
.st-banner-search-form.style_2,
.st-search-form-el.st-border-radius {
    width: 100% !important;
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 1260px) {
    .st-banner-search-form,
    .st-banner-search-form.style_2,
    .st-search-form-el.st-border-radius {
        max-width: calc(100vw - 60px) !important;
    }
}

/* ==========================================================================
   FIELDS SHARE THE ROOM; THE BUTTON KEEPS ITS OWN
   ========================================================================== */
.st-banner-search-form .search-form > .form.d-flex,
.st-search-form-el .search-form > .form.d-flex {
    flex-wrap: nowrap;
    min-width: 0;
}

.st-banner-search-form .search-form > .form.d-flex > *,
.st-search-form-el .search-form > .form.d-flex > * {
    min-width: 0;
    position: relative;
}

.st-banner-search-form .search-form .button-search-wrapper,
.st-search-form-el .search-form .button-search-wrapper {
    flex: 0 0 auto;
    margin-left: auto;
}

/* ==========================================================================
   SEPARATORS — ::after ONLY, one per gap
   --------------------------------------------------------------------------
   The theme already draws a separator with ::after on the right edge of a
   field. We were adding a second with ::before on the left edge of the next
   one, so most gaps carried two hairlines sitting on top of each other.

   One line per gap, drawn by ::after on the field to its left. The last field
   before the button never gets one — that was the line cutting into SEARCH.
   Every field gets the same side padding, so each column sits centred between
   its two lines.
   ========================================================================== */
.st-banner-search-form .search-form > .form.d-flex > *::before,
.st-search-form-el .search-form > .form.d-flex > *::before {
    content: none !important;
}

.st-banner-search-form .search-form > .form.d-flex > *:not(.button-search-wrapper)::after,
.st-search-form-el .search-form > .form.d-flex > *:not(.button-search-wrapper)::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 28px !important;
    background: #e4e6ec !important;
    border: 0 !important;
    display: block !important;
    pointer-events: none;
    z-index: 999;
}

/* The Location field wraps its input in another .form-group that draws its own
   hairline, so that gap showed two lines a few pixels apart. The separator
   belongs to the column, not to something inside it. */
.st-banner-search-form .search-form .destination-search .form-group::after,
.st-search-form-el .search-form .destination-search .form-group::after,
.st-banner-search-form .search-form > .form.d-flex > * > .form-group::after,
.st-search-form-el .search-form > .form.d-flex > * > .form-group::after {
    content: none !important;
}

/* Nothing between the last field and the button. */
.st-banner-search-form .search-form > .form.d-flex > *:has(+ .button-search-wrapper)::after,
.st-search-form-el .search-form > .form.d-flex > *:has(+ .button-search-wrapper)::after,
.st-banner-search-form .search-form > .form.d-flex > *:last-child::after,
.st-search-form-el .search-form > .form.d-flex > *:last-child::after {
    content: none !important;
}

/* ==========================================================================
   THE GUESTS FIELD DOES NOT BECOME A FLOATING PILL WHEN OPENED
   ========================================================================== */
.st-banner-search-form .field-guest.st-focus,
.st-search-form-el .field-guest.st-focus,
.st-banner-search-form .form-group.st-focus,
.st-search-form-el .form-group.st-focus {
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ==========================================================================
   THE GUEST PICKER — small, plain, and quiet
   Circles around the plus and minus, heavy padding and a wide box made it feel
   like a dialogue. It is two numbers.
   ========================================================================== */
.st-banner-search-form .dropdown-menu.st-modern-style,
.st-search-form-el .dropdown-menu.st-modern-style {
    min-width: 0 !important;
    width: 200px !important;
    padding: 6px 18px !important;
    border: 1px solid #ececf1 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(9, 9, 32, .10) !important;
    background: #ffffff !important;
    margin-top: 0 !important;
    left: -20px !important;
}

.st-banner-search-form .dropdown-menu.st-modern-style .item,
.st-search-form-el .dropdown-menu.st-modern-style .item {
    padding: 12px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #f0f0f4 !important;
}

.st-banner-search-form .dropdown-menu.st-modern-style .item:last-child,
.st-search-form-el .dropdown-menu.st-modern-style .item:last-child {
    border-bottom: 0 !important;
}

.st-banner-search-form .dropdown-menu.st-modern-style .item label,
.st-search-form-el .dropdown-menu.st-modern-style .item label,
.st-banner-search-form .dropdown-menu.st-modern-style .item > span:first-child,
.st-search-form-el .dropdown-menu.st-modern-style .item > span:first-child {
    margin: 0 !important;
    font-family: 'Google Sans', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #090920 !important;
    line-height: 1.3 !important;
}

/* Plain glyphs, no rings. The theme wraps each step in .prev / .next inside
   .st-number-wrapper and draws a circular border around them. */
.dropdown-menu.st-modern-style .st-number-wrapper {
    gap: 6px;
}

.dropdown-menu.st-modern-style .st-number-wrapper .prev,
.dropdown-menu.st-modern-style .st-number-wrapper .next {
    width: 22px !important;
    height: 22px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dropdown-menu.st-modern-style .st-number-wrapper .prev svg,
.dropdown-menu.st-modern-style .st-number-wrapper .next svg {
    width: 13px !important;
    height: 13px !important;
}

.dropdown-menu.st-modern-style .st-number-wrapper .prev svg g,
.dropdown-menu.st-modern-style .st-number-wrapper .next svg g,
.dropdown-menu.st-modern-style .st-number-wrapper .prev svg path,
.dropdown-menu.st-modern-style .st-number-wrapper .next svg path {
    stroke: #40405a !important;
}

.dropdown-menu.st-modern-style .st-number-wrapper .prev:hover svg g,
.dropdown-menu.st-modern-style .st-number-wrapper .next:hover svg g,
.dropdown-menu.st-modern-style .st-number-wrapper .prev:hover svg path,
.dropdown-menu.st-modern-style .st-number-wrapper .next:hover svg path {
    stroke: #7700FF !important;
}

/* The number between them. */
.dropdown-menu.st-modern-style .st-number-wrapper input,
.dropdown-menu.st-modern-style .st-number-wrapper .value {
    width: 30px !important;
    padding: 0 !important;
    height: auto !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    font-family: 'Google Sans', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #090920 !important;
}

.dropdown-menu.st-modern-style .select-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* The theme adds a footer/Apply row on some layouts; it is not needed here. */
.st-banner-search-form .dropdown-menu.st-modern-style .st-dropdown-footer,
.st-search-form-el .dropdown-menu.st-modern-style .st-dropdown-footer {
    display: none !important;
}

/* ==========================================================================
   FIELD SIZING AND DROPDOWN CHROME — Chiran, 2026-08-19
   Column widths, paddings and dropdown styling handed over directly. The one
   change made on the way in: a `padding: revert-rule` declaration is not valid
   CSS, and its intent was to undo the blanket padding added earlier — so that
   rule was removed instead, which leaves the theme's own padding in place.
   ========================================================================== */
.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .destination-search.st-search-destination-tour {
    width: 23% !important;
}

.search-form .field-detination {
    margin-left: 20px;
}

.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-detination,
.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-guest {
    padding: 0 25px;
    border-left: none;
    min-height: 82px;
}

.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-guest {
    padding-left: 30px;
    min-width: 18%;
}

.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-guest .dropdown-menu {
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .05);
    border-radius: 20px;
    padding: 30px;
    min-width: 320px;
    margin-top: 0 !important;
}

.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .form-date-field.st-search-date-tour {
    min-width: 40%;
}

.tour-location-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: -16px;
    right: 0;
    min-width: 220px;
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .05);
    z-index: 1050;
    margin-top: 15px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px 0;
}

.field-tour-type .dropdown-menu {
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .05);
    border-radius: 20px;
    padding: 15px 10px;
    min-width: 200px;
}

.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-guest .dropdown-menu .item:not(:last-child) {
    border-bottom: 1px solid #DEDEDE;
    padding-bottom: 19px;
    margin-bottom: 0 !important;
}

.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-guest .dropdown-menu .item .select-wrapper .st-number-wrapper .st-input-number {
    font-weight: 500;
    font-size: 14px !important;
    line-height: 20px;
    text-align: center;
    color: var(--heading-color);
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   MOBILE
   --------------------------------------------------------------------------
   On a phone the bar was sized for a row of columns it could not fit: it sat
   off-centre against the right edge, the fields kept their desktop widths and
   paddings, and every dropdown opened at its desktop width — so the location
   list, the tour-type list and the guest panel all hung off the side of the
   screen or over the bar itself.

   Below 992px the bar becomes what it should be on a phone: one column of
   full-width rows, centred, with every dropdown sized to the screen rather
   than to the field that opened it.
   ========================================================================== */
@media (max-width: 991px) {

    .st-banner-search-form,
    .st-banner-search-form.style_2 {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* THE WHITE CARD IS THIS ELEMENT — .st-search-form-el paints the white,
       the radius and the shadow. The gutter has to live here. Putting it on
       .search-form inside only inset the invisible box: the fields moved in,
       the white stayed welded to both edges of the glass.
       10px each side (Chiran, 2026-08-20). The width is measured from the
       screen and the card is centred on the screen rather than on its parent,
       because the homepage drops the bar into a full-bleed container while the
       tour and results pages wrap it in a container and a column — centring on
       the parent gave those pages a wider margin than the homepage. */
    .st-search-form-el.st-border-radius,
    .st-banner-search-form.style_2 .st-search-form-el.st-border-radius {
        width: min(560px, calc(100vw - 20px)) !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    .e-con-inner:has(.st-banner-search-form),
    .e-con-inner:has(.st-search-form-el) {
        width: 100% !important;
        max-width: 100% !important;
    }

    .st-banner-search-form .search-form,
    .st-search-form-el .search-form {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* The Elementor widget adds its own side margins on top of the container's
       padding, so the card sat inset twice over and looked pushed right. */
    .elementor-widget-container:has(> .st-banner-search-form) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .st-banner-search-form .search-form,
    .st-search-form-el .search-form {
        width: 100% !important;
        border-radius: 20px !important;
        overflow: visible !important;
    }

    /* One field per row. */
    .st-banner-search-form .search-form > .form.d-flex,
    .st-search-form-el .search-form > .form.d-flex {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    /* Specific enough to beat the desktop per-field widths, which are written
       with the full .st-banner-search-form.style_2 ... chain. */
    .st-banner-search-form .search-form > .form.d-flex > *,
    .st-search-form-el .search-form > .form.d-flex > *,
    .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .destination-search.st-search-destination-tour,
    .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-detination,
    .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-guest,
    .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .form-date-field.st-search-date-tour {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin-left: 0 !important;
        padding: 16px 22px !important;
    }

    .st-banner-search-form.style_2 .st-search-form-el .st-search-el {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Stacked rows stretched the full width of a tablet look like a form that
       has come apart; 560px keeps the card looking like a card.
       The viewport cap is what makes every page agree. The homepage bar sits in
       a full-bleed Elementor container and the tour/results bars sit inside a
       Bootstrap container and column, so measuring the gutter from the parent
       left the homepage card noticeably tighter to the glass than the tour
       page's. Measured from the screen instead, both land in the same place. */
    .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Each field carries the whole indent, so every label starts on the same
       line down the card — the inner wrappers had paddings of their own and the
       labels stepped in and out by 20-odd pixels. */
    .st-banner-search-form .search-form > .form.d-flex > * *:not(.dropdown-menu):not(.dropdown-menu *):not(.daterangepicker):not(.daterangepicker *):not(.ss-lang-menu):not(.ss-lang-menu *):not(.tour-location-dropdown):not(.tour-location-dropdown *),
    .st-search-form-el .search-form > .form.d-flex > * *:not(.dropdown-menu):not(.dropdown-menu *):not(.daterangepicker):not(.daterangepicker *):not(.ss-lang-menu):not(.ss-lang-menu *):not(.tour-location-dropdown):not(.tour-location-dropdown *) {
        padding-left: 0 !important;
        margin-left: 0 !important;
        text-align: left !important;
    }

    .st-banner-search-form .search-form > .form.d-flex > * > *,
    .st-search-form-el .search-form > .form.d-flex > * > * {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Rows are divided horizontally, so the vertical hairlines make no sense. */
    .st-banner-search-form .search-form > .form.d-flex > *::after,
    .st-search-form-el .search-form > .form.d-flex > *::after,
    .st-banner-search-form .search-form > .form.d-flex > *::before,
    .st-search-form-el .search-form > .form.d-flex > *::before,
    .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .destination-search::after,
    .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-tour-type::after,
    .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-duration::after,
    .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-guest::after,
    .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .form-date-field::after {
        content: none !important;
        display: none !important;
    }

    /* The theme's own .border-right left a stub of vertical rule hanging at the
       end of each stacked row. */
    .st-banner-search-form .search-form > .form.d-flex > *,
    .st-search-form-el .search-form > .form.d-flex > *,
    .st-banner-search-form .search-form > .form.d-flex > * > *,
    .st-search-form-el .search-form > .form.d-flex > * > * {
        border-right: 0 !important;
        border-left: 0 !important;
    }

    .st-banner-search-form .search-form > .form.d-flex > *:not(:last-child),
    .st-search-form-el .search-form > .form.d-flex > *:not(:last-child) {
        border-bottom: 1px solid #ececf1 !important;
    }

    /* The button is the last row, full width, square-ish to the card. */
    .st-banner-search-form .search-form .button-search-wrapper,
    .st-search-form-el .search-form .button-search-wrapper {
        padding: 0 !important;
        margin-left: 0 !important;
        border-bottom: 0 !important;
    }

    .st-banner-search-form .search-form .btn-search,
    .st-search-form-el .search-form .btn-search {
        position: static !important;
        width: 100% !important;
        right: auto !important;
        border-radius: 0 0 20px 20px !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    /* ---- every dropdown is sized to the screen, not to its field ---- */
    .st-banner-search-form .dropdown-menu,
    .st-search-form-el .dropdown-menu,
    .st-banner-search-form .dropdown-menu.st-modern-style,
    .st-search-form-el .dropdown-menu.st-modern-style,
    .field-tour-type .dropdown-menu,
    .tour-location-dropdown,
    .ss-lang-menu {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-top: 6px !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        /* Bootstrap positions these with a transform, which on a stacked bar
           pushed the panel sideways and up over the field above it. */
        transform: none !important;
        top: 100% !important;
        bottom: auto !important;
        inset-inline: 0 !important;
        /* The floating back-to-top button sits at z-index 99 and covered the
           Children "+" while the guest panel was open. */
        z-index: 200 !important;
    }

    .st-banner-search-form .search-form > .form.d-flex > *,
    .st-search-form-el .search-form > .form.d-flex > * {
        position: relative !important;
    }

    /* The suggestion list hangs off an inner wrapper the width of the label, so
       on a phone it opened as a narrow column halfway across the row. Letting
       the field itself be its anchor lines it up with the card. */
    .st-banner-search-form .destination-search .form-group,
    .st-banner-search-form .destination-search .st-form-dropdown-icon,
    .st-banner-search-form .destination-search .render,
    .st-search-form-el .destination-search .form-group,
    .st-search-form-el .destination-search .st-form-dropdown-icon,
    .st-search-form-el .destination-search .render {
        position: static !important;
    }

    /* The guest panel is a row like the rest, not a floating card. */
    .st-banner-search-form .dropdown-menu.st-modern-style,
    .st-search-form-el .dropdown-menu.st-modern-style,
    .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-guest .dropdown-menu {
        padding: 10px 22px !important;
    }

    /* The date picker gets the width it needs and no more.
       It is appended to <body>, not to the bar, so it has to be matched on its
       own class — scoping it to the search form never reached it, and it hung
       8px off the right of the screen. It aligns itself to the field it belongs
       to, which starts at the card's edge, so capping the width to the card is
       enough to keep it on screen. */
    .daterangepicker {
        width: min(560px, calc(100vw - 20px)) !important;
        max-width: min(560px, calc(100vw - 20px)) !important;
        right: auto !important;
    }

    .daterangepicker .drp-calendar {
        max-width: 100% !important;
    }

    /* While a panel is open the back-to-top button would sit on the controls. */
    body.ss-search-panel-open #gotop,
    body.ss-search-panel-open .gotop {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 575px) {
    .st-banner-search-form .search-form > .form.d-flex > *,
    .st-search-form-el .search-form > .form.d-flex > *,
    .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .destination-search.st-search-destination-tour,
    .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-detination,
    .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-guest,
    .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .form-date-field.st-search-date-tour {
        padding: 14px 18px !important;
    }
}

/* The label sits in from the edge of its field. */
.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .form-group {
    min-height: auto;
    background: none;
    padding-left: 20px;
}

/* The bar on the tour and activity result pages had less room than the one on
   the homepage.
   ------------------------------------------------------------------
   There it sits in a two-thirds-width column, so it got 819px for a bar that
   needs 960 — the Search button rode up over Language and "All Types" was
   sliced down to "es". The column holds nothing but the search bar (it is the
   only thing in its row), so widening it changes that bar and nothing else.
   At 78% the bar reaches the same 960px cap as the homepage, and stops there. */
@media (min-width: 1024px) {
    .row > [class*="col-"]:has(> .st-banner-search-form) {
        flex: 0 0 auto;
        width: 78%;
        max-width: 78%;
        margin-left: auto;
        margin-right: auto;
    }
}