/* ============================================================
   Form Styles — shared by registration.html and new_patient_forms.html
   ============================================================ */


/* -- Layout containers ------------------------------------------------ */

.form-container {
    max-width: 800px;
    margin: 20px auto;
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.form-container.is-narrow {
    max-width: 500px;
    padding: 40px;
}


.form-container h3 {
    margin: 0 0 25px;font-size: 28px;
}

/* -- Form controls ---------------------------------------------------- */

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #003366;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: avenir-light, sans-serif;
    font-size: 16px;
    box-sizing: border-box;
}


.form-group input[readonly] {
  background-color: #f0f0f0;
  cursor: not-allowed;
}

.form-group input:autofill {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  -webkit-text-fill-color: #303131 !important;
}


.form-group textarea {
    min-height: 80px;
    resize: vertical;
}

.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

.form-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #003366;
}

.form-section h2 {
    margin-top: 0;
}

.radio-group {
    display: flex;
    gap: 20px;
    padding: 10px 0;
}

.form-group.inline {
    display: flex;
    align-items: center;
    gap: 20px;
}

.form-group.inline > label:first-child {
    margin-bottom: 0;
    flex-shrink: 0;
}

.form-group.inline .radio-group {
    padding: 0;
}

.radio-group label {
    display: flex;
    align-items: center;
    font-weight: normal;
    cursor: pointer;
}

.radio-group input[type="radio"] {
    margin-right: 5px;
    cursor: pointer;
    width: auto;
    height: auto;
    -webkit-appearance: radio;
    appearance: radio;
}

.checkbox-group {
    padding: 10px 0;
}

.checkbox-group label {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    font-weight: normal;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 4px;
    cursor: pointer;
    width: auto;
    flex-shrink: 0;
    -webkit-appearance: checkbox;
    appearance: checkbox;
}

.initial-field {
    width: 80px !important;
}


/* -- Buttons ---------------------------------------------------------- */

.submit-btn,
.btn-secondary {
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
    font-family: avenir-light, sans-serif;
    transition: background-color 0.3s;
    margin-bottom: 20px;
}

.submit-btn {
    background-color: #003366;
}

.submit-btn:hover {
    background-color: #004488;
}

.btn-secondary {
    background-color: #6c757d;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

.submit-btn:disabled,
.btn-secondary:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.choice-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

.choice-btn {
    display: block;
    padding: 20px 30px;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.choice-btn.primary {
    background-color: #003366;
    color: white;
}

.choice-btn.primary:hover {
    background-color: #004488;
}

.choice-btn.secondary {
    background-color: #f8f9fa;
    color: #003366;
    border-color: #003366;
}

.choice-btn.secondary:hover {
    background-color: #e9ecef;
}


.javaxt-combobox input {
    height: 44px !important;
    line-height: 44px !important;
}

.javaxt-combobox button {
    background-position: 11px 11px !important;
    height: 44px !important;
}

/* -- Validation state ------------------------------------------------- */

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

/* ComboBox wrapper picks up .error from the paired hidden input via
   Utils.showFieldError, then re-colors its inner input + button. */
.combobox-wrapper.error input,
.combobox-wrapper.error button,
.form-row.error .combobox-wrapper input,
.form-row.error .combobox-wrapper button {
    border-color: #dc3545 !important;
}

/* When a form-row holds bare combobox-wrappers (no .form-group), let them
   share the row equally — the DOB month/day/year pickers use this. */
.form-row > .combobox-wrapper {
    flex: 1;
    min-width: 0;
}

.error-message {
    color: #dc3545;
    font-size: 14px;
    margin-top: 5px;
}

.success-message {
    background-color: #d4edda;
    color: #155724;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    border: 1px solid #c3e6cb;
}

.error-banner {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    border: 1px solid #f5c6cb;
}

.required::after {
    content: " *";
    color: #dc3545;
}

/* Checkbox labels are flex rows, which pushes a trailing ::after asterisk
   to the far edge of the row, detached from the text. Show the marker
   BEFORE the checkbox instead ("* [ ] I understand ..."). */
.checkbox-group label.required::after {
    content: none;
}

.checkbox-group label.required::before {
    content: "*";
    color: #dc3545;
    margin-right: 8px;
    margin-top: 2px;
    flex-shrink: 0;
    font-weight: bold;
}

input:required:invalid {
    box-shadow: none;
}


/* -- Phase / step visibility (registration.html & new_patient_forms.html) -- */

.registration-phase,
.form-step {
    display: none;
}

.registration-phase.active,
.form-step.active {
    display: block;
}


/* -- Registration page: verification code input ----------------------- */

.code-input-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 30px 0;
}

.code-digit {
    width: 50px;
    height: 60px;
    font-size: 28px;
    text-align: center;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-family: monospace;
}

.code-digit:focus {
    border-color: #003366;
    outline: none;
}

.code-digit.filled {
    border-color: #28a745;
    background-color: #f8fff8;
}

.resend-link {
    text-align: center;
    margin-top: 20px;
}

.resend-link a {
    color: #003366;
    cursor: pointer;
    text-decoration: underline;
}

.resend-link a:hover {
    color: #004488;
}

.resend-link.disabled a {
    color: #999;
    cursor: not-allowed;
}

.email-display {
    background: #f0f0f0;
    padding: 10px 15px;
    border-radius: 4px;
    margin: 15px 0;
    text-align: center;
    font-weight: 600;
}

.info-text {
    color: #666;
    font-size: 14px;
    margin-top: 10px;
}

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
    margin-right: 10px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* -- Registration page: PDF download list ----------------------------- */

.pdf-downloads {
    margin-top: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.pdf-downloads h3 {
    margin-top: 0;
    color: #003366;
}

.pdf-downloads ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pdf-downloads li {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.pdf-downloads li:last-child {
    border-bottom: none;
}

.pdf-downloads a {
    color: #003366;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pdf-downloads a:hover {
    text-decoration: underline;
}

.pdf-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: #dc3545;
    color: white;
    text-align: center;
    line-height: 24px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
}


/* -- Registration page: welcome / verified card ----------------------- */

.welcome-message {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: #e8f5e9;
    border-radius: 8px;
    border-left: 4px solid #28a745;
}

.welcome-message h2 {
    color: #28a745;
    margin-top: 0;
}


/* -- Multistep page: progress tracker --------------------------------- */

.progress-tracker {
    display: flex;
    justify-content: space-between;
    margin: 30px 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.progress-tracker::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 4px;
    background: #ddd;
    z-index: 0;
}

.progress-line {
    position: absolute;
    top: 20px;
    left: 0;
    height: 4px;
    background: #28a745;
    z-index: 1;
    transition: width 0.3s ease;
}

.progress-step {
    position: relative;
    flex: 1;
    text-align: center;
    z-index: 2;
}

.progress-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #ddd;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: all 0.3s ease;
}

.progress-step.active .progress-step-circle {
    border-color: #003366;
    background: #003366;
    color: white;
}

.progress-step.completed .progress-step-circle {
    border-color: #28a745;
    background: #28a745;
    color: white;
}
/*
.progress-step.completed .progress-step-circle::before {
    content: '\2713';
    font-size: 20px;
}
*/
.progress-step-label {
    font-size: 14px;
    color: #666;
}

.progress-step.active .progress-step-label {
    color: #003366;
    font-weight: 600;
}

.progress-step.completed .progress-step-label {
    color: #28a745;
}


/* -- Multistep page: navigation row ----------------------------------- */

.form-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    gap: 15px;
}


