/* =========================
   MOBILE OVERRIDES ONLY
   Do not edit desktop styles
   Desktop breakpoint behavior must remain untouched
   ========================= */

/* Prevent horizontal scrolling on mobile */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* ========================= 
   NAVIGATION - Mobile Only
   ========================= */
@media (max-width: 768px) {
  /* Tighter navbar on mobile */
  .nav-premium,
  nav[class*="nav"],
  header nav {
    padding: 0.5rem 1rem !important;
    min-height: auto !important;
  }

  /* Logo sizing on mobile */
  .nav-premium img[alt*="Safeat"],
  nav img[alt*="Logo"],
  .logo-img {
    height: 28px !important;
    max-height: 28px !important;
  }

  /* Hide desktop nav links on mobile - hamburger handles them */
  .nav-premium .hidden.md\\:flex,
  nav .hidden.md\\:flex,
  .desktop-nav-links {
    display: none !important;
  }

  /* Mobile menu drawer improvements */
  .mobile-menu-drawer,
  #mobile-menu,
  [id*="mobile-menu"] {
    padding: 1rem !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Mobile menu items - larger touch targets */
  .mobile-menu-drawer a,
  #mobile-menu a,
  [id*="mobile-menu"] a {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0.75rem 1rem !important;
  }
}

/* ========================= 
   HERO SECTION - Mobile Only
   ========================= */
@media (max-width: 768px) {
  /* Hero container - reduce padding */
  .hero-section,
  section[class*="hero"],
  .min-h-screen.flex.items-center {
    padding: 2rem 1rem !important;
    min-height: auto !important;
    padding-top: 4rem !important;
  }

  /* Hero headline - better wrapping */
  .hero-section h1,
  section[class*="hero"] h1,
  .text-4xl.md\\:text-6xl,
  .text-5xl.md\\:text-7xl {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
  }

  /* Hero subtitle */
  .hero-section p,
  section[class*="hero"] p.text-lg,
  .text-xl.md\\:text-2xl {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  /* Hero buttons - stack vertically */
  .hero-section .flex.gap-4,
  section[class*="hero"] .flex.gap-4,
  .hero-buttons {
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  .hero-section .flex.gap-4 a,
  section[class*="hero"] .flex.gap-4 a,
  .hero-buttons a,
  .hero-buttons button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .hero-section h1,
  section[class*="hero"] h1 {
    font-size: 1.5rem !important;
  }
}

/* ========================= 
   MAIN ACTION BUTTONS - Mobile 2x2 Grid
   ========================= */
@media (max-width: 768px) {
  /* Action buttons container - convert to 2x2 grid */
  .action-buttons,
  .grid.grid-cols-4,
  .flex.flex-wrap.justify-center.gap-4,
  .grid.md\\:grid-cols-4 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    width: 100% !important;
    padding: 0 1rem !important;
  }

  /* Individual action buttons */
  .action-buttons > a,
  .action-buttons > button,
  .grid.grid-cols-4 > a,
  .grid.grid-cols-4 > button,
  .action-btn {
    width: 100% !important;
    min-height: 60px !important;
    padding: 0.75rem !important;
    font-size: 0.875rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Action button icons */
  .action-buttons svg,
  .action-btn svg,
  .grid.grid-cols-4 svg {
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 0.25rem !important;
  }
}

/* ========================= 
   CARDS & SECTIONS - Mobile Single Column
   ========================= */
@media (max-width: 768px) {
  /* Two-column to single column */
  .grid.grid-cols-2,
  .grid.md\\:grid-cols-2,
  .flex.md\\:flex-row {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  /* Three-column to single column */
  .grid.grid-cols-3,
  .grid.md\\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Card sections - reduce padding */
  .card,
  [class*="rounded-2xl"],
  [class*="rounded-xl"] {
    padding: 1rem !important;
    margin: 0.5rem 0 !important;
  }

  /* Section containers */
  section {
    padding: 2rem 1rem !important;
  }

  /* Images in cards - center and constrain */
  .card img,
  section img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 1rem auto !important;
    display: block !important;
  }

  /* Feature cards */
  .feature-card,
  .why-card {
    text-align: center !important;
  }

  /* Reduce heavy shadows on mobile */
  [class*="shadow-2xl"] {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
  }
}

/* ========================= 
   DETECTOR & QR SCANNER - Mobile Only
   ========================= */
@media (max-width: 768px) {
  /* Camera preview container */
  #camera-preview,
  #video-container,
  .camera-container,
  video {
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    aspect-ratio: 4/3 !important;
  }

  /* Scanner buttons - stack */
  .scanner-buttons,
  .detector-buttons,
  .flex.gap-4.mt-4 {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .scanner-buttons button,
  .detector-buttons button {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* Result cards - ensure wrapping */
  .result-card,
  .allergen-chip,
  .tag-chip {
    flex-wrap: wrap !important;
  }

  /* Chips container - wrap cleanly */
  .chips-container,
  .flex.flex-wrap {
    gap: 0.5rem !important;
  }

  /* Individual chips - comfortable tap size */
  .chip,
  [class*="chip"],
  .allergen-tag,
  .diet-tag {
    padding: 0.5rem 0.75rem !important;
    min-height: 36px !important;
    font-size: 0.875rem !important;
  }
}

/* ========================= 
   PROFILE & QUIZ - Mobile Only
   ========================= */
@media (max-width: 768px) {
  /* Modals - fit viewport */
  .modal,
  [class*="modal"],
  .fixed.inset-0 > div,
  [role="dialog"] {
    max-height: 90vh !important;
    max-width: 95vw !important;
    margin: auto !important;
    overflow-y: auto !important;
  }

  /* Modal content */
  .modal-content,
  [class*="modal"] > div {
    padding: 1rem !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
  }

  /* Modal buttons - stack if needed */
  .modal-buttons,
  .modal-actions,
  [class*="modal"] .flex.gap-4 {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .modal-buttons button,
  .modal-actions button {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* Quiz cards */
  .quiz-card,
  .quiz-option {
    padding: 1rem !important;
    min-height: 60px !important;
  }

  /* Chip selections in profile - wrap cleanly */
  .chip-group,
  .selection-chips,
  .profile-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .chip-group .chip,
  .selection-chips button,
  .profile-chips button {
    min-height: 44px !important;
    padding: 0.5rem 1rem !important;
  }
}

/* ========================= 
   MAP PAGE - Mobile Only
   ========================= */
@media (max-width: 768px) {
  /* Map container - fill viewport properly */
  #map,
  .map-container {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - 64px) !important;
    height: calc(100dvh - 64px) !important;
    min-height: unset !important;
    z-index: 1 !important;
  }

  /* Leaflet zoom controls - better positioning */
  .leaflet-control-zoom {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    margin: 0 !important;
  }

  .leaflet-control-zoom a {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 20px !important;
  }

  /* Mobile drawer / bottom sheet */
  .mobile-drawer,
  .search-panel-mobile,
  [class*="bottom-sheet"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 35vh !important;
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
    z-index: 1000 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .mobile-drawer.open,
  .search-panel-mobile.open {
    max-height: 70vh !important;
  }

  /* Drawer handle */
  .drawer-handle,
  .mobile-drawer::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 2px;
    margin: 8px auto 12px auto;
  }

  /* Filter buttons - horizontal scroll */
  .filter-container,
  .filters-row,
  .filter-pills {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0.5rem !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
  }

  .filter-container::-webkit-scrollbar,
  .filters-row::-webkit-scrollbar,
  .filter-pills::-webkit-scrollbar {
    display: none !important;
  }

  .filter-container button,
  .filters-row button,
  .filter-pills button {
    flex-shrink: 0 !important;
    min-height: 40px !important;
    white-space: nowrap !important;
  }

  /* Restaurant cards in list view */
  .restaurant-card,
  .business-card,
  .result-card {
    padding: 0.75rem !important;
    margin: 0.5rem 0 !important;
  }

  /* Search bar */
  .search-bar,
  #search-input,
  input[type="search"],
  input[type="text"][placeholder*="search" i],
  input[type="text"][placeholder*="find" i] {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 48px !important;
    padding: 0.75rem 1rem !important;
  }

  /* FAB positioning above bottom sheet */
  .fab,
  .floating-action-btn,
  #toggle-drawer-btn {
    bottom: calc(35vh + 16px) !important;
    right: 16px !important;
    z-index: 1001 !important;
  }

  /* Hide desktop search panel on mobile */
  .desktop-search-panel,
  .desktop-results-panel {
    display: none !important;
  }
}

/* ========================= 
   BOOKING & DIARY - Mobile Only
   ========================= */
@media (max-width: 768px) {
  /* Booking cards */
  .booking-card,
  .diary-entry {
    padding: 1rem !important;
  }

  /* Form inputs - prevent iOS zoom */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 48px !important;
    padding: 0.75rem !important;
  }

  /* Date/time pickers */
  .date-picker,
  .time-picker {
    width: 100% !important;
  }
}

/* ========================= 
   BUTTONS - Mobile Touch Targets
   ========================= */
@media (max-width: 768px) {
  /* All buttons - minimum touch target */
  button,
  .btn,
  [role="button"],
  a.btn,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px !important;
    padding: 0.75rem 1rem !important;
  }

  /* Primary buttons - larger */
  .btn-primary,
  button[class*="bg-emerald"],
  button[class*="bg-green"],
  a[class*="bg-emerald"],
  a[class*="bg-green"] {
    min-height: 48px !important;
  }

  /* Full-width buttons on mobile */
  .btn-block,
  .w-full.btn,
  form button[type="submit"] {
    width: 100% !important;
  }
}

/* ========================= 
   VIDEO BANNER SECTIONS - Mobile Only (index.html)
   Fix white line/ring issue on banner frames
   ========================= */
@media (max-width: 768px) {
  /* Remove ring border on mobile banner containers */
  #food-banner-container,
  #restaurant-banner-container,
  #lab-banner-container {
    ring: none !important;
    --tw-ring-offset-width: 0 !important;
    --tw-ring-width: 0 !important;
    --tw-ring-color: transparent !important;
    box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.25) !important;
    border: none !important;
    outline: none !important;
  }

  /* Ensure videos cover entire container on mobile */
  #food-banner-container video,
  #restaurant-banner-container video,
  #lab-banner-container video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* ========================= 
   HERO SECTION - Mobile Only (index.html)
   Video cover fix + larger text
   ========================= */
@media (max-width: 768px) {
  /* Hero container - full viewport height with safe viewport */
  header.relative.min-h-screen {
    min-height: 100svh !important;
    min-height: 100vh !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Video container - cover entire hero */
  header.relative.min-h-screen > .absolute.inset-0 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  /* Video element - cover with slight zoom to fill gaps */
  header.relative.min-h-screen video,
  #hero-video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
    z-index: 1 !important;
  }

  /* Overlay stays above video */
  .hero-overlay {
    position: absolute !important;
    z-index: 2 !important;
  }

  /* Content stays above overlay */
  header.relative.min-h-screen > .relative.z-10 {
    position: relative !important;
    z-index: 10 !important;
  }

  /* Hero title - bigger and more readable */
  #hero-title {
    font-size: clamp(2.5rem, 10vw, 3.5rem) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
  }

  /* Hero subtitle - larger and more readable */
  header.relative.min-h-screen p.fade {
    font-size: clamp(1rem, 4.5vw, 1.2rem) !important;
    line-height: 1.5 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
  }
}

/* ========================= 
   TYPOGRAPHY - Mobile Only
   ========================= */
@media (max-width: 768px) {
  /* Base font size - larger for readability */
  html {
    font-size: 17px !important;
  }

  body {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  /* Headings - readable but not too large */
  h1 {
    font-size: 1.875rem !important;
    line-height: 1.2 !important;
  }

  h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }

  h3 {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
  }

  h4 {
    font-size: 1.125rem !important;
  }

  /* Body text - larger for readability */
  p, li, span, div {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  /* Navigation text */
  nav a, nav button, .nav-link {
    font-size: 1rem !important;
  }

  /* Button text */
  button, .btn, a.btn {
    font-size: 1rem !important;
  }

  /* Card text */
  .card p, .card span, .result-card p {
    font-size: 0.9375rem !important;
  }

  /* Small text - but still readable */
  .text-sm {
    font-size: 0.9375rem !important;
  }

  .text-xs {
    font-size: 0.875rem !important;
  }

  /* Very small text - minimum readable size */
  .text-\\[10px\\], .text-\\[11px\\], .text-\\[12px\\] {
    font-size: 0.8125rem !important;
  }
}

/* ========================= 
   FLOATING ACTION BUTTON (FAB) - Mobile Only
   ========================= */
@media (max-width: 768px) {
  /* FAB positioning */
  .fab,
  .floating-action-btn,
  #quick-map-btn {
    bottom: 80px !important;
    right: 16px !important;
    width: 56px !important;
    height: 56px !important;
    z-index: 1000 !important;
  }

  /* Settings gear */
  #settings-toggle,
  .settings-btn {
    bottom: 16px !important;
    left: 16px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* ========================= 
   FOOTER - Mobile Only
   ========================= */
@media (max-width: 768px) {
  footer {
    padding: 2rem 1rem !important;
  }

  footer .grid,
  footer .flex {
    flex-direction: column !important;
    gap: 1.5rem !important;
    text-align: center !important;
  }

  footer a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ========================= 
   ADMIN PAGE - Mobile Only
   ========================= */
@media (max-width: 768px) {
  /* Admin tabs */
  .admin-tabs,
  [role="tablist"] {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .admin-tabs button,
  [role="tab"] {
    flex: 1 1 45% !important;
    min-height: 44px !important;
  }

  /* Admin tables - horizontal scroll */
  .admin-table-container,
  table {
    overflow-x: auto !important;
    display: block !important;
    max-width: 100% !important;
  }

  /* Admin forms */
  .admin-form input,
  .admin-form select,
  .admin-form textarea {
    width: 100% !important;
  }
}

/* ========================= 
   BOOKINGS PAGE HERO - Desktop Default
   Hide mobile video on desktop
   ========================= */
.bookings-hero-mobile {
  display: none !important;
}

/* ========================= 
   BOOKINGS PAGE HERO - Mobile Only
   Show mobile video, hide desktop video
   ========================= */
@media (max-width: 768px) {
  /* Hide desktop video on mobile */
  .bookings-hero-desktop {
    display: none !important;
  }

  /* Show mobile video on mobile */
  .bookings-hero-mobile {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 0 !important;
  }

  /* Mobile video element - full coverage */
  .bookings-hero-mobile video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    z-index: 0 !important;
  }

  /* Bookings hero section - proper height */
  .bookings-hero {
    position: relative !important;
    min-height: 50vh !important;
    overflow: hidden !important;
  }

  /* Hero overlay - stays above video */
  .bookings-hero .hero-overlay {
    position: absolute !important;
    z-index: 1 !important;
  }

  /* Hero text content - center vertically */
  .bookings-hero > .relative.z-10 {
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 4rem !important;
    padding-bottom: 2rem !important;
    text-align: center !important;
  }
}

/* ========================= 
   AMBASSADOR CARDS - Mobile Only
   Fix typography and spacing
   ========================= */
@media (max-width: 768px) {
  /* Ambassador section cards container */
  .grid.sm\\:grid-cols-3 {
    gap: 1rem !important;
  }

  /* Ambassador feature cards */
  .grid.sm\\:grid-cols-3 > div {
    padding: 1.25rem 1rem !important;
  }

  /* Ambassador card icon container - consistent spacing */
  .grid.sm\\:grid-cols-3 > div > .w-10 {
    margin-bottom: 0.75rem !important;
  }

  /* Ambassador card text - better typography */
  .grid.sm\\:grid-cols-3 > div > span.text-sm {
    display: block !important;
    max-width: 200px !important;
    margin: 0 auto !important;
    line-height: 1.4 !important;
    text-align: center !important;
    text-wrap: balance !important;
  }
}

/* ========================= 
   UTILITY CLASSES - Mobile Only
   ========================= */
@media (max-width: 768px) {
  /* Hide on mobile */
  .hide-mobile,
  .desktop-only {
    display: none !important;
  }

  /* Show on mobile */
  .show-mobile,
  .mobile-only {
    display: block !important;
  }

  /* Full width on mobile */
  .mobile-full-width {
    width: 100% !important;
  }

  /* Stack on mobile */
  .mobile-stack {
    flex-direction: column !important;
  }

  /* Center on mobile */
  .mobile-center {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }
}