/* ======================================================
   Lumben – Global Responsive Fixes
   Loaded last so these rules override theme defaults.
   ====================================================== */

/* ── 1. Prevent horizontal overflow ─────────────────── */
html { overflow-x: hidden; }
body { overflow-x: hidden; }

/* ── 2. Safe defaults for media elements ────────────── */
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }

/* ======================================================
   NAVBAR / SITE-HEADER
   ====================================================== */
/* Make the logo+brand line shrink on small screens */
@media (max-width: 480px) {
  .site-header .main-logo img {
    max-width: 80px;
    height: auto;
  }
  .brand-name {
    font-size: 16px !important;
  }
}

/* ======================================================
   HERO SLIDES  (slides.html)
   ====================================================== */

/* On narrow screens the hero grid has too much horizontal margin (40px each side).
   Keep it at 12px each side on phones. */
@media (max-width: 767px) {
  .lumben-hero-grid,
  .lumben-hero-grid--dentist {
    width: calc(100% - 24px) !important;
    padding: 16px 0 12px !important;
    gap: 12px !important;
  }
}

@media (max-width: 479px) {
  .lumben-hero-grid,
  .lumben-hero-grid--dentist {
    width: calc(100% - 16px) !important;
    padding: 12px 0 8px !important;
  }
}

