/* ============================================================
   LAW FIRM — GLOBAL MOBILE RESPONSIVE STYLESHEET
   Covers: Navigation, Hero, All Pages, Admin, Forms, Portal
   ============================================================ */

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body { overflow-x: hidden; }
img  { max-width: 100%; height: auto; }

/* ── Typography scaling ── */
@media (max-width: 640px) {
  .font-serif.text-8xl,
  h1.text-8xl { font-size: 2.5rem !important; line-height: 1.1 !important; }
  h1.text-7xl { font-size: 2.25rem !important; line-height: 1.1 !important; }
  h1.text-6xl { font-size: 2rem   !important; line-height: 1.1 !important; }
  h1.text-5xl { font-size: 1.75rem !important; }
  h2.text-5xl, h3.text-5xl { font-size: 1.6rem !important; }
  h2.text-4xl, h3.text-4xl { font-size: 1.4rem !important; }
  h3.text-3xl { font-size: 1.25rem !important; }
  .text-gradient-gold { font-size: inherit !important; }
}

/* ── Navigation ── */
#navbar .flex.justify-between { flex-wrap: nowrap; }

/* Logo text on small screens */
@media (max-width: 400px) {
  #navbar a.flex.flex-col span.font-serif { font-size: 0.8rem !important; letter-spacing: 0.05em !important; }
  #navbar a.flex.flex-col span.text-brand-accent { font-size: 0.5rem !important; }
}

/* Mobile menu full-screen smooth */
#mobile-menu {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#mobile-menu.hidden { display: none !important; }
#mobile-menu a {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-size: 0.875rem;
}

/* ── Hero Section ── */
@media (max-width: 640px) {
  section.h-screen { min-height: 100svh; }
  .hero-content { padding-left: 0 !important; }
  .hero-content .border-l-2 { padding-left: 1rem !important; font-size: 0.95rem !important; }
  /* CTA buttons stack */
  .hero-swiper .absolute.bottom-20 { bottom: 5rem; }
  .hero-swiper .flex.flex-col.sm\\:flex-row { gap: 0.75rem !important; }
  .hero-swiper a.w-full { padding: 0.875rem 1.5rem !important; font-size: 0.75rem !important; }
}

/* ── Trust / Press Bars ── */
@media (max-width: 640px) {
  .flex.flex-wrap.justify-center.gap-8 { gap: 1.25rem !important; }
  .flex.flex-wrap.justify-center.gap-10 { gap: 1rem !important; }
  h4.font-serif.text-2xl { font-size: 1rem !important; }
  h4.font-sans.text-xl   { font-size: 0.9rem !important; }
}

/* ── Expertise Cards ── */
@media (max-width: 640px) {
  .grid.grid-cols-1.md\\:grid-cols-2 > div.p-10 { padding: 1.5rem !important; }
  .grid.grid-cols-2.gap-3 { grid-template-columns: 1fr !important; }
}

/* ── Process Steps ── */
@media (max-width: 768px) {
  .grid.grid-cols-1.md\\:grid-cols-4 { gap: 1rem !important; }
  .grid.grid-cols-1.md\\:grid-cols-4 > div { padding: 1.25rem !important; }
}

/* ── Statistics Section ── */
@media (max-width: 640px) {
  .grid.grid-cols-2.md\\:grid-cols-4.divide-x { 
    divide-x: 0 !important; 
    gap: 1.5rem !important;
  }
  .grid.grid-cols-2.md\\:grid-cols-4.divide-x > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 1rem;
  }
  .text-4xl.md\\:text-6xl { font-size: 2rem !important; }
}

/* ── Results / Case Cards ── */
@media (max-width: 640px) {
  .grid.md\\:grid-cols-3 > div.p-8 { padding: 1.25rem !important; }
}

