/* ============================================================
   Schedule A Consultation - FormBuilder form styling.
   The SAME FormBuilder form (schedule-consultation) is rendered in two places:
     - Home appointment section  -> wrapper .schedule-fb-form (inside .appointment-form)
     - Header consultation popup  -> wrapper .schedule-fb-form.doctor-popup-fb
   Live design: placeholders only (no labels), rounded inputs, green submit,
   inline math captcha, top error summary hidden.

   FB Basic markup:
     form.FormBuilder > .Inputfields > .Inputfield > .InputfieldHeader (label)
     + .InputfieldContent (field). Radios/hidden fields also present.
   ============================================================ */

/* ---- shared: reset FB list + spacing ---- */
.schedule-fb-form .FormBuilder .Inputfields,
.schedule-fb-form .FormBuilder .Inputfields .Inputfield {
    list-style: none;
    margin: 0;
    padding: 0;
}
.schedule-fb-form .FormBuilder .Inputfield {
    margin-bottom: 18px;
}

/* Lift the FB form above any decorative ::before overlays so inputs are
   clickable/typeable (same issue the contact form had). */
.schedule-fb-form .FormBuilder {
    position: relative;
    z-index: 2;
}

/* "An asterisk * indicates a required field" note under the heading (live). */
.schedule-fb-form .fb-required-note {
    position: relative;
    z-index: 2;
    margin: 0 0 16px;
    font-size: 14px;
    color: #5f6678;
}

/* ---- shared: hide field labels (live uses placeholders) ---- */
.schedule-fb-form .FormBuilder .InputfieldHeader,
.schedule-fb-form .FormBuilder label.InputfieldHeader,
.schedule-fb-form .FormBuilder .Inputfield > label,
.schedule-fb-form .FormBuilder .Inputfield > .InputfieldHeader {
    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;
}

/* ---- shared: hide FB top error summary (per-field inline errors kept) ---- */
.schedule-fb-form .FormBuilder .FormBuilderErrors,
.schedule-fb-form .FormBuilder .NoticeErrors,
.schedule-fb-form .FormBuilder ul.pw-errors {
    display: none !important;
}

/* Hide the hidden "doctor" field's wrapper entirely (no empty gap). */
.schedule-fb-form .FormBuilder .Inputfield_doctor,
.schedule-fb-form .FormBuilder .InputfieldHidden {
    display: none !important;
    margin: 0 !important;
}

/* ---- shared: per-field inline error look ---- */
.schedule-fb-form .FormBuilder .input-error,
.schedule-fb-form .FormBuilder .InputfieldError {
    color: #e53935;
    font-size: 13px;
    margin-top: 6px;
    list-style: none;
    padding: 0;
}
.schedule-fb-form .FormBuilder .InputfieldStateError input,
.schedule-fb-form .FormBuilder .InputfieldStateError textarea {
    border-color: #e53935;
}

/* Refresh Button */
.schedule-fb-form .FormBuilder.InputfieldForm .math-captcha-refresh {
    background: #ffffff !important;
    color: #c21048 !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
}
/* ---- shared: injected math captcha row ---- */
.schedule-fb-form .FormBuilder .fb-captcha-row {
    margin: 4px 0 18px;
}
.schedule-fb-form .fb-captcha-error {
    color: #e53935;
    font-size: 13px;
    margin-top: 6px;
}
.schedule-fb-form .fb-captcha-row.has-error .math-captcha-input {
    border-color: #e53935;
}

/* ---- shared: success message after redirect (?csent=1) ---- */
.schedule-fb-form .fb-success-message {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eef8e6;
    border: 1px solid #cfe8bd;
    color: #2f6b12;
    padding: 18px 22px;
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.6;
}
.schedule-fb-form .fb-success-message i {
    color: #498e22;
    font-size: 20px;
}

/* ============================================================
   HOME appointment section variant
   (.appointment-form.schedule-fb-form) - matches the old two-column
   appointment form: name/email/phone/appoint in a 2-col grid, message full
   width, submit styled like .theme-button.style-1.
   ============================================================ */

/* Two-column grid for the first four short fields, full width for message,
   captcha and submit. FB renders each field with InputfieldColumnWidth classes
   only if set in admin; to be robust we drive the layout from field names. */
.appointment-form.schedule-fb-form .FormBuilder .Inputfields {
    display: flex;
    flex-wrap: wrap;
    /* row + column gap so the fields have the same open spacing as live */
    gap: 18px 20px;
    align-items: flex-start;
}
.appointment-form.schedule-fb-form .FormBuilder .Inputfield {
    flex: 0 0 100%;
    max-width: 100%;
    /* the flex gap drives all spacing; remove FB's own field margin */
    margin: 0;
}
/* name / email / phone / appointment -> half width on desktop.
   (Covers this CMS form's field names + the live-form fallbacks.) */
