/* --- Tablet & Mobile (The "Not Working" Fix) --- */
@media screen and (max-width: 800px) {

    .banner-title h2, .banner-title h1, .banner-title.doctor-title h3,
    .page-banner .page-bannerTitle h2, .page-banner .page-bannerTitle h1 {
       font-size: 32px;
    }
    .blog-box h1.blog-title, .blog-detail.pad-tb .blog-box-content .blog-title {
      font-size: 16px;
    }
    .dr-sliderInner .border_main,
    .dr-list .list .item .detail .border-main {
        margin-top: 8px;
        width: 73px;
        margin-left: auto;
        margin-right: auto;
    }

}

/* ==========================================================================
   Mobile Responsive Adjustments (Screens below 576px)
   ========================================================================== */
@media screen and (max-width: 576px) {
    /* Reset main wrappers to fit mobile screen edges gracefully */
    .modal-content,
    div#consultationModal,
    .consultation-modal-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        border-radius: 0; /* Optional: Makes it look native full-screen on mobile */
    }

    /* Convert the form layout to stack items vertically */
    .consultation-form-body {
        grid-template-columns: 1fr; /* Switch from 2 columns to 1 column */
        gap: 14px; /* Slightly larger gap for easier mobile tapping */
    }

    /* Force ALL items (Name, Mobile, Concern, Actions) to span the full width */
    .consultation-form-body .input-group,
    .consultation-form-body .input-group:nth-child(3),
    .consultation-form-body .form-actions-block {
        grid-column: span 1 !important;
        width: 100%;
    }

    /* Adjust the 3 feature boxes at the bottom so they don't squash */
    .footer-features {
        grid-template-columns: repeat(3, 1fr); /* Keeps them side by side */
        gap: 4px; /* Tighter gap for small screens */
        padding: 0 10px;
    }

    .feature-box {
        padding: 8px 4px;
        min-height: 80px; /* Gives extra vertical breathing room for text wrapping */
    }

    .feature-box p {
        font-size: 9px; /* Slightly smaller text so medical schemes don't overflow */
        line-height: 1.2;
    }

    .feature-box .icon {
        width: 32px; /* Scale down icons slightly to fit perfectly */
        height: 32px;
    }
    .form-item-mobile-number {
    width: 100%;
   }
   .form-actions-block {
        grid-column: span 1 !important;
        width: 100%;
        position: relative !important;
        z-index: 9999 !important; /* Forces the button above any phantom layers */
    }
    
    .form-actions-block input[type="submit"],
    .form-actions-block button {
        pointer-events: auto !important; /* Ensures touch events are registered */
    }
    /* Ensure the browser treats all active form wrappers as visible focusable targets */
    .consultation-form-body .input-group,
    .consultation-form-body .js-form-item,
    .captcha {
        display: block !important; /* Never use display:none on elements housing required inputs! */
        width: 100%;
    }

    /* ONLY use display none on explicitly verified UTM wrapper blocks, NEVER native form elements */
    .hidden-tracking-fields {
        display: none !important;
    }

    .consultation-form-body .captcha-wrapper {
        grid-column: span 1 !important;
    }

    .form-actions-block input[type="submit"], .form-actions-block button{
        padding: 8px;
    }
    .expert-btn-wrapper .expert-btn {
    padding: 8px;
    }

    .section-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 2px;
    }

}

@media (max-width: 767px) {
    .webform-button--submit {
        background-position: calc(100% - 100px) 16px !important;
    }
    
    .all-author-eeat-box.border.p-4.rounded.shadow-sm.mt-5 {
    margin: auto;
    width: 100%;
   }

   .homepage .spl-team-wrap .doctor-action-btns .btn {
    height: 44px;
    font-size: 14px;
    }

    .block-doctorDetail .doctor-action-btns a.bookAppoinment,
    .block-doctorDetail .doctor-action-btns a.book-appointment-btn-blue {
       width: 100%;
    }

}