/*=============================================
  ADVIK DIAGNOSTICS — MOBILE RESPONSIVE CSS
  Comprehensive mobile-first responsive overhaul
  Author: Senior UI/UX — May 2026
=============================================*/

/* ── Global Mobile Resets ── */
@media (max-width: 991px) {
  body { padding-bottom: 60px; } /* space for sticky bottom bar */
  .container { padding-left: 15px; padding-right: 15px; }
  img { max-width: 100%; height: auto; }
  h1 { font-size: 28px !important; line-height: 1.3 !important; }
  h2 { font-size: 24px !important; line-height: 1.3 !important; }
  h3 { font-size: 20px !important; }
  .default-padding { padding-top: 40px; padding-bottom: 40px; }
  .site-heading { margin-bottom: 25px; }
  .site-heading h2 { font-size: 26px !important; }
}

@media (max-width: 767px) {
  h1 { font-size: 24px !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 18px !important; }
  h4 { font-size: 16px !important; }
}

/* ── Breadcrumb Area ── */
@media (max-width: 767px) {
  .breadcrumb-area { padding: 70px 0 50px !important; min-height: auto !important; }
  .breadcrumb-area h1 { font-size: 24px !important; margin: 0 !important; padding: 0 !important; word-wrap: break-word; }
  .breadcrumb-area .breadcrumb { font-size: 13px; }
}

/* ── Homepage Banner ── */
@media (max-width: 991px) {
  .banner-area .content.double-items { padding-top: 80px !important; padding-bottom: 40px !important; }
  .banner-area .content h1 { font-size: 26px !important; line-height: 1.3 !important; }
  .banner-area .content p { font-size: 14px !important; }
  .banner-area .col-lg-5.appoinment { margin-top: 30px; }
  .banner-area .appoinment-box { padding: 20px !important; border-radius: 14px; }
  .banner-area .appoinment-box h2 { font-size: 20px !important; }
  .focus-points { gap: 6px !important; }
  .focus-points > div { font-size: 13px !important; }
}

@media (max-width: 767px) {
  .banner-area .content h1 { font-size: 22px !important; }
  .banner-area .content .col-lg-7 > br { display: none; }
}

/* ── Trust Badge Area (Homepage) ── */
@media (max-width: 991px) {
  .trust-badge-area { padding: 30px 0 !important; }
  .trust-badge-area h2 { font-size: 22px !important; }
  .trust-badge-area p { font-size: 15px !important; }
  .trust-badge-area .col-lg-5 { margin-top: 25px; }
  .trust-badge-area .col-lg-7 > div:last-child { justify-content: center; }
  .trust-badge-area .col-lg-7 > div:last-child a {
    min-width: 140px !important;
    padding: 0 18px !important;
    font-size: 13px !important;
    height: 44px !important;
  }
}

@media (max-width: 575px) {
  .trust-badge-area .col-lg-7 > div:last-child { flex-direction: column; align-items: stretch; }
  .trust-badge-area .col-lg-7 > div:last-child a { width: 100% !important; }
}

/* ── Doctor Highlight Cards (Homepage) ── */
@media (max-width: 991px) {
  .doctor-highlight-area { padding: 40px 0 !important; }
  .doctor-highlight-area .col-lg-4 { margin-bottom: 20px; }
  .doctor-highlight-area .col-lg-4:last-child { margin-bottom: 0; }
  .doctor-highlight-area .col-lg-4 > div { padding: 20px !important; }
  .doctor-highlight-area .col-lg-4 > div > div:first-child {
    width: 100px !important; height: 100px !important;
  }
  .doctor-highlight-area h4 { font-size: 18px !important; }
  .doctor-highlight-area .col-lg-4 > div > a { font-size: 13px !important; padding: 10px 16px !important; }
}