.appointment-form.schedule-fb-form .FormBuilder .Inputfield_schedule_consultation_name,
.appointment-form.schedule-fb-form .FormBuilder .Inputfield_name,
.appointment-form.schedule-fb-form .FormBuilder .Inputfield_email,
.appointment-form.schedule-fb-form .FormBuilder .Inputfield_email_address,
.appointment-form.schedule-fb-form .FormBuilder .Inputfield_phone_number,
.appointment-form.schedule-fb-form .FormBuilder .Inputfield_phoneno,
.appointment-form.schedule-fb-form .FormBuilder .Inputfield_appointment,
.appointment-form.schedule-fb-form .FormBuilder .Inputfield_appoint {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
}
/* message / captcha / submit -> full width */
.appointment-form.schedule-fb-form .FormBuilder .Inputfield_message,
.appointment-form.schedule-fb-form .FormBuilder .InputfieldTextarea,
.appointment-form.schedule-fb-form .FormBuilder .InputfieldSubmit {
    flex: 0 0 100%;
    max-width: 100%;
}

.appointment-form.schedule-fb-form .FormBuilder input[type="text"],
.appointment-form.schedule-fb-form .FormBuilder input[type="email"],
.appointment-form.schedule-fb-form .FormBuilder input[type="tel"],
.appointment-form.schedule-fb-form .FormBuilder input[type="number"],
.appointment-form.schedule-fb-form .FormBuilder textarea {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid #e5e5e7;
    border-radius: 10px;
    background: #ffffff;
    font-size: 15px;
    color: #333;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.appointment-form.schedule-fb-form .FormBuilder textarea {
    /* live message box is taller (~5 rows) */
    min-height: 140px;
    resize: vertical;
}
.appointment-form.schedule-fb-form .FormBuilder input:focus,
.appointment-form.schedule-fb-form .FormBuilder textarea:focus {
    border-color: #c21048;
    box-shadow: 0 0 0 3px rgba(194, 16, 72, 0.08);
}

/* submit -> theme button look */
.appointment-form.schedule-fb-form .FormBuilder .InputfieldSubmit button,
.appointment-form.schedule-fb-form .FormBuilder button[type="submit"],
.appointment-form.schedule-fb-form .FormBuilder input[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #498e22;
    color: #fff;
    border: none;
    /* live uses a slightly rounded rectangle, not a full pill */
    border-radius: 8px;
    padding: 13px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
}
.appointment-form.schedule-fb-form .FormBuilder .InputfieldSubmit button:hover,
.appointment-form.schedule-fb-form .FormBuilder button[type="submit"]:hover,
.appointment-form.schedule-fb-form .FormBuilder input[type="submit"]:hover {
    background: #3c7a1c;
    transform: translateY(-1px);
}

@media (max-width: 767px) {
    .appointment-form.schedule-fb-form .FormBuilder .Inputfield {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   POPUP variant (.doctor-popup-fb) - matches the old .doctor-popup-grid look:
   name+phone on row 1, email+appoint on row 2, message full width.
   ============================================================ */
.doctor-popup-fb .FormBuilder .Inputfields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* live look: generous gap between the two columns AND between rows */
    gap: 18px 18px;
}
/* per-field wrappers: kill FormBuilder's own bottom margin so the grid gap is
   the single source of spacing (matches the even spacing on the live popup) */
.doctor-popup-fb .FormBuilder .Inputfield {
    margin: 0;
}
/* full-width rows: message, captcha, submit, (hidden) doctor */
.doctor-popup-fb .FormBuilder .Inputfield_message,
.doctor-popup-fb .FormBuilder .InputfieldTextarea,
.doctor-popup-fb .FormBuilder .InputfieldSubmit,
.doctor-popup-fb .FormBuilder .fb-captcha-row {
    grid-column: 1 / -1;
}

.doctor-popup-fb .FormBuilder input[type="text"],
.doctor-popup-fb .FormBuilder input[type="email"],
.doctor-popup-fb .FormBuilder input[type="tel"],
.doctor-popup-fb .FormBuilder input[type="number"],
.doctor-popup-fb .FormBuilder textarea {
    width: 100%;
    border: 1px solid #e3e6ee;
    border-radius: 12px;
    /* larger, more comfortable inputs like the live popup */
    padding: 15px 18px;
    font-size: 15px;
    color: #333;
    background: #fff;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.doctor-popup-fb .FormBuilder textarea {
    /* live message box is noticeably taller (~5-6 rows) */
    min-height: 150px;
    resize: vertical;
}
.doctor-popup-fb .FormBuilder input::placeholder,
.doctor-popup-fb .FormBuilder textarea::placeholder {
    color: #6b7280;
    opacity: 1;
}
.doctor-popup-fb .FormBuilder input:focus,
.doctor-popup-fb .FormBuilder textarea:focus {
    border-color: #c21048;
    box-shadow: 0 0 0 3px rgba(194, 16, 72, 0.08);
}

/* captcha row: give it the same breathing room as the live popup */
.doctor-popup-fb .FormBuilder .fb-captcha-row {
    margin: 2px 0 0;
}

/* submit -> green theme button, slightly rounded (not a full pill) like live */
.doctor-popup-fb .FormBuilder .InputfieldSubmit button,
.doctor-popup-fb .FormBuilder button[type="submit"],
.doctor-popup-fb .FormBuilder input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #498e22;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 13px 26px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
}
.doctor-popup-fb .FormBuilder .InputfieldSubmit button:hover,
.doctor-popup-fb .FormBuilder button[type="submit"]:hover,
.doctor-popup-fb .FormBuilder input[type="submit"]:hover {
    background: #3c7a1c;
    transform: translateY(-1px);
}

@media (max-width: 575px) {
    .doctor-popup-fb .FormBuilder .Inputfields {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}