/* ════════════════════════════════════════════════════════════════════════
   zSelect_demo.css — a ONE-OFF reskinned choice (opt in: zBrush [page, leaf, demo.zSelect_demo]).
   Proof of how far ONE class reskins zSelect across all three shapes — dropdown,
   radio, and multi-select. _zClass: glass-select lands on the <select> for the
   dropdown/multi shapes, and on the .zForm-check-group wrapper for the radio shape,
   so the rules below are scoped per shape but driven by the same class. NOTHING zOS
   owns is overridden — this is the author's own class. Bifrost-only — the terminal
   prints a plain numbered menu.

   Look: frosted glassmorphism — translucent blurred panels, a soft white rim, a
   coral→violet gradient for the chosen state, and roomy spacing between fields.
   A few option rules carry !important: native <option> popups are styled by the
   canonical theme with equal specificity, so the demo asserts its own palette.
   ════════════════════════════════════════════════════════════════════════ */

/* shared gradient accent: coral → violet */

/* ── DROPDOWN + MULTI — the <select> box ──────────────────────────────── */
select.glass-select {
    appearance:         none;
    -webkit-appearance: none;
    display:        block;
    width:          100%;
    max-width:      380px;
    margin-bottom:  2.2rem;                     /* roomy gap to the next field */
    color:          #f8fafc;
    background:      rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border:         1px solid rgba(255, 255, 255, 0.28);
    border-radius:  16px;
    padding:        0.8rem 1.05rem;
    font-family:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size:      0.95rem;
    box-shadow:     0 8px 30px rgba(124, 58, 237, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition:     border-color 0.2s ease, box-shadow 0.2s ease;
}

select.glass-select:focus {
    outline:        none;
    border-color:   rgba(244, 114, 182, 0.8);
    box-shadow:     0 8px 34px rgba(244, 114, 182, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* native popups can't be frosted — give them a solid, legible dark panel */
select.glass-select option {
    color:          #f8fafc !important;
    background:     #1e1b4b !important;
    padding:        0.4rem 0.55rem;
}

/* a picked row — the coral→violet gradient, white ink */
select.glass-select option:checked {
    color:          #ffffff !important;
    background:     linear-gradient(90deg, #fb7185, #a855f7) !important;
    font-weight:    600;
}

/* the multi list gets inner breathing room + rounded rows */
select.glass-select[multiple] {
    padding:        0.5rem;
    background:      rgba(255, 255, 255, 0.07);
}
select.glass-select[multiple] option {
    border-radius:  10px;
    margin:         3px 0;
    padding:        0.55rem 0.7rem;
}

/* ── RADIO — the .zForm-check-group wrapper carries the class ──────────── */
.glass-select.zForm-check-group {
    max-width:      380px;
    margin-bottom:  2.2rem;
    background:      rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border:         1px solid rgba(255, 255, 255, 0.28);
    border-radius:  18px;
    padding:        1.2rem 1.4rem;
    box-shadow:     0 8px 30px rgba(124, 58, 237, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* the group's prompt — a bright, airy heading */
.glass-select .zLabel {
    color:          #f8fafc;
    font-family:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight:    600;
    letter-spacing: 0.02em;
    margin-bottom:  0.9rem;
}

/* one option row — roomy, hairline divider on the glass */
.glass-select .zForm-check {
    display:        flex;
    align-items:    center;
    gap:            0.7rem;
    padding:        0.65rem 0;
    border-top:     1px solid rgba(255, 255, 255, 0.12);
}

.glass-select .zForm-check:first-of-type { border-top: 0; }

/* recolor the custom-drawn dot (zbase draws it with appearance:none, so accent-color
   is a no-op — we override the :checked fill itself) */
.glass-select .zForm-check-input {
    width:          1.1rem;
    height:         1.1rem;
    border-color:   rgba(255, 255, 255, 0.5);
    background:      rgba(255, 255, 255, 0.1);
}
.glass-select .zForm-check-input:checked {
    background:      linear-gradient(135deg, #fb7185, #a855f7);
    border-color:   transparent;
}

/* the option's label */
.glass-select .zForm-check-label {
    color:          #e2e8f0;
    font-family:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size:      0.95rem;
}

/* a locked, out-of-reach row reads muted */
.glass-select .zForm-check-disabled .zForm-check-label {
    color:          rgba(226, 232, 240, 0.4);
}