/* ═══════════════════════════════════════════════════════════════════════
   CARE DENTAL HOSPITAL — UNIVERSAL ENHANCEMENT & COMPATIBILITY LAYER
   Fixes ALL layout, mobile, and visual issues across every breakpoint.
   Load order: Last CSS file — overrides everything above.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1. GLOBAL RESET — Prevent horizontal overflow on ALL screen sizes
   ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

img, video, iframe, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* ─────────────────────────────────────────────────────────────────────
   2. NAVBAR — Fix "Visit Us" button clipping on desktop
   ───────────────────────────────────────────────────────────────────── */
.nav-container {
  padding-right: 16px !important;
  flex-wrap: nowrap !important;
}

.nav-cta-group {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.nav-visit-btn,
a.nav-visit-btn,
.btn-nav-visit {
  white-space: nowrap !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}

@media (max-width: 1280px) {
  .nav-container {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  .nav-cta-group {
    gap: 6px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   3. MOBILE QUICK BAR — Fix WhatsApp button text visibility
   ───────────────────────────────────────────────────────────────────── */

/* WhatsApp button: dark background, bright white text + green icon */
.bar-btn.wa-btn,
#mobileWaBtn {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.18), rgba(18, 140, 126, 0.14)) !important;
  border: 1px solid rgba(37, 211, 102, 0.35) !important;
  color: #ffffff !important;
}

.bar-btn.wa-btn i,
#mobileWaBtn i {
  color: #25D366 !important;
}

.bar-btn.wa-btn span,
#mobileWaBtn span {
  color: #ffffff !important;
}

/* Call button */
.bar-btn.call-btn,
#mobileCallBtn {
  background: linear-gradient(135deg, #005bff, #00cfff) !important;
  color: #ffffff !important;
}
.bar-btn.call-btn i,
#mobileCallBtn i {
  color: #ffffff !important;
}
.bar-btn.call-btn span,
#mobileCallBtn span {
  color: #ffffff !important;
}

/* Book / Visit button */
.bar-btn.book-btn,
#mobileBookBtn {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #ffffff !important;
}
.bar-btn.book-btn i,
#mobileBookBtn i {
  color: #ffffff !important;
}
.bar-btn.book-btn span,
#mobileBookBtn span {
  color: #ffffff !important;
}

/* 3D View button */
.bar-btn.models-btn,
#mobileModelsBtn {
  background: rgba(56, 189, 248, 0.14) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  color: #ffffff !important;
}
.bar-btn.models-btn i,
#mobileModelsBtn i {
  color: #38bdf8 !important;
}
.bar-btn.models-btn span,
#mobileModelsBtn span {
  color: #ffffff !important;
}

/* Directions button */
.bar-btn.map-btn,
#mobileMapBtn {
  background: rgba(245, 158, 11, 0.14) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #ffffff !important;
}
.bar-btn.map-btn i,
#mobileMapBtn i {
  color: #f59e0b !important;
}
.bar-btn.map-btn span,
#mobileMapBtn span {
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────────
   4. SERVICES GRID — Desktop & Mobile layout fixes
   ───────────────────────────────────────────────────────────────────── */

/* Desktop: 3-col auto-fit so no card clips off-screen */
.services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

/* Large desktop: 4 col if space allows */
@media (min-width: 1400px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Medium desktop/laptop: 3 col */
@media (min-width: 1024px) and (max-width: 1399px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }
}