/* -- Multistep page: signature font picker ---------------------------- */

.font-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 25px 0;
}

.font-card {
    display: block;
    cursor: pointer;
}

.font-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.font-card-inner {
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 25px 15px 15px;
    text-align: center;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.font-card:hover .font-card-inner {
    border-color: #6690b5;
}

.font-card input[type="radio"]:checked + .font-card-inner {
    border-color: #003366;
    background: #f0f4f8;
    box-shadow: 0 0 0 2px #003366;
}

.sig-preview {
    display: block;
    font-size: 48px;
    min-height: 42px;
    line-height: 1.4;
    color: #222;
    word-break: break-word;
}

.font-label {
    display: block;
    font-size: 13px;
    color: #888;
    margin-top: 8px;
}


/* -- Mobile (≤ 768px) -------------------------------------------------- */

@media (max-width: 768px) {
    .form-container {
        padding: 20px;
        margin: 10px;
    }

    /* The site theme's large serif page title overflows narrow screens
       ("REGISTRATION" clips off the right edge). Scale with the viewport so
       the longest word still fits on one line at 320-480px widths — the
       theme's Cinzel small-caps runs wide. !important guards against theme
       specificity/order; break-word is a last-resort safety net. */
    h1 {
        font-size: clamp(1.4rem, 6.2vw, 2rem) !important;
        line-height: 1.3 !important;
        overflow-wrap: break-word;
    }

    .form-row {
        flex-direction: column;
    }

    .radio-group {
        flex-direction: column;
        gap: 10px;
    }

    .form-group.inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .form-group.inline > label:first-child {
        margin-bottom: 5px;
    }

    /* Verification code boxes: size with the available width so all six
       stay inside the card even at 320-360px. */
    .code-input-container {
        gap: 6px;
        width: 100%;
    }

    .code-digit {
        width: 14%;
        max-width: 46px;
        min-width: 0;
        height: 52px;
        font-size: 22px;
    }

    /* Progress tracker: a single compact row of circles. The two-per-row
       wrap consumed ~4 rows of screen and the connecting line only spanned
       the first row. Labels are hidden — the "Step N: ..." heading right
       below the tracker names the current step. */
    .progress-tracker {
        justify-content: space-between;
        margin: 20px 0;
    }

    .progress-tracker::before,
    .progress-line {
        top: 14px;
        height: 3px;
    }

    .progress-step {
        min-width: 0;
        margin-bottom: 0;
    }

    .progress-step-circle {
        width: 30px;
        height: 30px;
        border-width: 2px;
        margin: 0 auto;
        font-size: 14px;
    }

    .progress-step-label {
        display: none;
    }

    .font-grid {
        grid-template-columns: 1fr;
    }
}