/* ==========================================================================
   AqabaStays — Main Stylesheet (css/style.css)
   ========================================================================== */

/* Base Typography & Smooth Scrolling */
html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bilingual Font Stacks */
html[dir="rtl"] body,
body[data-lang="ar"] {
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, sans-serif;
}

html[dir="ltr"] body,
body[data-lang="en"] {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* RTL Icon Flipping */
html[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
}

html[dir="ltr"] .rtl-flip {
  transform: none;
}

/* Hide Scrollbars cleanly (for gallery strips & mobile carousels) */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom Scrollbar for Desktop Tables & Modals */
.scrollbar-thin::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

/* Text Selection Color */
::selection {
  background-color: #1FB8A6;
  color: #ffffff;
}

/* Form Input Defaults & Date Indicators */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Tab Panels Visibility */
[data-tab-panel] {
  display: none;
}

[data-tab-panel].is-active {
  display: block;
}

/* Ticket & Card Perforations (Voucher styling) */
.voucher-perforation {
  position: relative;
  border-top: 2px dashed rgba(14, 27, 36, 0.14);
}

.voucher-perforation::before,
.voucher-perforation::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background-color: #F6EFE1;
}

html[dir="rtl"] .voucher-perforation::before { right: -35px; left: auto; }
html[dir="rtl"] .voucher-perforation::after { left: -35px; right: auto; }
html[dir="ltr"] .voucher-perforation::before { left: -35px; right: auto; }
html[dir="ltr"] .voucher-perforation::after { right: -35px; left: auto; }

/* Subtle Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Print Rules (Voucher & Invoices) */
@media print {
  .no-print,
  header,
  footer,
  nav,
  button,
  .mobile-bar {
    display: none !important;
  }

  body, html {
    background: #ffffff !important;
    color: #000000 !important;
  }

  #printArea {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .voucher-card {
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
    break-inside: avoid;
  }

  @page {
    margin: 12mm;
  }
}

/* ==========================================================================
   RED SEA COASTAL THEME  (v2.7)  — "Aqaba at golden hour"
   Everything below is namespaced .as-* so other pages are unaffected.
   Palette: deep sea #0B2B38 · turquoise #0FA4AF / marine #0284C7 ·
            sand #FBF8F2 / gold #E8D5B5 · living coral #E76F51 / #F07167
   Text-on-colour rules (WCAG AA): white on #0B2B38 / #0A7C86 / #C2462B,
   deep sea #0B2B38 on turquoise #0FA4AF / coral #E76F51 / gold.
   ========================================================================== */
:root {
  --as-deep: #0B2B38;
  --as-turq: #0FA4AF;
  --as-turq-deep: #0A7C86;
  --as-marine: #0284C7;
  --as-sand: #FBF8F2;
  --as-gold: #E8D5B5;
  --as-coral: #E76F51;
  --as-coral-soft: #F07167;
  --as-scene-h: 64px;                 /* height of the mountain/sun band at the horizon */
}
@media (min-width: 768px) { :root { --as-scene-h: 128px; } }

