/* ============================================================
   TheBookFlight — UI/UX Polish Layer v3.1 (Fixed)
   Safe overrides — no wildcard selectors
   Applied AFTER all other stylesheets
   ============================================================ */

/* ── Global Smoothing ── */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }

/* ── Scrollbar — Custom Dark ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
::selection { background: rgba(208,2,27,0.3); color: #fff; }

/* ── Header Glassmorphism ── */
.tbf-header {
  background: rgba(11, 18, 32, 0.88) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.tbf-header.scrolled {
  background: rgba(11, 18, 32, 0.95) !important;
}

/* Nav links — hover underline */
.tbf-nav-link {
  position: relative !important;
}
.tbf-nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: #D0021B;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
  border-radius: 2px;
}
.tbf-nav-link:hover::after { transform: scaleX(1); }

/* ── Search Results Page — Specific ── */
.sr-page .sr-flight-card {
  transition: all 0.25s ease !important;
}
.sr-page .sr-flight-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(208,2,27,0.15) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4) !important;
}
.sr-page .sr-fare-amount {
  font-weight: 900 !important;
}
.sr-page .sr-book-btn {
  transition: all 0.2s ease !important;
}
.sr-page .sr-book-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 15px rgba(208,2,27,0.35) !important;
}

/* Filter sidebar — refined */
.sr-page .sr-filters {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Modify panel dark theme fix */
.sr-modify-panel input,
.sr-modify-panel select {
  background: rgba(255,255,255,0.05) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.sr-modify-panel input:focus,
.sr-modify-panel select:focus {
  border-color: rgba(208,2,27,0.5) !important;
  outline: none !important;
}
.sr-modify-panel label {
  color: rgba(255,255,255,0.6) !important;
}
.sr-modify-panel select option {
  background: #1a1f36 !important;
  color: #fff !important;
}

/* Discount bar dark fix */
.sr-discount-bar {
  background: rgba(255,251,235,0.05) !important;
  border-top-color: rgba(254,243,199,0.1) !important;
  color: #f59e0b !important;
}

/* ── My Trips page ── */
.mt-page .mt-card {
  transition: all 0.25s ease !important;
}
.mt-page .mt-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(233,69,96,.2) !important;
}

/* ── Animations ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  /* Search Results */
  .sr-page .sr-main {
    grid-template-columns: 1fr !important;
    padding: 8px 8px 80px !important;
    gap: 8px !important;
  }
  .sr-page .sr-filters {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1050 !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    background: #0b1220 !important;
    padding-top: 56px !important;
    padding-bottom: 80px !important;
  }
  .sr-page .sr-filters.mobile-open {
    display: block !important;
    animation: slideUpFull 0.3s ease !important;
  }
  .sr-page .sr-flight-main {
    grid-template-columns: 1fr 1fr !important;
    padding: 14px !important;
    gap: 10px !important;
  }
  .sr-page .sr-airline { grid-column: 1 / -1 !important; }
  .sr-page .sr-route-timeline { grid-column: 1 / -1 !important; }
  .sr-page .sr-fare { text-align: left !important; }
  .sr-page .sr-time-val { font-size: 16px !important; }
  .sr-page .sr-summary-inner { padding: 10px 12px !important; gap: 8px !important; }
  .sr-page .sr-sort-bar {
    flex-direction: row !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  .sr-page .sr-sort-bar::-webkit-scrollbar { display: none; }
  .sr-page .sr-sort-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .sr-page .sr-cal-day { min-width: 85px !important; padding: 10px 12px !important; }
  .sr-page .sr-detail-tabs { overflow-x: auto !important; scrollbar-width: none !important; }
  .sr-page .sr-detail-tab { white-space: nowrap !important; flex-shrink: 0 !important; }

  /* My Trips */
  .mt-page { padding: 70px 8px 80px !important; }
  .mt-page .mt-header h1 { font-size: 24px !important; }
  .mt-page .mt-card { padding: 14px !important; border-radius: 12px !important; }
  .mt-page .mt-city .code { font-size: 18px !important; }

  /* Booking confirmation */
  .bc-page { padding: 70px 12px 40px !important; }

  /* Cancel booking */
  .cb-page { padding: 70px 12px 40px !important; }

  /* Floating buttons above bottom nav */
  .tbf-wa-float { bottom: 80px !important; }
}

/* Small phones */
@media (max-width: 380px) {
  .sr-page .sr-flight-main { grid-template-columns: 1fr !important; }
  .sr-page .sr-book-btn { width: 100% !important; }
}

@keyframes slideUpFull {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ── Mobile Filter Toggle ── */
.sr-mobile-filter-btn {
  display: none;
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1040;
  background: linear-gradient(135deg, #D0021B, #a00117);
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 12px 24px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  box-shadow: 0 4px 20px rgba(208,2,27,0.4);
  cursor: pointer;
  gap: 8px;
  align-items: center;
}
@media (max-width: 960px) {
  .sr-mobile-filter-btn { display: inline-flex !important; }
}

/* ── Mobile Filter Close ── */
.sr-filter-close-mobile {
  display: none;
  position: sticky;
  top: 0;
  z-index: 10;
  background: #0b1220;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: right;
}
@media (max-width: 960px) {
  .sr-filter-close-mobile { display: block !important; }
}
.sr-filter-close-btn {
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

/* ── Tablet ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .sr-page .sr-main {
    grid-template-columns: 220px 1fr !important;
    gap: 12px !important;
  }
}