/* ══════════════════════════════════════════════════
   MM-Thai Visa — mobile.css
   ══════════════════════════════════════════════════ */

/* ── PREVENT ALL HORIZONTAL OVERFLOW ── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── PAGE COLS: stack on tablet ── */
@media (max-width: 900px) {
  .page-cols, .page-cols.wide {
    grid-template-columns: 1fr !important;
  }
  .page-sidebar { order: 2; }
  .sidebar-box { position: static !important; }
}

/* ══════════════════════════════════════════════════
   MOBILE (max 768px)
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── FIX FLEX LIST ITEMS — the main cause of 3-column text splits ── */
  .req-list li {
    display: block !important;
    padding-left: 1.4rem !important;
    position: relative !important;
  }
  .req-list li::before {
    position: absolute !important;
    left: 0 !important;
    top: 0.1rem !important;
  }
  .content-section ul li {
    display: block !important;
    padding-left: 1.2rem !important;
    position: relative !important;
  }
  .content-section ul li::before {
    position: absolute !important;
    left: 0 !important;
    top: 0.1rem !important;
  }

  /* ── PREVENT TEXT OVERFLOW ── */
  .content-section, .req-box, .highlight-box, .warning-box,
  .page-main, .page-sidebar, .section, .page-cols {
    overflow-x: hidden !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* ── HERO: override ALL inline styles ── */
  section.page-hero,
  section[class*="page-hero"] {
    grid-template-columns: 1fr !important;
    padding: 1.8rem 1.2rem 1.5rem !important;
    overflow-x: hidden !important;
  }
  .hero-img-wrap {
    display: none !important;
  }
  .page-hero-inner {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .page-hero h1 {
    font-size: 1.6rem !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    width: 100% !important;
  }
  .page-hero-sub {
    font-size: 0.87rem !important;
    line-height: 1.6 !important;
    width: 100% !important;
  }
  .page-hero-badge {
    font-size: 0.72rem !important;
    white-space: normal !important;
  }
  /* Hero meta: 2 columns */
  .page-hero-meta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  .hero-meta-item {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.6rem !important;
  }

  /* ── INDEX HERO ── */
  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding-right: 0 !important;
  }
  .hero-inner h1, .hero h1 {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
    width: 100% !important;
  }
  .hero-card { display: none !important; }
  .hero-stats {
    overflow: hidden !important;
  }
  .stat-num { font-size: 1.4rem !important; }
  .stat-lbl, .stat-label { font-size: 0.62rem !important; }

  /* ── SIDEBAR: hide WA box and mini boxes on mobile ── */
  .page-sidebar .sidebar-contact {
    display: none !important;
  }
  .page-sidebar .sidebar-two-col {
    display: none !important;
  }
  /* Hide sidebar boxes that are NOT the CTA gradient box */
  .page-sidebar > .sidebar-box:not([style*="linear-gradient"]):not([style*="blue-pale"]) {
    display: none !important;
  }
  /* Also hide the CTA sidebar box completely on mobile */
  .page-sidebar > .sidebar-box[style*="linear-gradient"],
  .page-sidebar > .sidebar-box[style*="blue-pale"] {
    display: none !important;
  }

  /* ── CONTENT ── */
  .content-section {
    margin-bottom: 1.5rem !important;
  }
  .content-section h2 { font-size: 1.25rem !important; }
  .content-section h3 { font-size: 0.98rem !important; }
  .content-section p { font-size: 0.86rem !important; line-height: 1.6 !important; }

  /* ── BOXES ── */
  .req-box { padding: 1rem !important; }
  .highlight-box { padding: 0.9rem 1rem !important; font-size: 0.84rem !important; }
  .warning-box { padding: 0.9rem 1rem !important; font-size: 0.84rem !important; }
  .req-list li { font-size: 0.84rem !important; }

  /* ── INLINE GRID OVERRIDES (DTV thumbnails etc) ── */
  div[style*="grid-template-columns:1fr 140px"],
  div[style*="grid-template-columns: 1fr 140px"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="140px"] img { display: none !important; }

  /* ── STEPS ── */
  .step-item { padding: 0.8rem 1rem !important; }
  .step-num { width: 30px !important; height: 30px !important; font-size: 0.85rem !important; flex-shrink: 0 !important; }

  /* ── FAQ ── */
  .faq-q { font-size: 0.87rem !important; }
  .faq-a { font-size: 0.83rem !important; }

  /* ── GRIDS ── */
  .page-img-grid { grid-template-columns: 1fr !important; }
  .related-grid { grid-template-columns: 1fr !important; }
  .sidebar-two-col { grid-template-columns: 1fr !important; }
  .mobile-photos { display: none !important; }

  /* ── TOUCH TARGETS ── */
  .btn-primary, .btn-white, .btn-ghost {
    min-height: 48px !important;
    padding: 0.85rem 1.1rem !important;
    font-size: 0.88rem !important;
  }
  .sidebar-tel {
    min-height: 48px;
    display: block;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--blue-deep);
    text-decoration: none;
    padding: 0.7rem;
  }

  /* ── FORMS ── */
  .form-row { grid-template-columns: 1fr !important; }
  input, select, textarea {
    font-size: 16px !important;
    min-height: 44px;
  }

  /* ── TRUST BAR ── */
  .trust-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  .trust-item { flex-shrink: 0; }

  /* ── CTA STRIP ── */
  .cta-strip { padding: 2rem 1.2rem !important; }
  .cta-btns { flex-direction: column !important; align-items: stretch !important; }
  .cta-btns a { text-align: center !important; }
}