/* ---------- Hero: sky (navy -> teal -> amber glow behind the mountains) ---------- */
.as-hero-sky {
  position: relative;
  padding-bottom: calc(var(--as-scene-h) + 14px);
  /* Stops are measured from the bottom in px so the white text always sits on the dark part. */
  background: linear-gradient(to top,
      #F7CC93 0,
      #EDA070 calc(var(--as-scene-h) * .55),
      #3F8794 var(--as-scene-h),
      #1B6B79 calc(var(--as-scene-h) + 16px),
      #0F4358 calc(var(--as-scene-h) + 120px),
      #0B2B38 100%);
}
.as-scene {
  position: absolute; inset-inline: 0; bottom: -1px;
  width: 100%; height: var(--as-scene-h);
  pointer-events: none; display: block;
}

/* ---------- Hero: sea (reflection of the low sun, then deep turquoise) ---------- */
.as-hero-sea {
  position: relative;
  padding-top: 1.25rem;
  background: linear-gradient(180deg, #F0B47C 0, #9CC3AE 10px, #1FA6B1 52px, #0E7C8A 150px, #0B6E7E 100%);
}
.as-glints {
  position: absolute; inset-inline: 0; top: 0; width: 100%; height: 56px;
  pointer-events: none; opacity: .95;
}
.as-glints rect { animation: asGlint 3.6s ease-in-out infinite; }
.as-glints rect:nth-child(2n)  { animation-delay: -1.1s; }
.as-glints rect:nth-child(3n)  { animation-delay: -2.2s; }
@keyframes asGlint { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }

.as-boat { animation: asBob 5.5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes asBob {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(2px) rotate(1.2deg); }
}
.as-gull { animation: asGull 7s ease-in-out infinite; }
@keyframes asGull { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---------- Hero: waves that melt into the sand-coloured page ---------- */
.as-waves { position: absolute; inset-inline: 0; bottom: -1px; height: 44px; overflow: hidden; pointer-events: none; }
@media (min-width: 768px) { .as-waves { height: 64px; } }
.as-waves svg { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; }
html[dir="rtl"] .as-waves svg { left: auto; right: 0; }
.as-wave-back  { animation: asDrift 26s linear infinite; }
.as-wave-front { animation: asDrift 18s linear infinite reverse; }
@keyframes asDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html[dir="rtl"] .as-wave-back  { animation-name: asDriftRtl; }
html[dir="rtl"] .as-wave-front { animation-name: asDriftRtl; }
@keyframes asDriftRtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ---------- Hero: copy ---------- */
.as-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .85rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; color: #FFE9C4;
  background: rgba(232, 213, 181, .14);
  border: 1px solid rgba(232, 213, 181, .38);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.as-title {
  color: #fff; font-weight: 900; line-height: 1.4;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(11, 43, 56, .55);
}
.as-squiggle { display: block; margin: .6rem auto 0; width: 120px; height: 12px; }
.as-senses { list-style: none; margin: 0; padding: 0; }
.as-sense {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; color: #FFF4DD;
  background: rgba(11, 43, 56, .42);
  border: 1px solid rgba(232, 213, 181, .32);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.as-sense svg { color: #F7CC93; flex: none; }

/* Warm ambient glass: the search card floats over the sea */
.as-glass {
  background: rgba(255, 252, 245, .92);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 18px 40px -12px rgba(11, 43, 56, .45), 0 2px 0 rgba(255, 255, 255, .6) inset;
}

/* ---------- Section ornaments ---------- */
.as-h-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: .75rem; flex: none;
  color: var(--as-turq-deep); background: rgba(15, 164, 175, .13);
}
.as-wave-sep { position: relative; height: 22px; display: flex; align-items: center; justify-content: center; }
.as-wave-sep::before {
  content: ""; position: absolute; inset-inline: 0; top: 50%; height: 12px; margin-top: -6px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cpath d='M0 6Q12 -2 24 6T48 6' fill='none' stroke='%230FA4AF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / 48px 12px;
}
.as-wave-sep__ico {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 999px;
  color: var(--as-turq-deep); background: var(--as-sand); border: 1px solid var(--as-gold);
}

/* ---------- Vibe chips (quick filters) ---------- */
.as-chip {
  display: inline-flex; align-items: center; gap: .35rem; flex: none;
  padding: .5rem .95rem; border-radius: 999px;
  font-size: .82rem; font-weight: 700; line-height: 1; white-space: nowrap;
  color: var(--as-deep); background: #fff; border: 1px solid var(--as-gold);
  transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 1px 2px rgba(11, 43, 56, .06);
}
.as-chip:hover { background: #F5ECDA; box-shadow: 0 4px 12px -4px rgba(11, 43, 56, .18); }
.as-chip:active { transform: scale(.97); }
.as-chip:focus-visible { outline: 2px solid var(--as-turq); outline-offset: 2px; }
.as-chip[aria-pressed="true"] { background: var(--as-turq-deep); color: #fff; border-color: var(--as-turq-deep); }

/* ---------- Cards ---------- */
.as-card { border-color: rgba(232, 213, 181, .55); }
.as-card:hover { box-shadow: 0 18px 30px -14px rgba(11, 43, 56, .28), 0 0 0 1px rgba(15, 164, 175, .25); }
.as-vibe {
  position: absolute; bottom: .5rem; inset-inline-start: .5rem;
  max-width: calc(100% - 3.4rem);
  padding: .2rem .55rem; border-radius: 999px;
  font-size: 10px; font-weight: 800; line-height: 1.3;
  color: var(--as-deep); background: rgba(255, 250, 240, .88);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(232, 213, 181, .9);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
}
.as-vibe--sea { background: var(--as-coral); border-color: var(--as-coral); }
@media (min-width: 640px) { .as-vibe { font-size: 11px; padding: .25rem .65rem; } }

/* ---------- Footer ---------- */
.as-footer-wave { line-height: 0; color: var(--as-deep); margin-bottom: -1px; }
.as-footer-wave svg { display: block; width: 100%; height: 36px; }
@media (min-width: 768px) { .as-footer-wave svg { height: 56px; } }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .as-glints rect, .as-boat, .as-gull, .as-wave-back, .as-wave-front { animation: none !important; }
}