/* ============================================================
   هدهد للسفر والسياحة | Hudhud Travel & Tourism — Custom styles
   ============================================================ */

/* Hide scrollbars for horizontal chip strips (like the app) */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* iOS safe area for bottom nav */
.safe-area-pb { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Entrance animations (fade / slide) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn  { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes slideUp{ from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes checkPop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes pulseOnce { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.45);} 100% { box-shadow: 0 0 0 18px rgba(255,255,255,0);} }

.animate-fade-in   { animation: fadeIn .2s ease-out both; }
.animate-pop-in    { animation: popIn .25s ease-out both; }
.animate-slide-up  { animation: slideUp .3s ease-out both; }
.animate-check-pop { animation: checkPop .45s cubic-bezier(.68,-0.55,.27,1.55) both; }
.animate-ring-once { animation: pulseOnce .9s ease-out 1; }

/* Fake barcode on the boarding pass (same as source design) */
.barcode {
  background-image: repeating-linear-gradient(90deg, #000, #000 2px, transparent 2px, transparent 5px);
}

/* ---- iPhone frame simulator (toggle from header) ---- */
body.phone-frame-mode #frameOuter {
  background: #0f172a;
  padding: 24px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
}
body.phone-frame-mode #frameInner {
  max-width: 420px;
  width: 100%;
  background: #f1f5f9;
  border-radius: 40px;
  box-shadow: 0 25px 60px -12px rgba(0,0,0,.45);
  overflow: hidden;
  border: 8px solid #1e293b;
  min-height: 850px;
  position: relative;
}
body.phone-frame-mode #phoneNotch { display: flex; }
#phoneNotch {
  display: none;
  background: #1e293b;
  height: 24px;
  width: 100%;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 50;
}
#phoneNotch .notch-pill {
  width: 96px; height: 16px; background: #0f172a; border-radius: 9999px;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 12px;
}
#phoneNotch .notch-cam { width: 10px; height: 10px; border-radius: 9999px; background: #1e293b; }

/* Range slider (max price filter) — Hudhud green */
input[type="range"].wego-range { accent-color: #00a651; }

/* Checkbox accent */
input[type="checkbox"].wego-check { accent-color: #00a651; width: 16px; height: 16px; }

/* Native date input keeps Cairo font */
input[type="date"] { font-family: inherit; }

/* Number of results chip scroll strip */
.chips-x { overflow-x: auto; scroll-behavior: smooth; }

/* RTL/LTR directional icon helpers */
html[dir="rtl"] .flip-x { transform: scaleX(1); }
html[dir="ltr"] .flip-x { transform: scaleX(-1); }

/* Boarding pass perforation dots */
.perforation {
  height: 0;
  border-top: 2px dashed #cbd5e1;
  position: relative;
  margin: 0 -14px;
}
.perforation::before,
.perforation::after {
  content: '';
  position: absolute;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: #f1f5f9;
}
.perforation::before { right: -9px; }
.perforation::after  { left: -9px; }

/* Hide elements until lucide replaces <i> tags to avoid layout flash */
i[data-lucide] { display: inline-block; width: 1em; height: 1em; }

/* Desktop layout: preserve the original narrow, app-like presentation on phones. */
@media (min-width: 768px) {
  #frameOuter { min-height: 100vh; }
  #frameInner { max-width: none; width: 100%; min-height: 100vh; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
  #frameInner .max-w-md { max-width: 1120px; }
  #frameInner header .max-w-md, #frameInner nav .max-w-md { max-width: 1200px; }
  #frameInner nav.fixed { position: static; border-top: 1px solid #e2e8f0; box-shadow: none; }
  #frameInner nav.fixed > div { max-width: 1200px; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0 auto; }
  #frameInner > .h-20 { display: none; }
  #frameInner main, #frameInner section { scroll-margin-top: 5rem; }
  body.phone-frame-mode #frameOuter { padding: 0; display: block; background: #f1f5f9; }
  body.phone-frame-mode #frameInner { max-width: none; width: 100%; border: 0; border-radius: 0; box-shadow: none; min-height: 100vh; }
  body.phone-frame-mode #phoneNotch { display: none; }
}