/* DAPPER Hero Filter Search Bar.
   One stylesheet, two skins. Everything a skin changes is a custom property
   declared on the variant class, so the structure below is written once and
   the Light and Dark widgets differ only in their token block. */

.dphggg-hsb,
.dphggg-hsb *,
.dphggg-hsb *::before,
.dphggg-hsb *::after { box-sizing: border-box; }

/* --- Skins -------------------------------------------------------------- */
.dphggg-hsb--light {
    --hsb-band:       #F1F5FA;
    --hsb-title:      #14181B;
    --hsb-trust:      #6A7075;
    --hsb-card-bg:    #FFFFFF;
    --hsb-card-bd:    #E4EAF0;
    --hsb-card-sh:    0 2px 10px rgba(16, 42, 67, .05);
    --hsb-divider:    #EDF0F3;
    --hsb-field-hov:  #F5F8FB;
    --hsb-label:      #14181B;
    --hsb-value:      #6A7075;
    --hsb-caret:      #8A9096;
    --hsb-btn:        #0F6FC4;
    --hsb-btn-fg:     #FFFFFF;
    --hsb-chip-label: #6A7075;
    --hsb-chip-bg:    #FFFFFF;
    --hsb-chip-bd:    #D9E0E7;
    --hsb-chip-fg:    #1E2429;
    --hsb-chip-hov:   #F3F8FD;
    --hsb-chip-hov-bd:#1273C7;
    --hsb-focus:      #0F6FC4;
}

/* Fades into the page instead of stopping on a line. The end colour is white
   because that is what sits underneath; if the section below is ever coloured,
   change the gradient's end stop in Elementor to match it. */
.dphggg-hsb--gradient {
    --hsb-band:       linear-gradient(180deg, #E4EFFA 0%, #F4F9FD 62%, #FFFFFF 100%);
    --hsb-title:      #14181B;
    --hsb-trust:      #6A7075;
    --hsb-card-bg:    #FFFFFF;
    --hsb-card-bd:    #E1E9F1;
    --hsb-card-sh:    0 6px 20px rgba(16, 42, 67, .09);
    --hsb-divider:    #EDF0F3;
    --hsb-field-hov:  #F4F8FB;
    --hsb-label:      #14181B;
    --hsb-value:      #6A7075;
    --hsb-caret:      #8A9096;
    --hsb-btn:        #0F6FC4;
    --hsb-btn-fg:     #FFFFFF;
    --hsb-chip-label: #6A7075;
    /* Slightly translucent, so a chip picks up whatever part of the fade it
       sits on rather than punching a flat white hole in it. */
    --hsb-chip-bg:    rgba(255, 255, 255, .82);
    --hsb-chip-bd:    #DCE5EE;
    --hsb-chip-fg:    #1E2429;
    --hsb-chip-hov:   #FFFFFF;
    --hsb-chip-hov-bd:#0F6FC4;
    --hsb-focus:      #0F6FC4;
}

.dphggg-hsb--dark {
    --hsb-band:       linear-gradient(135deg, #0A5FA6 0%, #0B6FB4 60%, #1189C9 100%);
    --hsb-title:      #FFFFFF;
    --hsb-trust:      #BEDCF3;
    --hsb-card-bg:    #FFFFFF;
    --hsb-card-bd:    transparent;
    --hsb-card-sh:    0 10px 30px rgba(6, 40, 70, .28);
    --hsb-divider:    #EDF0F3;
    --hsb-field-hov:  #F4F7FA;
    --hsb-label:      #14181B;
    --hsb-value:      #6A7075;
    --hsb-caret:      #8A9096;
    --hsb-btn:        #F5A623;
    --hsb-btn-fg:     #14181B;
    --hsb-chip-label: #BEDCF3;
    --hsb-chip-bg:    rgba(255, 255, 255, .13);
    --hsb-chip-bd:    rgba(255, 255, 255, .40);
    --hsb-chip-fg:    #FFFFFF;
    --hsb-chip-hov:   rgba(255, 255, 255, .24);
    --hsb-chip-hov-bd:#FFFFFF;
    --hsb-focus:      #FFFFFF;
}

/* --- Band --------------------------------------------------------------- */
.dphggg-hsb {
    background: var(--hsb-band);
    padding: 16px 44px 18px;
    font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Break out of a boxed Elementor container. The script measures
   documentElement.clientWidth, which excludes the scrollbar; a plain
   calc(50% - 50vw) does not, and puts a horizontal scrollbar on the page. */
.dphggg-hsb--bleed {
    width: var(--hsb-bleed-w, 100%);
    margin-left: var(--hsb-bleed-l, 0);
    max-width: none;
}

.dphggg-hsb__inner { max-width: 1120px; margin: 0 auto; }

/* --- Heading row -------------------------------------------------------- */
.dphggg-hsb__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 11px;
}
.dphggg-hsb__title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--hsb-title);
}
.dphggg-hsb__trust {
    display: flex;
    gap: var(--hsb-trust-gap, 26px);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--hsb-trust);
    white-space: nowrap;
}
.dphggg-hsb__trust li::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    /* Falls back to the text colour, so the dot tracks the trust colour until
       someone deliberately sets it apart. */
    background: var(--hsb-trust-dot, currentColor);
    opacity: .5;
    margin-right: 9px;
    vertical-align: 2px;
}
.dphggg-hsb__trust--nodots li::before { content: none; }

