/*
 * Chosen-select dropdown overrides — applied site-wide under
 * `.redesign`. The legacy chosen.css ships a pale-grey closed state and
 * a generic dropdown panel; restyle to match the redesign form fields:
 *
 *   - Closed: white surface, light border, dark slate text + chevron
 *     (matches plain text inputs and selects).
 *   - Open: brand-tinted panel, peach-darker border, offwhite-peach
 *     hover, dark slate selected highlight with white text.
 *
 * Specificity hardening: `.redesign .chosen-container` is enough to
 * beat the default chosen.css selectors (which are single-class). A
 * handful of `!important` overrides land where chosen.css inlines
 * specific colors with the same selector depth.
 */

/* ── Closed state ───────────────────────────────────────────────── */
.redesign .chosen-container,
.redesign .chosen-container-single .chosen-single {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-heading);
}

.redesign .chosen-container-single .chosen-single {
    /* Match the text-input baseline so chosen pills align horizontally
     * with adjacent text inputs (height 40, padding 12/14, radius 10,
     * peach-darker border). */
    height: 40px !important;
    min-height: 0;
    padding: 0 36px 0 14px !important;
    background: var(--neutral-white) !important;
    background-image: none !important;
    border: 1px solid var(--brand-border-peach) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: var(--text-heading);
    transition: border-color 140ms ease, box-shadow 140ms ease;
    display: flex !important;
    align-items: center;
    line-height: 1.2;
}

/* Suppress the legacy `.select_title::after` chevron that style.css
 * paints with a fontello glyph — it shows as a second arrow stacked
 * over the chosen `b` element. We render our own caret via b::before. */
.redesign .chosen-container-single .chosen-single::after,
.redesign .chosen-container-single .chosen-single::before {
    content: none !important;
    display: none !important;
}

.redesign .chosen-container-single .chosen-single:hover {
    border-color: var(--brand-dark-slate) !important;
}

.redesign .chosen-container-active.chosen-with-drop .chosen-single,
.redesign .chosen-container-single .chosen-single:focus-visible {
    background: var(--neutral-white) !important;
    border-color: var(--brand-dark-slate) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 0 3px rgba(40, 65, 75, 0.12) !important;
}

.redesign .chosen-container-single .chosen-single span {
    margin-right: 0;
    color: inherit;
    /* Truncate long placeholders ("Please make my donation", etc.)
     * with ellipsis so the last character isn't clipped against the
     * chevron column. */
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Inside `.custom_select.w_full` (legacy donate form wrapper) make sure
 * the chosen-container spans the full cell width so chosen pills don't
 * shrink to fit content + leave a gap before the right margin. */
.redesign .custom_select .chosen-container,
.redesign .custom_select.w_full .chosen-container {
    width: 100% !important;
}

/* Placeholder ("Country", "Expiry Month", etc.) */
.redesign .chosen-container-single .chosen-default,
.redesign .chosen-container-single .chosen-default span {
    color: rgba(0, 0, 0, 0.55);
    font-style: italic;
}

/* Chevron — replace the legacy sprite arrow with a CSS-drawn caret. */
.redesign .chosen-container-single .chosen-single div {
    width: 36px;
    top: 0;
    right: 0;
    height: 100% !important;
    background: transparent !important;
}

.redesign .chosen-container-single .chosen-single div b {
    background: none !important;
    width: 100%;
    height: 100%;
    position: relative;
}

.redesign .chosen-container-single .chosen-single div b::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    margin-left: -4px;
    border-right: 2px solid var(--text-heading);
    border-bottom: 2px solid var(--text-heading);
    transform: rotate(45deg);
    transition: transform 160ms ease;
}

.redesign .chosen-container-active.chosen-with-drop .chosen-single div b::before {
    transform: rotate(-135deg);
    margin-top: -2px;
}

/* Clear single icon (when an option is selected and the dropdown
 * supports clearing) — kept hidden to match plain selects. */
.redesign .chosen-container-single .chosen-single abbr { display: none; }

/* ── Open dropdown panel ────────────────────────────────────────── */
.redesign .chosen-container .chosen-drop {
    /* Sit just below the trigger pill with a small visual gap so they
     * read as separate surfaces (matches figma). chosen.css positions
     * the drop with `top: 100%` so use margin-top to add the gap. */
    margin-top: 8px !important;
    top: 100% !important;
    background: var(--neutral-white);
    border: 1px solid var(--brand-border-peach);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(32, 52, 60, 0.12);
    overflow: hidden;
    padding: 6px;
    /* Override legacy `chosen.css` clip rule that hides the drop with
     * `clip: rect(0,0,0,0)` until `.chosen-with-drop` is applied — once
     * the parent has `.chosen-with-drop` the legacy rule lifts the clip,
     * but our override ensures the shadow + radius render cleanly. */
}

/* Search input inside the dropdown (for searchable Chosen lists) */
.redesign .chosen-container-single .chosen-search {
    padding: 6px;
}

.redesign .chosen-container-single .chosen-search input[type="text"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    background: var(--neutral-white);
    background-image: none;
    color: var(--text-heading);
    font: inherit;
}

.redesign .chosen-container-single .chosen-search input[type="text"]:focus {
    border-color: var(--brand-dark-slate);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(40, 65, 75, 0.12);
}

/* Result list */
.redesign .chosen-container .chosen-results {
    margin: 0;
    padding: 0;
    max-height: 280px;
}

.redesign .chosen-container .chosen-results li {
    padding: 10px 14px;
    line-height: 1.4;
    border-radius: 10px;
    color: var(--text-heading);
    background: transparent;
    transition: background-color 120ms ease, color 120ms ease;
}

.redesign .chosen-container .chosen-results li.highlighted {
    background: var(--brand-offwhite-peach) !important;
    color: var(--text-heading) !important;
    background-image: none !important;
}

.redesign .chosen-container .chosen-results li.result-selected {
    background: var(--brand-dark-slate) !important;
    color: var(--neutral-white) !important;
    font-weight: 600;
    background-image: none !important;
}

.redesign .chosen-container .chosen-results li.result-selected.highlighted {
    background: var(--brand-dark-slate-darker) !important;
    color: var(--neutral-white) !important;
}

.redesign .chosen-container .chosen-results li.disabled-result,
.redesign .chosen-container .chosen-results li.no-results {
    color: var(--text-paragraph);
    background: transparent !important;
    font-style: italic;
}

.redesign .chosen-container .chosen-results-scroll {
    background: transparent;
}

/* Multi-select chips (rare on this site, but keep them on-brand) */
.redesign .chosen-container-multi .chosen-choices {
    background: var(--neutral-white) !important;
    background-image: none !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 24px;
    padding: 6px 10px;
    min-height: 48px;
}

.redesign .chosen-container-multi .chosen-choices li.search-choice {
    background: var(--brand-offwhite-peach) !important;
    background-image: none !important;
    border: 1px solid var(--brand-border-peach);
    border-radius: var(--radius-full);
    color: var(--text-heading);
    padding: 6px 32px 6px 12px;
    margin: 4px;
}