/**
 * Gravity Forms Form ID 7 — Booking Form
 * Conversion-optimized, compact, modern design
 * Brand color: #047727 (Expected Health green)
 */

/* ═══════════════════════════════════════════
   1. BASE — Font, spacing reset, container
   ═══════════════════════════════════════════ */

#gform_wrapper_7,
#gform_7 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    color: #1a1a1a;
    line-height: 1.5;
}

#gform_wrapper_7 .gform_body {
    padding: 0 !important;
}

#gform_wrapper_7 .gform_page {
    padding: 0 !important;
}


/* ═══════════════════════════════════════════
   2. PROGRESS BAR — Slim green track
   ═══════════════════════════════════════════ */

#gform_wrapper_7 .gf_progressbar_wrapper {
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}

/* Step text ("Step 1 of 5") */
#gform_wrapper_7 .gf_progressbar_title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 6px !important;
}

#gform_wrapper_7 .gf_progressbar {
    height: 5px !important;
    background: #e5e7eb !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

#gform_wrapper_7 .gf_progressbar_percentage {
    height: 5px !important;
    background: linear-gradient(90deg, #047727, #06a835) !important;
    border-radius: 20px !important;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hide the percentage text inside the bar */
#gform_wrapper_7 .gf_progressbar_percentage span {
    display: none !important;
}


/* ═══════════════════════════════════════════
   3. PAGE TITLE — Sharp, compact heading
   ═══════════════════════════════════════════ */

#gform_wrapper_7 .gform_page_title,
#gform_wrapper_7 .gform_title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 16px 0 !important;
    padding: 0 0 10px 0 !important;
    border-bottom: 2px solid #e5e7eb !important;
    letter-spacing: -0.3px !important;
    line-height: 1.3 !important;
}

#gform_wrapper_7 .gform_description {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.5 !important;
}


/* ═══════════════════════════════════════════
   4. FIELD LAYOUT — Tight grid, minimal gaps
   ═══════════════════════════════════════════ */

#gform_wrapper_7 .gform_fields {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: flex-start !important;
}

#gform_wrapper_7 .gfield {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#gform_wrapper_7 .ginput_container {
    margin: 0 !important;
}

/* Width classes */
#gform_wrapper_7 .gfield.gfield--width-full {
    flex: 0 0 100% !important;
}

#gform_wrapper_7 .gfield.gfield--width-half {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 180px !important;
}

#gform_wrapper_7 .gfield.gfield--width-third {
    flex: 1 1 calc(33.333% - 8px) !important;
    min-width: 140px !important;
}

/* Section headers span full width */
#gform_wrapper_7 .gsection {
    flex: 0 0 100% !important;
    margin-top: 4px !important;
}


/* ═══════════════════════════════════════════
   5. LABELS — Clean, small, unobtrusive
   ═══════════════════════════════════════════ */

#gform_wrapper_7 .gfield_label {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-bottom: 4px !important;
    margin-top: 0 !important;
    display: block !important;
    line-height: 1.35 !important;
    padding: 0 !important;
}

#gform_wrapper_7 .gfield_required {
    color: #dc2626 !important;
    margin-left: 1px !important;
    font-weight: 500 !important;
}

/* Sub-labels (e.g. "Street Address", "City") */
#gform_wrapper_7 .ginput_container label,
#gform_wrapper_7 .gfield_description.gfield_description--above {
    font-size: 11.5px !important;
    color: #6b7280 !important;
    margin-bottom: 2px !important;
    margin-top: 0 !important;
    font-weight: 500 !important;
}

#gform_wrapper_7 .gfield_description {
    font-size: 14px !important;
    color: #4b5563 !important;
    margin-top: 3px !important;
    line-height: 1.5 !important;
}

/* Consent / authorization checkbox labels */
#gform_wrapper_7 .ginput_container_consent label,
#gform_wrapper_7 .gfield_consent_label {
    font-size: 14.5px !important;
    color: #1f2937 !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}


/* ═══════════════════════════════════════════
   6. INPUT FIELDS — Compact, modern
   ═══════════════════════════════════════════ */