/* ── Department Tabs (Homepage) ── */
@media (max-width: 991px) {
  .department-tabs .col-lg-3 { margin-bottom: 20px; }
  .department-tabs .nav-tabs {
    display: flex !important; flex-wrap: wrap !important;
    gap: 6px; border-bottom: none;
  }
  .department-tabs .nav-item { width: calc(50% - 3px); margin: 0 !important; padding: 0 !important; }
  .department-tabs .nav-link {
    text-align: center !important; padding: 10px 8px !important;
    font-size: 12px !important; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
}

/* ── Offers Carousel (Homepage) ── */
@media (max-width: 767px) {
  .offers-area h2 { font-size: 24px !important; }
  .advik-offers-carousel .item > div > div:first-child { height: 180px !important; }
  .advik-offers-carousel .item > div > div:last-child { padding: 20px !important; }
}

/* ── Clinical / Diagnostic Services Section (Homepage dark) ── */
@media (max-width: 991px) {
  .doctor-tips-area .col-lg-6:first-child { padding-right: 15px !important; }
  .doctor-tips-area .col-lg-6:first-child h2 { font-size: 24px !important; }
  .doctor-tips-area .col-lg-6:first-child p { font-size: 14px !important; }
}

/* ── Quality / Commitment Section (Homepage) ── */
@media (max-width: 991px) {
  .bg-dark .focus-points {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .bg-dark .focus-points > div { font-size: 13px !important; }
  .bg-dark .col-lg-5 h2 { font-size: 24px !important; }
  .bg-dark .col-lg-6 > div { padding: 24px !important; }
  .bg-dark .col-lg-6 > div h4 { font-size: 18px !important; }
  .bg-dark .col-lg-6 > div .col-6 a { font-size: 12px !important; }
}

/* ── Testimonials Section (Homepage) ── */
@media (max-width: 991px) {
  .testimonials-area .col-lg-7 { padding-left: 15px; }
  .advik-avatar-dot .advik-avatar-ring {
    width: 36px !important; height: 36px !important;
  }
  .advik-testimonial-slide p { font-size: 15px !important; }
}

@media (max-width: 575px) {
  .advik-avatar-dot .advik-author-info { display: none !important; }
  .advik-avatar-dot .advik-avatar-ring {
    width: 32px !important; height: 32px !important;
  }
}

/* ── FAQ Accordion ── */
@media (max-width: 767px) {
  .advik-faq-btn { font-size: 14px !important; padding: 16px 18px !important; }
  .accordion-body { padding: 16px 18px !important; font-size: 14px !important; }
}

/* ── Referral / Corporate Section (Homepage) ── */
@media (max-width: 991px) {
  .referral-area .col-lg-6:last-child > div { padding: 25px !important; margin-top: 25px; }
  .referral-area h2 { font-size: 24px !important; }
  .referral-area p { font-size: 14px !important; }
}

/* ── Location / Map Section (Homepage) ── */
@media (max-width: 991px) {
  .location-area .row.g-0 { border-radius: 16px !important; }
  .location-area .col-lg-7 iframe { height: 280px !important; }
  .location-area .col-lg-5 { padding: 25px !important; }
  .location-area h3 { font-size: 22px !important; }
}

/* ── Services / Tests Listing Page ── */
@media (max-width: 767px) {
  .services-area .single-item { margin-bottom: 20px !important; }
  .atc-card { padding: 20px 16px 16px !important; }
  .atc-icon { width: 48px !important; height: 48px !important; }
  .atc-icon i { font-size: 18px !important; }
  .atc-card h4 { font-size: 15px !important; }
  .atc-desc { font-size: 13px !important; }
  .atc-chips-row { gap: 4px !important; }
  .atc-chip { font-size: 10px !important; padding: 2px 8px !important; }
  .atc-footer { flex-wrap: wrap; gap: 8px; }
  /* Why Regular Testing section */
  .services-area + .doctor-tips-area .col-lg-6:last-child { text-align: center !important; }
  .services-area + .doctor-tips-area .col-lg-6:last-child img { max-width: 60% !important; }
  .services-area + .doctor-tips-area .col-lg-6:last-child i { display: none !important; }
  /* top content info box */
  .about-area .col-lg-12 > div[style*="border-left:5px"] { padding: 20px !important; }
}

/* ── Offers / Packages Page ── */
@media (max-width: 991px) {
  .offers-area .single-item { margin-bottom: 20px; }
}

@media (max-width: 767px) {
  .offers-area h2 { font-size: 22px !important; }
  .offers-area .single-item > div > div:first-child { height: 180px !important; }
  .offers-area .single-item > div > div:last-child { padding: 20px !important; }
  /* Test list info area */
  .test-list-info-area { padding: 40px 0 !important; }
  .test-list-info-area .col-lg-5 { margin-top: 30px; }
  .test-list-info-area .col-lg-5 > div { padding: 25px !important; }
}

/* ── Book Appointment Page ── */
@media (max-width: 991px) {
  .appointment-page-area .content-box { flex-direction: column !important; }
  .appointment-page-area .content-box > .col-lg-4 {
    width: 100% !important; max-width: 100% !important; flex: none !important;
    padding: 30px !important; order: 2;
  }
  .appointment-page-area .content-box > .col-lg-8 {
    width: 100% !important; max-width: 100% !important; flex: none !important;
    padding: 25px !important; order: 1;
  }
  .appointment-page-area h2 { font-size: 22px !important; }
  /* Process flow */
  .process-flow-area div[style*="display: flex"][style*="justify-content: space-between"] {
    flex-direction: column !important; align-items: center !important;
  }
  .process-flow-area div[style*="flex: 0 0 auto"] {
    transform: rotate(90deg); margin: 10px 0;
  }
  .process-flow-area div[style*="flex: 1"][style*="min-width: 200px"] {
    min-width: 100% !important; margin-bottom: 10px;
  }
}

/* ── Blog Page ── */
@media (max-width: 991px) {
  .blog-intro-area .col-lg-6:last-child { padding-left: 15px !important; margin-top: 25px; }
}

@media (max-width: 767px) {
  .blog-area .single-item .item .thumb img { height: 200px !important; }
  .blog-area .single-item .item .info { padding: 20px !important; }
  .blog-area .single-item .item .info h4 { font-size: 17px !important; }
  .commitment-area div[style*="padding:60px 40px"] { padding: 30px 20px !important; }
}

/* ── About Page ── */
@media (max-width: 991px) {
  /* MD Card layout fix */
  .about-area + div .col-md-4 > div { min-height: 220px !important; }
  .about-area + div .col-md-8 > div { padding: 20px !important; }
  .about-area + div .col-md-8 h3 { font-size: 20px !important; }
}

@media (max-width: 767px) {
  .about-style-two .thumb img:first-child { border-radius: 12px; }
  .top-entry-area .single-item { margin-bottom: 15px; }
  .top-entry-area .item { padding: 25px !important; }
  .top-entry-area .item i { font-size: 40px !important; }
  .top-entry-area .item h4 { font-size: 18px !important; }
}

/* ── Contact Page ── */
@media (max-width: 767px) {
  .contact-area { padding: 40px 0 !important; }
  .contact-area .contact-form-container { padding: 0 15px; }
  .contact-area h2 { font-size: 24px !important; }
  .social-media-contact { padding: 20px !important; }
  .social-icons-wrapper { gap: 18px !important; }
  .social-icons-wrapper a { font-size: 24px !important; }
  .google-maps iframe { height: 250px !important; }
}

/* ── Leadership Page ── */
@media (max-width: 767px) {
  .doctor-area .item .thumb img { max-height: 280px; object-fit: cover; }
}

/* ── Service Detail, Offer Detail, Subtest Detail ── */
@media (max-width: 767px) {
  .services-details-area .sidebar { margin-top: 30px; }
  .services-details-area .info { padding: 0 !important; }
}

/* ── Footer ── */
@media (max-width: 991px) {
  footer .f-items .item { margin-bottom: 30px; }
  footer .f-items .item:last-child { margin-bottom: 0; }
  footer .f-items { padding-top: 30px !important; padding-bottom: 30px !important; }
}

@media (max-width: 767px) {
  footer .footer-bottom { padding: 15px 0; }
  footer .footer-bottom .col-lg-6:first-child { text-align: center; margin-bottom: 10px; }
  footer .footer-bottom .col-lg-6:last-child { text-align: center !important; }
  footer .footer-bottom .col-lg-6:last-child ul {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px; padding: 0; margin: 0;
  }
  footer .footer-bottom .col-lg-6:last-child ul li { margin: 0 !important; }
  footer .footer-bottom .col-lg-6:last-child ul li a { font-size: 12px; }
  footer .f-item.contact li p span { word-break: break-word; }
  footer .opening-info ul li { flex-direction: column; text-align: left; }
  footer .opening-info ul li .pull-right { float: none !important; }
  footer .f-item.social-widget .social ul { justify-content: flex-start !important; }
}

/* ── Sticky Mobile Bottom Bar ── */
@media (max-width: 767px) {
  .d-md-none[style*="position:fixed"][style*="bottom:0"] {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .d-md-none[style*="position:fixed"][style*="bottom:0"] a {
    font-size: 12px !important; padding: 10px 4px !important;
  }
}

/* ── Cookie Banner ── */
@media (max-width: 767px) {
  #cookie-consent-banner {
    bottom: 65px !important; /* above sticky bar */
    left: 10px !important; right: 10px !important;
    padding: 15px !important; border-radius: 10px !important;
  }
  #cookie-consent-banner > div { flex-direction: column !important; gap: 12px !important; }
  #cookie-consent-banner > div > div:first-child { min-width: auto !important; }
  #cookie-consent-banner > div > div:last-child { width: 100%; display: flex; }
  #cookie-consent-banner > div > div:last-child button { flex: 1; }
}

/* ── Modal Responsiveness (OTP / Booking / Upload) ── */
@media (max-width: 480px) {
  #prescription-login-modal > div,
  #prescription-upload-modal > div,
  #booking-login-modal > div,
  #booking-confirm-modal > div {
    width: 95% !important; max-width: none !important;
    padding: 20px !important; margin: 10px;
  }
  .otp-input, .booking-otp-input {
    width: 34px !important; height: 38px !important;
    font-size: 16px !important;
  }
}

/* ── Toast Notifications ── */
@media (max-width: 767px) {
  #prescription-success, #prescription-error,
  #booking-success, #booking-error {
    left: 15px !important; right: 15px !important;
    top: 15px !important; padding: 15px 20px !important;
    border-radius: 10px !important;
  }
}