/* Patient visual: reduce orbit rings & image slot on small screens */
@media (max-width: 767px) {
  .lumben-hero-visual--patient {
    min-height: 180px !important;
    height: 180px !important;
  }
  .p-img-zone {
    width: min(100%, 320px) !important;
    height: 180px !important;
  }
  .p-img-slot {
    width: 300px !important;
    height: 169px !important;
    /* recentre */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  .lh-orbit-1,
  .lh-orbit-2 { display: none !important; }

  /* annotation badges already hidden at 768px in slides.html */
}

@media (max-width: 479px) {
  .lumben-hero-visual--patient {
    min-height: 140px !important;
    height: 140px !important;
  }
  .p-img-zone {
    width: min(100%, 260px) !important;
    height: 140px !important;
  }
  .p-img-slot {
    width: 240px !important;
    height: 135px !important;
  }
}

/* Dentist visual: keep card stage from overflowing */
@media (max-width: 767px) {
  .lumben-hero-visual--dentist {
    min-height: 220px !important;
    height: 220px !important;
    overflow: hidden !important;
  }
  .d-card-stage {
    width: min(100%, 340px) !important;
    height: 220px !important;
    overflow: hidden !important;
  }
  .doc-card { width: 230px !important; }
  /* Ghost cards – keep within stage */
  .doc-card.state-active {
    transform: translateX(15px) translateY(-50%) scale(1) !important;
  }
  .doc-card.state-top {
    transform: translateX(-45px) translateY(-50%) scale(0.72) rotateY(8deg) !important;
  }
  .doc-card.state-bottom {
    transform: translateX(125px) translateY(-50%) scale(0.72) rotateY(-8deg) !important;
  }
  /* Stat pills: tuck them in */
  .d-stat-pill--top    { right: 4px !important; left: auto !important; top: 4px !important; }
  .d-stat-pill--bottom { right: 4px !important; left: auto !important; bottom: 4px !important; }
}

@media (max-width: 479px) {
  .lumben-hero-visual--dentist {
    min-height: 180px !important;
    height: 180px !important;
  }
  .d-card-stage {
    width: min(100%, 280px) !important;
    height: 180px !important;
  }
  .doc-card { width: 180px !important; }
  .doc-card.state-active  { transform: translateX(10px) translateY(-50%) scale(1) !important; }
  .doc-card.state-bottom  { transform: translateX(100px) translateY(-50%) scale(0.7) rotateY(-8deg) !important; }
}

/* Hero title / copy – readability on phones */
@media (max-width: 479px) {
  .lumben-hero-title {
    font-size: clamp(26px, 7.5vw, 38px) !important;
  }
  .lumben-hero-desc {
    font-size: 12px !important;
    max-width: 100% !important;
  }
  .lh-cta-btn {
    padding: 11px 22px !important;
    font-size: 13px !important;
  }
  .lumben-hero-kicker {
    font-size: 8px !important;
    margin-bottom: 8px !important;
  }
}

/* Dentist count badge on small screens */
@media (max-width: 479px) {
  .lh-dentist-count-num  { font-size: 20px !important; }
  .lh-dentist-count-text { font-size: 9px !important; max-width: 80px !important; }
}

/* ── Hero slider height: let content breathe on mobile ──
   index.html also sets these; responsive.css reinforces them. */
@media (max-width: 767px) {
  .dsn-slider-global,
  .dsn-root-slider,
  .content-slider,
  .bg-container,
  .slide-inner,
  .slide-item {
    height: auto !important;
    min-height: 420px !important;
  }
}

@media (max-width: 479px) {
  .dsn-slider-global,
  .dsn-root-slider,
  .content-slider,
  .bg-container,
  .slide-inner,
  .slide-item {
    min-height: 360px !important;
  }
}

/* ── Bottom slide UI arrows ── */
@media (max-width: 479px) {
  .lh-slide-ui {
    bottom: 10px !important;
    gap: 14px !important;
  }
  .lh-nav-btn {
    width: 38px !important;
    height: 38px !important;
  }
  .lh-nav-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
  .lh-pi-bar { width: 20px !important; }
  .lh-pi-bar.active { width: 36px !important; }
}

/* ======================================================
   HOME PAGE – LUMBEN DEMO SECTION  (index.html)
   ====================================================== */

/* ld-stage has min-height:560px – shrink on mobile */
@media (max-width: 767px) {
  .ld-stage {
    min-height: 0 !important;
  }
  /* Non-active panels must not contribute to height */
  .ld-panel:not(.on) {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  .ld-panel.on {
    position: relative !important;
  }
}

/* Dentist split slider – reduce min-height */
@media (max-width: 767px) {
  .ld-slider-card {
    min-height: 340px !important;
    cursor: default !important; /* drag less useful on touch */
  }
  .ld-side-after,
  .ld-side-before {
    padding: 20px 18px !important;
  }
  .ld-lead-card {
    padding: 18px 14px !important;
    gap: 12px !important;
  }
  .ld-lc-name { font-size: 16px !important; }
  .ld-lc-sub  { font-size: 13px !important; }
  .ld-lc-row  { font-size: 13px !important; line-height: 1.5 !important; }
  .ld-metric-val { font-size: 28px !important; }
}

@media (max-width: 479px) {
  /* Enough height for all rows at small-phone widths (accounts for text wrapping) */
  .ld-slider-card { min-height: 400px !important; }
  .ld-headline { font-size: clamp(18px, 5.5vw, 28px) !important; }
  .ld-t-btn { padding: 8px 16px !important; font-size: 12px !important; }

  /* Slightly smaller row text to reduce wrapping on narrow screens */
  .ld-lc-row  { font-size: 11px !important; line-height: 1.4 !important; }

  /* Collapse metrics to 2-column grid on tiny screens */
  .ld-metrics-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .ld-metric-box  { padding: 12px 10px !important; }
  .ld-metric-val  { font-size: 24px !important; }
  .ld-metric-label { font-size: 11px !important; }
}

/* ======================================================
   HOME PAGE – "MEASURABLE TRUST" STATS SECTION
   The .exper element uses an inline grid that breaks on mobile.
   Force it back to a single column.
   ====================================================== */
@media (max-width: 767px) {
  .exper {
    display: block !important;
  }
}

/* ======================================================
   HOME PAGE – LEFT / RIGHT BOX PADDING
   pr-60 / pl-60 add 60px padding which is too much on mobile.
   ====================================================== */
@media (max-width: 767px) {
  .left-box.pr-60  { padding-right: 20px !important; }
  .right-box.pl-60 { padding-left:  20px !important; }
  .right-box.pr-60 { padding-right: 20px !important; }
}

/* ======================================================
   SECTION PADDING – reduce on mobile so content isn't cramped
   ====================================================== */
@media (max-width: 767px) {
  .section-margin   { margin-top:  40px !important; margin-bottom: 40px !important; }
  .section-padding  { padding-top: 40px !important; padding-bottom: 40px !important; }
  .mb-70  { margin-bottom: 30px !important; }
  .mb-30  { margin-bottom: 16px !important; }
  .mt-30  { margin-top:    16px !important; }
  .pt-section { padding-top: 40px !important; }
  .pb-80  { padding-bottom: 40px !important; }
}

/* ======================================================
   HOW-LUMBEN-WORKS JOURNEY (about.html component)
   Already has 900px & 520px breakpoints – supplement with
   fine-tuning for very small phones.
   ====================================================== */
@media (max-width: 479px) {
  .lmb-scene {
    padding: 28px 14px 30px !important;
  }
  .lmb-headline {
    font-size: clamp(18px, 5.5vw, 26px) !important;
  }
  .lmb-card {
    padding: 14px 12px !important;
  }
  .lmb-card-title { font-size: 12.5px !important; }
  .lmb-card-body  { font-size: 11px !important; }
}

/* ======================================================
   DENTIST LIST PAGE  (dentist_list.html)
   The .filters__row grid already collapses at 980px –
   add extra fixes for very small screens.
   ====================================================== */
@media (max-width: 479px) {
  .dl-grid { gap: 12px !important; }
  .dl-body { padding: 12px 12px 14px !important; }
  .dl-title { font-size: 14px !important; }
  .filters { padding: 12px !important; }
  .langchips { gap: 6px !important; }
  .langchip label { height: 38px !important; padding: 0 10px !important; font-size: 12px !important; }
}

/* ======================================================
   DENTIST DETAIL PAGE  (dentist_detail.html)
   ====================================================== */
@media (max-width: 479px) {
  .dentistTop__info { padding: 12px !important; }
  .dname { font-size: clamp(22px, 6vw, 32px) !important; }
  .dmeta__label { width: 90px !important; }
}

/* ======================================================
   PROFILE PAGE  (profile.html)
   The profilegrid already collapses at 980px.
   Fine-tune on phones.
   ====================================================== */
@media (max-width: 479px) {
  .p-card  { padding: 14px !important; }
  .appt    { padding: 10px !important; }
  .appt__date { width: 50px !important; }
  .appt__day  { font-size: 16px !important; }
}

/* ======================================================
   AUTH PAGES  (login, register, etc.)
   The auth-card already has max-width:520px and padding:22px.
   ====================================================== */
@media (max-width: 479px) {
  .auth-wrap { padding: 20px 12px !important; }
  .auth-card { padding: 16px !important; border-radius: 14px !important; }
  .auth-title { font-size: 20px !important; }
}

/* ======================================================
   AI UPLOAD PAGE  (diagnosis-upload.html)
   ====================================================== */
@media (max-width: 479px) {
  .upload { padding: 10px !important; }
  .upload__grid { grid-template-columns: 1fr !important; }
  .upload__drop { padding: 14px !important; }
  .upload__icon { width: 44px !important; height: 44px !important; }
  .modal__panel { padding: 14px !important; border-radius: 16px !important; }
}

/* ======================================================
   COOKIE BANNER  (base.html inline)
   Stack the paragraph and OK button on very small screens.
   ====================================================== */
@media (max-width: 520px) {
  #cookie-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    bottom: 12px !important;
    border-radius: 12px !important;
  }
  #cookie-banner button {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ======================================================
   FOOTER
   The Bootstrap cols already wrap on mobile.
   Ensure social icons centre on phones.
   ====================================================== */
@media (max-width: 640px) {
  .footer-credits .block { text-align: center; }
  .soical-block ul.socials {
    justify-content: center;
  }
  .footer-block-item { margin-bottom: 20px; }
}

/* ======================================================
   PAGE HEADERS  (header-page in most templates)
   Reduce header font size so it doesn't overflow.
   ====================================================== */
@media (max-width: 767px) {
  .header-page .title {
    font-size: clamp(22px, 6.5vw, 38px) !important;
    line-height: 1.15 !important;
  }
  .header-page .max-w570 {
    max-width: 100% !important;
    font-size: 14px !important;
  }
}

/* ======================================================
   SECTION TITLES
   ====================================================== */
@media (max-width: 767px) {
  .section-title {
    font-size: clamp(22px, 5.5vw, 34px) !important;
  }
  .sub-heading {
    font-size: 12px !important;
  }
}

/* ======================================================
   PARTNER MARQUEE  – already responsive; add polish
   ====================================================== */
@media (max-width: 479px) {
  .partnerMarquee {
    --h: 72px !important;
    --size: 54px !important;
  }
}

/* ======================================================
   CAROUSEL  (home page dentist carousel)
   ====================================================== */
@media (max-width: 479px) {
  .carousel__track  { padding: 0 2vw !important; }
  .carousel__slide  { flex-basis: 98% !important; }
  .carousel__title  { font-size: 16px !important; }
  .carousel__sub    { font-size: 13px !important; max-width: 100% !important; }
  .carousel__btn    { font-size: 24px !important; width: 36px !important; }
}

/* ======================================================
   GRID HELPERS  (grid3, grid4, etc.)
   Already have 640px/560px breakpoints; add 400px safety net.
   ====================================================== */
@media (max-width: 400px) {
  .grid3,
  .grid4,
  .opgrid { grid-template-columns: 1fr !important; }
  .bagrid { grid-template-columns: 1fr !important; }
}

/* ======================================================
   FORMS & INPUTS  – ensure they don't shrink below usable
   ====================================================== */
@media (max-width: 479px) {
  .field__input,
  .input { font-size: 16px !important; } /* prevents iOS auto-zoom on focus */
  select.field__input,
  select.input { font-size: 16px !important; }
}

/* ======================================================
   TABLET  (iPad portrait / landscape — 768 px to 1024 px)
   Fill gaps not covered by existing theme breakpoints.
   ====================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Keep hero grid from being too narrow on iPads */
  .lumben-hero-grid,
  .lumben-hero-grid--dentist {
    width: calc(100% - 48px) !important;
    gap: 24px !important;
  }

  /* Dentist list – 2 cols on iPad portrait is correct */
  /* No extra override needed – existing 992px breakpoint handles it */

  /* Profile grid – stays 2-col on iPad landscape, collapses on portrait (980px) */
  /* No extra override needed */

  /* Reduce some heavy padding */
  .section-padding { padding-top: 50px !important; padding-bottom: 50px !important; }
  .mb-70 { margin-bottom: 40px !important; }
}

/* ======================================================
   MISC TOUCH-FRIENDLINESS
   ====================================================== */
/* Minimum 44×44 tap targets for all interactive elements */
.btn,
.dsn-btn,
.lh-cta-btn,
.lh-nav-btn,
.fav-btn,
.hamburger,
.icon-btn,
.langchip label {
  min-height: 44px;
}

/* Make sure anchor tags used as buttons are tall enough */
a.btn { min-height: 44px; }

/* ======================================================
   iOS SAFARI – avoid content being hidden under address bar
   Use dvh where supported; fall back to vh.
   ====================================================== */
@supports (height: 100dvh) {
  @media (max-width: 767px) {
    .auth-wrap {
      min-height: calc(100dvh - 80px) !important;
    }
  }
}

/* ======================================================
   HOW-IT-WORKS PAGE  (how-it-works.html)
   ====================================================== */
/* Photo side panel has min-height:520px which is too tall on phones */
@media (max-width: 767px) {
  .hw-photo-wrap {
    min-height: 260px !important;
    height: 260px !important;
  }
}
@media (max-width: 479px) {
  .hw-photo-wrap {
    min-height: 200px !important;
    height: 200px !important;
  }
  /* Reduce inner section padding on small screens */
  .hw-section { padding: 40px 16px !important; }
}

/* ======================================================
   ARE-YOU-A-DENTIST PAGE  (are-you-dentist.html)
   ====================================================== */
/* ds-top: 2-column grid with no breakpoint */
@media (max-width: 900px) {
  .ds-top {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 32px !important;
  }
  /* Hero heading too large on tablets */
  .ds-heading {
    font-size: clamp(28px, 5.5vw, 42px) !important;
  }
}

/* ds-grid: 2-column benefit cards with no breakpoint */
@media (max-width: 767px) {
  .ds-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .ds-card {
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }
  .ds-heading {
    font-size: clamp(24px, 7vw, 36px) !important;
  }
}

/* ======================================================
   DENTIST PANEL – PATIENTS LIST  (dentist_panel/patients/list.html)
   The patient-row uses flex with info on the left, "View" on the right.
   On phones the info column needs to use all available width.
   ====================================================== */
@media (max-width: 640px) {
  /* Patient row: stack info + button vertically */
  .patient-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  /* Make info area full width */
  .patient-row > div:first-child { width: 100% !important; }
  /* Make "View" button full width */
  .patient-row > div:last-child  { width: 100% !important; flex: unset !important; }
  .patient-row .dsn-btn          { width: 100% !important; justify-content: center; display: flex !important; }
}

/* ======================================================
   DENTIST PANEL – APPOINTMENT MODALS  (patients/detail.html)
   The Price + Currency flex row has a fixed-width 100px currency box.
   On very small screens reduce the modal padding.
   ====================================================== */
@media (max-width: 479px) {
  /* Reduce modal padding */
  #modal-add-appt  > div,
  #modal-edit-appt > div {
    padding: 20px 16px !important;
    border-radius: 12px !important;
  }
  /* Price/currency row: let them stack */
  #modal-add-appt  div[style*="display:flex; gap:10px"],
  #modal-edit-appt div[style*="display:flex; gap:10px"] {
    flex-direction: column !important;
  }
  /* Currency width: full width when stacked */
  #modal-add-appt  div[style*="width:100px"],
  #modal-edit-appt div[style*="width:100px"] {
    width: 100% !important;
  }
}

/* ======================================================
   AI DIAGNOSIS RESULT PAGE  (diagnosis-result.html)
   Thumbnail row: stack at very small screens
   ====================================================== */
@media (max-width: 400px) {
  .lumben-thumbrow {
    flex-direction: column !important;
  }
  .lumben-thumb {
    width: 100% !important;
  }
}

/* ======================================================
   TREATMENT DETAIL PAGE  (treatment_detail.html)
   Already handles flex-column at 768px – reinforce for very small screens
   ====================================================== */
@media (max-width: 479px) {
  .td-panel { padding: 12px !important; }
  .td-wrap  { padding-top: 20px !important; }
}