#gform_wrapper_7 input[type="text"],
#gform_wrapper_7 input[type="email"],
#gform_wrapper_7 input[type="tel"],
#gform_wrapper_7 input[type="url"],
#gform_wrapper_7 input[type="number"],
#gform_wrapper_7 input[type="password"],
#gform_wrapper_7 textarea,
#gform_wrapper_7 select {
    width: 100% !important;
    padding: 9px 12px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #111827 !important;
    background: #f9fafb !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

/* Focus */
#gform_wrapper_7 input[type="text"]:focus,
#gform_wrapper_7 input[type="email"]:focus,
#gform_wrapper_7 input[type="tel"]:focus,
#gform_wrapper_7 input[type="url"]:focus,
#gform_wrapper_7 input[type="number"]:focus,
#gform_wrapper_7 input[type="password"]:focus,
#gform_wrapper_7 textarea:focus,
#gform_wrapper_7 select:focus {
    outline: none !important;
    border-color: #047727 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(4, 119, 39, 0.1) !important;
}

/* Placeholder */
#gform_wrapper_7 input::placeholder,
#gform_wrapper_7 textarea::placeholder {
    color: #9ca3af !important;
}

/* Textarea */
#gform_wrapper_7 textarea {
    min-height: 80px !important;
    resize: vertical !important;
}

/* Select dropdown — slightly taller for legibility */
#gform_wrapper_7 select {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-position: right 10px center !important;
    background-repeat: no-repeat !important;
    background-size: 16px !important;
    padding-right: 32px !important;
    cursor: pointer !important;
}


/* ═══════════════════════════════════════════
   7. RADIO & CHECKBOX — Compact cards
   ═══════════════════════════════════════════ */

#gform_wrapper_7 .gfield_radio,
#gform_wrapper_7 .gfield_checkbox {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
}

#gform_wrapper_7 .gchoice {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    background: #fafafa !important;
    margin: 0 !important;
    min-height: 38px !important;
}

#gform_wrapper_7 .gchoice:hover {
    border-color: #c5d1c8 !important;
    background: #f5faf6 !important;
}

/* Selected state */
#gform_wrapper_7 .gchoice:has(input:checked) {
    border-color: #047727 !important;
    background: #f0fdf4 !important;
    box-shadow: 0 0 0 2px rgba(4, 119, 39, 0.08) !important;
}

#gform_wrapper_7 .gchoice input[type="radio"],
#gform_wrapper_7 .gchoice input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 0 0 10px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    accent-color: #047727 !important;
}

#gform_wrapper_7 .gchoice label {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    cursor: pointer !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    padding: 8px 10px !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
}

/* When a Yes/No question is immediately followed by a conditional text/textarea
   follow-up, force both to span the full grid row so the follow-up always lands
   directly under the trigger (auto-tagged by eh_form_7_segmented_yes_no in
   functions.php). Without this, GF's auto-flow grid tucks the follow-up next to
   the trigger when both halves of a 2-up row are visible. */
#gform_wrapper_7 .gfield.eh-conditional-trigger,
#gform_wrapper_7 .gfield.eh-conditional-followup {
    grid-column: 1 / -1 !important;
}


/* Segmented toggle for binary fields (Yes/No, Male/Female, etc.).
   Apply by adding 'eh-radio-inline' in GF Form Editor → Appearance → Custom CSS Class,
   or rely on the auto-tagger in functions.php (eh_form_7_segmented_yes_no), which
   tags any 2-option radio/checkbox group whose labels are exactly "Yes" / "No". */
#gform_wrapper_7 .eh-radio-inline .gfield_radio,
#gform_wrapper_7 .eh-radio-inline .gfield_checkbox {
    display: inline-flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #fafafa !important;
    overflow: hidden !important;
    min-width: 200px !important;
    max-width: 280px !important;
}

#gform_wrapper_7 .eh-radio-inline .gchoice {
    position: relative !important;
    flex: 1 1 0 !important;
    border: none !important;
    border-left: 1.5px solid #e5e7eb !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
}

#gform_wrapper_7 .eh-radio-inline .gchoice:first-child {
    border-left: none !important;
}