/* An item with its own icon drops the dot, so a row can mix the two without
   any item carrying both. */
.dphggg-hsb__trust-item--icon::before { content: none !important; }

.dphggg-hsb__trust-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--hsb-trust-ico-gap, 8px);
    vertical-align: -2px;
    color: var(--hsb-trust-ico, currentColor);
}
/* Icon fonts and uploaded SVGs arrive as different elements, so both are
   sized from the same variable rather than one of them being left at
   whatever the library ships. */
.dphggg-hsb__trust-ico i,
.dphggg-hsb__trust-ico svg {
    display: block;
    width: var(--hsb-trust-ico-size, 14px);
    height: var(--hsb-trust-ico-size, 14px);
    font-size: var(--hsb-trust-ico-size, 14px);
    line-height: 1;
    fill: currentColor;
}

/* An item is a link only when one was set, so these rules have to leave a
   plain item looking exactly as it did: inheriting the colour and killing the
   underline does that. The difference shows on hover, not at rest. */
.dphggg-hsb__trust a {
    color: inherit;
    text-decoration: none;
    transition: color .14s ease, opacity .14s ease;
}
.dphggg-hsb__trust a:hover {
    color: var(--hsb-trust-hover, inherit);
    opacity: var(--hsb-trust-hover-op, .72);
}
.dphggg-hsb__trust a:focus-visible {
    outline: 2px solid var(--hsb-focus);
    outline-offset: 3px;
    border-radius: 3px;
}

/* --- Card --------------------------------------------------------------- */
.dphggg-hsb__card {
    display: flex;
    align-items: stretch;
    background: var(--hsb-card-bg);
    border: 1px solid var(--hsb-card-bd);
    border-radius: 14px;
    padding: 5px;
    box-shadow: var(--hsb-card-sh);
}
.dphggg-hsb__fields {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;          /* lets the pickers shrink instead of overflowing */
}
.dphggg-hsb__field {
    flex: 1 1 0;
    min-width: 0;
    display: block;
    padding: 12px 22px;
    border-radius: 11px;
    cursor: pointer;
    transition: background .14s ease;
}
.dphggg-hsb__field:hover { background: var(--hsb-field-hov); }

/* The divider belongs to the field on its right, and disappears next to a
   hovered field so the lit panel keeps a clean edge. */
.dphggg-hsb__field + .dphggg-hsb__field { border-left: 1px solid var(--hsb-divider); }
.dphggg-hsb__field:hover + .dphggg-hsb__field { border-left-color: transparent; }

.dphggg-hsb__label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--hsb-label);
    margin: 0 0 3px;
    cursor: pointer;
}

/* Native select. On a phone this opens the operating system's own picker,
   which beats any custom dropdown for speed, scrolling and screen readers,
   and costs no JavaScript. */
