/*
 * Shared styling for the four AJAX submission forms (accreditation,
 * individual/school/organization membership). Loaded alongside main.css.
 */

/* Honeypot trap: positioned off-screen rather than display:none/visibility:hidden,
   since some bots specifically skip those two. */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    overflow: hidden;
}

.field-error {
    display: block;
    color: #e53939;
    font-size: 13px;
    line-height: 1.4;
    margin-top: 6px;
}

.has-error {
    border-color: #e53939 !important;
}

.form-banner {
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.5;
}

.form-banner--success {
    background: #e6f6ec;
    color: #1e7e42;
    border: 1px solid #b7e4c7;
}

.form-banner--error {
    background: #fdecec;
    color: #b3261e;
    border: 1px solid #f5c2c0;
}

/*
 * Country/State dropdowns: nice-select (from the theme's main.js) has no
 * built-in scrolling or search — with ~200 countries its list just grows to
 * fit everything and pushes the page down. Scoped to just these two selects
 * (nice-select copies the original <select>'s class onto its wrapper div)
 * so the site's other, short dropdowns are unaffected. The search row itself
 * is injected by forms.js; this only styles it.
 */
.nice-select.country-select .list,
.nice-select.state-select .list {
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
}

.nice-select-search-row {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    padding: 8px;
    list-style: none;
    border-bottom: 1px solid #eee;
    cursor: default;
}

.nice-select-search {
    box-sizing: border-box;
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
}

.nice-select-search:focus {
    border-color: var(--rs-theme-primary, #4a90d9);
    outline: 2px solid var(--rs-theme-primary, #4a90d9);
    outline-offset: 1px;
}

/*
 * Keyboard accessibility (WCAG 2.4.7 Focus Visible): nice-select.css sets
 * `outline: none` on .nice-select with no replacement — and its focus rule
 * (`border-color: 0`) is invalid CSS, so it does nothing — meaning a
 * keyboard user tabbing to Category/Country/State previously saw no focus
 * indicator at all. This restores one, and also restores the
 * arrow-key-highlighted-option style the theme's own CSS ships commented out
 * (nice-select.min.js still adds/removes a ".focus" class while navigating
 * an open list with the arrow keys; there was just no style for it).
 */
.nice-select:focus,
.nice-select:focus-visible {
    outline: 2px solid var(--rs-theme-primary, #4a90d9);
    outline-offset: 2px;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    background-color: #f0f4f8;
}