/* ── Why Choose Us — Trust Pillars ── */
@media (max-width: 640px) {
  .grid.grid-cols-2.gap-5 { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
}

/* ── Leadership Cards ── */
@media (max-width: 640px) {
  .aspect-\\[3\\/4\\] { aspect-ratio: 4/3 !important; }
  .group .absolute.bottom-0 h4.text-3xl { font-size: 1.25rem !important; }
}

/* ── Attorney Profile Section ── */
@media (max-width: 1024px) {
  .grid.lg\\:grid-cols-2.min-h-\\[700px\\] { grid-template-columns: 1fr !important; }
  .swiper.attorneySwiper { min-height: 350px !important; }
  .flex.flex-col.justify-center.px-10 { padding: 2rem 1.25rem !important; }
}
@media (max-width: 640px) {
  .grid.grid-cols-2.gap-4.mb-8 { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
  .flex.flex-col.sm\\:flex-row.gap-4 > a { text-align: center; justify-content: center; }
  .flex.flex-wrap.gap-3.mb-8 { gap: 0.5rem !important; }
  .flex.flex-wrap.gap-3.mb-8 span { font-size: 0.6rem !important; padding: 0.25rem 0.5rem !important; }
}

/* ── FAQ Section ── */
@media (max-width: 640px) {
  .faq-item button { padding: 1rem 1.25rem !important; }
  .faq-item button span { font-size: 0.95rem !important; }
  .faq-answer { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

/* ── Consultation / CTA Section ── */
@media (max-width: 1024px) {
  .grid.grid-cols-1.lg\\:grid-cols-5 { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  section#consultation .text-4xl.md\\:text-6xl { font-size: 1.75rem !important; }
  .bg-\\[\\#075E54\\] .text-3xl { font-size: 1.4rem !important; }
}

/* ── Access Code Modal ── */
@media (max-width: 640px) {
  #accessModalBox { margin: 0.75rem !important; }
  #accessModalBox .px-8 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  #accessModalBox .py-8 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
}

/* ── Footer ── */
@media (max-width: 768px) {
  footer .grid.grid-cols-1.md\\:grid-cols-4 { gap: 2rem !important; }
  footer .flex.flex-col.md\\:flex-row { flex-direction: column !important; align-items: center !important; gap: 0.75rem !important; }
  footer .space-x-4 { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
  footer .space-x-4 span { display: none; }
}

/* ── WhatsApp FAB ── */
@media (max-width: 640px) {
  .fixed.bottom-6.right-6 { bottom: 1rem !important; right: 1rem !important; }
  .fixed.bottom-6.right-6 svg { width: 1.5rem !important; height: 1.5rem !important; }
  .fixed.bottom-6.right-6 { padding: 0.75rem !important; }
}

/* ── Contact Page ── */
@media (max-width: 1024px) {
  .grid.lg\\:grid-cols-5 { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .bg-white.border.border-gray-100.rounded-sm.shadow-sm.p-10 { padding: 1.25rem !important; }
  .grid.md\\:grid-cols-2.gap-6 { grid-template-columns: 1fr !important; gap: 1rem !important; }
}

/* ── Book / Consultation Form ── */
@media (max-width: 640px) {
  /* Step indicators */
  .step-line { width: 2rem !important; margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
  .step-dot   { width: 2rem !important; height: 2rem !important; font-size: 0.75rem !important; }

  /* Consultation fee banner */
  .bg-brand-800.border.border-brand-accent\/20 .flex-col.sm\\:flex-row { flex-direction: column !important; }
  .flex-shrink-0.text-center.sm\\:text-right { text-align: left !important; }
  .font-serif.text-5xl.font-bold.text-brand-accent { font-size: 2.5rem !important; }

  /* Meeting format grid */
  #meetingFormatSection > div[style] { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Payment method buttons */
  .grid.grid-cols-2.sm\\:grid-cols-3.gap-3 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Wire transfer grid */
  .grid.grid-cols-2.gap-x-6 { grid-template-columns: 1fr !important; }

  /* Step nav buttons */
  .flex.gap-3 > button, .flex.gap-3 > .flex-2 { flex: 1 !important; padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Review step */
  .flex.justify-between.items-center.py-3 { flex-direction: column !important; align-items: flex-start !important; gap: 0.25rem !important; }
  .flex.justify-between.items-center.py-3 span#confirm_case,
  .flex.justify-between.items-center.py-3 span[id^="confirm_"] { text-align: left !important; }
}

/* ── Portal Page ── */
@media (max-width: 640px) {
  section.py-20.px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .flex.items-center.justify-between.mb-10 { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; }
  .flex.items-center.justify-between.mb-10 a { width: 100% !important; text-align: center !important; }
  .bg-brand-800.border.rounded-sm.p-6.flex.flex-col.sm\\:flex-row { flex-direction: column !important; }
  .flex.flex-wrap.gap-5.text-sm { gap: 0.5rem !important; }
  .flex.gap-2.flex-shrink-0 { width: 100% !important; }
  .flex.gap-2.flex-shrink-0 a { flex: 1 !important; text-align: center !important; justify-content: center !important; }
  /* Payment tabs */
  .flex.flex-wrap.gap-2.mb-6 button { font-size: 0.7rem !important; padding: 0.4rem 0.75rem !important; }
}

/* ── Login / Register ── */
@media (max-width: 640px) {
  section.min-h-screen.flex.items-center { padding: 5rem 1rem 2rem !important; align-items: flex-start !important; }
  .glass.rounded-3xl.p-10 { padding: 1.5rem !important; border-radius: 1rem !important; }
}

/* ── Expertise Page ── */
@media (max-width: 768px) {
  .grid.md\\:grid-cols-2.gap-16 { gap: 2.5rem !important; }
  .grid.md\\:grid-cols-2.gap-16 .order-2.md\\:order-1 { order: 2 !important; }
  .grid.md\\:grid-cols-2.gap-16 .order-1.md\\:order-2 { order: 1 !important; }
  .aspect-square { aspect-ratio: 16/9 !important; }
  /* Floating stat badges */
  .absolute.-bottom-6.-right-6,
  .absolute.-bottom-6.-left-6 { 
    position: relative !important; 
    bottom: auto !important; right: auto !important; left: auto !important;
    display: inline-block !important;
    margin-top: 1rem !important;
  }
  .grid.grid-cols-2.gap-3 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .grid.grid-cols-2.gap-3 { grid-template-columns: 1fr !important; }
}

/* ── Testimonials Page ── */
@media (max-width: 640px) {
  .bg-brand-800.border.border-gray-700.rounded-sm.p-12 { padding: 1.5rem !important; }
  .bg-brand-800.border.border-gray-700.rounded-sm.p-10 { padding: 1.25rem !important; }
  blockquote.font-serif.text-2xl { font-size: 1.1rem !important; }
  blockquote.font-serif.text-lg  { font-size: 0.95rem !important; }
  .flex.flex-col.sm\\:flex-row.sm\\:items-center.justify-between { flex-direction: column !important; gap: 0.75rem !important; }
  .ml-auto.hidden.md\\:block { display: block !important; margin-left: 0 !important; }
  .grid.grid-cols-2.md\\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }
}

/* ── Track Record Page ── */
@media (max-width: 640px) {
  .grid.md\\:grid-cols-3 { grid-template-columns: 1fr !important; }
}

/* ── Leadership Page ── */
@media (max-width: 640px) {
  .grid.grid-cols-1.md\\:grid-cols-3 { gap: 1.5rem !important; }
}

/* ── Admin Dashboard ── */
@media (max-width: 768px) {
  /* Sidebar hidden on mobile — show via toggle */
  aside.w-72 { 
    position: fixed !important; 
    left: -18rem !important; 
    top: 0 !important; 
    height: 100vh !important; 
    z-index: 50 !important; 
    transition: left 0.3s ease !important;
    display: flex !important;
  }
  aside.w-72.open { left: 0 !important; }
  main.flex-1 { width: 100% !important; }
  
  /* Admin header */
  header.px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
  
  /* Admin content padding */
  .p-4.md\\:p-8 { padding: 1rem !important; }
  
  /* KPI grid */
  .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; }
  
  /* Revenue chart + recent intake */
  .grid.grid-cols-1.lg\\:grid-cols-3 { grid-template-columns: 1fr !important; }
  
  /* Cases table — horizontal scroll */
  .overflow-x-auto { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  table { min-width: 600px !important; }
  
  /* Billing grid */
  .grid.grid-cols-1.lg\\:grid-cols-3.gap-8 { grid-template-columns: 1fr !important; }
  
  /* Payment method cards */
  .grid.grid-cols-1.sm\\:grid-cols-2.gap-4 { grid-template-columns: 1fr !important; }
  
  /* Content editor grids */
  .grid.grid-cols-1.md\\:grid-cols-3 { grid-template-columns: 1fr !important; }
  .grid.grid-cols-1.md\\:grid-cols-2 { grid-template-columns: 1fr !important; }
  
  /* AI workspace */
  .grid.grid-cols-1.lg\\:grid-cols-2 { grid-template-columns: 1fr !important; }
  
  /* Media manager */
  .grid.grid-cols-1.sm\\:grid-cols-2.lg\\:grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 { grid-template-columns: 1fr !important; }
  .grid.grid-cols-1.sm\\:grid-cols-2.lg\\:grid-cols-3 { grid-template-columns: 1fr !important; }
}

/* Admin mobile sidebar overlay */
#admin-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 49;
}
#admin-sidebar-overlay.active { display: block; }

/* ── Case Detail Modal (Admin) ── */
@media (max-width: 640px) {
  #case-details-modal > div { padding: 1.25rem !important; }
  .grid.grid-cols-3.gap-4 { grid-template-columns: 1fr !important; gap: 0.5rem !important; }
  .grid.grid-cols-2.gap-4 { grid-template-columns: 1fr !important; }
}

/* ── PM Modal (Admin) ── */
@media (max-width: 640px) {
  #pm-modal > div { padding: 1.25rem !important; }
  .grid.grid-cols-2.gap-4 { grid-template-columns: 1fr !important; }
}

/* ── Page Heroes ── */
@media (max-width: 640px) {
  .bg-brand-900.pt-40.pb-20 { padding-top: 7rem !important; padding-bottom: 2.5rem !important; }
  .bg-brand-900.pt-40.pb-24 { padding-top: 7rem !important; padding-bottom: 2.5rem !important; }
  .bg-brand-900.pt-40.pb-16 { padding-top: 7rem !important; padding-bottom: 2rem !important; }
}

/* ── Utility: prevent horizontal overflow on all sections ── */
section, div.max-w-7xl, div.max-w-5xl, div.max-w-4xl, div.max-w-3xl, div.max-w-2xl {
  max-width: 100%;
}

/* ── Smooth touch scrolling ── */
html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

/* ── Tap highlight removal ── */
a, button { -webkit-tap-highlight-color: transparent; }

/* ── Input / select sizing on mobile ── */
@media (max-width: 640px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="date"], input[type="password"], select, textarea {
    font-size: 16px !important; /* prevents iOS zoom */
  }
}

/* ── Video Modal ── */
@media (max-width: 640px) {
  #videoContainer { margin: 0.75rem !important; }
  #videoModal button.absolute.top-8 { top: 1rem !important; right: 1rem !important; }
}

/* ── Custom Alert Modal ── */
@media (max-width: 640px) {
  #alertBox { padding: 1.5rem !important; }
  #alertBox h3 { font-size: 1.25rem !important; }
}

/* ── Preloader ── */
@media (max-width: 640px) {
  #preloader span.font-serif { font-size: 1rem !important; letter-spacing: 0.1em !important; }
}

/* ── Receipt Page ── */
@media (max-width: 640px) {
  .max-w-2xl.mx-auto { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ── Process Page (standalone) ── */
@media (max-width: 640px) {
  .grid.grid-cols-1.md\\:grid-cols-4.gap-8 { gap: 1rem !important; }
}

/* ── Navbar height on mobile ── */
@media (max-width: 640px) {
  #navbar .h-16 { height: 4rem !important; }
  #mobile-menu { top: 4rem !important; max-height: calc(100vh - 4rem) !important; }
}
@media (min-width: 641px) and (max-width: 767px) {
  #mobile-menu { top: 5rem !important; max-height: calc(100vh - 5rem) !important; }
}