/* =========================================================
   Gujarat Hospital — Appointment Form (Fluent Forms #4)
   Custom 2-column responsive layout, replacing Fluent Forms'
   default single-column stack. Scoped to .fluentform so it
   never affects anything else on the site.
   ========================================================= */

.fluentform {
    max-width: 900px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
}
.fluentform .ff-el-form-header,
.fluentform .ff-form-title { display: none; }

/* Heading + supporting text above the fields */
.gh-appt-form-intro { text-align: center; margin-bottom: 32px; }
.gh-appt-form-intro h2 {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    color: #892728;
    margin: 0 0 8px;
}
.gh-appt-form-intro p {
    font-size: 14.5px;
    color: #6b6259;
    max-width: 480px;
    margin: 0 auto;
}

/* The field list: 2-column grid on desktop */
.fluentform fieldset {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 24px;
    border: none;
    padding: 0;
    margin: 0;
}

/* Every field wrapper */
.fluentform .ff-el-group {
    margin: 0 0 14px;
    align-self: start;
}

/* Full-width items: section headers, textarea, consent, submit */
.fluentform .ff-el-section-break,
.fluentform .ff-el-group:has(textarea),
.fluentform .gh-consent-field,
.fluentform [class*="ff_submit_btn_wrapper"] {
    grid-column: 1 / -1;
}

/* Section headers (01 / 02 / 03) */
.fluentform .ff-el-section-break {
    margin: 28px 0 12px;
}
.fluentform .ff-el-section-break:first-child { margin-top: 0; }
.fluentform .ff-el-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #892728;
    margin: 0 0 4px;
}
.fluentform .gh-section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #FBF1E6;
    color: var(--gh-gold);
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}
.fluentform .ff-section_break_desk {
    font-size: 13px;
    color: #8a8177;
    margin-bottom: 10px;
}
.fluentform .ff-el-section-break hr {
    border: none;
    border-top: 1px solid #ece3d8;
    margin: 0;
}

/* Labels */
.fluentform .ff-el-input--label {
    margin-bottom: 6px;
}
.fluentform .ff-el-input--label label {
    font-size: 13px;
    font-weight: 600;
    color: #892728;
}
.fluentform .ff-el-is-required label::after {
    content: " *";
    color: var(--gh-gold);
}

/* Inputs, selects, date picker — consistent height and rounded corners */
.fluentform .ff-el-form-control {
    width: 100%;
    height: 46px;
    border: 1.5px solid #e7ded4;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    color: #2a2422;
    background: #fff;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}
.fluentform textarea.ff-el-form-control {
    height: auto;
    min-height: 96px;
    padding: 12px 14px;
    resize: vertical;
}
.fluentform select.ff-el-form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6259' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}
.fluentform .ff-el-form-control:focus {
    outline: none;
    border-color: var(--gh-gold);
    box-shadow: 0 0 0 3px rgba(238,125,5,0.12);
}

/* Choices.js (searchable doctor dropdown) height/rounding match */
.fluentform .choices {
    margin-bottom: 0;
}
.fluentform .choices__inner {
    min-height: 46px;
    border: 1.5px solid #e7ded4 !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    background: #fff;
}
.fluentform .choices.is-focused .choices__inner {
    border-color: var(--gh-gold) !important;
}

/* Consent checkbox */
.fluentform .gh-consent-field {
    background: #FBF1E6;
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 4px;
}
.fluentform .ff-el-form-check-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: #892728;
    cursor: pointer;
}
.fluentform .ff-el-form-check-input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: #892728;
    flex-shrink: 0;
}

