/* Ameerat Al Bahr — clean modern booking UI, 2026 */
:root {
  --bg: #ffffff !important;
  --bg2: #f5f7fb !important;
  --card: #ffffff !important;
  --card2: #f8fafc !important;
  --accent: #2563eb !important;
  --accent2: #1d4ed8 !important;
  --text: #0f172a !important;
  --muted: #64748b !important;
  --green: #10b981 !important;
  --line: #e2e8f0 !important;
  --soft: #f1f5f9 !important;
  --on-acc: #ffffff !important;
  --hero-fg: #ffffff !important;
  --shadow: 0 10px 32px rgba(15, 23, 42, .07) !important;
  --r: 14px !important;
  --btnr: 10px !important;
  --font-h: 'Manrope', sans-serif !important;
  --font-b: 'Inter', system-ui, sans-serif !important;
}

html { font-size: 16px !important; background: #fff; }
body {
  background: #fff !important;
  color: #0f172a !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  letter-spacing: -.005em;
}
h1, h2, h3, h4, h5, h6, .serif {
  font-family: 'Manrope', sans-serif !important;
  color: #0f172a;
  letter-spacing: -.035em !important;
  font-weight: 750 !important;
}
p, li, input, select, textarea, button, a { font-family: 'Inter', system-ui, sans-serif !important; }
.wrap { max-width: 1180px !important; padding-left: 24px !important; padding-right: 24px !important; }
section { padding: 82px 0 !important; }
main > section:nth-of-type(even) { background: #f5f7fb !important; }
main > section:nth-of-type(odd) { background: #fff !important; }
.sec-head { max-width: 720px !important; margin: 0 auto 38px !important; text-align: center; }
.sec-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.65rem) !important; margin: 10px 0 12px !important; line-height: 1.16 !important; }
.sec-head p { color: #64748b !important; font-size: .98rem !important; }
.eyebrow { color: #2563eb !important; letter-spacing: .16em !important; font-size: .69rem !important; }

/* Top banner */
#banner {
  background: linear-gradient(90deg, #2563eb, #0ea5e9) !important;
  color: #fff !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  padding: 9px 44px !important;
}
#banner .bx { color: #fff !important; }

/* Navigation */
nav, nav.scrolled {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 18px rgba(15,23,42,.035) !important;
  backdrop-filter: blur(12px) !important;
  padding: 12px 0 !important;
}
.logo { color: #0f172a !important; font-family: 'Manrope', sans-serif !important; font-weight: 800 !important; letter-spacing: -.025em; }
.logo-ic {
  background: #2563eb !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.nav-links { gap: 24px !important; font-size: .87rem !important; }
.nav-links a { color: #475569 !important; font-weight: 600 !important; }
.nav-links a:hover { color: #2563eb !important; }
.burger { color: #0f172a !important; }

/* Hero */
header {
  min-height: 74svh !important;
  padding: 128px 0 74px !important;
}
.hero-bg::after {
  background: linear-gradient(90deg, rgba(8,20,42,.84), rgba(8,20,42,.58) 58%, rgba(8,20,42,.22)), linear-gradient(180deg, rgba(8,20,42,.08), rgba(8,20,42,.42)) !important;
}
.hero-in { max-width: 760px !important; }
.hero-in h1 {
  color: #fff !important;
  font-size: clamp(2.55rem, 5.7vw, 4.65rem) !important;
  line-height: 1.04 !important;
  margin: 16px 0 18px !important;
  text-wrap: balance;
}
.hero-in h1 em { color: #bfdbfe !important; font-style: normal !important; }
.hero-sub { color: rgba(255,255,255,.82) !important; font-size: 1.04rem !important; line-height: 1.75 !important; max-width: 650px !important; }
.hero-cta { gap: 12px !important; }
.stats {
  margin-top: 44px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.stat { padding: 18px 22px !important; border-right-color: rgba(255,255,255,.18) !important; }
.stat b { color: #fff !important; font-size: 1.5rem !important; }
.stat span { color: rgba(255,255,255,.72) !important; }

/* Buttons */
.btn {
  border-radius: 10px !important;
  padding: 12px 20px !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease !important;
}
.btn:hover { transform: translateY(-2px) !important; }
.btn-gold {
  background: #2563eb !important;
  color: #fff !important;
  border: 1px solid #2563eb !important;
  box-shadow: 0 8px 20px rgba(37,99,235,.18) !important;
}
.btn-gold:hover { background: #1d4ed8 !important; border-color: #1d4ed8 !important; box-shadow: 0 10px 24px rgba(37,99,235,.24) !important; }
.btn-green { background: #10b981 !important; border: 1px solid #10b981 !important; color: #fff !important; }
.btn-green:hover { background: #059669 !important; border-color: #059669 !important; }
.btn-ghost { background: #fff !important; color: #334155 !important; border: 1px solid #cbd5e1 !important; backdrop-filter: none !important; }
.hero-cta .btn-ghost { background: rgba(255,255,255,.12) !important; color: #fff !important; border-color: rgba(255,255,255,.42) !important; }

/* Marquee and trust */
.marquee { background: #f8fafc !important; border-color: #e2e8f0 !important; padding: 12px 0 !important; }
.mq-track span { color: #64748b !important; letter-spacing: .14em !important; font-size: .72rem !important; }
.mq-track i { color: #2563eb !important; }

/* Cards and shared panels */
.pk, .feat-c, .rev-c, .cat-c, .trust-c, .why-c, .faq-i, .m-price, .dep-row, .opt-row, .sec-row, .rule-row, .exc-box, .data-card, .info-box, .no-res {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 26px rgba(15,23,42,.045) !important;
}
.pk, .feat-c, .cat-c, .rev-c {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.pk:hover, .feat-c:hover, .cat-c:hover, .rev-c:hover {
  transform: translateY(-4px) !important;
  border-color: #bfdbfe !important;
  box-shadow: 0 16px 34px rgba(15,23,42,.08) !important;
}
.pk { overflow: hidden !important; }
.pk, .pk * { transform-style: flat !important; }
.pk[style*="transform"], .pk:hover { transform: translateY(-4px) !important; }
.pk-img, .pk > img, .feat-c .fi { background: #e2e8f0 !important; }
.pk-img img, .pk > img, .feat-c .fi img { transition: transform .45s ease !important; }
.pk:hover .pk-img img, .pk:hover > img, .feat-c:hover .fi img { transform: scale(1.025) !important; }
.pk-body { padding: 20px !important; }
.pk h3, .feat-c h3, .cat-c h3, .rev-c b { color: #0f172a !important; }
.pk-price b, .price-now, .feat-c .fp b { color: #0f172a !important; font-family: 'Manrope', sans-serif !important; }
.pk-rate, .pk-meta, .feat-c .pk-rate, .hint, .m-meet, .dep-b, small { color: #64748b !important; }
.feat-badge, .pk-badge, .badge {
  background: #2563eb !important;
  color: #fff !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  letter-spacing: .04em !important;
}
.pk-tabs { border-color: #e2e8f0 !important; }
.pk-tab { color: #64748b !important; border-radius: 7px !important; }
.pk-tab.on, .pk-tab:hover { color: #2563eb !important; background: #eff6ff !important; }
.op-times { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; }
.ot-chip { background: #fff !important; border: 1px solid #dbe3ed !important; color: #334155 !important; border-radius: 8px !important; }

/* Filters */
.filter-box, .f-sheet .fs-panel {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 38px rgba(15,23,42,.09) !important;
}
.chip {
  background: #fff !important;
  color: #475569 !important;
  border: 1px solid #dbe3ed !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.chip.on, .chip:hover { background: #eff6ff !important; color: #1d4ed8 !important; border-color: #93c5fd !important; }
input, select, textarea, .bk-date {
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}
input:focus, select:focus, textarea:focus, .bk-date:focus { outline: none !important; border-color: #60a5fa !important; box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important; }

/* Details / booking */
.overlay, .bk-overlay, .dt-overlay { backdrop-filter: blur(5px) !important; }
.modal, .bk-panel, .dt-panel {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 28px 80px rgba(15,23,42,.2) !important;
}
.m-body, .bk-body, .dt-body { color: #334155 !important; }
.m-body h3, .bk-body h3, .dt-title { color: #0f172a !important; }
.dep-row.sel, .opt-row.sel, .deck-btn.sel { border-color: #60a5fa !important; background: #eff6ff !important; }
.dep-st.ok { background: #ecfdf5 !important; color: #047857 !important; }
.dep-st.lim { background: #fff7ed !important; color: #c2410c !important; }
.dep-st.out { background: #fef2f2 !important; color: #b91c1c !important; }

/* Reviews, FAQ, footer */
.rev-c .stars, .st { color: #f59e0b !important; }
.faq-q { color: #0f172a !important; font-family: 'Manrope', sans-serif !important; font-weight: 700 !important; }
.faq-a p { color: #64748b !important; }
footer { background: #0f172a !important; color: #cbd5e1 !important; }
footer h3, footer h4, footer b { color: #fff !important; }
footer a, footer span, footer p, footer li { color: #94a3b8 !important; }
footer a:hover { color: #fff !important; }

/* Floating WhatsApp */
#fabWa, .fab-wa { background: #10b981 !important; box-shadow: 0 12px 28px rgba(16,185,129,.24) !important; }

/* Keep admin practical, not decorative */
.adm, .gate { font-family: 'Inter', system-ui, sans-serif !important; }
.adm-top { background: #0f172a !important; }
.adm-save { background: #2563eb !important; color: #fff !important; border-radius: 8px !important; }
.adm-tab.on { background: #eff6ff !important; color: #1d4ed8 !important; }

@media (max-width: 860px) {
  .wrap { padding-left: 18px !important; padding-right: 18px !important; }
  section { padding: 58px 0 !important; }
  header { min-height: 70svh !important; padding: 110px 0 58px !important; }
  .hero-in h1 { font-size: clamp(2.2rem, 11vw, 3.4rem) !important; }
  .hero-sub { font-size: .96rem !important; }
  .stats { margin-top: 32px !important; }
  .stat { min-width: 50% !important; padding: 15px 16px !important; }
  .sec-head { margin-bottom: 28px !important; }
  .sec-head h2 { font-size: 2rem !important; }
  .pk-body { padding: 17px !important; }
  .btn { min-height: 44px !important; }
  .nav-links { background: #fff !important; box-shadow: 0 20px 50px rgba(15,23,42,.18) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
}