.dphggg-hsb__select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 100%;
    border: 0;
    background: transparent;
    padding: 0 20px 0 0;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: var(--hsb-value);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Caret drawn in CSS, so no icon font and no extra request. */
    background-image:
        linear-gradient(45deg,  transparent 50%, var(--hsb-caret) 50%),
        linear-gradient(135deg, var(--hsb-caret) 50%, transparent 50%);
    background-size: 6px 6px, 6px 6px;
    background-position: right 6px top 9px, right 1px top 9px;
    background-repeat: no-repeat;
}
.dphggg-hsb__select option { color: #14181B; }
.dphggg-hsb__select:focus-visible {
    outline: 2px solid var(--hsb-focus);
    outline-offset: 4px;
    border-radius: 3px;
}

.dphggg-hsb__go {
    flex: 0 0 auto;
    align-self: center;
    width: 52px;
    height: 52px;
    margin-right: 4px;
    border: 0;
    border-radius: 11px;
    background: var(--hsb-btn);
    color: var(--hsb-btn-fg);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform .14s ease, filter .14s ease;
}
/* Hover falls back to the resting colour plus a brightness lift, so a button
   with no hover colour set behaves exactly as it did. Setting one also sets
   the lift to 1, because a colour and a brightness filter applied together
   produce neither. */
.dphggg-hsb__go:hover {
    background: var(--hsb-btn-hover, var(--hsb-btn));
    color: var(--hsb-btn-fg-hover, var(--hsb-btn-fg));
    filter: brightness(var(--hsb-btn-hover-bright, 1.1));
}
.dphggg-hsb__go:active { transform: scale(.95); }
.dphggg-hsb__go:focus-visible { outline: 2px solid var(--hsb-focus); outline-offset: 3px; }

/* Magnifier: a ring plus a rotated bar. */
.dphggg-hsb__go-ico {
    display: block;
    position: relative;
    width: 17px;
    height: 17px;
    border: 2.3px solid currentColor;
    border-radius: 50%;
}
.dphggg-hsb__go-ico::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: -4px;
    width: 7px;
    height: 2.3px;
    border-radius: 2px;
    background: currentColor;
    transform: rotate(45deg);
}

/* --- Chips -------------------------------------------------------------- */
.dphggg-hsb__chips {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 13px;
    font-size: 14px;
}
.dphggg-hsb__chips-label {
    color: var(--hsb-chip-label);
    white-space: nowrap;
    margin-right: 2px;
}
.dphggg-hsb__chip {
    border: 1px solid var(--hsb-chip-bd);
    background: var(--hsb-chip-bg);
    border-radius: 999px;
    padding: 7px 16px;
    color: var(--hsb-chip-fg);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .14s ease, background .14s ease;
}
.dphggg-hsb__chip:hover {
    background: var(--hsb-chip-hov);
    border-color: var(--hsb-chip-hov-bd);
    color: var(--hsb-chip-fg);
}
.dphggg-hsb__chip:focus-visible { outline: 2px solid var(--hsb-focus); outline-offset: 2px; }

/* Desktop hides the mobile trigger, the sheet's own header and the phone
   destination box. */
.dphggg-hsb__mob,
.dphggg-hsb__sheet-head,
.dphggg-hsb__ta { display: none; }

/* ========================================================================
   TABLET
   Three fields still fit across 768px, so the card stays a single row and
   only the gutters and type come down a step. The trust list is allowed to
   wrap under the heading rather than squeezing the title.
   ======================================================================== */
@media (max-width: 1024px) {
    .dphggg-hsb { padding: 15px 28px 17px; }
    .dphggg-hsb__head { flex-wrap: wrap; gap: 6px 16px; }
    .dphggg-hsb__trust { gap: var(--hsb-trust-gap, 18px); font-size: 12.5px; }
    .dphggg-hsb__field { padding: 11px 16px; }
    .dphggg-hsb__label { font-size: 12px; }
    .dphggg-hsb__select { font-size: 14.5px; }
    .dphggg-hsb__go { width: 48px; height: 48px; }

    /* The chip row scrolls sideways instead of stacking into three lines. */
    .dphggg-hsb__chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .dphggg-hsb__chips::-webkit-scrollbar { display: none; }
    .dphggg-hsb__chip { flex: 0 0 auto; }
}

