/* =================================================================
   FORMS
   Select caret circle + custom branded dropdown (.ipg-select).
   Loaded by inc/enqueue.php (order matters: see the list there).
   ================================================================= */

/* ---------------------------------------------------------------
   Form select caret — cobalt circle with the ipg-arrow-down glyph.
   Applies to EVERY Elementor form <select> site-wide. Elementor
   already sets appearance:none and renders its own caret inside
   .select-caret-down-wrapper — we turn that wrapper into the circle
   and select.js swaps its SVG for <i class="ipg ipg-arrow-down">, the
   kit's own class, so the arrow tracks the icon kit through
   regenerations (family name, codepoint) with nothing to update here.
   The ::after glyph below is only a no-JS fallback, and it IS tied to
   the current kit ("ipg-icons", \e839) — if the kit changes it may
   go stale, but it only ever shows when the script didn't run.
--------------------------------------------------------------- */

/* room so the selected value doesn't underlap the circle */
.elementor-select-wrapper select.elementor-field-textual {
    padding-right: 52px !important;
}

/* the caret wrapper becomes the cobalt circle */
.elementor-select-wrapper .select-caret-down-wrapper {
    top: 50% !important;
    right: 10px !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--ipg-cobalt);
    border-radius: 999px;
    pointer-events: none;   /* clicks fall through to open the select */
}

/* hide Elementor's default caret SVG */
.elementor-select-wrapper .select-caret-down-wrapper svg {
    display: none !important;
}

/* the kit icon (from select.js): white, centred in the circle */
.elementor-select-wrapper .select-caret-down-wrapper i.ipg {
    display: block;
    color: #fff;
    font-size: 15px;
    line-height: 1;
}

/* no-JS fallback glyph, only when the <i> isn't there */
.elementor-select-wrapper .select-caret-down-wrapper:not(:has(i.ipg))::after {
    content: "\e839";
    font-family: "ipg-icons";
    font-weight: 400;
    color: #fff;
    font-size: 15px;
    line-height: 1;
}

/* ---------------------------------------------------------------
   Custom form dropdown — replaces the OS-rendered <select> popup
   (which CSS cannot style) with a branded, frosted-glass list.
   Built by assets/js/select.js on every Elementor form
   select. The REAL <select> stays in the DOM, keeps its name/value,
   and receives every choice + a change event, so Elementor's
   submission, validation and required-field logic are untouched.

   Design: the list reads as a continuation of the frosted pill —
   translucent white, backdrop blur, 20px radius, soft navy shadow;
   options highlight cobalt-tinted on hover/keyboard, the chosen one
   is cobalt with a tick. The cobalt caret circle flips when open.

   Mobile (<768px) keeps the NATIVE picker: it's the better UX on
   touch (big OS-level scroller) and avoids fighting the keyboard.
   Fully keyboard-driven + ARIA listbox (see script).

   ONLY THE POPUP IS CUSTOM. The <select> box itself stays fully
   visible and styled by Elementor, exactly like every other field
   — so it always matches the form, and any field-style change you
   make in Elementor carries through automatically. The trigger
   button is an INVISIBLE overlay on top of the select that only
   captures clicks/keyboard; it draws nothing. (The old approach
   drew its own pill and could never stay in sync with the form.)
--------------------------------------------------------------- */
.ipg-select {
    position: relative;
}
/* the native select stays visible + Elementor-styled; we only stop
   the OS popup from opening (the overlay button handles clicks) */
.ipg-select > select {
    pointer-events: none;
}
/* wrapper we create for opted-in selects (see select.js) */
.ipg-select-wrap {
    display: inline-block;
    max-width: 100%;
}
/* invisible overlay: captures click + keyboard focus, draws nothing.
   !important on the paint properties: the theme/Elementor apply
   global <button> styling (cobalt border, etc.) that would otherwise
   paint a ring over the field. */
.ipg-select-btn,
.ipg-select-btn:hover,
.ipg-select-btn:focus,
.ipg-select-btn:active {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none;               /* focus ring is drawn on the select instead */
    -webkit-appearance: none;
    appearance: none;
    border-radius: inherit;
    cursor: pointer;
    font: inherit;
    color: transparent !important;   /* label is read by AT via aria; not drawn */
    z-index: 1;                  /* above the select, below the caret circle */
}
/* keep the caret (ours or a plugin's) above the overlay, clicks through.
   z-index only — both carets are already absolutely positioned by their
   own CSS, and setting position here would pull the plugin's icon into
   the flow (it showed up UNDER the field). */
.ipg-select .select-caret-down-wrapper,
.ipg-select .pel-pf-select__icon {
    z-index: 2;
    pointer-events: none;
}
/* focus ring on the visible field shape when the overlay is focused */
.ipg-select:has(.ipg-select-btn:focus-visible) > select {
    outline: 2px solid var(--ipg-cobalt);
    outline-offset: 2px;
}
/* the popup list */
.ipg-select-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 50;
    max-height: 288px;
    overflow-y: auto;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(5, 10, 52, 0.18);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.ipg-select.is-open .ipg-select-list {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.ipg-select-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 16px;
    color: var(--ipg-deepnavy);
    cursor: pointer;
}
.ipg-select-opt:hover,
.ipg-select-opt.is-active {
    background: rgb(from var(--ipg-cobalt) r g b / 0.10);
}
.ipg-select-opt[aria-selected="true"] {
    color: var(--ipg-cobalt);
    font-weight: 600;
}
.ipg-select-opt::before {                 /* reserve tick column so text aligns */
    content: "";
    width: 1em;
    flex: none;
    text-align: center;
    font-size: 14px;
}
.ipg-select-opt[aria-selected="true"]::before {
    content: "\2713";
}
/* caret circle flips while open */
.ipg-select .select-caret-down-wrapper {
    transition: transform 0.25s ease;
}
.ipg-select.is-open .select-caret-down-wrapper {
    transform: translateY(-50%) rotate(180deg) !important;
}
@media (prefers-reduced-motion: reduce) {
    .ipg-select-list,
    .ipg-select-btn,
    .ipg-select .select-caret-down-wrapper { transition: none !important; }
}