/* ── Search Bar Mobile ── */
@media (max-width: 767px) {
  .search-results-dropdown {
    width: calc(100vw - 30px) !important;
    max-height: 70vh !important;
    border-radius: 12px !important;
  }
  .search-result-item { padding: 10px 14px !important; gap: 10px !important; }
  .result-title { font-size: 13px !important; }
  .result-icon { width: 28px !important; height: 28px !important; font-size: 12px !important; }
}

/* ── Booking Pages (Doctor-specific) ── */
@media (max-width: 991px) {
  .booking-area .row .col-lg-6:first-child { margin-bottom: 25px; }
}

@media (max-width: 767px) {
  .booking-area form .row .col-lg-6 { margin-bottom: 0; }
}

/* ── Why Choose Us / Testimonials / FAQ standalone pages ── */
@media (max-width: 767px) {
  .testimonials-area .testimonial-items .item { padding: 25px !important; }
  .testimonials-area .testimonial-items .item p { font-size: 15px !important; }
  .why-choose-area .single-item { margin-bottom: 20px; }
}

/* ── Legal Pages (Privacy, Terms, Disclaimer, Cookies) ── */
@media (max-width: 767px) {
  .legal-content, .terms-content, .privacy-content {
    padding: 20px !important;
  }
  .legal-content h3, .terms-content h3, .privacy-content h3 {
    font-size: 18px !important;
  }
}

