/* ============================================================
   FIXES — 6 issues
   1. Remove excess gap in service cards (title ↔ text ↔ button)
   2. Doctor name left-aligned
   3. H1 headings smaller on mobile
   4. Email input white background fix
   5. Submit Now button — single line, auto height
   6. Phone validation (JS at bottom via <style> tag note)
   ============================================================ */


/* ── 1. SERVICE CARDS — remove excess vertical gap ─────────── */

@media (max-width: 991px) {

    /* The fixed height on service-content is creating the gap */
    .service .service-item .service-content {
        height: auto !important;
        min-height: unset !important;
        padding: 16px !important;
    }

    .service-content-inner {
        height: auto !important;
        gap: 8px !important;
    }

    /* Tighten heading margin */
    .service-content-inner h5 {
        margin-bottom: 8px !important;
    }

    /* Tighten paragraph margin */
    .service-content-inner p {
        margin-bottom: 10px !important;
    }

    /* Button wrapper — no extra top margin */
    .call-us-know-btn {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}


/* ── 2. DOCTOR NAME — left aligned ─────────────────────────── */

.doctor-name {
    text-align: left !important;
    padding: 12px 16px !important;
}

.head-style {
    text-align: left !important;
}


/* ── 3. H1 HEADINGS — responsive font sizes on mobile ──────── */

@media (max-width: 576px) {

    /* Global h1 scale-down */
    h1, .h1 {
        font-size: clamp(20px, 6vw, 32px) !important;
        line-height: 1.25 !important;
    }

    /* Section titles (Our Services, Accolades, Blogs etc.) */
    .sub-title,
    h1.sub-title {
        font-size: 26px !important;
    }

    /* "Our Services" heading */
    .section-title h1.sub-title {
        font-size: 26px !important;
    }

    /* Appointment section headings */
    .appointment .section-title h1,
    .m-form h1,
    .m-form h2 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    /* About section heading */
    .about .section-title h1 {
        font-size: 22px !important;
    }

    /* Testimonials heading */
    .olivia-header h1 {
        font-size: 26px !important;
    }

    /* Blog & Accolades section title */
    .blog .section-title h1 {
        font-size: 26px !important;
    }

    /* "Request Appointment" display heading */
    .display-5 {
        font-size: 26px !important;
    }

    /* "Your peace of mind is my priority" */
    .display-4 {
        font-size: 22px !important;
    }

    /* "Helping You Prioritize..." */
    .display-3 {
        font-size: 20px !important;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    h1, .h1 {
        font-size: clamp(22px, 5vw, 36px) !important;
    }

    .sub-title { font-size: 30px !important; }
    .display-5 { font-size: 28px !important; }
    .display-4 { font-size: 26px !important; }
}


/* ── 4. EMAIL INPUT — fix white background on autofill/focus ── */

/* Browser autofill injects a white background via internal styles.
   Override with box-shadow trick (background-color won't work). */

/* ── 4. INPUT AUTOFILL — fix white background on Name, Email & Phone ── */

#field_name,
#field_email,
#field_phone,
input[type="text"],
input[type="email"] {
    background-color: transparent !important;
    background: transparent !important;
}

/* Chrome / Edge Autofill */
#field_name:-webkit-autofill,
#field_name:-webkit-autofill:hover,
#field_name:-webkit-autofill:focus,
#field_name:-webkit-autofill:active,

#field_email:-webkit-autofill,
#field_email:-webkit-autofill:hover,
#field_email:-webkit-autofill:focus,
#field_email:-webkit-autofill:active,

#field_phone:-webkit-autofill,
#field_phone:-webkit-autofill:hover,
#field_phone:-webkit-autofill:focus,
#field_phone:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #b16245 !important;
    caret-color: #b16245 !important;
    background-color: transparent !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

/* Firefox */
#field_name:autofill,
#field_email:autofill,
#field_phone:autofill {
    background-color: transparent !important;
}

/* Focus */
#field_name:focus,
#field_email:focus,
#field_phone:focus {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: 0 0 0 0.25rem rgba(177, 98, 69, 0.25) !important;
}


/* ── 5. SUBMIT NOW BUTTON — single line, auto height ────────── */

#submitBtn,
button[type="submit"]#submitBtn {
    white-space: nowrap !important;      /* force single line */
    width: 100% !important;             /* match textbox width */
    height: auto !important;            /* auto height based on text */
    padding: 12px 20px !important;      /* comfortable but not tall */
    font-size: 16px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 576px) {
    #submitBtn {
        font-size: 15px !important;
        padding: 11px 16px !important;
    }
}