/* 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 and the sheet's own header. */
.dphggg-hsb__mob,
.dphggg-hsb__sheet-head { 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; }
}

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