/* Reusable tactile picker. Enhances a native <select data-rntx-picker> without changing its value or form. */
.rntx-picker-button {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; min-height: 52px;
    padding: 12px 14px;
    border: 1px solid #c4cfdd;
    border-radius: 12px;
    background: #fff;
    color: #112342;
    font: inherit; font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.rntx-picker-button[data-placeholder="true"] { color: #62728a; font-weight: 500; }
.rntx-picker-button:focus-visible {
    outline: 3px solid #075eea;
    outline-offset: 2px;
    border-color: #075eea;
}
.rntx-picker-button[aria-invalid="true"] { border-color: #9c2430; }
.rntx-picker-button:disabled { opacity: .62; cursor: not-allowed; }
.rntx-picker-caret { color: #62728a; font-size: 1rem; line-height: 1; }
.rntx-picker-native {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important; border: 0 !important;
    opacity: 0;
    pointer-events: none;
}

/* Backdrop + sheet */
.rntx-picker-backdrop {
    position: fixed; inset: 0; z-index: 10000;
    background: #04102977;
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 180ms ease;
}
.rntx-picker-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

.rntx-picker-sheet {
    width: 100%; max-width: 520px;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -16px 48px #04102933;
    max-height: 82dvh;
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform 220ms ease;
}
.rntx-picker-backdrop[data-open="true"] .rntx-picker-sheet { transform: translateY(0); }

.rntx-picker-grip {
    width: 44px; height: 4px; margin: 10px auto 2px;
    border-radius: 999px; background: #c6d0e1;
}

.rntx-picker-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 18px 12px;
    border-bottom: 1px solid #edf1f7;
}
.rntx-picker-sheet-head h3 {
    margin: 0; font-size: 1.05rem; color: #071b46; font-weight: 800;
}
.rntx-picker-close {
    min-width: 44px; min-height: 44px;
    border: 0; border-radius: 10px;
    background: transparent; color: #62728a;
    font-size: 1.4rem; cursor: pointer;
}
.rntx-picker-close:focus-visible { outline: 3px solid #075eea; outline-offset: 2px; }

.rntx-picker-list {
    list-style: none; margin: 0;
    padding: 10px 10px 20px;
    overflow-y: auto;
    display: grid; gap: 8px;
}
.rntx-picker-option {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 56px;
    padding: 14px 16px;
    border: 1px solid #d9e1ec;
    border-radius: 14px;
    background: #fff;
    color: #112342;
    font: inherit; font-weight: 650; font-size: 1rem;
    text-align: left;
    cursor: pointer;
}
.rntx-picker-option:hover { background: #f7faff; }
.rntx-picker-option:disabled { opacity: .55; cursor: not-allowed; }
.rntx-picker-option:focus-visible {
    outline: 3px solid #075eea; outline-offset: 2px;
    border-color: #075eea;
}
.rntx-picker-option[aria-selected="true"] {
    border-color: #075eea;
    background: #eef4ff;
    color: #0754cb;
}
.rntx-picker-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border-radius: 999px;
    background: #075eea; color: #fff;
    font-size: .8rem; font-weight: 800;
}
.rntx-picker-option:not([aria-selected="true"]) .rntx-picker-check { display: none; }

/* Desktop: a compact modal centered on the viewport */
@media (min-width: 720px) {
    .rntx-picker-backdrop { align-items: center; padding: 24px; }
    .rntx-picker-sheet {
        max-width: 420px;
        border-radius: 18px;
        max-height: 70dvh;
        transform: translateY(16px);
    }
    .rntx-picker-backdrop[data-open="true"] .rntx-picker-sheet { transform: translateY(0); }
    .rntx-picker-grip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rntx-picker-backdrop, .rntx-picker-sheet { transition: none; }
}