/* ============================================================
   SMILE BABY v2 — Responsive Breakpoints
   ============================================================ */

/* в”Ђв”Ђ Large Tablets & Small Desktops (max-width: 1024px) в”Ђв”Ђ */
@media (max-width: 1024px) {
  :root {
    --fs-4xl: 2.5rem;
    --fs-5xl: 3rem;
  }

  .site-header.header-hidden {
    transform: translateY(-100%);
  }

  .wrap {
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
  }

  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--sp-8);
  }

  .footer-grid > *:last-child {
    grid-column: 1 / -1;
  }

  .about-grid {
    gap: var(--sp-8);
  }

  .contact-grid {
    gap: var(--sp-8);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .nav-links {
    gap: 0;
  }

  .nav-link {
    padding: 8px 12px;
    font-size: var(--fs-xs);
  }

  .header-cta .btn {
    padding: 10px 20px;
    font-size: var(--fs-sm);
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .doctors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* в”Ђв”Ђ Tablets / Small Screens (max-width: 768px) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
@media (max-width: 768px) {
  :root {
    --fs-3xl: 1.875rem;
    --fs-4xl: 2.25rem;
    --fs-5xl: 2.5rem;
    --sp-20: 3.5rem;
    --sp-24: 4rem;
    --header-h: 68px;
    --header-h-scrolled: 60px;
  }

  /* Hide desktop nav, show hamburger */
  .nav-links,
  .header-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .mobile-nav {
    display: flex;
  }

  /* Top bar adjustments */
  .top-bar .wrap {
    flex-direction: column;
    gap: var(--sp-1);
  }

  .top-bar-info {
    gap: var(--sp-3);
    flex-wrap: wrap;
    justify-content: center;
  }

  .top-bar-right {
    display: none;
  }

  /* Grids go single column */
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-auto-fit {
    grid-template-columns: 1fr;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .about-image {
    max-width: 480px;
    margin: 0 auto;
  }

  .about-image::after {
    display: none;
  }

  .about-features {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }

  /* Section spacing */
  .section {
    padding: var(--sp-12) 0;
  }

  .section-lg {
    padding: var(--sp-16) 0;
  }

  /* Page hero */
  .page-hero {
    padding: var(--sp-12) 0 var(--sp-8);
  }

  .page-hero h1 {
    font-size: var(--fs-3xl);
  }

  .page-hero p {
    font-size: var(--fs-base);
  }

  /* Services & Doctors grids */
  .services-grid {
    grid-template-columns: 1fr;
  }

  .doctors-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  /* Stat cards horizontal scroll on mobile */
  .stats-row {
    display: flex;
    overflow-x: auto;
    gap: var(--sp-4);
    padding-bottom: var(--sp-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .stats-row .stat-card {
    min-width: 200px;
    flex-shrink: 0;
  }

  /* Career banner */
  .career-banner {
    padding: var(--sp-12) 0;
    text-align: center;
  }

  .career-banner p {
    margin: 0 auto;
  }

  /* Section title */
  .section-title h2 {
    font-size: var(--fs-2xl);
  }

  .section-title p {
    font-size: var(--fs-base);
  }

  /* FAQ */
  .faq-question {
    font-size: var(--fs-base);
    padding: var(--sp-4) var(--sp-5);
  }

  .faq-answer-inner {
    padding: 0 var(--sp-5) var(--sp-5);
    font-size: var(--fs-sm);
  }

  /* Slider buttons */
  .slider-btn {
    width: 40px;
    height: 40px;
  }

  .slider-btn.prev { left: 8px; }
  .slider-btn.next { right: 8px; }

  /* Modal */
  .modal-content {
    max-width: 100%;
    margin: var(--sp-4);
    border-radius: var(--radius-lg);
  }

  /* Contact form */
  .contact-form-column {
    padding: var(--sp-6);
  }

  /* Back to top */
  .back-to-top {
    bottom: 90px;
    right: 20px;
    width: 42px;
    height: 42px;
  }

  /* Timeline adjustments */
  .timeline::before {
    left: 20px;
  }

  .timeline-item {
    padding-left: 56px;
  }

  .timeline-dot {
    left: 14px;
  }

  /* Footer bottom stack */
  .footer-bottom {
    flex-direction: column;
    gap: var(--sp-3);
    text-align: center;
  }
}

/* в”Ђв”Ђ Extra Small Screens (max-width: 480px) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
@media (max-width: 480px) {
  :root {
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.75rem;
    --fs-4xl: 2rem;
  }

  .wrap {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .doctors-grid {
    grid-template-columns: 1fr;
  }

  .btn {
    padding: 10px 20px;
    font-size: var(--fs-sm);
  }

  .btn-lg {
    padding: 14px 28px;
    font-size: var(--fs-base);
  }

  /* Service cards */
  .service-card {
    padding: var(--sp-6);
  }

  .service-card .service-icon {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
  }

  /* Stat cards */
  .stat-card {
    padding: var(--sp-4) var(--sp-5);
  }

  .stat-card .stat-number {
    font-size: var(--fs-3xl);
  }

  /* Contact cards */
  .c-card {
    padding: var(--sp-4);
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .c-card .c-card-icon {
    width: 48px;
    height: 48px;
  }

  /* Breadcrumb */
  .breadcrumb {
    font-size: var(--fs-xs);
  }

  /* Page hero */
  .page-hero {
    padding: var(--sp-10) 0 var(--sp-6);
  }

  .page-hero::before,
  .page-hero::after {
    display: none;
  }

  /* News cards */
  .news-card .news-body {
    padding: var(--sp-4);
  }

  /* Social links in footer */
  .social-links {
    justify-content: center;
  }

  /* Lab tabs */
  .lab-tabs {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .lab-tab {
    flex: 1;
    min-width: 100px;
    font-size: var(--fs-xs);
  }

  /* Gallery grid */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
  }

  /* Modal */
  .modal-overlay {
    padding: var(--sp-3);
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--sp-4);
  }

  /* Alerts */
  .alert {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex !important;
  }
    body {
      padding-bottom: 70px; /* Space for bottom nav */
      overflow-x: clip;
      width: 100%;
      max-width: 100%;
      position: relative;
    }
    html {
      overflow-x: clip;
      width: 100%;
      max-width: 100%;
    }
}


@media (max-width: 768px) {
  /* Slider card sizing (1 full in center, 2 halfs on sides) */

  .service-img-wrapper { height: 160px !important; }
  .service-body { padding: 15px 12px !important; }
  .service-body h3 { font-size: 1rem !important; margin-bottom: 8px !important; }
  .service-body p { font-size: 0.85rem !important; line-height: 1.4 !important; margin-bottom: 15px !important; }
  .service-price { padding: 8px 16px !important; font-size: 0.85rem !important; }
  

  .doctor-img-wrapper { height: 180px !important; }
  .doctor-body { padding: 15px 12px !important; }
  .doctor-body h3 { font-size: 1rem !important; }
  .doctor-kasb { font-size: 0.85rem !important; }
  
  /* Fix News Card text cutoff */
  
  .news-body { padding: 15px !important; }
  .news-body h3 { font-size: 1.1rem !important; }
  
  /* Prevent any element from breaking the viewport */
  /* Removed destructive * { max-width: 100% !important } that broke CSS cascade */
  
  /* Hide the top bar and desktop nav entirely */
  .top-bar, .nav-links, .header-cta { display: none !important; }
  
  /* Show mobile controls */
  .mobile-controls { display: flex !important; align-items: center; gap: 15px; margin-left: auto; }
  .mobile-lang { gap: 5px; }
  .mobile-lang .lang-btn { padding: 3px 8px; font-size: 0.85rem; border-radius: 12px; }
  
  /* Make header sticky and compact */
  .site-header { position: sticky; top: 0; padding: 12px 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.05); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); }
  .site-header .logo img { height: 35px !important; }
  
  /* Fullscreen Mobile Menu Redesign */
  .mobile-nav { position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(15px); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 999; padding: 80px 20px 20px; text-align: center; visibility: hidden; pointer-events: none; opacity: 0; transform: translateY(-15px) scale(0.98); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
  .mobile-nav.open { visibility: visible; pointer-events: auto; opacity: 1; transform: translateY(0) scale(1); }
  .mobile-nav .nav-link { font-size: 1.4rem; font-weight: 700; color: var(--ink-dark); padding: 12px; width: 100%; border-bottom: 1px solid rgba(0,0,0,0.05); transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); transform: translateY(15px); opacity: 0; }
  .mobile-nav.open .nav-link { transform: translateY(0); opacity: 1; }
  .mobile-nav.open .nav-link:nth-child(1) { transition-delay: 0.10s; }
  .mobile-nav.open .nav-link:nth-child(2) { transition-delay: 0.15s; }
  .mobile-nav.open .nav-link:nth-child(3) { transition-delay: 0.20s; }
  .mobile-nav.open .nav-link:nth-child(4) { transition-delay: 0.25s; }
  .mobile-nav.open .nav-link:nth-child(5) { transition-delay: 0.30s; }
  .mobile-nav .btn { transform: translateY(15px); opacity: 0; transition: all 0.4s ease; }
  .mobile-nav.open .btn { transition-delay: 0.35s; transform: translateY(0); opacity: 1; }
  .mobile-nav .nav-link:active { background: var(--cream); color: var(--primary); }
  
  /* Hamburger Animation */
  .hamburger { position: relative; z-index: 1001; }
  .hamburger.active .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hamburger.active .hamburger-line:nth-child(2) { opacity: 0; }
  .hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  
  /* Adjust the hero for mobile */
  .hero { padding: 60px 0 80px !important; min-height: 400px !important; background-attachment: scroll !important; }
  .hero-inner-card { padding: 25px 15px !important; border-radius: 16px !important; }
  .hero-title { font-size: 1.8rem !important; }
  
  /* Adjust about section */
  .about-img img { height: 250px !important; width: 100% !important; object-fit: cover !important; }
  .about-grid { gap: 30px !important; }
  
  /* Hide arrows on mobile slider, let them swipe */

  
  /* Fix slider container margins to allow centering */

  /* Global mobile typography and spacing overrides */
  /* Cleaned up hacky style selectors */
  h1, h2, h3 { line-height: 1.2 !important; }


/* ============================================================
   COMPREHENSIVE RESPONSIVE FIXES — All Pages & Inline Styles
   ============================================================ */

/* ── Tablet (max-width: 1024px) ─────────────────────────────── */
@media (max-width: 1024px) {

  /* Service detail 2-col layout */
  .service-detail-content {
    grid-template-columns: 1fr !important;
  }

  /* Blog layout sidebar */
  .blog-layout {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  /* Doctor detail page */
  .doctor-detail {
    grid-template-columns: 1fr !important;
  }

  /* Values grid */
  .values-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Team stats */
  .team-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Contact cards row */
  .contact-cards-row {
    grid-template-columns: 1fr !important;
  }

  /* Blog grid → 2 col */
  .blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Mega menu grid */
  .mega-menu-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .mega-menu-content {
    padding: 25px 20px !important;
  }

  /* Lab test list */
  .lab-test-list {
    grid-template-columns: 1fr !important;
  }

}

/* ── Mobile Landscape (max-width: 768px) ────────────────────── */
@media (max-width: 768px) {

  /* ── CSS class-based fixes ── */

  .service-detail-content {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .doctor-detail {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .doctor-photo-wrapper {
    height: 250px !important;
    max-width: 300px !important;
    margin: 0 auto !important;
  }

  .values-grid {
    grid-template-columns: 1fr !important;
  }

  .team-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
  }

  .contact-cards-row {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .contact-full-form .form-row {
    grid-template-columns: 1fr !important;
  }

  .blog-layout {
    grid-template-columns: 1fr !important;
  }

  .career-section {
    padding: 40px 0 60px !important;
  }

  .error-page .error-code {
    font-size: 4rem !important;
  }

  .stat-number {
    font-size: 2rem !important;
  }
  .stat-plus {
    font-size: 1.5rem !important;
  }

  .stats-container {
    padding: 30px 20px !important;
  }

  .map-wrapper {
    min-height: 300px !important;
  }

  .price-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .glass-box {
    padding: 25px !important;
    border-radius: 16px !important;
  }

  .news-img-wrapper {
    height: 180px !important;
  }

  /* ── INDEX.PHP inline style overrides ── */

  /* ALL inline 2+ column grids → single column */
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  div[style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Large inline gaps */
  div[style*="gap: 60px"] {
    gap: 20px !important;
  }
  div[style*="gap: 50px"] {
    gap: 20px !important;
  }
  div[style*="gap: 40px"] {
    gap: 15px !important;
  }

  /* Large inline paddings */
  section[style*="padding: 100px"] {
    padding: 50px 0 !important;
  }
  section[style*="padding: 120px"] {
    padding: 50px 0 !important;
  }
  div[style*="padding: 80px"] {
    padding: 30px 15px !important;
  }
  div[style*="padding: 70px"] {
    padding: 30px 15px !important;
  }
  div[style*="padding: 60px"] {
    padding: 25px 15px !important;
  }
  div[style*="padding: 50px"] {
    padding: 25px 15px !important;
  }
  div[style*="padding: 45px"] {
    padding: 20px 15px !important;
  }

  /* Large inline font sizes */
  *[style*="font-size: 4.5rem"] {
    font-size: 2rem !important;
  }
  *[style*="font-size: 3.5rem"] {
    font-size: 1.8rem !important;
  }
  *[style*="font-size: 3rem"] {
    font-size: 1.6rem !important;
  }
  *[style*="font-size: 2.8rem"] {
    font-size: 1.8rem !important;
  }
  *[style*="font-size: 2.5rem"] {
    font-size: 1.5rem !important;
  }
  *[style*="font-size: 2.2rem"] {
    font-size: 1.5rem !important;
  }
  *[style*="font-size: 2rem"] {
    font-size: 1.3rem !important;
  }

  /* Hero floating badges - hide to prevent overflow */
  div[style*="position: absolute"][style*="right: -20px"],
  div[style*="position: absolute"][style*="bottom: -40px"] {
    display: none !important;
  }

  /* About.php hero */
  div[style*="min-height: 60vh"] {
    min-height: auto !important;
    padding: 60px 0 40px !important;
  }

  /* Director quote - stack image and text */
  .glass-box[style*="grid-template-columns: auto 1fr"] {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 20px !important;
  }
  .glass-box[style*="grid-template-columns: auto 1fr"] > div:first-child {
    margin: 0 auto !important;
  }

  /* CTA section with map */
  .glass-box[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .glass-box[style*="grid-template-columns: 1fr 1fr"] > div:last-child {
    min-height: 300px !important;
  }

  /* About page decorative radials — hide */
  div[style*="radial-gradient"][style*="position: absolute"] {
    display: none !important;
  }

  /* Director image */
  img[style*="width: 180px"][style*="height: 180px"] {
    width: 120px !important;
    height: 120px !important;
  }

  /* Director quote font */
  div[style*="font-size: 90px"] {
    font-size: 50px !important;
    margin-bottom: -25px !important;
  }

  /* Karyera page */
  .job-grid {
    grid-template-columns: 1fr !important;
  }
  .career-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Service page sidebar */
  .service-sidebar {
    order: -1;
  }

  /* Doctor schedule table */
  .doctor-schedule {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Mobile Portrait (max-width: 480px) ─────────────────────── */
@media (max-width: 480px) {

  /* All remaining multi-col grids → 1 col */
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Team stats on tiny screens */
  .team-stats {
    grid-template-columns: 1fr !important;
  }
  .career-stats-grid {
    grid-template-columns: 1fr !important;
  }

  /* Even smaller fonts */
  *[style*="font-size: 4.5rem"] {
    font-size: 1.6rem !important;
  }
  *[style*="font-size: 3.5rem"] {
    font-size: 1.5rem !important;
  }
  *[style*="font-size: 3rem"] {
    font-size: 1.4rem !important;
  }
  *[style*="font-size: 2.8rem"] {
    font-size: 1.5rem !important;
  }
  *[style*="font-size: 2.5rem"] {
    font-size: 1.3rem !important;
  }
  *[style*="font-size: 2.2rem"] {
    font-size: 1.2rem !important;
  }
  *[style*="font-size: 1.3rem"] {
    font-size: 1.05rem !important;
  }

  /* Hero stats bar */
  div[style*="grid-template-columns: repeat(3, 1fr)"][style*="padding: 35px"] {
    grid-template-columns: 1fr !important;
    padding: 20px 15px !important;
    gap: 15px !important;
  }

  /* Tighter spacing */
  div[style*="gap: 30px"] {
    gap: 12px !important;
  }
  div[style*="gap: 25px"] {
    gap: 12px !important;
  }

  /* Map section min-height */
  div[style*="min-height: 500px"] {
    min-height: 250px !important;
  }
  .map-wrapper {
    min-height: 250px !important;
  }

  /* Even smaller paddings */
  div[style*="padding: 40px"] {
    padding: 20px 12px !important;
  }
  div[style*="padding: 35px"] {
    padding: 18px 12px !important;
  }

  /* Buttons */
  a[style*="padding: 18px 45px"] {
    padding: 14px 28px !important;
    font-size: 1rem !important;
  }
  a[style*="padding: 16px 35px"] {
    padding: 12px 24px !important;
    font-size: 0.95rem !important;
  }

  /* Footer SVG icons */
  footer svg[width="60"] {
    width: 48px !important;
    height: 48px !important;
  }

  /* 3D icons in about page — slightly smaller */
  svg[width="65"][viewBox="0 0 100 100"] {
    width: 55px !important;
    height: 55px !important;
  }

  /* About check marks */
  ul[style*="flex-direction: column"][style*="gap: 15px"] {
    gap: 10px !important;
  }

  /* Error page */
  .error-page .error-code {
    font-size: 3rem !important;
  }

  /* Contact form */
  .contact-form-box {
    padding: 20px !important;
  }
  .contact-form-box h3 {
    font-size: 1.2rem !important;
  }

  /* About page image */
  .about-img img {
    height: 250px !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}