/* Browser-consistent controls, shared by the public student, adult, and hotel forms. */
.registration-form-page {
    --student-blue: #0066cc;
    --student-red: #b91c1c;
    --primary-color: var(--student-blue);
    --secondary-color: var(--student-red);
    --highlight-text: var(--student-red);
    padding-bottom: 72px;
}

.registration-form-page .registration-floating-logo {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    height: 40px;
    width: auto;
    box-sizing: content-box;
    padding: 2px;
    background-color: #2f9599;
    border-radius: 50%;
    z-index: 10;
    pointer-events: none;
}

/* Match help boxes and error summaries to the darker control colors. */
.registration-form-page .bg-blue-500 {
    background-color: var(--student-blue) !important;
}

.registration-form-page .errors,
.registration-form-page #err,
.registration-form-page .invalid-feedback {
    color: var(--student-red);
}

.registration-form-page .errors,
.registration-form-page #err,
:is(#student_form, #adult_form, #hotel_form) .is-invalid,
:is(#student_form, #adult_form, #hotel_form) .is-invalid-select {
    border-color: var(--student-red) !important;
}

:is(#student_form, #adult_form, #hotel_form) {
    font-family: 'Roboto', Arial, sans-serif;
    --student-control-border: #ced4da;
    --student-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23495057' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Field and checkbox-group labels use medium weight; headings keep their style. */
:is(#student_form, #adult_form, #hotel_form) label,
:is(#student_form, #adult_form, #hotel_form) p.font-bold {
    font-weight: 500 !important;
    font-size: 15px !important;
}

:is(#student_form, #adult_form, #hotel_form) input,
:is(#student_form, #adult_form, #hotel_form) select,
:is(#student_form, #adult_form, #hotel_form) textarea,
:is(#student_form, #adult_form, #hotel_form) button {
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
}

:is(#student_form, #adult_form, #hotel_form) input[type="text"],
:is(#student_form, #adult_form, #hotel_form) input[type="email"],
:is(#student_form, #adult_form, #hotel_form) select,
:is(#student_form, #adult_form, #hotel_form) textarea {
    -webkit-appearance: none;
    appearance: none;
    /* Override the shared text-sm utility on editable controls. */
    font-size: 1rem !important;
    line-height: 1.5 !important;
    min-height: 44px;
    min-width: 0;
    max-width: 100%;
    padding: .5rem .75rem;
    border: 1px solid var(--student-control-border);
    border-radius: .25rem;
    background-color: #fff;
    color: #212529;
}

:is(#student_form, #adult_form, #hotel_form) input::placeholder,
:is(#student_form, #adult_form, #hotel_form) textarea::placeholder { color: #6c757d; opacity: 1; }
:is(#student_form, #adult_form, #hotel_form) textarea { resize: vertical; }

:is(#student_form, #adult_form, #hotel_form) select {
    width: 100%;
    padding-right: 2.5rem;
    background-image: var(--student-select-arrow);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 16px;
}

/* Retain both the dropdown arrow and the existing validation warning icon. */
:is(#student_form, #adult_form, #hotel_form) select.is-invalid,
:is(#student_form, #adult_form, #hotel_form) select.is-invalid-select {
    padding-right: 4.5rem !important;
    background-image: url('../icons/exclamation.svg'), var(--student-select-arrow);
    background-position: right 2.5rem center, right .75rem center;
    background-size: 20px 20px, 16px 16px;
    background-repeat: no-repeat;
}

:is(#student_form, #adult_form, #hotel_form) input[type="text"]:focus,
:is(#student_form, #adult_form, #hotel_form) input[type="email"]:focus,
:is(#student_form, #adult_form, #hotel_form) select:focus,
:is(#student_form, #adult_form, #hotel_form) textarea:focus {
    border-color: var(--student-blue);
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 .2rem rgb(0 102 204 / 25%);
}

:is(#student_form, #adult_form, #hotel_form) input.is-invalid:focus,
:is(#student_form, #adult_form, #hotel_form) select.is-invalid:focus,
:is(#student_form, #adult_form, #hotel_form) select.is-invalid-select:focus,
:is(#student_form, #adult_form, #hotel_form) textarea.is-invalid:focus {
    box-shadow: 0 0 0 .2rem rgb(185 28 28 / 25%) !important;
}

:is(#student_form, #adult_form, #hotel_form) .student-phone-fields,
:is(#student_form, #adult_form, #hotel_form) .student-birthday-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* Leave room for all digits plus the validation icon without resizing on error. */
:is(#student_form, #adult_form, #hotel_form) .student-phone-fields > input { width: 5.25rem; flex: 0 0 auto; }
:is(#student_form, #adult_form, #hotel_form) .student-birthday-fields > input { width: 4.75rem; flex: 0 0 auto; }
:is(#student_form, #adult_form, #hotel_form) #cell_phone_extension,
:is(#student_form, #adult_form, #hotel_form) #birthday_year { width: 6rem; }
:is(#student_form, #adult_form, #hotel_form) .student-phone-fields > input,
:is(#student_form, #adult_form, #hotel_form) .student-birthday-fields > input { padding-left: .5rem; }
:is(#student_form, #adult_form, #hotel_form) .student-birthday-fields > div { flex: 0 0 auto; }

:is(#student_form, #adult_form, #hotel_form) input[type="checkbox"],
:is(#student_form, #adult_form, #hotel_form) input[type="radio"] {
    -webkit-appearance: auto;
    appearance: auto;
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 1.125rem;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    accent-color: var(--primary-color);
}

:is(#student_form, #adult_form, #hotel_form) input[type="checkbox"]:focus-visible,
:is(#student_form, #adult_form, #hotel_form) input[type="radio"]:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

:is(#student_form, #adult_form, #hotel_form) input:disabled,
:is(#student_form, #adult_form, #hotel_form) select:disabled,
:is(#student_form, #adult_form, #hotel_form) textarea:disabled {
    opacity: 1;
    color: #6c757d;
    -webkit-text-fill-color: #6c757d;
    cursor: not-allowed;
}
:is(#student_form, #adult_form, #hotel_form) input[type="text"]:disabled,
:is(#student_form, #adult_form, #hotel_form) input[type="email"]:disabled,
:is(#student_form, #adult_form, #hotel_form) select:disabled,
:is(#student_form, #adult_form, #hotel_form) textarea:disabled { background-color: #f3f4f5; }

:is(#student_form, #adult_form, #hotel_form) select:disabled { background-color: #f8f9fa; }

:is(#student_form, #adult_form, #hotel_form) input[type="checkbox"]:disabled + label {
    color: #6c757d;
    cursor: not-allowed;
}

/* Give checkbox groups breathing room, including wrapped and stacked rows. */
:is(#student_form, #adult_form, #hotel_form) .digital-art-eligibility-note {
    color: #585858;
    font-style: italic;
    padding-top: 2px;
    margin-bottom: .5rem;
}

:is(#student_form, #adult_form, #hotel_form) .input:has(input[type="checkbox"]) > p.font-bold {
    margin-bottom: .75rem;
}

:is(#adult_form, #hotel_form) label.font-bold:has(+ ul input[type="checkbox"]) {
    display: block;
    margin-bottom: .75rem;
}

:is(#student_form, #adult_form, #hotel_form) .input > p.font-bold:has(+ .digital-art-eligibility-note:not([hidden])) {
    margin-bottom: 0;
    padding-bottom: 0;
}

:is(#student_form, #adult_form, #hotel_form) ul:has(> li > input[type="checkbox"]) {
    column-gap: 1.5rem;
}

:is(#student_form, #adult_form, #hotel_form) li:has(> input[type="checkbox"]) {
    padding-top: .625rem !important;
    padding-bottom: .625rem !important;
    margin-left: 0 !important;
}

:is(#student_form, #adult_form, #hotel_form) input[type="checkbox"] + label {
    margin-left: .5rem !important;
}

/* Wrap Display Only choices as complete checkbox-and-label pairs. */
:is(#student_form, #adult_form, #hotel_form) .art-display-options > li {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (forced-colors: active) {
    :is(#student_form, #adult_form, #hotel_form) select { -webkit-appearance: auto; appearance: auto; background-image: none; }
    :is(#student_form, #adult_form, #hotel_form) input:focus-visible,
    :is(#student_form, #adult_form, #hotel_form) select:focus-visible,
    :is(#student_form, #adult_form, #hotel_form) textarea:focus-visible { outline: 2px solid Highlight; }
}

/* Shared review, back, and submit buttons. */
        :is(#student_form, #adult_form, #hotel_form, #registration_success) .registration-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            border-top: 1px solid #dce2e9;
            padding-top: 22px;
        }
        :is(#student_form, #adult_form, #hotel_form, #registration_success) .registration-actions-review { justify-content: flex-end; }
        :is(#student_form, #adult_form, #hotel_form, #registration_success) .registration-action {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 46px;
            padding: 11px 20px;
            border: 1px solid var(--primary-color);
            border-radius: 6px;
            font: 500 15px/1.4 'IBM Plex Sans', Arial, sans-serif;
            cursor: pointer;
            transition: background-color .15s, border-color .15s;
        }
        :is(#student_form, #adult_form, #hotel_form, #registration_success) .registration-action-primary { background: var(--primary-color); color: #fff; }
        :is(#student_form, #adult_form, #hotel_form, #registration_success) .registration-action:hover { text-decoration: none; }
        :is(#student_form, #adult_form, #hotel_form, #registration_success) .registration-action-primary:hover:not(:disabled) { background: #005bb8; border-color: #005bb8; }
        :is(#student_form, #adult_form, #hotel_form, #registration_success) .registration-action-back { background: #fff; color: var(--primary-color); }
        :is(#student_form, #adult_form, #hotel_form, #registration_success) .registration-action-back:hover:not(:disabled) { background: #edf5ff; }
        :is(#student_form, #adult_form, #hotel_form, #registration_success) .registration-action:focus-visible { outline: 3px solid var(--student-blue); outline-offset: 3px; }
        :is(#student_form, #adult_form, #hotel_form, #registration_success) .registration-action:disabled { opacity: .6; cursor: wait; }
        @media (max-width: 480px) {
            :is(#student_form, #adult_form, #hotel_form, #registration_success) .registration-actions { flex-direction: column; align-items: stretch; }
            :is(#student_form, #adult_form, #hotel_form, #registration_success) .registration-action { width: 100%; }
        }
        @media (prefers-reduced-motion: reduce) {
            :is(#student_form, #adult_form, #hotel_form, #registration_success) .registration-action { transition: none; }
        }