/* ── TOPBAR ── */
@media (max-width: 480px) {
  .topbar > div:first-child { display: none; }
  .topbar { justify-content: flex-end; }
  .office-gallery { grid-template-columns: 1fr !important; }
}

/* ── HAMBURGER ── */
@media (max-width: 1024px) {
  .hamburger { min-width: 44px; min-height: 44px; }
}

/* ── VERY SMALL ── */
@media (max-width: 400px) {
  .page-hero { padding: 1.4rem 0.9rem !important; }
  .page-hero h1 { font-size: 1.35rem !important; }
  .section { padding: 1.5rem 0.9rem !important; }
}

/* ══════════════════════════════════════════════════
   BACK TO TOP BUTTON
   ══════════════════════════════════════════════════ */
#back-to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue-mid);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}
#back-to-top.visible {
  display: flex;
}
@media (min-width: 769px) {
  #back-to-top { display: none !important; }
}

/* ══════════════════════════════════════════════════
   ACTIVE NAV HIGHLIGHT ON MOBILE
   ══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  ul.nav-links > li > a.nav-active,
  ul.nav-links > li > a.active {
    border-left: 3px solid var(--blue-mid) !important;
    background: var(--blue-pale) !important;
    color: var(--blue-deep) !important;
  }
  ul.nav-links > li > a.nav-active ~ ul.submenu a,
  ul.nav-links > li > a.active ~ ul.submenu a {
    border-left: none !important;
    background: transparent !important;
    color: var(--gray-700) !important;
  }
}

/* ── CONTACT PAGE ── */
@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr !important;
    padding: 1.2rem 1rem 2rem !important;
    gap: 1.5rem !important;
  }
  .contact-sidebar { order: -1; }
  .contact-banner { padding: 1.2rem 1.3rem !important; }
  .contact-banner h2 { font-size: 1.2rem !important; }
  .contact-form-box { padding: 1.3rem 1.1rem !important; }
}
@media (max-width: 600px) {
  .contact-layout { padding: 1rem 0.8rem 1.5rem !important; }
  .contact-banner-btns { flex-direction: column !important; }
  .contact-banner-btns a { text-align: center !important; }
  .form-row-2 { grid-template-columns: 1fr !important; }
}