/* Tablet: 2 col */
@media (min-width: 600px) and (max-width: 1023px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* Mobile: 1 col, full width */
@media (max-width: 599px) {
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* Service cards — consistent height/width */
.service-card {
  min-width: 0 !important;
  width: 100% !important;
  word-break: break-word !important;
  overflow: hidden !important;
}

/* ─────────────────────────────────────────────────────────────────────
   5. JOURNEY SECTION — Desktop zigzag + Mobile single column
   ───────────────────────────────────────────────────────────────────── */

/* Desktop: two-column zigzag layout with center vertical line */
@media (min-width: 769px) {
  .journey-section .journey-timeline {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    max-width: 960px !important;
    margin: 60px auto 0 !important;
    padding: 20px 0 !important;
    align-items: stretch !important;
  }

  .journey-section .journey-timeline::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    background: linear-gradient(180deg,
      rgba(0, 207, 255, 0.1),
      #00cfff 20%,
      #005bff 50%,
      #a855f7 80%,
      rgba(168, 85, 247, 0.1)) !important;
    transform: translateX(-50%) !important;
    border-radius: 3px !important;
    z-index: 1 !important;
    display: block !important;
  }

  .journey-item {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    margin-bottom: 56px !important;
    width: 100% !important;
    z-index: 2 !important;
  }

  .journey-item:last-child { margin-bottom: 0 !important; }

  .journey-item:nth-child(odd) {
    flex-direction: row !important;
    padding-right: calc(50% + 50px) !important;
    padding-left: 0 !important;
    transform: none !important;
  }

  .journey-item:nth-child(even) {
    flex-direction: row-reverse !important;
    padding-left: calc(50% + 50px) !important;
    padding-right: 0 !important;
    transform: none !important;
  }

  .journey-node {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.3rem !important;
    color: #fff !important;
    z-index: 10 !important;
    box-shadow: 0 0 0 5px rgba(9, 19, 41, 0.9), 0 0 24px rgba(0, 207, 255, 0.5) !important;
    flex-shrink: 0 !important;
  }

  .journey-item:hover .journey-node {
    transform: translate(-50%, -50%) scale(1.15) !important;
  }

  .journey-content {
    width: 100% !important;
    max-width: 100% !important;
    background: rgba(13, 27, 56, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(0, 207, 255, 0.2) !important;
    border-radius: 18px !important;
    padding: 24px 28px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    transition: all 0.4s ease !important;
    position: relative !important;
    z-index: 5 !important;
  }

  .journey-content:hover {
    border-color: rgba(0, 207, 255, 0.5) !important;
    box-shadow: 0 16px 44px rgba(0, 207, 255, 0.2) !important;
    transform: translateY(-4px) !important;
  }
}

/* Mobile: single column, icon left, card right */
@media (max-width: 768px) {
  .journey-section {
    padding: 70px 0 !important;
  }

  .journey-section .journey-timeline {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    margin: 36px 0 0 !important;
    padding: 0 16px !important;
    position: relative !important;
  }

  /* Left vertical line on mobile */
  .journey-section .journey-timeline::before {
    content: '' !important;
    position: absolute !important;
    left: 40px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: linear-gradient(180deg,
      rgba(0, 207, 255, 0.1),
      #00cfff 30%,
      #a855f7 70%,
      rgba(168, 85, 247, 0.1)) !important;
    transform: none !important;
    border-radius: 2px !important;
    z-index: 1 !important;
  }

  .journey-item,
  .journey-item:nth-child(odd),
  .journey-item:nth-child(even) {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    position: relative !important;
    margin-bottom: 24px !important;
    padding: 0 0 0 72px !important;
    transform: none !important;
    gap: 0 !important;
  }

  .journey-node {
    position: absolute !important;
    left: 8px !important;
    top: 0 !important;
    transform: none !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 1.05rem !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    z-index: 10 !important;
    box-shadow: 0 0 0 3px rgba(9, 19, 41, 0.9), 0 0 16px rgba(0, 207, 255, 0.4) !important;
    flex-shrink: 0 !important;
  }

  .journey-item:hover .journey-node {
    transform: scale(1.1) !important;
  }

  .journey-content {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    background: rgba(13, 27, 56, 0.8) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(0, 207, 255, 0.2) !important;
    border-radius: 14px !important;
    padding: 16px 16px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
  }

  .journey-content:hover {
    transform: translateY(-2px) !important;
  }

  .journey-content .journey-step-num {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #00cfff !important;
    margin-bottom: 4px !important;
    display: block !important;
  }

  .journey-content h4 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
  }

  .journey-content p {
    font-size: 0.82rem !important;
    color: rgba(226, 232, 240, 0.8) !important;
    line-height: 1.55 !important;
    margin-bottom: 10px !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .journey-duration {
    font-size: 0.75rem !important;
    padding: 4px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  /* Journey CTA button */
  .journey-section [data-aos="fade-up"]:last-child {
    padding: 0 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   6. HERO SECTION — Enhanced mobile responsiveness
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .hero-title-centered {
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
    line-height: 1.22 !important;
    text-align: center !important;
  }

  .hero-desc-centered {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    padding: 0 8px !important;
  }

  .hero-pills-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  .hero-pill {
    font-size: 0.72rem !important;
    padding: 6px 12px !important;
  }

  .hero-cta-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }

  .hero-cta-row .btn-primary,
  .hero-cta-row .btn-outline {
    width: 100% !important;
    justify-content: center !important;
    max-width: 320px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   7. SECTION HEADERS — Universal consistent sizing
   ───────────────────────────────────────────────────────────────────── */

.section-header {
  text-align: center !important;
  padding: 0 16px !important;
}

.section-title {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.25 !important;
}

@media (max-width: 480px) {
  .section-title {
    font-size: clamp(1.45rem, 6.5vw, 2rem) !important;
  }

  .section-sub {
    font-size: 0.88rem !important;
    padding: 0 4px !important;
    line-height: 1.6 !important;
  }

  .section-tag {
    font-size: 0.72rem !important;
    padding: 6px 14px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   8. STATS / ACHIEVEMENTS — Enhanced number visibility
   ───────────────────────────────────────────────────────────────────── */

.stat-number,
.stat-card-num,
.counter-num {
  color: #ffffff !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  background-clip: unset !important;
}

/* Keep gradient text for numbers that use explicit gradient class */
.gradient-text {
  background: linear-gradient(135deg, #00cfff, #005bff, #a855f7) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Stats bar scrolling numbers */
@media (max-width: 768px) {
  .trust-stat,
  .hero-stat,
  .stat-chip {
    flex-shrink: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   9. DOCTORS SECTION — Responsive cards
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 599px) {
  .doctors-grid,
  .doctor-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .doctor-card {
    max-width: 100% !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   10. TESTIMONIALS — Mobile single column
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 599px) {
  .testimonials-grid,
  .reviews-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   11. FAQ SECTION — Mobile improvements
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 599px) {
  .faq-question,
  .faq-header {
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
    padding-right: 36px !important;
  }

  .faq-answer {
    font-size: 0.84rem !important;
    line-height: 1.6 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   12. AWARDS SECTION — Mobile grid fix
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .awards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .award-card {
    padding: 16px 12px !important;
  }

  .award-card h4 {
    font-size: 0.82rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   13. CONTACT SECTION — Mobile form layout
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 599px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
}

/* ─────────────────────────────────────────────────────────────────────
   14. FOOTER — Mobile layout cleanup
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 599px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .footer-links {
    columns: 2 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   15. UNIVERSAL CONTAINER — Proper padding on all screens
   ───────────────────────────────────────────────────────────────────── */

.container {
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: max(16px, env(safe-area-inset-left, 16px)) !important;
  padding-right: max(16px, env(safe-area-inset-right, 16px)) !important;
}

@media (min-width: 768px) {
  .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

@media (min-width: 1280px) {
  .container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   16. BUTTONS — Universal mobile tap targets
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .btn-primary, .btn-outline, .btn-cta,
  a[class*="btn"] {
    min-height: 44px !important; /* iOS minimum tap target */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   17. GALLERY — Mobile grid fix
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .gallery-item {
    border-radius: 10px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   18. ABOUT SECTION — Mobile single column
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .about-flex,
  .about-grid,
  .about-content-grid {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .about-image {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   19. SCROLL BAR AREA CLEARANCE — Mobile quick bar safe zone
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  body {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-quick-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   20. FLOATING ACTIONS — Don't cover content on mobile
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .floating-actions {
    bottom: calc(90px + env(safe-area-inset-bottom, 0px) + 12px) !important;
    right: 12px !important;
  }

  .chatbot-toggle-btn,
  #chatbotToggle {
    bottom: calc(90px + env(safe-area-inset-bottom, 0px) + 16px) !important;
    right: 12px !important;
  }

  .chatbot-wrapper,
  #chatbotContainer {
    bottom: calc(90px + env(safe-area-inset-bottom, 0px) + 70px) !important;
    right: 8px !important;
    max-height: calc(80vh - 100px) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   21. LAPTOP / MID-SIZE DESKTOP (1024px–1280px) — Ensure all grids fit
   ───────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) and (max-width: 1280px) {
  .journey-section .journey-timeline {
    max-width: 860px !important;
  }

  .journey-content {
    padding: 20px 22px !important;
  }

  .journey-content h4 {
    font-size: 1rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   22. ANIMATIONS — Ensure journey items always animate in
   ───────────────────────────────────────────────────────────────────── */

@keyframes journeyStepIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.journey-item {
  animation: journeyStepIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.journey-item:nth-child(1) { animation-delay: 0.10s !important; }
.journey-item:nth-child(2) { animation-delay: 0.22s !important; }
.journey-item:nth-child(3) { animation-delay: 0.34s !important; }
.journey-item:nth-child(4) { animation-delay: 0.46s !important; }
.journey-item:nth-child(5) { animation-delay: 0.58s !important; }
.journey-item:nth-child(6) { animation-delay: 0.70s !important; }

/* Override the mega-enhancements.css opacity:0 default */
.journey-item.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   23. SECTION VERTICAL SPACING — Consistent across all screens
   ───────────────────────────────────────────────────────────────────── */

section {
  padding-top: clamp(56px, 8vw, 100px);
  padding-bottom: clamp(56px, 8vw, 100px);
}

@media (max-width: 480px) {
  section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   24. TEXT ANTI-OVERFLOW — Prevent text from ever causing horizontal scroll
   ───────────────────────────────────────────────────────────────────── */

p, h1, h2, h3, h4, h5, h6, span, li, td, th {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Except for elements where we explicitly don't want wrapping */
.hero-pill,
.section-tag,
.journey-step-num,
.journey-duration,
.nav-links a,
.bar-btn span {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  white-space: nowrap;
}