/**
 * Modern "pill button" selector styling for join-form fields that are
 * otherwise rendered as a plain <select> (Gender) or a checkbox list
 * (Interested In) by the stock SkaDate question system.
 *
 * These classes are applied by modern_pills.js, which progressively
 * enhances the native controls in place — the native <select>/checkbox
 * inputs are still what actually gets submitted; this is presentation
 * only.
 */

.elv-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.elv-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    min-height: 30px;
    border: 1.5px solid #E5E7EB;
    border-radius: 999px;
    background: #FFFFFF;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.elv-pill:hover {
    border-color: #C4B5FD;
    background: #F5F3FF;
}

.elv-pill:active {
    transform: scale(0.97);
}

.elv-pill-selected,
.elv-pill-selected:hover {
    border-color: #7C3AED;
    background: #7C3AED;
    color: #FFFFFF;
}

/* Native control (and anything that was rendered alongside it — a
   wrapping <label>, a bare trailing text node, etc.) is still present
   in the DOM (still submits with the form) but removed entirely from
   the visual layout — kept out of the tab order too since the pills
   are the actual interactive surface now. Applied to whichever
   element(s) actually carried the original visible content, which
   varies by field (see modern_pills.js). */
.elv-native-pill-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    display: inline-block !important;
}

@media (max-width: 900px) {
    .elv-pill {
        padding: 8px 14px;
        min-height: 36px;
        font-size: 13px;
    }
    .elv-pill-group {
        gap: 8px;
        margin-top: 8px;
    }
}