/* Shared native select: panel, public forms and all storefront themes.
   Layout belongs to the form; appearance and interaction states live here. */
:root {
    --select-accent: var(--color-primary, #d42020);
    --select-ink: #171717;
    --select-border: #d9d9dc;
    --select-hover-border: #a9a9af;
    --select-muted: #676767;
    --select-radius: 14px;
    --select-font-size: 14px;
}

select:not([multiple]),
select[multiple] {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    border: 1px solid var(--select-border);
    border-radius: var(--select-radius);
    background-color: #fff;
    color: var(--select-ink);
    font-family: inherit;
    font-size: var(--select-font-size);
    font-weight: 400;
    line-height: 22px;
    letter-spacing: normal;
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: none;
    transition: border-color 150ms ease, outline-color 150ms ease;
}

/* Do not put a dropdown arrow on multi-selects or visible listboxes. */
select:not([multiple]):not([size]),
select:not([multiple])[size="0"],
select:not([multiple])[size="1"] {
    -webkit-appearance: none;
    appearance: none;
    height: 44px;
    padding: 10px 48px 10px 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' rx='8' fill='%23f6f6f6'/%3E%3Cpath d='m10 12 4 4 4-4' fill='none' stroke='%234b4b4b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 28px 28px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

select[multiple],
select[size]:not([size="0"]):not([size="1"]) {
    height: auto;
    padding: 8px;
    background-image: none;
}

select:not(:disabled):hover {
    border-color: var(--select-hover-border);
}

select:not(:disabled):focus,
select:not(:disabled):focus-visible {
    border-color: var(--select-accent);
    outline-color: var(--select-accent);
    box-shadow: none;
}

select[aria-invalid="true"]:not(:disabled),
.settings-field--error select:not(:disabled) {
    border-color: #b91c1c;
}

select[aria-invalid="true"]:focus,
.settings-field--error select:focus {
    outline-color: #b91c1c;
}

select:not([multiple]):disabled,
select[multiple]:disabled {
    border-color: #e8e8e8;
    background-color: #f7f7f8;
    color: var(--select-muted);
    opacity: 1;
    cursor: not-allowed;
}

select option,
select optgroup {
    background-color: #fff;
    color: var(--select-ink);
    font-family: inherit;
    font-size: inherit;
}

select option:disabled {
    color: var(--select-muted);
}

@media (max-width: 640px) {
    :root { --select-font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    select:not([multiple]),
    select[multiple] { transition: none; }
}

/* Let the OS draw the arrow and focus in Windows high-contrast mode. */
@media (forced-colors: active) {
    select:not([multiple]),
    select[multiple],
    select:not([multiple]):not([size]),
    select:not([multiple])[size] {
        -webkit-appearance: auto;
        appearance: auto;
        border-color: ButtonText;
        background-image: none;
        background-color: Field;
        color: FieldText;
        padding-inline: 12px;
        forced-color-adjust: auto;
    }

    select:not(:disabled):focus,
    select:not(:disabled):focus-visible { outline-color: Highlight; }
    select:not([multiple]):disabled,
    select[multiple]:disabled { color: GrayText; border-color: GrayText; }
}