/**
 * SPRINT 12.13.2A — SEARCH FORM LAYOUT FIX
 * ============================================================
 *
 * Mobile (<768px): Điểm đi/Điểm đến stacked vertically, full width.
 * Swap button floating between them, not consuming input width.
 * Desktop (≥768px): Keep existing 2-column grid layout.
 *
 * Presentation Layer Only. No PHP/JS/Business Logic.
 *
 * @package XOS\Presentation
 * @version 12.13.2A
 * @since  Sprint 12.13.2A
 */

/* ═══════════════════════════════════════════════════════════════
   MOBILE (<768px) — Stacked origin/destination, floating swap
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Search Fields Container ── */
  .ep12-search-fields {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    position: relative !important;
  }

  /* ── Origin: Full width ── */
  .ep12-search-field-origin {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    order: 1 !important;
  }

  /* ── Swap Button: Floating centered between origin and dest ── */
  .ep12-search-swap {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 4px auto !important;
    align-self: center !important;
    order: 2 !important;
    /* Ensure it's visible above inputs */
    position: relative !important;
    z-index: 5 !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 1.5px solid #E5E7EB !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  /* Swap icon color */
  .ep12-search-swap svg {
    color: #3B82F6 !important;
    width: 20px !important;
    height: 20px !important;
  }

  /* Swap hover */
  .ep12-search-swap:hover {
    background: #F9FAFB !important;
    border-color: #D1D5DB !important;
    transform: rotate(180deg) !important;
  }

  /* ── Destination: Full width ── */
  .ep12-search-field-dest {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    order: 3 !important;
  }

  /* ── Date: Half width (left) ── */
  .ep12-search-field-date {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    order: 4 !important;
  }

  /* ── Seats: Half width (right) ── */
  .ep12-search-field-seats {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    order: 5 !important;
  }

  /* ── Weight (hidden by default, keep hidden) ── */
  .ep12-search-field-weight {
    flex: 0 0 100% !important;
    width: 100% !important;
    order: 6 !important;
  }

  /* ── Ensure hero search card doesn't clip floating swap ── */
  .ep12-hero-search {
    overflow: visible !important;
  }

  /* ── Ensure inputs don't shrink on keyboard open ── */
  .ep12-search-input {
    box-sizing: border-box !important;
    max-width: 100% !important;
    /* Prevent iOS zoom on focus (16px min font-size) */
    font-size: 1rem !important;
  }

  /* ── Prevent layout jump when keyboard opens ── */
  .ep12-search-section {
    position: relative !important;
    z-index: 1 !important;
  }

  /* ── Keep autocomplete dropdown within viewport ── */
  .ep12-autocomplete-dropdown {
    max-height: 200px !important;
    /* Don't push layout */
    position: absolute !important;
    z-index: 100 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP (≥768px) — Preserve existing 2-column grid layout
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

  /* Reset mobile overrides — keep desktop layout as-is */
  .ep12-search-fields {
    display: grid !important;
    grid-template-columns: 1fr 44px 1fr !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  /* Origin and Dest: natural grid placement */
  .ep12-search-field-origin {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    order: unset !important;
  }

  .ep12-search-field-dest {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    order: unset !important;
  }

  /* Swap button: align to bottom of inputs */
  .ep12-search-swap {
    flex: unset !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    align-self: flex-end !important;
    order: unset !important;
    position: relative !important;
    z-index: auto !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 1.5px solid #E5E7EB !important;
    box-shadow: none !important;
  }

  .ep12-search-swap:hover {
    background: #F9FAFB !important;
    transform: rotate(180deg) !important;
  }

  .ep12-search-swap svg {
    color: #6B7280 !important;
  }

  /* Date: natural flex placement */
  .ep12-search-field-date {
    flex: 1 1 140px !important;
    min-width: 130px !important;
    order: unset !important;
  }

  /* Seats: natural flex placement */
  .ep12-search-field-seats {
    flex: 1 1 140px !important;
    min-width: 130px !important;
    order: unset !important;
  }

  /* Ensure hero search overflow allows autocomplete dropdown visibility */
  .ep12-hero-search {
    overflow: visible !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   KEYBOARD SAFEGUARDS — All breakpoints
   ═══════════════════════════════════════════════════════════════ */

/* Prevent input shrink when virtual keyboard appears */
.ep12-search-input {
  box-sizing: border-box !important;
}

/* Prevent search card overflow on keyboard open */
.ep12-search-section {
  overflow: visible !important;
}

/* Ensure autocomplete stays within viewport */
.ep12-autocomplete-dropdown {
  max-height: 45vh !important;
  max-height: 45dvh !important;
}

/* Avoid fixed positioning causing jump with keyboard */
@supports (height: 100dvh) {
  .ep12-home {
    min-height: 100dvh;
  }
}