#gform_wrapper_7 .eh-radio-inline .gchoice:hover {
    background: #f5faf6 !important;
    box-shadow: none !important;
}

#gform_wrapper_7 .eh-radio-inline .gchoice:has(input:checked) {
    background: #047727 !important;
    border-color: #047727 !important;
    box-shadow: none !important;
}

#gform_wrapper_7 .eh-radio-inline .gchoice:has(input:checked) + .gchoice {
    border-left-color: #047727 !important;
}

#gform_wrapper_7 .eh-radio-inline .gchoice:focus-within {
    outline: 2px solid rgba(4, 119, 39, 0.45) !important;
    outline-offset: -1px !important;
}

#gform_wrapper_7 .eh-radio-inline .gchoice input[type="radio"],
#gform_wrapper_7 .eh-radio-inline .gchoice input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
}

#gform_wrapper_7 .eh-radio-inline .gchoice label {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

#gform_wrapper_7 .eh-radio-inline .gchoice:has(input:checked) label {
    color: #ffffff !important;
}


/* ═══════════════════════════════════════════
   8. DATE FIELDS — Tight inline dropdowns
   ═══════════════════════════════════════════ */

#gform_wrapper_7 .ginput_container_date {
    display: flex !important;
    gap: 6px !important;
}

#gform_wrapper_7 .ginput_container_date select {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Date sub-labels */
#gform_wrapper_7 .ginput_container_date label {
    font-size: 10px !important;
    color: #9ca3af !important;
    margin-top: 2px !important;
}


/* ═══════════════════════════════════════════
   9. ADDRESS FIELDS — City/State/ZIP inline
   ═══════════════════════════════════════════ */

#gform_wrapper_7 .ginput_container_address {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* Street address full width */
#gform_wrapper_7 .ginput_container_address span.address_line_1,
#gform_wrapper_7 .ginput_container_address span.address_line_2 {
    flex: 0 0 100% !important;
}

/* City, State, ZIP on one row */
#gform_wrapper_7 .ginput_container_address span.address_city {
    flex: 1 1 35% !important;
    min-width: 120px !important;
}

#gform_wrapper_7 .ginput_container_address span.address_state {
    flex: 1 1 35% !important;
    min-width: 120px !important;
}

#gform_wrapper_7 .ginput_container_address span.address_zip {
    flex: 1 1 25% !important;
    min-width: 90px !important;
}

/* Address sub-labels */
#gform_wrapper_7 .ginput_container_address label {
    font-size: 11px !important;
    color: #9ca3af !important;
    margin-bottom: 2px !important;
    margin-top: 0 !important;
}


/* ═══════════════════════════════════════════
   10. BUTTONS — Full-width green primary
   ═══════════════════════════════════════════ */

#gform_wrapper_7 .gform_footer,
#gform_wrapper_7 .gform_page_footer {
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

/* Primary (Next / Submit) */
#gform_wrapper_7 .gform_next_button,
#gform_wrapper_7 .gform_button,
#gform_wrapper_7 input[type="submit"] {
    flex: 1 !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: #047727 !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    font-family: inherit !important;
}

#gform_wrapper_7 .gform_next_button:hover,
#gform_wrapper_7 .gform_button:hover,
#gform_wrapper_7 input[type="submit"]:hover {
    background: #035e1f !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(4, 119, 39, 0.2) !important;
}

#gform_wrapper_7 .gform_next_button:active,
#gform_wrapper_7 .gform_button:active,
#gform_wrapper_7 input[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

/* Previous button — secondary style */
#gform_wrapper_7 .gform_previous_button {
    flex: 1 !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    background: #fff !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
}

#gform_wrapper_7 .gform_previous_button:hover {
    background: #f9fafb !important;
    border-color: #9ca3af !important;
}


/* ═══════════════════════════════════════════
   11. VALIDATION & ERRORS
   ═══════════════════════════════════════════ */

#gform_wrapper_7 .gfield_error {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#gform_wrapper_7 .gfield_error .gfield_label {
    color: #dc2626 !important;
}