/* ── Owl Carousel Global Mobile Fixes ── */
@media (max-width: 767px) {
  .owl-carousel .owl-nav { margin-top: 15px !important; }
  .owl-carousel .owl-prev, .owl-carousel .owl-next {
    width: 36px !important; height: 36px !important;
    font-size: 14px !important;
  }
  .owl-carousel .owl-dots { margin-top: 10px !important; }
  .owl-carousel .owl-dot span {
    width: 8px !important; height: 8px !important;
  }
}

/* ── Chatbot Widget Mobile ── */
@media (max-width: 767px) {
  .advik-chatbot-widget { bottom: 70px !important; }
  .advik-chatbot-window {
    width: calc(100vw - 20px) !important;
    height: 70vh !important;
    right: 10px !important;
    bottom: 130px !important;
  }
}

/* ── WhatsApp Menu Mobile ── */
@media (max-width: 767px) {
  #wa-menu {
    right: 10px !important;
    bottom: 130px !important;
    width: 180px !important;
  }
}

/* ── Smooth Transitions for all interactive elements ── */
@media (max-width: 991px) {
  a, button, .btn, input, select, textarea {
    -webkit-tap-highlight-color: rgba(23, 190, 187, 0.1);
  }
  /* Prevent horizontal scroll */
  html, body { overflow-x: hidden; max-width: 100vw; }
}

/* ── Fix Tables on Mobile ── */
@media (max-width: 767px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Sitemap Page Mobile ── */
@media (max-width: 767px) {
  .sitemap-area ul { padding-left: 15px !important; }
  .sitemap-area li { margin-bottom: 8px; }
}

/* ── Nice Select Mobile Fix ── */
@media (max-width: 767px) {
  .nice-select { width: 100% !important; }
  .nice-select .list { width: 100% !important; }
}