/**
 * =====================================================
 * Miftahome — Comprehensive Mobile Responsive Styles
 * File: css/mobile.css
 * Include in EVERY page: <link rel="stylesheet" href="../css/mobile.css">
 * (or "css/mobile.css" from root pages)
 * =====================================================
 */

/* ─────────────────────────────────────────────────────
   1. GLOBAL RESET & BASE
───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  *, *::before, *::after { box-sizing: border-box; }

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

  /* Prevent horizontal scroll from any overflowing element */
  section, main, footer, header, div {
    max-width: 100%;
  }

  /* ─────────────────────────────────────────────────────
     2. TYPOGRAPHY SCALING
  ───────────────────────────────────────────────────── */

  /* display-xl → shrink drastically */
  .text-display-xl,
  [class*="display-xl"] {
    font-size: 2rem !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
  }

  /* headline-lg */
  .text-headline-lg,
  [class*="headline-lg"] {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  /* headline-md */
  .text-headline-md,
  [class*="headline-md"] {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
  }

  /* body-lg */
  .text-body-lg,
  [class*="body-lg"] {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  /* ─────────────────────────────────────────────────────
     3. NAVIGATION — HEADER
  ───────────────────────────────────────────────────── */

  #main-header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 0 !important;
  }

  #main-header > div {
    padding: 8px 16px !important;
  }

  /* Logo size on mobile */
  #main-header img[alt="Miftahome Logo"] {
    height: 52px !important;
  }

  /* Desktop nav — hidden on mobile (handled by hamburger) */
  #main-header nav.hidden {
    display: none !important;
  }

  /* Mobile nav drawer */
  #mobile-nav {
    padding: 8px 16px 20px !important;
    gap: 4px !important;
  }

  #mobile-nav a {
    font-size: 15px !important;
    padding: 12px 12px !important;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  #mobile-nav select {
    width: 100%;
    padding: 10px 14px !important;
    font-size: 14px !important;
    margin-top: 8px;
  }

  #mobile-nav a.bg-primary-container {
    padding: 14px 12px !important;
    font-size: 14px !important;
    min-height: 52px;
  }

  /* ─────────────────────────────────────────────────────
     4. HERO SLIDER
  ───────────────────────────────────────────────────── */

  #hero-slider {
    height: 100svh !important;
    min-height: 520px;
  }

  /* Content wrapper — push down from fixed header */
  #hero-slider .relative.z-10 {
    margin-top: 0 !important;
    padding-top: 90px !important;
    padding-bottom: 100px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Hero H1 */
  #hero-slider h1 {
    font-size: 1.9rem !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }

  /* Hero subtitle */
  #hero-slider p {
    font-size: 0.95rem !important;
    margin-bottom: 20px !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Search bar — stack vertically, full width */
  #hero-slider .w-full.max-w-5xl {
    flex-direction: column !important;
    padding: 14px !important;
    gap: 10px !important;
    margin: 0 12px !important;
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
  }

  #hero-slider .w-full.max-w-5xl > div,
  #hero-slider .w-full.max-w-5xl > button {
    width: 100% !important;
  }

  #hero-slider .w-full.max-w-5xl input,
  #hero-slider .w-full.max-w-5xl select {
    padding: 14px 14px 14px 44px !important;
    font-size: 15px !important;
  }

  #hero-slider .w-full.max-w-5xl button {
    padding: 14px !important;
    font-size: 14px !important;
    min-height: 52px;
    justify-content: center;
  }

  /* Arrow nav buttons — reposition */
  #hero-slider button[onclick="prevSlide()"] {
    left: 6px !important;
    width: 38px !important;
    height: 38px !important;
    top: auto !important;
    bottom: 110px !important;
    transform: none !important;
    opacity: 0.7;
  }

  #hero-slider button[onclick="nextSlide()"] {
    right: 6px !important;
    width: 38px !important;
    height: 38px !important;
    top: auto !important;
    bottom: 110px !important;
    transform: none !important;
    opacity: 0.7;
  }

  /* Dot indicators */
  #hero-slider .absolute.bottom-24 {
    bottom: 68px !important;
  }

  /* Scroll hint — hide */
  #hero-slider .absolute.bottom-8 {
    display: none !important;
  }

  /* ─────────────────────────────────────────────────────
     5. ABOUT SECTION
  ───────────────────────────────────────────────────── */

  #about-us .grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  #about-us .grid > div:last-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  #about-us img {
    height: 200px !important;
  }

  #about-us img:nth-child(2) {
    margin-top: 0 !important;
  }

  #about-us .flex.gap-4 {
    flex-direction: column !important;
    gap: 12px !important;
  }

  #about-us .flex.gap-4 a {
    width: 100% !important;
    text-align: center !important;
    padding: 14px !important;
    min-height: 52px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ─────────────────────────────────────────────────────
     6. SERVICES CARDS GRID
  ───────────────────────────────────────────────────── */

  .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* Services page 2-column grid */
  .grid.md\\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ─────────────────────────────────────────────────────
     7. MARRAKECH PARALLAX SECTION
  ───────────────────────────────────────────────────── */

  .parallax-bg {
    background-attachment: scroll !important; /* Fixes parallax flicker on iOS */
    height: auto !important;
    min-height: 320px;
    padding: 60px 20px !important;
  }

  .parallax-bg h2 {
    font-size: 2rem !important;
  }

  .parallax-bg p {
    font-size: 0.95rem !important;
  }

  .parallax-bg button {
    padding: 14px 28px !important;
    min-height: 52px;
  }

  /* ─────────────────────────────────────────────────────
     8. FEATURED PROPERTIES GRID (index.html bento)
  ───────────────────────────────────────────────────── */

  .grid.grid-cols-1.lg\\:grid-cols-12 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Property card overrides — all full width stacking */
  .lg\\:col-span-7,
  .lg\\:col-span-5,
  .lg\\:col-span-4,
  .lg\\:col-span-8 {
    grid-column: span 1 !important;
  }

  /* ─────────────────────────────────────────────────────
     9. CTA SECTION
  ───────────────────────────────────────────────────── */

  .max-w-4xl.mx-auto.bg-primary-container {
    padding: 40px 20px !important;
    margin: 0 12px !important;
    border-radius: 12px !important;
  }

  .max-w-4xl.mx-auto.bg-primary-container h2 {
    font-size: 1.6rem !important;
  }

  .max-w-4xl.mx-auto.bg-primary-container button {
    width: 100% !important;
    padding: 16px !important;
    font-size: 14px !important;
  }

  /* ─────────────────────────────────────────────────────
     10. TESTIMONIALS SWIPER
  ───────────────────────────────────────────────────── */

  #testimonials {
    padding: 40px 12px !important;
  }

  #testimonials .swiper-slide > div {
    padding: 20px !important;
  }

  /* ─────────────────────────────────────────────────────
     11. FOOTER
  ───────────────────────────────────────────────────── */

  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  footer {
    padding-top: 48px !important;
  }

  footer img[alt="Miftahome Logo"] {
    width: 140px !important;
  }

  footer .w-full.text-center {
    font-size: 12px !important;
    padding: 16px 12px !important;
  }

  /* ─────────────────────────────────────────────────────
     12. WHATSAPP FAB
  ───────────────────────────────────────────────────── */

  #whatsapp-fab {
    width: 52px !important;
    height: 52px !important;
    bottom: 16px !important;
    right: 16px !important;
  }

  #whatsapp-fab svg {
    width: 26px !important;
    height: 26px !important;
  }

  /* Right-side icon rail — hide on mobile, conflicts with content */
  .fixed.right-8.top-1\/2 {
    display: none !important;
  }

  /* ─────────────────────────────────────────────────────
     13. SEARCH PAGE — FILTER SIDEBAR + GRID
  ───────────────────────────────────────────────────── */

  /* Main layout: stack sidebar above grid */
  .flex.flex-col.lg\\:flex-row {
    flex-direction: column !important;
  }

  /* Sidebar: full width, not sticky on mobile */
  aside.w-full.lg\\:w-\\[320px\\] {
    width: 100% !important;
    position: static !important;
  }

  aside .sticky {
    position: static !important;
  }

  /* Search page header */
  main.max-w-\\[1280px\\] {
    padding: 80px 16px 40px !important;
  }

  /* Property grid: 1 column on mobile */
  #supabase-property-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Property card images */
  #supabase-property-grid .h-56,
  #supabase-property-grid .h-48 {
    height: 200px !important;
  }

  /* Filters sidebar card */
  aside .bg-surface {
    border-radius: 10px !important;
    padding: 16px !important;
  }

  /* Filter tiles 2-col grid stays 2-col on mobile */
  .prop-type-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .prop-type-tile {
    padding: 12px 6px !important;
    min-height: 72px;
  }

  /* Apply filters button */
  #supabase-apply-filters {
    padding: 14px !important;
    font-size: 14px !important;
    min-height: 52px;
  }

  /* Sort/Count bar */
  .flex.justify-between.items-center.mb-md {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Pagination */
  .flex.justify-center.items-center.gap-2.mt-xl {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* ─────────────────────────────────────────────────────
     14. PROPERTY DETAILS PAGE
  ───────────────────────────────────────────────────── */

  /* Main layout: stack columns */
  .flex.flex-col.lg\\:flex-row.gap-gutter {
    flex-direction: column !important;
    padding: 80px 16px 40px !important;
  }

  /* Hero image */
  #pd-hero-img,
  .h-\\[500px\\],
  .h-\\[480px\\] {
    height: 260px !important;
  }

  /* Thumbnail strip — horizontal scroll */
  .flex.gap-3.mt-3 {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .flex.gap-3.mt-3 img {
    width: 80px !important;
    height: 58px !important;
    flex-shrink: 0;
  }

  /* Price display */
  .font-headline-lg.text-headline-lg {
    font-size: 1.6rem !important;
  }

  /* Key features grid */
  .grid.grid-cols-2.md\\:grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Sidebar sticky → static */
  .lg\\:w-\\[360px\\] {
    width: 100% !important;
  }

  .sticky.top-\\[100px\\] {
    position: static !important;
  }

  /* CTA / contact card */
  .bg-primary-container.rounded-xl {
    padding: 20px !important;
  }

  /* Call / WhatsApp buttons */
  .bg-primary-container.rounded-xl a,
  .bg-primary-container.rounded-xl button {
    min-height: 52px !important;
    font-size: 14px !important;
    justify-content: center !important;
  }

  /* Similar properties — single column */
  .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4,
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ─────────────────────────────────────────────────────
     15. SERVICES PAGE
  ───────────────────────────────────────────────────── */

  /* Hero section */
  section.relative.h-screen {
    height: 60svh !important;
    min-height: 380px;
  }

  section.relative.h-screen .relative.z-10 {
    padding: 20px !important;
    gap: 16px !important;
  }

  section.relative.h-screen h1 {
    font-size: 1.8rem !important;
  }

  section.relative.h-screen button {
    padding: 14px 24px !important;
    min-height: 52px;
  }

  /* About grid inside services */
  .md\\:grid-cols-12 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .md\\:col-span-5,
  .md\\:col-span-7 {
    grid-column: span 1 !important;
  }

  /* About image */
  .h-\\[500px\\].object-cover {
    height: 220px !important;
  }

  /* Divider line */
  .border-l.border-outline-variant\\/30 {
    border-left: none !important;
    border-top: 1px solid rgba(196,198,207,0.3) !important;
    padding-left: 0 !important;
    padding-top: 20px !important;
  }

  /* Stats row */
  .mt-sm.flex.gap-md {
    gap: 20px !important;
  }

  /* WhatsApp Form */
  #wa-form {
    gap: 20px !important;
  }

  .grid.md\\:grid-cols-2.gap-md {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #wa-form input,
  #wa-form select,
  #wa-form textarea {
    padding: 14px 0 !important;
    font-size: 15px !important;
    width: 100% !important;
  }

  #wa-form button[type="submit"] {
    padding: 16px !important;
    min-height: 56px;
    font-size: 14px !important;
    width: 100% !important;
  }

  .bg-surface-container-lowest.border.border-outline-variant\\/30 {
    padding: 24px 16px !important;
  }

  /* ─────────────────────────────────────────────────────
     16. ADMIN LOGIN PAGE
  ───────────────────────────────────────────────────── */

  /* Admin login card */
  .flex.min-h-screen.items-center.justify-center {
    padding: 20px !important;
    align-items: flex-start !important;
    padding-top: 60px !important;
  }

  .bg-white\\/10,
  .bg-white\/10 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 20px !important;
  }

  /* ─────────────────────────────────────────────────────
     17. GENERAL SECTION PADDING
  ───────────────────────────────────────────────────── */

  /* Reduce xl padding on mobile */
  .py-xl { padding-top: 48px !important; padding-bottom: 48px !important; }
  .px-8  { padding-left: 16px !important; padding-right: 16px !important; }
  .px-gutter { padding-left: 16px !important; padding-right: 16px !important; }
  .p-12  { padding: 20px !important; }
  .p-8   { padding: 16px !important; }

  /* ─────────────────────────────────────────────────────
     18. TOUCH-FRIENDLY BUTTON SIZES
  ───────────────────────────────────────────────────── */

  /* All buttons: minimum 44px tap target */
  button, a.bg-primary-container, a.border, [role="button"] {
    min-height: 44px;
  }

  /* Form inputs: easy to tap */
  input, select, textarea {
    min-height: 48px;
    font-size: 16px !important; /* Prevents iOS auto-zoom */
  }

  /* Language switcher */
  #lang-switcher, #lang-switcher-mobile {
    min-height: 40px;
    font-size: 14px !important;
  }
}

