/**
 * Mobile Responsiveness Fixes (Sprint 1–7)
 * Loaded after compiled app.css to apply overrides.
 * Sprint 1-4 fixes also in SCSS source — merge into app.css on next `npm run prod` build.
 * Sprint 5-6 component overrides and F-15 video rules are permanent additions.
 *
 * Sprint 1+2:
 *   F-3:  Topbar padding mobile override
 *   F-4:  iOS Safari auto-zoom fix (checkout form-control 16px)
 *   F-6:  Touch targets ≥44px (social icons, sort pills, filter tags)
 *   F-7:  Autocomplete overflow prevention on small screens
 *
 * Sprint 3:
 *   F-2:  Minimum font-size ≥12px on mobile (override 9-10px instances)
 *   F-5:  Breakpoint normalization (766px → 768px critical overrides)
 *   F-14: Safe-area-inset for notched devices (bottom bars, mobile menu)
 */

/* F-3: Topbar padding 30px → 16px on mobile */
@media (max-width: 768px) {
  .bravo_topbar > .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* F-4: iOS Safari auto-zoom prevention (must be ≥16px) */
.bc-booking-page .form-control {
  font-size: 16px;
}

/* F-6: Social icon touch target 36px → 44px */
@media (max-width: 768px) {
  .bravo_header .header-social-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
}

/* F-6: Sort pill touch target */
@media (max-width: 768px) {
  .gs-sort-pill {
    padding: 8px 14px;
    font-size: 12px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* F-6: Quick filter tag touch target */
.quick-filter-tag {
  min-height: 44px;
}

/* F-7: Autocomplete overflow prevention on small screens */
@media (max-width: 768px) {
  .bc_form .g-field-search .bravo-autocomplete {
    max-width: calc(100vw - 32px) !important;
  }
}

/* ============================================================
   Sprint 3: F-2 — Minimum font-size ≥12px on mobile
   Override 9-10px instances that are illegible on small screens.
   11px left as-is (borderline acceptable for auxiliary text).
   ============================================================ */
@media (max-width: 768px) {
  /* Product badges: 9px → 12px */
  .bc-service-loop .item-badge .featured,
  .bc-service-loop .item-badge .sale_info,
  .bc-hp-card .item-badge [class^="badge-"] {
    font-size: 12px !important;
  }

  /* Price currency label & type badge: 10-11px → 12px */
  .gs-item-price .gs-currency,
  .gs-type-badge {
    font-size: 12px !important;
  }

  /* Calendar blockout sub-text: 9px → 11px (space-constrained) */
  .hotel-packages .flatpickr-day .pcal-day-sub {
    font-size: 11px !important;
  }

  /* Booking add-on icons: 10px → 12px */
  .room-package-card .rpc-addon i,
  .room-package-card .rpc-addon {
    font-size: 12px !important;
  }
}

/* ============================================================
   Sprint 3: F-5 — Breakpoint normalization (766px gap fix)
   766px is 2px off from Bootstrap md (768px), creating a gap
   where 767-768px screens match neither rule set.
   Override affected selectors at the standard 768px breakpoint.
   ============================================================ */
@media (max-width: 768px) {
  /* _service.scss:20 — was 766px */
  .bc-list-item .bravo-form-search-all {
    padding: 15px 20px;
  }

  /* _form_search.scss:270,287 — was 766px, smart-search select & render text */
  .bc_form .g-field-search .form-content .smart-search,
  .bc_form .g-field-search .form-content .render {
    font-size: 14px;
  }
}

/* ============================================================
   Sprint 3: F-14 — Safe-area-inset for notched devices
   iPhone X+ has bottom home indicator that overlaps fixed bars.
   The daterangepicker already has this — extend to other bars.
   ============================================================ */

/* Bottom booking bar (ferry, shared) */
.booking-bottom-bar {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Hotel book-now sticky bar */
.book-now-bar {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Mobile menu — pad top for notch, pad bottom for home indicator */
@media (max-width: 768px) {
  .bravo-menu-mobile {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Full-screen search overlay — pad top for notch */
@media (max-width: 768px) {
  .gs-mobile-overlay .gs-mobile-header {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
}

/* viewport-fit=cover added to app.blade.php + user.blade.php <meta viewport> */

/* ============================================================
   Sprint 4: F-12 — Checkout steps mobile fix
   At ≤576px, step indicators wrap awkwardly (4 steps for ferry).
   Fix: horizontal layout with reduced spacing, no wrap.
   ============================================================ */
@media (max-width: 576px) {
  .checkout-steps {
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 20px 8px !important;
    justify-content: space-between !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .checkout-steps .step {
    padding: 0 6px !important;
    min-width: 0;
    flex-shrink: 0;
  }

  /* Smaller step number circles */
  .checkout-steps .step-number {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }

  /* Smaller step labels */
  .checkout-steps .step-label {
    font-size: 11px !important;
    white-space: nowrap;
  }

  /* Shorter connector lines between steps */
  .checkout-steps .step:not(:last-child)::after {
    display: block !important;
    top: 16px !important;
    right: -8px !important;
    width: 16px !important;
  }
}

/* ============================================================
   Sprint 5: F-15 — Responsive video/iframe in user content
   Product descriptions (.bc-description) may contain raw
   <iframe> or <video> from admin CKEditor. Without rules,
   these overflow on mobile.
   ============================================================ */

/* Constrain all iframes/videos in product content to container width */
.bc-description iframe,
.bc-description video,
.bc-description embed,
.bc-description object,
.rpc-content-html iframe,
.rpc-content-html video,
.package-desc-block iframe,
.package-desc-block video {
  max-width: 100% !important;
  height: auto;
}

/* 16:9 aspect ratio wrapper for iframes (YouTube, Vimeo, etc.) */
.bc-description iframe[src*="youtube"],
.bc-description iframe[src*="vimeo"],
.bc-description iframe[src*="youtu.be"],
.rpc-content-html iframe[src*="youtube"],
.rpc-content-html iframe[src*="vimeo"] {
  aspect-ratio: 16 / 9;
  width: 100% !important;
  height: auto !important;
}

/* Generic responsive video container (when wrapped in .embed-responsive) */
.bc-description .embed-responsive {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

.bc-description .embed-responsive iframe,
.bc-description .embed-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ============================================================
   Sprint 6: F-11 — Fluid typography with clamp()
   Replace fixed px breakpoint steps with smooth scaling.
   Viewport range: 320px (20rem) → 1280px (80rem).
   Formula: clamp(min, preferred, max)
   ============================================================ */

/* :root font-size tokens with clamp() are set in design-system.css (source of truth).
   Only component-level overrides needed here for hardcoded values in compiled app.css. */

/* Hero title: override hardcoded 36px + 768px step-down */
.hero-unified-title,
.hero-unified .text-heading {
  font-size: clamp(1.5rem, 1.125rem + 1.88vw, 2.25rem) !important; /* 24→36px */
}

/* Hero subtitle: override 15px + 768px step-down */
.hero-unified-subtitle,
.hero-unified .sub-heading {
  font-size: clamp(
    0.8125rem,
    0.75rem + 0.31vw,
    0.9375rem
  ) !important; /* 13→15px */
}

/* Checkout form title: override frozen 22px */
.bc-booking-page .form-title {
  font-size: clamp(1.125rem, 1rem + 0.63vw, 1.375rem); /* 18→22px */
}

/* Search card price: override frozen 18px */
.gsr-card-price {
  font-size: clamp(1rem, 0.938rem + 0.31vw, 1.125rem); /* 16→18px */
}

/* Section block headings: smooth scaling */
.bc-section-block h2,
.bravo_wrap .section-title {
  font-size: clamp(
    1.375rem,
    1.063rem + 1.56vw,
    1.875rem
  ); /* matches --font-size-3xl */
}

/* ============================================================
   Browser Audit Fixes (M-1 to M-5)
   Based on Playwright mobile screenshots at 375×812 (iPhone X)
   ============================================================ */

/* M-1: Price table in .bc-description — Chinese text wraps char-by-char
   Root cause: app.css sets overflow:hidden!important + width:100%!important
   on table.bc-price-table, preventing horizontal scroll.
   Fix: override with matching specificity selectors. */
@media (max-width: 768px) {
  .bravo_wrap table.bc-price-table,
  .bravo_wrap .bc-price-tabs .tab-pane table,
  .bravo_wrap .bc-description table {
    display: block !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    width: auto !important;
    min-width: 480px !important;
  }
}

/* M-2/M-3: Carousel cards clipped with no swipe hint
   Root cause: .bc-product-carousel-section overflow:hidden + arrows hidden on mobile.
   Fix: CSS mask on owl-stage-outer to fade the right edge. */
@media (max-width: 768px) {
  .bc-product-carousel-section .owl-stage-outer {
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }
}

/* M-4: Hamburger menu no backdrop
   Root cause: .bravo-menu-backdrop element not injected by JS in all contexts.
   Fix: CSS-only backdrop via box-shadow extending left from the menu panel. */
.bravo_wrap .bravo_header .bravo-menu-mobile.active {
  box-shadow: -100vw 0 0 0 rgba(0, 0, 0, 0.45) !important;
}

/* Keep JS-backdrop rule as fallback */
.bravo-menu-backdrop.active {
  z-index: 10000 !important;
  background: rgba(0, 0, 0, 0.5) !important;
}

/* M-5: Event/Dining booking form excessive top spacing on mobile
   Root cause: .bc-single-service-content margin-top:50px + form container spacing. */
@media (max-width: 768px) {
  .bc-single-event .bc-single-service-content,
  .bc-single-dining .bc-single-service-content {
    margin-top: 24px !important;
  }

  .event-booking-container,
  .bc-form-book-wrapper {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}