/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * Lavisa Destinations Theme — HERO POLISH (3.1.6 — corrected)
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * @file        assets/css/ldt-enhanced-hero-polish.css
 * @package     Lavisa_Destinations_Theme
 * @since       3.1.6  (replaces 3.1.5 — the previous attempt picked the wrong
 *              colors for chips and didn't have specificity high enough to win
 *              over the inline <style> block in hero-home.php)
 * @depends     ALL prior enhanced CSS (loads after cta-polish at end of chain)
 *
 *
 * WHY 3.1.5 LOOKED WORSE
 *
 *   1. CHIPS — I used WHITE text on a translucent-WHITE chip surface, expecting
 *      them to render on the dark hero gradient. They actually render INSIDE
 *      the light-glass search pill (the search bar's own background), so white
 *      on white-glass = invisible.
 *
 *   2. DOTS — I used selector specificity 0,1,1 (`body .ldt-hero-carousel__dot`)
 *      with !important. That should beat the inline <style> rule's 0,1,0
 *      specificity. But the inline rule's `.is-active { width: 64px }` fights
 *      with my width override, and my width:9px wasn't quite winning everywhere.
 *      Plus the user's render shows 30-40px circles — the !important alone
 *      wasn't winning, possibly because a button user-agent default min-width
 *      or a multi-class combo selector elsewhere had higher specificity.
 *
 *
 * THIS FIX
 *
 *   • CHIPS: use a brand-blue tinted surface with brand-blue text — proper
 *     contrast against the light glass. Hover keeps the accent-gradient fill.
 *
 *   • DOTS: use a super-high-specificity selector
 *     `body .ldt-hero-carousel .ldt-hero-carousel__dots button.ldt-hero-carousel__dot`
 *     (specificity 0,4,1) plus min-width/max-width/min-height/max-height all
 *     with !important so nothing in the cascade can fight us. Same for the
 *     active expansion.
 *
 *   PURE CSS LAYER — NO PHP partial is touched.
 *
 * ═══════════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════════════
 * 0. WHITE WRAPPER REMOVAL (3.1.9)
 *
 * The E7 rule in ldt-enhanced-hero.css line 364 wraps the entire
 * `.ldt-autocomplete--hero` (search pill + chips) in a 92% white glass
 * container with 8px padding, border, and large drop shadow. The user
 * wants the navy search pill + chips to float directly on the hero
 * gradient — no white container.
 *
 * Override: zero out the wrapper bg / blur / border / padding / shadow.
 * The navy pill (Section 3) already provides its own depth treatment.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hero-shared__search .ldt-autocomplete--hero {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

body .ldt-hero-shared__search .ldt-autocomplete--hero:focus-within {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 1. POPULAR DESTINATIONS CHIPS — "Gear Guides" button style (3.1.9)
 *
 * Updated from 3.1.6 (brand-blue tint chips on light glass) since the white
 * wrapper is gone. The chips now sit directly on the dark hero gradient and
 * need a different color treatment.
 *
 * Reference: the "Gear Guides" button from the user's screenshot — dark
 * translucent surface, subtle white border, white text, moderately rounded.
 * Translates to:
 *   background: rgba(0, 0, 0, 0.40)
 *   border: 1px solid rgba(255, 255, 255, 0.22)
 *   color: white
 *   border-radius: 8px (moderate, not pill)
 * ═══════════════════════════════════════════════════════════════════════════════ */


/* 1.1 — Container and "POPULAR:" label (now on dark hero bg) */

body .ldt-autocomplete--hero .ldt-autocomplete__popular {
    margin-top: 14px !important;
    gap: 8px !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

body .ldt-autocomplete--hero .ldt-autocomplete__popular-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(255, 255, 255, 0.75) !important;     /* White on dark — readable on hero gradient */
    margin-right: 4px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
}


/* 1.2 — Hide the bullet separators */

body .ldt-autocomplete--hero .ldt-autocomplete__popular-dot {
    display: none !important;
}


/* 1.3 — Each chip: dark translucent glass with white text (Gear Guides style) */

body .ldt-autocomplete--hero .ldt-autocomplete__popular-link {
    display: inline-flex !important;
    align-items: center;
    padding: 7px 16px !important;
    background: rgba(0, 0, 0, 0.40) !important;             /* Dark translucent surface */
    border: 1px solid rgba(255, 255, 255, 0.22) !important; /* Subtle light outline */
    border-radius: 8px !important;                          /* Moderate rounded — not pill */
    color: #ffffff !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    letter-spacing: 0.01em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    transition:
        background 320ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
        color 320ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-autocomplete--hero .ldt-autocomplete__popular-link:hover {
        background: linear-gradient(
            135deg,
            #ff9d1a 0%,
            #ff8c00 50%,
            #e07a00 100%
        ) !important;
        border-color: transparent !important;
        color: #ffffff !important;
        text-decoration: none !important;
        transform: translateY(-2px);
        box-shadow:
            0 8px 18px rgba(255, 140, 0, 0.50),
            0 0 0 1px rgba(255, 255, 255, 0.20) inset !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 2. CAROUSEL DOTS — small dots with high-specificity overrides
 *
 * The inline <style> in hero-home.php enforces:
 *   .ldt-hero-carousel__dot          → width: 44px; height: 4px;
 *   .ldt-hero-carousel__dot.is-active → width: 64px;
 *
 * Plus there are existing E6 enhancement rules in ldt-enhanced-hero.css that
 * style the active dot with an accent gradient.
 *
 * We need to BEAT all of them. Strategy:
 *
 *   - Use a multi-class compound selector: 0,3,1 specificity
 *     `body .ldt-hero-carousel .ldt-hero-carousel__dots button.ldt-hero-carousel__dot`
 *     This beats anything that uses a single class chain.
 *
 *   - Apply size constraints REDUNDANTLY:
 *       width / min-width / max-width all with !important
 *       height / min-height / max-height all with !important
 *       This way no min-width default (browser button user-agent reset, or any
 *       framework reset that targets buttons) can fight us.
 *
 *   - For the expanded active state, set max-width: 28px (override the inactive
 *     max-width: 9px) plus width: 28px — so the rule wins regardless of
 *     property load order.
 *
 *   - flex-basis + flex-grow + flex-shrink for the flex container case.
 *
 *   - aspect-ratio: 1 / 1 on inactive dots so they stay square (then circle via
 *     border-radius) even if some other rule overrides height.
 *
 *   - Override the inner dot-fill span to be invisible — the partial uses it
 *     for an animated fill effect we don't need now.
 * ═══════════════════════════════════════════════════════════════════════════════ */


/* 2.1 — Container alignment + position */

body .ldt-hero-carousel .ldt-hero-carousel__dots {
    gap: 10px !important;
    bottom: 32px !important;
    align-items: center !important;
}


/* 2.2 — Each dot: 9px circle (inactive). Multi-class selector for high specificity. */

body .ldt-hero-carousel .ldt-hero-carousel__dots button.ldt-hero-carousel__dot {
    /* Size — redundant constraints so nothing can fight */
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    min-height: 9px !important;
    max-width: 9px !important;
    max-height: 9px !important;

    /* Layout */
    display: block !important;
    flex: 0 0 9px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;

    /* Visuals */
    background: rgba(255, 255, 255, 0.40) !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
    cursor: pointer !important;

    /* Behavior */
    transition:
        max-width 380ms cubic-bezier(0.22, 1, 0.36, 1),
        width 380ms cubic-bezier(0.22, 1, 0.36, 1),
        flex-basis 380ms cubic-bezier(0.22, 1, 0.36, 1),
        background 380ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 380ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 380ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}


/* 2.3 — Hover: brighten + tiny scale (no expansion — that's reserved for active) */

@media (hover: hover) and (pointer: fine) {
    body .ldt-hero-carousel .ldt-hero-carousel__dots button.ldt-hero-carousel__dot:hover:not(.is-active) {
        background: rgba(255, 255, 255, 0.75) !important;
        border-color: rgba(255, 255, 255, 0.55) !important;
        transform: scale(1.20) !important;
    }
}


/* 2.4 — Active state: expand to 28×9 pill in accent gradient */

body .ldt-hero-carousel .ldt-hero-carousel__dots button.ldt-hero-carousel__dot.is-active {
    /* Override the max-width:9px with a higher max-width so width can grow to 28px */
    width: 28px !important;
    max-width: 28px !important;
    flex: 0 0 28px !important;

    /* Height stays 9px (still pill, not blob) */
    height: 9px !important;
    max-height: 9px !important;

    /* Visuals */
    background: linear-gradient(
        90deg,
        #ff9d1a 0%,
        #ff8c00 50%,
        #e07a00 100%
    ) !important;
    border-color: transparent !important;
    box-shadow:
        0 0 12px rgba(255, 140, 0, 0.60),
        0 0 0 1px rgba(255, 255, 255, 0.22) inset !important;
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-hero-carousel .ldt-hero-carousel__dots button.ldt-hero-carousel__dot.is-active:hover {
        transform: none !important;
        filter: brightness(1.10);
    }
}


/* 2.5 — Hide the inner dot-fill span (the partial includes it for an older
   per-dot fill animation we don't need anymore — the active state itself
   IS the fill now) */

body .ldt-hero-carousel .ldt-hero-carousel__dot .ldt-hero-carousel__dot-fill {
    display: none !important;
}


/* 2.6 — Focus-visible outline for keyboard navigation */

body .ldt-hero-carousel .ldt-hero-carousel__dot:focus-visible {
    outline: 2px solid #ff8c00 !important;
    outline-offset: 3px !important;
}


/* 2.7 — Reduced motion */

@media (prefers-reduced-motion: reduce) {
    body .ldt-hero-carousel .ldt-hero-carousel__dot,
    body .ldt-autocomplete--hero .ldt-autocomplete__popular-link {
        transition: none !important;
    }

    body .ldt-hero-carousel .ldt-hero-carousel__dot:hover,
    body .ldt-autocomplete--hero .ldt-autocomplete__popular-link:hover {
        transform: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 3. SEARCH BAR — NAVY TAB-BAR STYLE (3.1.8 — bold redesign)
 *
 * 3.1.7 used a white-glass pill with an accent indicator zone — visually
 * polished but the user said "nothing changed". They wanted something more
 * dramatic, more clearly aligned with the booking page's segmented tab bar
 * (deep navy active pill, accent-orange icons, glass treatment).
 *
 * This redesign treats the search bar as a single SOLID NAVY ACTIVE TAB
 * (like Hotels in the booking screenshot):
 *
 *   • Navy gradient pill: #002560 → #003580 → #0057b8
 *   • White inset highlight + brand-shadow + accent-glow strip
 *   • Search icon area: brighter accent-orange tinted zone (more present)
 *   • Search icon: solid accent orange
 *   • Input text: white at 600 weight
 *   • Placeholder: rgba(255, 255, 255, 0.65)
 *   • Hover: 1.5px lift + intensified accent glow
 *   • Focus: 4px accent ring + 2px lift + brighter indicator zone
 *
 * This is dramatically different from idle white-glass — should be
 * immediately recognizable as a deliberate change.
 *
 * Note: chip row (.ldt-autocomplete__popular) is OUTSIDE the input-wrap
 * so its brand-blue-on-light styling is unaffected. Two distinct visual
 * regions: navy tab pill ON TOP, brand chips BELOW.
 * ═══════════════════════════════════════════════════════════════════════════════ */


/* 3.1 — Outer pill: NAVY GRADIENT (was white frosted glass in 3.1.7) */

body .ldt-autocomplete--hero .ldt-autocomplete__input-wrap {
    position: relative;
    border-radius: var(--ldt-radius-pill, 9999px) !important;
    background:
        /* Top-right accent glow */
        radial-gradient(
            circle at 95% 0%,
            rgba(255, 140, 0, 0.18) 0%,
            transparent 40%
        ),
        /* Base navy gradient */
        linear-gradient(
            135deg,
            #002560 0%,
            #003580 50%,
            #0057b8 100%
        ) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.16) inset,
        0 0 0 1px rgba(0, 53, 128, 0.20),
        0 18px 50px -10px rgba(0, 53, 128, 0.55),
        0 8px 18px rgba(0, 0, 0, 0.20) !important;
    transition:
        box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 380ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    overflow: visible;
}

[dir="rtl"] body .ldt-autocomplete--hero .ldt-autocomplete__input-wrap,
.ldt-rtl body .ldt-autocomplete--hero .ldt-autocomplete__input-wrap {
    background:
        radial-gradient(
            circle at 5% 0%,
            rgba(255, 140, 0, 0.18) 0%,
            transparent 40%
        ),
        linear-gradient(
            225deg,
            #002560 0%,
            #003580 50%,
            #0057b8 100%
        ) !important;
}


/* 3.2 — Accent indicator zone behind the icon (brighter on navy) */

body .ldt-autocomplete--hero .ldt-autocomplete__input-wrap::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: linear-gradient(
        135deg,
        rgba(255, 140, 0, 0.32) 0%,
        rgba(255, 140, 0, 0.18) 100%
    );
    border: 1px solid rgba(255, 140, 0, 0.45);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(255, 140, 0, 0.30);
    transition: all 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

[dir="rtl"] body .ldt-autocomplete--hero .ldt-autocomplete__input-wrap::before,
.ldt-rtl body .ldt-autocomplete--hero .ldt-autocomplete__input-wrap::before {
    left: auto;
    right: 8px;
}


/* 3.3 — Search icon: brighter accent on navy */

body .ldt-autocomplete--hero .ldt-autocomplete__icon {
    position: absolute !important;
    left: 22px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    color: #ff9d1a !important;
    z-index: 2 !important;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(255, 140, 0, 0.40));
}

[dir="rtl"] body .ldt-autocomplete--hero .ldt-autocomplete__icon,
.ldt-rtl body .ldt-autocomplete--hero .ldt-autocomplete__icon {
    left: auto !important;
    right: 22px !important;
}


/* 3.4 — Input: WHITE text on navy (was dark on white in 3.1.7) */

body .ldt-autocomplete--hero .ldt-autocomplete__input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 18px 28px 18px 64px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    letter-spacing: -0.005em;
    width: 100%;
    border-radius: var(--ldt-radius-pill, 9999px) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

[dir="rtl"] body .ldt-autocomplete--hero .ldt-autocomplete__input,
.ldt-rtl body .ldt-autocomplete--hero .ldt-autocomplete__input {
    padding: 18px 64px 18px 28px !important;
}


/* 3.5 — Placeholder: light translucent white (readable on navy) */

body .ldt-autocomplete--hero .ldt-autocomplete__input::placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
    font-weight: 500 !important;
    letter-spacing: 0;
}


/* 3.6 — Hover state (unfocused): 1.5px lift + intensified accent glow */

@media (hover: hover) and (pointer: fine) {
    body .ldt-autocomplete--hero .ldt-autocomplete__input-wrap:hover:not(:focus-within) {
        transform: translateY(-1.5px);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.22) inset,
            0 0 0 1px rgba(255, 140, 0, 0.30),
            0 24px 60px -10px rgba(0, 53, 128, 0.65),
            0 10px 22px rgba(255, 140, 0, 0.18) !important;
    }

    body .ldt-autocomplete--hero .ldt-autocomplete__input-wrap:hover:not(:focus-within)::before {
        background: linear-gradient(
            135deg,
            rgba(255, 140, 0, 0.42) 0%,
            rgba(255, 140, 0, 0.24) 100%
        );
        border-color: rgba(255, 140, 0, 0.60);
        box-shadow: 0 0 16px rgba(255, 140, 0, 0.45);
    }
}


/* 3.7 — Focus state: 4px accent ring + 2px lift + brighter indicator */

body .ldt-autocomplete--hero .ldt-autocomplete__input-wrap:focus-within {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 4px rgba(255, 140, 0, 0.40),
        0 0 0 1px rgba(255, 255, 255, 0.30) inset,
        0 28px 70px -12px rgba(0, 53, 128, 0.70),
        0 12px 26px rgba(255, 140, 0, 0.25) !important;
}

body .ldt-autocomplete--hero .ldt-autocomplete__input-wrap:focus-within::before {
    background: linear-gradient(
        135deg,
        #ff9d1a 0%,
        #ff8c00 100%
    );
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow:
        0 0 18px rgba(255, 140, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.25) inset;
    transform: translateY(-50%) scale(1.08);
}

body .ldt-autocomplete--hero .ldt-autocomplete__input-wrap:focus-within .ldt-autocomplete__icon {
    color: #ffffff !important;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.40));
}

/* Strip the input's own focus outline (the wrap handles all visual feedback) */
body .ldt-autocomplete--hero .ldt-autocomplete__input:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* 3.8 — Clear button + spinner: visible on navy bg */

body .ldt-autocomplete--hero .ldt-autocomplete__clear,
body .ldt-autocomplete--hero .ldt-autocomplete__spinner {
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.90) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    cursor: pointer;
    z-index: 2;
    transition:
        background 220ms cubic-bezier(0.22, 1, 0.36, 1),
        color 220ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

[dir="rtl"] body .ldt-autocomplete--hero .ldt-autocomplete__clear,
[dir="rtl"] body .ldt-autocomplete--hero .ldt-autocomplete__spinner,
.ldt-rtl body .ldt-autocomplete--hero .ldt-autocomplete__clear,
.ldt-rtl body .ldt-autocomplete--hero .ldt-autocomplete__spinner {
    right: auto !important;
    left: 18px !important;
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-autocomplete--hero .ldt-autocomplete__clear:hover {
        background: rgba(255, 140, 0, 0.36) !important;
        color: #ffffff !important;
        border-color: rgba(255, 140, 0, 0.60) !important;
        transform: translateY(-50%) rotate(90deg);
    }
}


/* 3.9 — Reduced motion */

@media (prefers-reduced-motion: reduce) {
    body .ldt-autocomplete--hero .ldt-autocomplete__input-wrap,
    body .ldt-autocomplete--hero .ldt-autocomplete__input-wrap::before,
    body .ldt-autocomplete--hero .ldt-autocomplete__clear {
        transition: none !important;
    }

    body .ldt-autocomplete--hero .ldt-autocomplete__input-wrap:hover,
    body .ldt-autocomplete--hero .ldt-autocomplete__input-wrap:focus-within {
        transform: none !important;
    }

    body .ldt-autocomplete--hero .ldt-autocomplete__input-wrap:focus-within::before {
        transform: translateY(-50%) !important;
    }

    body .ldt-autocomplete--hero .ldt-autocomplete__clear:hover {
        transform: translateY(-50%) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 4. RESPONSIVE — mobile tightening
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    body .ldt-autocomplete--hero .ldt-autocomplete__popular-link {
        padding: 4px 12px !important;
        font-size: 12px !important;
    }

    body .ldt-hero-carousel .ldt-hero-carousel__dots {
        left: 50% !important;
        transform: translateX(-50%);
        bottom: 18px !important;
    }

    body .ldt-hero-carousel .ldt-hero-carousel__dots button.ldt-hero-carousel__dot.is-active {
        width: 24px !important;
        max-width: 24px !important;
        flex: 0 0 24px !important;
    }

    /* Search bar — tighter padding + smaller indicator zone */
    body .ldt-autocomplete--hero .ldt-autocomplete__input-wrap::before {
        width: 38px;
        height: 38px;
        left: 6px;
    }

    body .ldt-autocomplete--hero .ldt-autocomplete__icon {
        left: 18px !important;
        width: 18px !important;
        height: 18px !important;
    }

    body .ldt-autocomplete--hero .ldt-autocomplete__input {
        padding: 14px 22px 14px 54px !important;
        font-size: 15px !important;
    }

    [dir="rtl"] body .ldt-autocomplete--hero .ldt-autocomplete__input,
    .ldt-rtl body .ldt-autocomplete--hero .ldt-autocomplete__input {
        padding: 14px 54px 14px 22px !important;
    }

    [dir="rtl"] body .ldt-autocomplete--hero .ldt-autocomplete__icon,
    .ldt-rtl body .ldt-autocomplete--hero .ldt-autocomplete__icon {
        right: 18px !important;
    }

    body .ldt-autocomplete--hero .ldt-autocomplete__clear,
    body .ldt-autocomplete--hero .ldt-autocomplete__spinner {
        right: 14px !important;
        width: 24px !important;
        height: 24px !important;
    }
}


/* ─── END OF ldt-enhanced-hero-polish.css ─────────────────────────────────── */