/* ========================================================================
   MOBILE
   The card needs three rows on a phone, so it becomes a bottom sheet behind
   one tappable pill. Same card language throughout.
   ======================================================================== */
@media (max-width: 767px) {

    .dphggg-hsb { padding: 13px 15px 15px; }

    .dphggg-hsb__head { display: block; margin-bottom: 9px; }
    .dphggg-hsb__title { font-size: 16px; margin-bottom: 6px; }
    /* Wraps rather than scrolls.
       A sideways scroll hid the third item behind an edge with nothing to say
       it was there, and adding icons made every item wider, so more of the
       line went missing. Three short claims wrap to two lines and cost about
       16px, which is cheaper than a trust line nobody can finish reading. */
    .dphggg-hsb__trust {
        flex-wrap: wrap;
        gap: 5px var(--hsb-trust-gap, 14px);
        font-size: 11.5px;
        white-space: normal;
        overflow: visible;
    }
    .dphggg-hsb__trust li {
        flex: 0 1 auto;
        min-width: 0;
        display: inline-flex;
        align-items: center;
    }
    .dphggg-hsb__trust li::before { width: 5px; height: 5px; margin-right: 6px; }
    .dphggg-hsb__trust-ico { margin-right: var(--hsb-trust-ico-gap, 6px); }

    /* The extra .dphggg-hsb on these selectors is deliberate.
       This is a <button>, and an Elementor kit styles buttons with something
       like `.elementor-kit-124951 button:hover`, which is two classes and an
       element. A plain `.dphggg-hsb__mob:hover` is only two classes and loses,
       which is how the kit's accent colour was landing on the pill when it was
       tapped. Three classes wins without needing !important. */
    .dphggg-hsb .dphggg-hsb__mob {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        background: var(--hsb-mob-bg, var(--hsb-card-bg));
        border: 1px solid var(--hsb-mob-bd, var(--hsb-card-bd));
        border-radius: 14px;
        padding: 14px 16px;
        box-shadow: var(--hsb-card-sh);
        font-family: inherit;
        font-size: 14.5px;
        color: var(--hsb-mob-fg, var(--hsb-value));
        text-align: left;
        cursor: pointer;
        /* Kills the grey flash iOS and Android paint over a tapped control. */
        -webkit-tap-highlight-color: transparent;
        transition: background .14s ease, color .14s ease, border-color .14s ease;
    }

    /* :active matters more than :hover here. A phone has no hover, so the tap
       state is what people actually see, and it is the state that was turning
       pink. :focus is included because a tap leaves focus behind on iOS. */
    .dphggg-hsb .dphggg-hsb__mob:hover,
    .dphggg-hsb .dphggg-hsb__mob:active,
    .dphggg-hsb .dphggg-hsb__mob:focus {
        background: var(--hsb-mob-bg-hover, var(--hsb-mob-bg, var(--hsb-card-bg)));
        color: var(--hsb-mob-fg-hover, var(--hsb-mob-fg, var(--hsb-value)));
        border-color: var(--hsb-mob-bd-hover, var(--hsb-mob-bd, var(--hsb-card-bd)));
    }
    .dphggg-hsb .dphggg-hsb__mob:focus-visible {
        outline: 2px solid var(--hsb-focus);
        outline-offset: 2px;
    }

    .dphggg-hsb__mob-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* The magnifier follows the pill's own text colour, so recolouring the
       pill never leaves the icon behind on the old one. */
    .dphggg-hsb__mob-ico {
        display: block;
        position: relative;
        width: 15px;
        height: 15px;
        border: 2.2px solid currentColor;
        border-radius: 50%;
        flex: 0 0 auto;
        color: var(--hsb-mob-ico, var(--hsb-label));
    }
    .dphggg-hsb .dphggg-hsb__mob:hover .dphggg-hsb__mob-ico,
    .dphggg-hsb .dphggg-hsb__mob:active .dphggg-hsb__mob-ico,
    .dphggg-hsb .dphggg-hsb__mob:focus .dphggg-hsb__mob-ico {
        color: var(--hsb-mob-ico-hover, var(--hsb-mob-ico, var(--hsb-label)));
    }
    .dphggg-hsb__mob-ico::after {
        content: "";
        position: absolute;
        right: -5px; bottom: -4px;
        width: 7px; height: 2.2px;
        border-radius: 2px;
        background: currentColor;
        transform: rotate(45deg);
    }

    /* Off screen until opened. visibility, not display, so it animates and
       stays out of the tab order while closed. */
    .dphggg-hsb__form {
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: rgba(20, 24, 27, .48);
        visibility: hidden;
        opacity: 0;
        transition: opacity .18s ease, visibility 0s linear .18s;
    }
    .dphggg-hsb__form.is-open {
        visibility: visible;
        opacity: 1;
        transition: opacity .18s ease;
    }

    .dphggg-hsb__card {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        flex-direction: column;
        align-items: stretch;
        border: 0;
        border-radius: 20px 20px 0 0;
        padding: 0 0 16px;
        box-shadow: 0 -8px 40px rgba(20, 24, 27, .22);
        transform: translateY(14px);
        transition: transform .18s ease;
        max-height: 88vh;
        overflow-y: auto;
    }
    .dphggg-hsb__form.is-open .dphggg-hsb__card { transform: translateY(0); }

    .dphggg-hsb__sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 18px 12px;
        font-size: 15px;
        font-weight: 600;
        color: #14181B;
        border-bottom: 1px solid var(--hsb-divider);
    }
    .dphggg-hsb__close {
        border: 0;
        background: transparent;
        font-size: 26px;
        line-height: 1;
        color: #6A7075;
        padding: 0 4px;
        cursor: pointer;
    }

    .dphggg-hsb__fields { flex-direction: column; }
    .dphggg-hsb__field {
        padding: 14px 18px;
        border-radius: 0;
        border-bottom: 1px solid var(--hsb-divider);
    }
    .dphggg-hsb__field:hover { background: transparent; }
    .dphggg-hsb__field + .dphggg-hsb__field { border-left: 0; }
    .dphggg-hsb__label { font-size: 12px; }

    /* 16px is what stops iOS zooming the page when a picker opens. */
    .dphggg-hsb__select {
        font-size: 16px;
        background-position: right 6px top 10px, right 1px top 10px;
    }

    .dphggg-hsb__go {
        width: auto;
        height: auto;
        align-self: stretch;
        margin: 16px 18px 0;
        padding: 16px;
        border-radius: 14px;
    }

    .dphggg-hsb__chips { margin-top: 11px; font-size: 13.5px; gap: 8px; }
    .dphggg-hsb__chips-label { display: none; }
    .dphggg-hsb__chip { padding: 6px 13px; }
}