/* ─────────────────────────────────────────────────────
   SMALL PHONES (max 430px) — extra tweaks
───────────────────────────────────────────────────── */
@media (max-width: 430px) {
  #hero-slider h1 {
    font-size: 1.6rem !important;
  }

  .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
    grid-template-columns: 1fr !important; /* 1 col on very small screens */
  }

  #about-us .grid > div:last-child {
    grid-template-columns: 1fr !important; /* stack images vertically */
  }

  #about-us img {
    height: 180px !important;
  }

  footer .grid {
    gap: 20px !important;
  }
}

/* ─────────────────────────────────────────────────────
   ADMIN DASHBOARD MOBILE (all admin pages)
   These styles complement the inline CSS in each admin page
───────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Admin sidebar: slides in from left ── */
  #admin-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    height: 100dvh !important;
    overflow-y: auto;
  }

  #admin-sidebar.sidebar-open {
    transform: translateX(0);
  }

  /* ── Admin main content: full width ── */
  .admin-main {
    margin-left: 0 !important;
    height: auto !important;
    min-height: 100svh;
    overflow-y: auto !important;
  }

  /* ── Admin body: full scroll ── */
  body.flex.overflow-hidden {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
  }

  /* ── Admin header: room for hamburger ── */
  .admin-main > header {
    padding-left: 68px !important;
    padding-right: 16px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    flex-wrap: wrap;
    gap: 10px;
  }

  .admin-main > header h2 {
    font-size: 1.2rem !important;
  }

  /* Add New Property button on mobile */
  #btn-add-prop {
    padding: 10px 14px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }

  /* ── Admin main inner padding ── */
  .admin-main main {
    padding: 16px !important;
  }

  /* ── Admin toolbar ── */
  .admin-main .flex.flex-col.md\\:flex-row {
    flex-direction: column !important;
  }

  /* ── Admin table: horizontal scroll ── */
  .admin-main .overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .admin-main table {
    min-width: 640px;
    display: table;
  }

  /* ── Modal: near full screen ── */
  .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 24px 16px 32px !important;
    max-height: 88svh;
    overflow-y: auto;
  }

  /* Modal form: single column */
  #prop-form {
    grid-template-columns: 1fr !important;
  }

  #prop-form .md\\:col-span-2 {
    grid-column: span 1 !important;
  }

  #prop-form input,
  #prop-form select,
  #prop-form textarea {
    font-size: 16px !important; /* Prevents iOS zoom */
    min-height: 48px;
  }

  /* Image preview grid: 3 cols */
  #image-preview {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Admin stat cards: 2 columns */
  .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4,
  .grid.grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* ── Dashboard chart area: full width ── */
  .lg\\:col-span-8,
  .lg\\:col-span-4 {
    grid-column: span 1 !important;
  }

  /* Sidebar overlay */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 45;
    backdrop-filter: blur(2px);
  }

  .sidebar-overlay.active {
    display: block;
  }

  /* Hamburger button */
  .admin-hamburger {
    display: flex !important;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    background: #fff;
    border: 1px solid #c4c6cf;
    border-radius: 10px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  }
}