/* Submit button */
.fluentform [class*="ff_submit_btn_wrapper"] {
    text-align: center;
    margin-top: 20px;
}
.fluentform .ff-btn-submit {
    width: 100%;
    max-width: 420px;
    height: 52px;
    background: #892728 !important;
    color: #fff !important;
    border: none;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.fluentform .ff-btn-submit:hover {
    background: #6B1F21 !important;
}

/* Inline error messages — stay within the field's own grid cell,
   never affect sibling column width or unrelated rows */
.fluentform .error,
.fluentform .ff-el-form-error {
    display: block;
    font-size: 12px;
    color: #c0392b;
    margin-top: 5px;
}

/* Date picker popup (flatpickr) sits above the grid, unaffected by it */
.flatpickr-calendar { font-family: 'Montserrat', sans-serif; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    .fluentform { padding: 0 4px; }
}
@media (max-width: 768px) {
    .fluentform fieldset {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .fluentform .ff-el-group { margin-bottom: 16px; }
}

/* ---- Comprehensive Choices.js normalization (fixes clipping/height) ---- */
.fluentform .choices {
    position: relative;
    margin-bottom: 0;
    font-size: 14px;
}
.fluentform .choices__inner {
    display: flex;
    align-items: center;
    min-height: 46px;
    max-height: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #e7ded4 !important;
    border-radius: 8px !important;
    background: #fff !important;
    padding: 0 14px !important;
    font-family: 'Montserrat', sans-serif;
    line-height: normal;
    overflow: hidden;
}
.fluentform .choices__list--single {
    display: flex;
    align-items: center;
    padding: 0;
    width: 100%;
}
.fluentform .choices__list--single .choices__item {
    font-size: 14px;
    color: #2a2422;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.fluentform .choices__list--dropdown,
.fluentform .choices__list[aria-expanded] {
    border: 1.5px solid #e7ded4;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    z-index: 20;
}
.fluentform .choices__input {
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    margin-bottom: 0;
}
.fluentform .choices.is-focused .choices__inner {
    border-color: var(--gh-gold) !important;
    box-shadow: 0 0 0 3px rgba(238,125,5,0.12);
}

/* ---- Override Fluent Forms' own invalid-state pill styling so fields
   keep our consistent shape and height even when marked invalid ---- */
.fluentform select.ff-el-form-control,
.fluentform input.ff-el-form-control,
.fluentform select.ff-el-form-control[aria-invalid="true"],
.fluentform input.ff-el-form-control[aria-invalid="true"] {
    border-radius: 8px !important;
    height: 46px !important;
    border-width: 1.5px !important;
    border-style: solid !important;
}
.fluentform select.ff-el-form-control[aria-invalid="true"],
.fluentform input.ff-el-form-control[aria-invalid="true"] {
    border-color: #d97a6c !important;
}
.fluentform select.ff-el-form-control:not([aria-invalid="true"]):not(:focus),
.fluentform input.ff-el-form-control:not([aria-invalid="true"]):not(:focus) {
    border-color: #e7ded4 !important;
}

/* ---------- Pass 100 ----------
   Focus: the rule above used to force every field's border back to beige with !important, including the field being typed in,
   so the orange focus border never showed. It now skips the focused field, and the focused field gets a clear orange border.
   Font: Fluent Forms' own stylesheet (loaded after this one) set every field to the system font - except the searchable Preferred
   Doctor list, which kept Montserrat and so looked larger. Every field now uses Montserrat at the same size, and the doctor lists are
   plain dropdowns like the others. Phones use 16px so iPhones do not zoom into a field. */
.fluentform .ff-el-form-control:focus,
.fluentform select.ff-el-form-control:focus,
.fluentform input.ff-el-form-control:focus,
.fluentform textarea.ff-el-form-control:focus {
    border-color: #EE7D05 !important;
    box-shadow: 0 0 0 3px rgba(238,125,5,0.18) !important;
    outline: none;
}
.fluentform .ff-el-form-control,
.fluentform select.ff-el-form-control,
.fluentform textarea.ff-el-form-control,
.fluentform .choices__inner,
.fluentform .choices__list--single .choices__item,
.fluentform .choices__list--dropdown .choices__item {
    font-size: 14px !important;
    font-family: 'Montserrat', sans-serif !important; /* Fluent's own stylesheet loads after this one and set every field except the searchable doctor list to the system font */
}
@media (max-width: 768px) {
    .fluentform .ff-el-form-control,
    .fluentform select.ff-el-form-control,
    .fluentform textarea.ff-el-form-control { font-size: 16px !important; }
}
/* help text under a field (Preferred location, Patient's full name) */
.fluentform .ff-el-help-message {
    margin-top: 6px !important;
    font-size: 12.5px !important;
    font-style: normal !important;
    line-height: 1.45;
    color: #7a6f66 !important;
}
/* full-width notes: old reports, the request line, the policy links */
.fluentform .gh-ff-note-wrap,
.fluentform .gh-ff-request-wrap,
.fluentform .gh-ff-links-wrap { grid-column: 1 / -1; }
.fluentform .gh-ff-note { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: #6b6259; }
.fluentform .gh-ff-note-wa a { display: inline-flex; gap: 6px; font-size: 13px; font-weight: 700; color: #1f8f4e; text-decoration: none; }
.fluentform .gh-ff-note-wa a:hover { text-decoration: underline; }
.fluentform .gh-ff-request {
    margin: 6px 0 0;
    padding: 12px 14px;
    border-left: 3px solid #EE7D05;
    border-radius: 8px;
    background: #FBF1E6;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #5E1719;
}
.fluentform .gh-ff-links { margin: -4px 0 0; font-size: 13px; color: #8a8177; }
.fluentform .gh-ff-links a { color: #892728; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.fluentform .gh-ff-links span { margin: 0 6px; }