#gform_wrapper_7 .gfield_error input,
#gform_wrapper_7 .gfield_error textarea,
#gform_wrapper_7 .gfield_error select {
    border-color: #dc2626 !important;
    background: #fef2f2 !important;
}

#gform_wrapper_7 .gfield_error input:focus,
#gform_wrapper_7 .gfield_error textarea:focus,
#gform_wrapper_7 .gfield_error select:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

#gform_wrapper_7 .validation_message {
    font-size: 12px !important;
    color: #dc2626 !important;
    margin-top: 3px !important;
    padding: 4px 8px !important;
    background: #fef2f2 !important;
    border-left: 2px solid #dc2626 !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

#gform_wrapper_7 .gform_validation_errors {
    background: #fef2f2 !important;
    border: 1.5px solid #fca5a5 !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
}

#gform_wrapper_7 .gform_submission_error {
    color: #dc2626 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}


/* ═══════════════════════════════════════════
   12. CONFIRMATION MESSAGE
   ═══════════════════════════════════════════ */

#gform_wrapper_7 .gform_confirmation_wrapper {
    padding: 24px !important;
    background: #f0fdf4 !important;
    border: 1.5px solid #86efac !important;
    border-radius: 10px !important;
    text-align: center !important;
}

#gform_wrapper_7 .gform_confirmation_message {
    font-size: 15px !important;
    color: #166534 !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
}


/* ═══════════════════════════════════════════
   13. LOADING SPINNER
   ═══════════════════════════════════════════ */

#gform_wrapper_7 .gform_ajax_spinner {
    width: 20px !important;
    height: 20px !important;
    border: 2.5px solid #e5e7eb !important;
    border-top-color: #047727 !important;
    border-radius: 50% !important;
    animation: gf7spin 0.7s linear infinite !important;
    margin-left: 8px !important;
}

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


/* ═══════════════════════════════════════════
   14. ACCESSIBILITY
   ═══════════════════════════════════════════ */

#gform_wrapper_7 *:focus-visible {
    outline: 2px solid #047727 !important;
    outline-offset: 2px !important;
}

#gform_wrapper_7 .gfield_required_text {
    font-size: 11px !important;
    color: #9ca3af !important;
}

#gform_wrapper_7 .gfield_required_legend,
#gform_wrapper_7 .gfield_visibility_hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ═══════════════════════════════════════════
   15. MOBILE RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 600px) {

    #gform_wrapper_7 .gform_page_title,
    #gform_wrapper_7 .gform_title {
        font-size: 18px !important;
    }

    /* Stack half-width fields */
    #gform_wrapper_7 .gfield.gfield--width-half,
    #gform_wrapper_7 .gfield.gfield--width-third {
        flex: 0 0 100% !important;
    }

    /* Address city/state/zip */
    #gform_wrapper_7 .ginput_container_address span.address_city,
    #gform_wrapper_7 .ginput_container_address span.address_state,
    #gform_wrapper_7 .ginput_container_address span.address_zip {
        flex: 0 0 100% !important;
    }

    /* Date fields stack */
    #gform_wrapper_7 .ginput_container_date {
        flex-direction: column !important;
    }

    /* Buttons stack (reverse so Next is on top) */
    #gform_wrapper_7 .gform_footer,
    #gform_wrapper_7 .gform_page_footer {
        flex-direction: column-reverse !important;
    }

    #gform_wrapper_7 .gform_next_button,
    #gform_wrapper_7 .gform_button,
    #gform_wrapper_7 .gform_previous_button,
    #gform_wrapper_7 input[type="submit"] {
        width: 100% !important;
    }

    /* Radio stays stacked on mobile */
    #gform_wrapper_7 .gfield--width-half .gfield_radio,
    #gform_wrapper_7 .gfield--width-half .gfield_checkbox {
        flex-direction: column !important;
    }

    /* Prevent iOS zoom on focus */
    #gform_wrapper_7 input[type="text"],
    #gform_wrapper_7 input[type="email"],
    #gform_wrapper_7 input[type="tel"],
    #gform_wrapper_7 textarea,
    #gform_wrapper_7 select {
        font-size: 16px !important;
    }
}