/* ========================================================================
   PHONE DESTINATION BOX (mob_mode = typeahead)
   Replaces the pill and the sheet below 768px: one text box that searches
   destinations as people type, with the popular chips underneath.
   ======================================================================== */
@media (max-width: 767px) {

    .dphggg-hsb--mob-nohead .dphggg-hsb__head { display: none; }
    .dphggg-hsb--mob-nohead { padding-top: 8px; padding-bottom: 12px; }

    .dphggg-hsb--ta .dphggg-hsb__mob,
    .dphggg-hsb--ta .dphggg-hsb__form { display: none; }

    .dphggg-hsb--ta .dphggg-hsb__ta {
        display: block;
        position: relative;
        z-index: 50;
    }

    .dphggg-hsb__ta-box {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 46px;
        padding: 0 6px 0 14px;
        background: var(--hsb-mob-bg, var(--hsb-card-bg));
        border: 1px solid var(--hsb-mob-bd, var(--hsb-card-bd));
        border-radius: 10px;
        transition: border-color .14s ease, box-shadow .14s ease;
    }
    .dphggg-hsb__ta-box:focus-within {
        border-color: var(--hsb-btn);
        box-shadow: 0 0 0 3px rgba(15, 111, 196, .14);
    }

    .dphggg-hsb__ta-ico {
        display: block;
        position: relative;
        flex: 0 0 auto;
        width: 15px;
        height: 15px;
        border: 2.2px solid currentColor;
        border-radius: 50%;
        color: var(--hsb-mob-ico, var(--hsb-label));
    }
    .dphggg-hsb__ta-ico::after {
        content: "";
        position: absolute;
        right: -5px; bottom: -4px;
        width: 7px; height: 2.2px;
        border-radius: 2px;
        background: currentColor;
        transform: rotate(45deg);
    }

    /* The Elementor kit styles every text input with a selector like
       `.elementor-kit-124951 input:not([type="button"]):not([type="submit"])`,
       which outranks any reasonable class selector and drew a second rounded
       border inside the box. !important on the box-model properties is the
       one reliable way past it; the box itself carries the border. */
    .dphggg-hsb .dphggg-hsb__ta-box .dphggg-hsb__ta-input {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: 0 !important;
        font-family: inherit;
        font-size: 16px !important;
        line-height: 1.3;
        color: var(--hsb-label) !important;
        -webkit-appearance: none;
        appearance: none;
    }
    .dphggg-hsb .dphggg-hsb__ta-box .dphggg-hsb__ta-input::placeholder { color: var(--hsb-value); opacity: 1; }

    /* Same kit problem for buttons (it paints them on hover and tap). */
    .dphggg-hsb .dphggg-hsb__ta-box .dphggg-hsb__ta-clear,
    .dphggg-hsb .dphggg-hsb__ta-box .dphggg-hsb__ta-clear:hover,
    .dphggg-hsb .dphggg-hsb__ta-box .dphggg-hsb__ta-clear:focus,
    .dphggg-hsb .dphggg-hsb__ta-box .dphggg-hsb__ta-clear:active {
        flex: 0 0 auto;
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--hsb-caret) !important;
        font-family: inherit;
        font-size: 22px !important;
        line-height: 1 !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .dphggg-hsb .dphggg-hsb__ta-clear[hidden] { display: none; }

    .dphggg-hsb__ta-list {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        max-height: min(60vh, 420px);
        overflow-y: auto;
        margin: 0;
        padding: 4px 0;
        list-style: none;
        background: #fff;
        border: 1px solid #E1E7EE;
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(16, 42, 67, .12);
        -webkit-overflow-scrolling: touch;
    }
    .dphggg-hsb__ta-list[hidden] { display: none; }

    .dphggg-hsb__ta-opt,
    .dphggg-hsb__ta-all,
    .dphggg-hsb__ta-none {
        margin: 0;
        padding: 11px 14px;
        font-size: 15px;
        line-height: 1.3;
        color: #14181B;
        border-bottom: 1px solid #EEF1F4;
    }
    .dphggg-hsb__ta-opt,
    .dphggg-hsb__ta-all { cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .dphggg-hsb__ta-opt.is-active,
    .dphggg-hsb__ta-all.is-active,
    .dphggg-hsb__ta-opt:active { background: #F3F7FB; }

    .dphggg-hsb__ta-name { display: block; }
    .dphggg-hsb__ta-name b { font-weight: 600; }
    .dphggg-hsb__ta-sub {
        display: block;
        margin-top: 2px;
        font-size: 12.5px;
        color: #6A7075;
    }
    .dphggg-hsb__ta-none { color: #6A7075; }
    .dphggg-hsb__ta-all {
        border-bottom: 0;
        color: var(--hsb-btn);
        font-weight: 500;
    }

    .dphggg-hsb--ta .dphggg-hsb__chips { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .dphggg-hsb__form,
    .dphggg-hsb__card,
    .dphggg-hsb__field,
    .dphggg-hsb__go,
    .dphggg-hsb__chip,
    .dphggg-hsb__ta-box { transition: none; }
}

/* --- Language switch [dapper_lang_switch] (4.10.0) -----------------------
   Loaded on every page with the header, so the switch can sit anywhere. */
.dphggg-lang {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    line-height: 1;
}
.dphggg-lang__item {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #D5D7DB;
    border-radius: 999px;
    color: #1A1A1A;
    background: #FFFFFF;
    text-decoration: none !important;
}
.dphggg-lang a.dphggg-lang__item:hover {
    border-color: #1A1A1A;
}
.dphggg-lang__item.is-current {
    background: #1A1A1A;
    border-color: #1A1A1A;
    color: #FFFFFF;
    font-weight: 600;
}

/* --- Language menu [dapper_lang_switch] (4.10.3) -------------------------
   Looks like the Sort box beside it: a globe and the browser's own select,
   Rubik 600 15px, dark text, no border. On phones the tour search bar turns
   it into the blue "globe EN" control (dphggg-archive CSS). */
.dphggg-langmenu {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    color: #1A1A1A;
    font-family: 'Rubik', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.dphggg-langmenu__icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}
.dphggg-langmenu__short { display: none; }
body .dphggg-langmenu select.dphggg-langmenu__select {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px 24px 6px 4px !important;
    border: 0 !important;
    border-radius: 3px !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
    cursor: pointer;
    /* As wide as the chosen name, not the longest one (newer browsers). */
    field-sizing: content;
}
body .dphggg-langmenu select.dphggg-langmenu__select:focus-visible {
    outline: 2px solid #0F6FC4;
    outline-offset: 2px;
}

/* --- Language tag after the tour count (4.10.6) --------------------------
   "133 tours in [globe EN v]": a small grey tag, the same on desktop and
   phones. The select is invisible and covers the tag, so a click or tap
   opens the browser's or phone's own list. */
.dphggg-langmenu--tag {
    gap: 4px;
    margin: 0 0 0 2px;
    padding: 3px 8px 3px 7px;
    border-radius: 999px;
    background: #EEF1F4;
    color: #1A1A1A;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
}
/* The count line becomes a centred row when it holds the tag, so the tag
   sits level with "133 tours in" instead of riding on the text baseline
   (4.10.7). The gap stands in for the spaces between the parts. */
.dphggg-tour-count:has(.dphggg-langmenu--tag) {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0 .3em;
}
.dphggg-langmenu--tag:hover { background: #E3E7EC; }
.dphggg-langmenu--tag:focus-within { outline: 2px solid #0F6FC4; outline-offset: 1px; }
.dphggg-langmenu--tag .dphggg-langmenu__icon { width: 13px; height: 13px; }
.dphggg-langmenu--tag .dphggg-langmenu__chev { width: 10px; height: 10px; }
body .dphggg-langmenu--tag .dphggg-langmenu__short { display: inline; }
body .dphggg-langmenu--tag select.dphggg-langmenu__select {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    opacity: 0;
    font-size: 16px !important;
    -webkit-appearance: none;
    appearance: none;
}

/* --- Phone destination list above the search page's sticky bar (4.10.1) ---
   The header and the tour search page's Tour Packages / Filters / Sort bar
   (.dphggg-arch__head, z-index 90) are siblings, so the bar painted over the
   open list. While the list is open the whole header is lifted above it; it
   drops back to normal when the list closes, so the bar is never covered
   while scrolling. */
.elementor-location-header:has(.dphggg-hsb__ta-list:not([hidden])) {
    position: relative;
    z-index: 1000;
}

/* ========================================================================
   DROPDOWN LISTS (4.10.31)
   Tablet and desktop: each field opens the homepage hero's white list
   instead of the browser's menu, and "Where to?" can be a box to type in.
   The select stays in the form, visually hidden, and holds the value.
   Phones keep the native select in the sheet (the swap is at 767px).
   ======================================================================== */
.dphggg-hsb__dd { display: none; position: relative; }

@media (min-width: 768px) {
    .dphggg-hsb__dd { display: block; }
    .dphggg-hsb__field { position: relative; }
    .dphggg-hsb__field:focus-within {
        background: var(--hsb-field-hov);
        box-shadow: inset 0 0 0 2px var(--hsb-focus);
    }
    .dphggg-hsb__field:focus-within + .dphggg-hsb__field { border-left-color: transparent; }

    .dphggg-hsb select.dphggg-hsb__select--enhanced {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
}

/* Same look as the select it replaces. Three classes beat the Elementor
   kit's button and input styles (see the phone pill above). */
.dphggg-hsb .dphggg-hsb__field button.dphggg-hsb__pick {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0 20px 0 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    background-image:
        linear-gradient(45deg,  transparent 50%, var(--hsb-caret) 50%),
        linear-gradient(135deg, var(--hsb-caret) 50%, transparent 50%);
    background-size: 6px 6px, 6px 6px;
    background-position: right 6px top 9px, right 1px top 9px;
    background-repeat: no-repeat;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    color: var(--hsb-value);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.dphggg-hsb .dphggg-hsb__field button.dphggg-hsb__pick:hover,
.dphggg-hsb .dphggg-hsb__field button.dphggg-hsb__pick:focus {
    background-color: transparent;
    color: var(--hsb-value);
    outline: none;
}
.dphggg-hsb .dphggg-hsb__field button.dphggg-hsb__pick.is-set { color: var(--hsb-label); }

.dphggg-hsb .dphggg-hsb__field input.dphggg-hsb__combo {
    display: block;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: var(--hsb-label);
    text-overflow: ellipsis;
}
.dphggg-hsb .dphggg-hsb__field input.dphggg-hsb__combo::placeholder { color: var(--hsb-value); opacity: 1; }

.dphggg-hsb__dd-list {
    position: absolute;
    z-index: 60;
    top: calc(100% + 16px);
    left: -14px;
    width: calc(100% + 28px);
    min-width: 300px;
    max-height: min(380px, 60vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    background: #FFFFFF;
    border: 1px solid #DCE5EE;
    border-radius: 16px;
    box-shadow: 0 24px 48px -16px rgba(3, 20, 36, .35);
    text-align: left;
}
.dphggg-hsb__dd-opt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    color: #14181B;
}
.dphggg-hsb__dd-opt[data-depth="0"] { font-weight: 600; }
.dphggg-hsb__dd-opt small {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 400;
    color: #6A7075;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dphggg-hsb__dd-opt.is-active,
.dphggg-hsb__dd-opt:hover { background: #EEF5FC; }
.dphggg-hsb__dd-opt[aria-selected="true"] { color: var(--hsb-btn); }
.dphggg-hsb__dd-opt mark { background: none; color: inherit; font-weight: 700; padding: 0; }
.dphggg-hsb__dd-empty { padding: 12px; font-size: 14px; color: #6A7075; }

/* The open list hangs below the header; lift the header over the page
   while it is open, as for the phone list. */
.elementor-location-header:has(.dphggg-hsb__dd-list:not([hidden])) {
    position: relative;
    z-index: 1000;
}
.elementor-widget:has(.dphggg-hsb__dd-list:not([hidden])),
.e-con:has(.dphggg-hsb__dd-list:not([hidden])) { z-index: 30; }

/* ========================================================================
   LANGUAGE SWITCH (4.10.31)
   The grey tag from the search page's tour count, beside the heading. Its
   select is invisible and covers the tag, so a click or tap opens the
   browser's or phone's own list. On phones a second copy sits beside the
   destination box.
   ======================================================================== */
.dphggg-hsb__titlerow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-width: 0;
}
.dphggg-hsb .dphggg-hsb__lang {
    flex: 0 0 auto;
    margin: 0;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--hsb-card-bd);
    color: #1A1A1A;
}
.dphggg-hsb .dphggg-hsb__lang:hover { background: #F3F6F9; }
body .dphggg-langmenu--tag select.dphggg-hsb__lang-select {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    font-size: 16px !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.dphggg-hsb__lang--mob { display: none; }

@media (max-width: 767px) {
    .dphggg-hsb__lang--head { display: none; }
    .dphggg-hsb__mrow {
        display: flex;
        align-items: stretch;
        gap: 8px;
    }
    .dphggg-hsb__mrow > .dphggg-hsb__ta,
    .dphggg-hsb__mrow > .dphggg-hsb__mob { flex: 1 1 auto; min-width: 0; }
    .dphggg-hsb .dphggg-hsb__lang--mob {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 0 11px;
        min-height: 46px;
        border-radius: 10px;
        box-shadow: inset 0 0 0 1px var(--hsb-mob-bd, var(--hsb-card-bd));
        background: var(--hsb-mob-bg, var(--hsb-card-bg));
        font-size: 13.5px;
        font-weight: 500;
    }
    .dphggg-hsb__lang--mob .dphggg-langmenu__icon { width: 15px; height: 15px; }
}