/* =========================================================================
   site.css: styles for the public site (index.html)
   -------------------------------------------------------------------------
   Loaded after base.css. Arabic (RTL) is the default direction; [dir='ltr']
   rules adjust the English layout. Sections:
     1. Design tokens            11. Inner pages and side photos
     2. Page basics              12. Step timeline
     3. Buttons                  13. Unit page and booking form
     4. Form fields              14. Account page and owner tools
     5. Header and navigation    15. Ratings
     6. Mobile menu              16. Support
     7. Demo bar                 17. Terms
     8. Home: hero and search    18. Footer
     9. Home: sections           19. Typography and English (LTR) layout
    10. Unit cards and results   20. Animations and responsive rules
   ========================================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  --site-canvas: #f5f7f5;
  --site-paper: #fff;
  --site-ink: #172721;
  --site-muted: #64736c;
  --site-line: #dce4df;
  --site-forest: #153c32;
  --site-moss: #2b5949;
  --site-coral: #d07353;
  --site-gold: #e8bf62; /* warning notes only */
  --site-blue: #8bc1c0;
  --site-shadow: 0 18px 50px rgba(17, 46, 36, 0.12);
  /* Brand kit colours ("The Door"). Clay is a fill only; use Clay Deep behind white text. */
  --nuzul-green: #1e3b32;
  --nuzul-clay: #c8643f;
  --nuzul-clay-deep: #b5552f;
  --nuzul-cream: #f6f1e7;
  --nuzul-ink: #1a1f1c;
  --h: 46px; /* height of every field and button */
  --r: 8px; /* corner radius of fields and buttons */
  --gap: 16px; /* space between fields in a form */
}

/* ---------- 2. Page basics ---------- */
html,
body {
  min-height: 100%;
}
body {
  background: var(--site-canvas);
  color: var(--site-ink);
  font-family: 'DM Sans', 'IBM Plex Sans Arabic', sans-serif;
}
body * {
  font-family: inherit;
}
html[lang='ar'] body {
  font-family: 'IBM Plex Sans Arabic', Tahoma, sans-serif;
}
button,
input,
select,
textarea {
  font: inherit;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(208, 115, 83, 0.55);
  outline-offset: 3px;
}

/* ---------- 3. Buttons ---------- */
.btn {
  min-height: var(--h);
  margin-top: 12px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--site-forest);
  border-radius: var(--r);
  color: #fff;
  background: var(--site-forest);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.16s,
    transform 0.16s;
}
.btn:hover {
  background: var(--site-moss);
  transform: translateY(-1px);
}
.btn.alt {
  color: var(--site-forest);
  border: 1.5px solid #bdcec4;
  background: transparent;
}
.btn.alt:hover {
  background: #edf4ef;
}
.btn:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}
/* A row of buttons that share the width */
.acts {
  margin: 8px 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.acts .btn {
  flex: 1 1 140px;
  width: auto;
  margin-top: 0;
}
.cta-row {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cta-row .btn {
  margin: 0;
}
/* Text-style buttons (switch login mode, sign out, cancel request) */
.account-mode,
.link-btn {
  padding: 4px 0;
  border: 0;
  color: var(--site-forest);
  background: none;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- 4. Form fields ---------- */
/* A label wrapping its caption <span> and its input */
.f {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--site-muted);
  text-align: start;
  font-size: 12px;
  font-weight: 600;
}
.card-form .f,
.book .f,
.search-box .f {
  font-size: 11px;
}
.search-box input,
.search-box select,
.card-form input,
.card-form select,
.card-form textarea,
.book input,
.dates-add input,
.review-form textarea {
  width: 100%;
  height: var(--h);
  min-height: var(--h);
  padding: 0 12px;
  border: 1px solid var(--site-line);
  border-radius: var(--r);
  color: var(--site-ink);
  background: #fff;
  font-size: 14px;
}
.card-form textarea,
.review-form textarea {
  height: auto;
  min-height: 110px;
  padding: 12px;
  resize: vertical;
}
/* Two fields side by side (bedrooms + guests) */
.f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* The signed-in email shown as a read-only "field" */
.readonly-email {
  height: var(--h);
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: 1px dashed var(--site-line);
  border-radius: var(--r);
  color: var(--site-muted);
  background: #f7f9f8;
  font-size: 14px;
}
.s-err {
  min-height: 1em;
  color: #a6382e;
  font-size: 11px;
  text-align: start;
}
.s-err:empty {
  display: none;
}
.note {
  color: var(--site-muted);
  font-size: 11px;
  line-height: 1.8;
}
.note a,
.lead a {
  color: var(--site-forest);
}
/* Highlighted note (verify your email, add your phone...) */
.note.warn {
  margin-bottom: 6px;
  padding: 12px 14px;
  border-inline-start: 3px solid var(--site-gold);
  border-radius: 5px;
  color: #5c4a1d;
  background: #fbf4e2;
}
.note.warn .acts {
  margin-top: 10px;
}
.note.warn .acts .btn {
  margin: 0;
}
/* A white card that holds a form */
.card-form {
  padding: 26px;
  display: grid;
  gap: var(--gap);
  border: 1px solid var(--site-line);
  border-radius: 12px;
  background: var(--site-paper);
  box-shadow: 0 8px 24px rgba(20, 49, 40, 0.05);
}
.card-form .btn {
  width: 100%;
  margin: 2px 0 0;
}
.card-form > b,
.owner-gate b {
  color: var(--site-ink);
  font-size: 15px;
}

/* ---------- 5. Header and navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 72px;
  padding: 0 5.5%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--site-ink);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(21, 60, 50, 0.08);
  backdrop-filter: blur(16px);
}
.site-header-inner {
  width: min(1360px, 100%);
  min-height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Logo lockup (brand kit): [door symbol] نُزل | Nuzul, right to left in both languages.
   Light variant on white; .logo.dark on green (mobile menu, footer). The handle stays Clay in both. */
.logo {
  --logo-door: var(--nuzul-green);
  --logo-ar: var(--nuzul-green);
  --logo-en: #4a5a52;
  --logo-line: #c9cfc9;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  line-height: 1;
}
.logo.dark {
  --logo-door: var(--nuzul-cream);
  --logo-ar: var(--nuzul-cream);
  --logo-en: #d6ded9;
  --logo-line: #5e7a6e;
}
.logo-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}
.logo-mark .door {
  fill: var(--logo-door);
}
.logo-mark .handle {
  fill: var(--nuzul-clay);
}
.logo .ar {
  color: var(--logo-ar);
  font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}
.logo .sep {
  width: 1px;
  height: 22px;
  background: var(--logo-line);
}
.logo .en {
  color: var(--logo-en);
  font-family: 'Readex Pro', 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.site-header .top-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nl {
  text-decoration: none;
}
.site-header .nl {
  padding: 9px 12px;
  border: 0;
  border-radius: 5px;
  color: #46564f;
  font-size: 12px;
  font-weight: 600;
}
.site-header .nl:hover {
  color: var(--site-forest);
  background: #f0f5f2;
}
.site-header .nl.on {
  color: var(--site-forest);
  background: #edf4ef;
}
.site-header .nl.out {
  margin-inline-start: 6px;
  color: var(--site-forest);
  border: 1px solid #bfd0c6;
}
.site-header .nl.fill {
  color: #fff;
  background: var(--site-forest);
}
.h-act {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Square header buttons: language switch and menu */
.site-header .burger {
  min-width: 42px;
  height: 38px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--site-line);
  border-radius: 5px;
  color: var(--site-forest);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.site-header .lang {
  min-width: 74px;
  white-space: nowrap;
}
.site-header #burger {
  display: none;
  width: 40px;
  padding: 0;
}

/* ---------- 6. Mobile menu (drawer) ---------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.scrim.open {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  width: min(82vw, 320px);
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  color: #fff;
  background: var(--site-forest);
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform 0.25s,
    visibility 0s 0.25s;
}
.drawer.open {
  transform: none;
  visibility: visible;
  transition:
    transform 0.25s,
    visibility 0s 0s;
}
.d-head {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer .burger {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(246, 241, 231, 0.5);
  border-radius: 12px;
  color: var(--nuzul-cream);
  background: rgba(246, 241, 231, 0.08);
  cursor: pointer;
}
.drawer .nl {
  display: block;
  padding: 14px 16px;
  border-radius: 12px;
  color: #f2f6f3;
  font-size: 18px;
  font-weight: 700;
}
.drawer .nl:hover {
  background: rgba(255, 255, 255, 0.1);
}
.drawer .nl.on {
  background: rgba(246, 241, 231, 0.12);
}
.d-cta {
  margin-top: auto;
  padding-top: 18px;
  display: grid;
  gap: 10px;
}
.drawer .nl.out,
.drawer .nl.fill {
  border-radius: 999px;
  text-align: center;
}
.drawer .nl.out {
  color: var(--nuzul-cream);
  border: 1.5px solid rgba(246, 241, 231, 0.55);
}
.drawer .nl.fill {
  color: var(--nuzul-green);
  background: var(--nuzul-cream);
}

/* ---------- 7. Demo bar (only without Firebase) ---------- */
.demo-bar {
  position: relative;
  z-index: 12;
  padding: 7px 14px;
  color: #fff;
  background: #a84f37;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
}

/* ---------- 8. Home: hero and search ---------- */
/* Brand-led hero: green gradient + door-arch pattern; text and search card on the start side,
   an example WhatsApp chat on the end side (from 1024px). The header sits on top of the hero
   while body.on-hero is set (see "Header on the hero" below). */
.hero {
  --hdr: 72px; /* header height: the hero starts under the transparent header */
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--hdr));
  padding: calc(var(--hdr) + 28px) 5.5% 40px;
  padding-inline: max(5.5%, calc((100% - 1240px) / 2));
  color: #fff;
  background: radial-gradient(90% 120% at 85% 10%, #2c5446 0%, #1e3b32 45%, #142a23 100%);
}
[dir='ltr'] .hero {
  background: radial-gradient(90% 120% at 15% 10%, #2c5446 0%, #1e3b32 45%, #142a23 100%);
}
.hero-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='88' viewBox='0 0 72 88'%3E%3Cg fill='none' stroke='%23F6F1E7' stroke-width='1.6'%3E%3Cpath d='M22 70V40a14 14 0 0 1 28 0v30'/%3E%3Cpath d='M16 75h40'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 88px;
  /* Visible behind the phone, fading out towards the text (text is on the right in Arabic) */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 35%, transparent 75%);
  mask-image: linear-gradient(to right, #000 0%, #000 35%, transparent 75%);
}
[dir='ltr'] .hero-pattern {
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 35%, transparent 75%);
  mask-image: linear-gradient(to left, #000 0%, #000 35%, transparent 75%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto; /* text takes the room the phone column leaves */
  align-items: center;
  gap: 40px;
}
.hero-copy {
  max-width: 660px;
  text-align: start;
  animation: arrive 0.6s ease-out both;
}
.hero-pill {
  width: fit-content;
  margin: 0 0 16px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(246, 241, 231, 0.18);
  border-radius: 999px;
  color: #e6ece8;
  background: rgba(246, 241, 231, 0.08);
  font-size: 13px;
  font-weight: 600;
}
.hero-pill i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #5fd08f;
  box-shadow: 0 0 0 4px rgba(95, 208, 143, 0.2);
}
.hero h1 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 72px;
  font-weight: 700;
  line-height: 1.12;
}
.hero h1 span {
  display: block;
}
.hero h1 em {
  color: #e8956b;
  font-style: normal;
}
.hero-sub span {
  display: block;
}
.hero-sub {
  max-width: 660px;
  margin: 0 0 22px;
  color: #d6ded9;
  font-size: 20px;
  line-height: 1.6;
}
/* Search card */
.search-box {
  padding: 20px;
  display: grid;
  gap: 14px;
  border-radius: 18px;
  color: var(--site-ink);
  background: #fff;
  box-shadow: 0 24px 60px rgba(6, 20, 16, 0.35);
}
.f-lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--site-ink);
  font-size: 13px;
  font-weight: 700;
}
.why {
  display: grid;
  gap: 8px;
}
.why-pills {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.why-pills button,
.quick-dates button {
  min-height: 40px; /* 44px on phones */
  padding: 0 10px;
  border: 1px solid var(--site-line);
  border-radius: 999px;
  color: var(--nuzul-green);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.why-pills button:hover,
.quick-dates button:hover {
  border-color: #bdcec4;
  background: #f1f5f2;
}
.why-pills button[aria-pressed='true'],
.quick-dates button.on {
  color: #fff;
  border-color: var(--nuzul-green);
  background: var(--nuzul-green);
}
/* Fields: one grid, labels on the first line and boxes on the second, all the same height */
.s-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr) 76px;
  grid-template-areas:
    'ln lw lw lg'
    'near din dout guests';
  align-items: center;
  gap: 8px 14px;
}
/* English dates are short ("Fri, 16 Oct"), so "Near" gets the extra width */
[dir='ltr'] .s-row {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 76px;
}
.l-near {
  grid-area: ln;
}
.l-when {
  grid-area: lw;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.l-guests {
  grid-area: lg;
}
.s-row .f-lbl {
  min-height: 30px;
}
.near-sel {
  grid-area: near;
  align-self: start;
  display: grid;
  gap: 8px;
}
.d-in {
  grid-area: din;
  align-self: start;
}
.d-out {
  grid-area: dout;
  align-self: start;
}
.d-guests {
  grid-area: guests;
  align-self: start;
}
.s-row select,
.s-row input {
  width: 100%;
}
.f-lbl .pin {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--nuzul-clay);
  stroke-width: 2.2;
}
#sAreaW.area-slot-empty {
  display: none !important;
}
/* Quick dates sit on the "إمتى" label line */
.quick-dates {
  display: flex;
  gap: 4px;
}
.quick-dates button {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
}
/* Date inputs stay real (native picker, same IDs); readable text is drawn on top of them */
.search-box .d {
  position: relative;
  display: block;
}
.search-box .d::after {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-end: 11px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3B32' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search-box .d,
.search-box .near-sel,
.search-box .d-guests {
  min-width: 0; /* let grid cells shrink to their column */
}
.search-box .d input {
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
  color: transparent;
  /* iPhone (WebKit) gives date inputs a fixed minimum width and its own styling,
     which pushed them out of the card; plain appearance lets them fit. Tapping still opens the picker. */
  -webkit-appearance: none;
  appearance: none;
}
.search-box .d input::-webkit-datetime-edit {
  color: transparent;
}
.search-box .d input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  opacity: 0;
  cursor: pointer;
}
.search-box .d output {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 12px;
  inset-inline-end: 32px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--site-ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
.search-box .d output.empty {
  color: #8a9891;
  font-weight: 500;
}
.search-box #sBtn {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--nuzul-clay-deep);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.16s,
    transform 0.16s;
}
.search-box #sBtn:hover {
  background: #9e4927;
  transform: translateY(-1px);
}
.search-box .s-err {
  margin: -6px 0 0;
}
.search-box .s-err:empty {
  display: none;
}
.s-note {
  margin: -4px 0 0;
  color: var(--site-muted);
  font-size: 12px;
  text-align: center;
}
.s-note a {
  color: var(--nuzul-green);
  font-weight: 700;
}
.hero-ticks {
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
}
.hero-ticks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c9d6cf;
  font-size: 14px;
}
.hero-ticks svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: #2f8f5b;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-ticks circle {
  stroke: none;
}
/* Example chat in a phone frame: upright (sharp text), status bar, notch, WhatsApp-style chat */
.hero-visual {
  position: relative;
  padding-block: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  animation: arrive 0.7s 0.15s ease-out both;
}
.phone {
  position: relative;
  flex: 0 0 auto;
  width: 300px;
  height: 620px;
  padding: 10px;
  border-radius: 48px;
  background: linear-gradient(150deg, #33443d 0%, #0c1612 30%, #0c1612 70%, #26352f 100%);
  box-shadow:
    0 60px 90px -30px rgba(0, 0, 0, 0.65),
    0 24px 40px -20px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.14),
    inset 0 0 0 6px #050a08;
}
/* Side buttons (physical sides, same in both languages) */
.ph-btn {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: #24322d;
}
.ph-btn-1 {
  left: -3px;
  top: 118px;
  height: 26px;
}
.ph-btn-2 {
  left: -3px;
  top: 162px;
  height: 52px;
}
.ph-btn-3 {
  right: -3px;
  top: 150px;
  height: 78px;
}
.phone-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 38px;
  background: #efe7dd;
}
.ph-status {
  position: relative;
  height: 40px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
  color: #fff;
  background: #1d4a3e;
  font: 600 13px/1 'DM Sans', sans-serif;
}
.ph-island {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 88px;
  height: 25px;
  margin-left: -44px;
  border-radius: 14px;
  background: #050a08;
}
.ph-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ph-icons svg {
  height: 10px;
  fill: currentColor;
}
.chat-head {
  padding: 4px 10px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  background: #1d4a3e;
}
.ch-back {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[dir='rtl'] .ch-back {
  transform: scaleX(-1);
}
.chat-av {
  width: 34px;
  height: 34px;
  padding: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--nuzul-green);
  box-shadow: 0 0 0 1.5px rgba(246, 241, 231, 0.25);
}
.chat-av svg {
  width: 100%;
  height: 100%;
}
.ch-name {
  display: grid;
  line-height: 1.25;
}
.ch-name b {
  font-size: 14px;
}
.ch-name small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 10.5px;
}
.chat-tag {
  margin-inline-start: auto;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--nuzul-green);
  background: var(--nuzul-cream);
  font-size: 11px;
  font-weight: 700;
}
.chat {
  flex: 1;
  padding: 10px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  color: #111b21;
  font-size: 12px;
  line-height: 1.55;
  /* Faint door pattern, like a chat wallpaper */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='58' viewBox='0 0 72 88'%3E%3Cg fill='none' stroke='%231E3B32' stroke-opacity='.06' stroke-width='2'%3E%3Cpath d='M22 70V40a14 14 0 0 1 28 0v30'/%3E%3Cpath d='M16 75h40'/%3E%3C/g%3E%3C/svg%3E");
}
.chat-day {
  align-self: center;
  margin-bottom: 2px;
  padding: 2px 9px;
  border-radius: 6px;
  color: #54656f;
  background: rgba(255, 255, 255, 0.85);
  font-size: 10px;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.1);
}
.msg {
  max-width: 82%;
  padding: 6px 8px 4px;
  border-radius: 9px;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
.msg p {
  margin: 0;
}
/* Outgoing (guest) on the end side, incoming (Nuzul) on the start side, as in WhatsApp */
.msg.me {
  align-self: flex-end;
  border-start-end-radius: 2px;
  background: #d9fdd3;
}
.msg.them {
  align-self: flex-start;
  border-start-start-radius: 2px;
  background: #fff;
}
.msg.them p {
  margin-bottom: 6px;
}
.msg-meta {
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  color: #667781;
  font-size: 9.5px;
}
.ticks {
  width: 15px;
  height: 10px;
  fill: none;
  stroke: #53bdeb;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mini-unit {
  overflow: hidden;
  display: grid;
  gap: 1px;
  border: 1px solid #e3e8e5;
  border-radius: 8px;
  font-size: 11px;
}
.mini-unit > :not(.mu-img) {
  padding-inline: 8px;
}
.mini-unit b {
  font-size: 12px;
}
.mini-unit strong {
  padding-block: 4px 7px;
  color: var(--nuzul-green);
}
.mini-unit span {
  color: #5b6a63;
}
.mu-img {
  position: relative;
  height: 78px;
  margin-bottom: 5px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e3eae6 0%, #c9d6cf 100%);
}
.mu-door {
  width: 34px;
  height: 34px;
  fill: rgba(30, 59, 50, 0.22);
}
.mu-badge {
  position: absolute;
  top: 7px;
  inset-inline-start: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--nuzul-green);
  background: #fff;
  font-size: 10px;
  font-weight: 700;
}
.ph-input {
  padding: 6px 8px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #efe7dd;
}
.ph-field {
  height: 34px;
  padding: 0 14px;
  flex: 1;
  display: flex;
  align-items: center;
  border-radius: 18px;
  color: #8696a0;
  background: #fff;
  font-size: 12px;
}
.ph-mic {
  width: 34px;
  height: 34px;
  padding: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #00a884;
}
.ph-mic svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}
/* Advantages column beside the phone */
.hero-perks {
  display: grid;
  gap: 14px;
}
.perk {
  width: 220px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: 14px;
  color: var(--site-ink);
  background: #fff;
  box-shadow: 0 18px 40px rgba(6, 20, 16, 0.3);
  animation: perk-in 0.6s ease-out both;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.perk:nth-child(2) {
  animation-delay: 0.45s;
}
.perk:nth-child(3) {
  animation-delay: 0.6s;
}
.perk:first-child {
  animation-delay: 0.3s;
}
.perk:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px rgba(6, 20, 16, 0.36);
}
.perk b {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}
.perk small {
  color: var(--site-muted);
  font-size: 11px;
}
@keyframes perk-in {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
[dir='ltr'] .perk {
  animation-name: perk-in-ltr;
}
@keyframes perk-in-ltr {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .perk {
    animation: none;
  }
}
.fc-ic {
  width: 36px;
  height: 36px;
  padding: 7px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #fbeee8;
}
.fc-ic svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--nuzul-clay-deep);
  stroke-width: 2;
  stroke-linecap: round;
}
/* Medium screens: phone at 90% (zoom keeps text sharp) and a slimmer advantages column */
@media (max-width: 1399px) {
  .phone {
    zoom: 0.9;
  }
  .hero-visual {
    gap: 16px;
  }
  .perk {
    width: 180px;
    padding: 12px;
  }
  /* keeps the sub-line to two lines next to the narrower text column */
  .hero-sub {
    font-size: 18px;
  }
}
/* Not enough room beside the phone below 1200px: phone only */
@media (max-width: 1199px) {
  .hero-perks {
    display: none;
  }
}

/* Header on the hero (home page, until the visitor scrolls past it) */
.site-header {
  transition:
    background 0.2s,
    border-color 0.2s;
}
.on-hero .site-header {
  border-bottom-color: rgba(246, 241, 231, 0.12);
  background: transparent;
  backdrop-filter: none;
}
.on-hero.hero-scrolled .site-header {
  background: var(--nuzul-green);
}
.on-hero .site-header .logo {
  --logo-door: var(--nuzul-cream);
  --logo-ar: var(--nuzul-cream);
  --logo-en: #d6ded9;
  --logo-line: #5e7a6e;
}
.on-hero .site-header .nl {
  color: rgba(246, 241, 231, 0.88);
}
.on-hero .site-header .nl:hover,
.on-hero .site-header .nl.on {
  color: #fff;
  background: rgba(246, 241, 231, 0.1);
}
.on-hero .site-header .nl.out {
  color: var(--nuzul-cream);
  border-color: rgba(246, 241, 231, 0.5);
}
.on-hero .site-header .nl.fill {
  color: var(--nuzul-green);
  background: var(--nuzul-cream);
}
.on-hero .site-header .burger {
  color: var(--nuzul-cream);
  border-color: rgba(246, 241, 231, 0.55);
  background: transparent;
}

/* Phone bottom bar: home page only, under 768px */
.m-bar {
  display: none;
}

/* Tablets: one column, no phone mockup */
@media (max-width: 1023px) {
  .hero-inner {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-copy {
    max-width: 700px;
  }
  .hero-visual {
    display: none;
  }
  .hero h1 {
    font-size: 58px;
  }
}

/* Phones */
@media (max-width: 767px) {
  .hero {
    --hdr: 60px;
    padding: calc(var(--hdr) + 28px) 16px 32px;
  }
  .hero-pill {
    margin-bottom: 16px;
    font-size: 12px;
  }
  .hero h1 {
    margin-bottom: 12px;
    font-size: 42px;
  }
  .hero-sub {
    margin-bottom: 20px;
    font-size: 15px;
  }
  .search-box {
    padding: 16px;
    gap: 14px;
  }
  /* Each sentence starts its own line on phones too; long ones wrap evenly */
  .hero-sub span {
    text-wrap: balance;
  }
  .s-row,
  [dir='ltr'] .s-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'ln ln'
      'near near'
      'lw lw'
      'din dout'
      'lg lg'
      'guests guests';
  }
  .l-when {
    flex-wrap: wrap;
  }
  .quick-dates {
    flex: 1 1 100%;
  }
  .why-pills {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .why-pills button:nth-child(-n + 3) {
    grid-column: span 2;
  }
  .why-pills button:nth-child(n + 4) {
    grid-column: span 3;
  }
  .why-pills button {
    min-height: 44px;
  }
  .s-note a {
    display: inline-block;
    padding-block: 13px;
    margin-block: -13px;
  }
  .quick-dates button {
    flex: 1 1 0;
    min-height: 44px;
    font-size: 13px;
  }
  .hero-ticks {
    flex-direction: column;
    gap: 8px;
  }
  .hero-ticks li:nth-child(3) {
    display: none;
  }
  body.page-home {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }
  body.page-home .m-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 30;
    height: calc(70px + env(safe-area-inset-bottom));
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 10px;
    background: #fff;
    box-shadow: 0 -6px 24px rgba(6, 20, 16, 0.12);
  }
  .m-bar > * {
    min-height: 48px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
  }
  .mb-req {
    background: var(--nuzul-clay-deep);
  }
  .mb-wa {
    background: var(--nuzul-green);
  }
}

/* ---------- 9. Home: sections below the results ---------- */
/* "For any trip": errands first (hospital, exam, paperwork, work), then holiday */
.uses {
  margin: 0 auto;
  padding-block: 0 8px;
}
.uses h2 {
  margin: 0 0 16px;
  color: var(--site-ink);
  font-size: 22px;
  font-weight: 600;
}
.use-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.use-grid div {
  padding: 16px 18px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--site-line);
  border-radius: 7px;
  background: #fff;
}
.use-grid b {
  color: var(--site-forest);
  font-size: 15px;
}
.use-grid span {
  color: var(--site-muted);
  font-size: 12px;
  line-height: 1.7;
}

/* Full-width home bands (destinations, how booking works, owners) */
.band {
  --tl-bg: var(--site-canvas); /* behind the timeline circles */
  margin: 0 auto;
  padding-block: 56px;
}
/* One content width for every home section (1240px, same as the hero and search box),
   so headings, cards, steps and buttons start and end on the same lines. */
.units,
.uses,
.band {
  padding-inline: max(5.5%, calc((100% - 1240px) / 2));
}
.band > h2 {
  margin: 0 0 6px;
  color: var(--site-ink);
  font-size: 24px;
  font-weight: 600;
}
.band > .lead {
  margin: 0 0 24px;
}
.band.tint {
  --tl-bg: #fff;
  border-block: 1px solid var(--site-line);
  background: #fff;
}
/* Destination tiles: a photo per governorate, click filters the search */
.dest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.dest {
  position: relative;
  min-height: 210px;
  padding: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--site-forest) var(--img) center / cover no-repeat;
  text-align: start;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.dest:hover {
  transform: translateY(-3px);
  box-shadow: var(--site-shadow);
}
.dest span {
  width: 100%;
  padding: 36px 16px 14px;
  background: linear-gradient(transparent, rgba(8, 24, 20, 0.78));
  font-size: 16px;
  font-weight: 700;
}
.dest small {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 500;
}

/* ---------- 10. Unit cards and results ---------- */
.units {
  margin: 0 auto;
  padding-block: 54px 72px;
}
.units h2 {
  scroll-margin-top: 96px; /* clear of the sticky header */
  margin: 0 0 23px;
  color: var(--site-ink);
  font-size: 25px;
  font-weight: 600;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
}
.card {
  min-width: 0;
  display: block;
  overflow: hidden;
  border: 1px solid var(--site-line);
  border-radius: 7px;
  color: inherit;
  background: var(--site-paper);
  text-decoration: none;
  box-shadow: 0 5px 18px rgba(20, 49, 40, 0.04);
  cursor: pointer;
  transition:
    transform 0.22s,
    box-shadow 0.22s,
    border-color 0.22s;
  animation: arrive 0.5s ease-out both;
}
.card:nth-child(2) {
  animation-delay: 0.06s;
}
.card:nth-child(3) {
  animation-delay: 0.12s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: #b9cec3;
  box-shadow: var(--site-shadow);
}
/* Card image area: unit photo, or a coloured gradient (ph1-ph3, chosen in app.js) */
.ph {
  position: relative;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #8bc1c0;
  background-size: cover;
  background-position: center;
  font-size: 50px;
}
.ph1 {
  background-image: linear-gradient(135deg, #6d9c9a, #cad7b9);
}
.ph2 {
  background-image: linear-gradient(135deg, #789a81, #e4c574);
}
.ph3 {
  background-image: linear-gradient(135deg, #577b76, #d08d60);
}
.vacancy {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: 4px 9px;
  border-radius: 4px;
  color: #fff;
  background: rgba(21, 60, 50, 0.88);
  font-size: 11px;
  font-weight: 700;
}
.card-body {
  padding: 16px 17px 18px;
}
.card-body h3 {
  margin: 0 0 6px;
  color: var(--site-ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}
.card-body p {
  margin: 0 0 8px;
  color: var(--site-muted);
  font-size: 12px;
  text-wrap: pretty;
}
.card-body .card-location {
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 600;
}
.card-body .card-capacity {
  margin-bottom: 12px;
}
.card-foot {
  margin-bottom: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.price {
  color: var(--site-forest);
  font-size: 14px;
  font-weight: 700;
}
.card-total {
  color: var(--site-coral);
  font-size: 12px;
  font-weight: 700;
}
.badge {
  width: fit-content;
  margin-top: 12px;
  padding: 4px 8px;
  display: inline-flex;
  border-radius: 4px;
  color: #27654b;
  background: #eaf4ec;
  font-size: 10px;
  font-weight: 600;
}
#empty {
  padding: 24px 0;
}
/* Placeholder cards while the real units load */
.card.skeleton {
  pointer-events: none;
  animation: none;
}
.card.skeleton .ph,
.card.skeleton .sk {
  background: linear-gradient(90deg, #eef2ef 25%, #f7f9f8 50%, #eef2ef 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
}
.card.skeleton .sk {
  height: 12px;
  margin: 10px 0;
  border-radius: 4px;
}
.card.skeleton .sk.w60 {
  width: 60%;
}
.card.skeleton .sk.w40 {
  width: 40%;
}
/* Shown when no unit is live yet */
.soon {
  grid-column: 1 / -1;
  padding: 28px;
  display: grid;
  gap: 6px;
  border: 1px dashed var(--site-line);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}
.soon b {
  color: var(--site-forest);
  font-size: 17px;
}
.soon span {
  color: var(--site-muted);
  font-size: 13px;
}
.soon a {
  color: var(--site-forest);
  font-weight: 700;
}

/* ---------- 11. Inner pages and side photos ---------- */
.page {
  display: none;
}
.page.active {
  display: block;
  animation: reveal 0.25s ease-out both;
}
.wrap {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 50px 5.5% 72px;
}
.wrap h1 {
  margin: 0 0 11px;
  color: var(--site-forest);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.35;
}
.wrap h2 {
  margin: 32px 0 13px;
  color: var(--site-ink);
  font-size: 20px;
  font-weight: 600;
}
.lead {
  margin: 9px 0 20px;
  color: var(--site-muted);
  font-size: 14px;
  line-height: 1.9;
}
/* Content on one side, a photo of an Egyptian place on the other */
.wrap.split {
  width: min(1240px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
  align-items: start;
  gap: 48px;
}
.split-main {
  min-width: 0;
}
.split-main .card-form,
.split-main .account-panel {
  max-width: 560px;
}
.split-art {
  position: sticky;
  top: 96px;
  min-height: 560px;
  margin: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 14px;
  background: var(--site-forest) var(--img) center / cover no-repeat;
  box-shadow: var(--site-shadow);
}
.split-art figcaption {
  width: 100%;
  padding: 40px 20px 16px;
  color: #fff;
  background: linear-gradient(transparent, rgba(8, 24, 20, 0.75));
  font-size: 13px;
  font-weight: 600;
}
.split-art figcaption small {
  margin-top: 2px;
  display: block;
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  font-weight: 400;
}

/* ---------- 12. Step timeline (vertical; horizontal with .h on wide screens) ---------- */
.timeline {
  margin: 8px 0 28px;
  padding: 0;
  display: grid;
  list-style: none;
  counter-reset: tl;
}
.timeline li {
  position: relative;
  padding: 0 56px 22px 0;
  display: grid;
  gap: 3px;
  counter-increment: tl;
}
/* The numbered circle */
.timeline li::before {
  content: counter(tl, decimal-leading-zero);
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--site-forest);
  font:
    700 12px 'DM Sans',
    sans-serif;
}
/* The dashed line to the next step */
.timeline li::after {
  content: '';
  position: absolute;
  top: 42px;
  bottom: 4px;
  right: 18px;
  border-right: 2px dashed #c8d6ce;
}
.timeline li:last-child::after {
  display: none;
}
.timeline b {
  padding-top: 2px;
  color: var(--site-ink);
  font-size: 15px;
}
.timeline span {
  color: var(--site-muted);
  font-size: 13px;
  line-height: 1.7;
}

/* ---------- 13. Unit page and booking form ---------- */
.back {
  margin-bottom: 18px;
  display: inline-block;
  color: var(--site-forest);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.u-hero {
  min-height: 260px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: #fff;
  font-size: 70px;
  background-color: var(--site-blue);
  background-size: cover;
  background-position: center;
}
.u-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(270px, 0.8fr);
  align-items: start;
  gap: 28px;
}
.u-grid h1 {
  font-size: 31px;
}
.u-meta {
  margin: 7px 0 12px;
  color: var(--site-muted);
  font-size: 12px;
  line-height: 1.7;
}
.u-grid .lead {
  margin-top: 17px;
}
.chips {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
}
.chips li {
  padding: 6px 10px;
  border: 1px solid var(--site-line);
  border-radius: 4px;
  color: #53635b;
  background: #fff;
  font-size: 11px;
}
.blocked-dates li {
  color: #8a3a2c;
  border-color: #efd3cb;
  background: #fdf5f2;
}
.rules {
  padding-inline-start: 19px;
  color: var(--site-muted);
  font-size: 12px;
  line-height: 1.9;
}
/* Booking card (sticky beside the details on desktop) */
.book {
  position: sticky;
  top: 94px;
  padding: 22px;
  display: grid;
  gap: 14px;
  border: 1px solid var(--site-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(20, 49, 40, 0.08);
}
.book .price {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--site-line);
  font-size: 18px;
}
.book input {
  direction: ltr;
}
.book .btn {
  width: 100%;
  margin: 3px 0 0;
}
.book .chk {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--site-muted);
  font-size: 10px;
  line-height: 1.7;
}
.book .chk input {
  width: 15px;
  height: 15px;
  min-height: 15px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--site-forest);
}
.chk a {
  color: var(--site-forest);
}
.total {
  min-height: 1.4em;
  color: var(--site-forest);
  font-size: 13px;
  font-weight: 700;
}
/* Confirmation panel after sending a request */
.done {
  padding: 17px;
  display: grid;
  gap: 8px;
  border: 1px solid #c8decf;
  border-radius: 6px;
  color: var(--site-ink);
  background: #f1f8f3;
  line-height: 1.8;
}
.done b {
  color: var(--site-forest);
  font-size: 16px;
}
.done .acts {
  gap: 8px;
}
.done .acts .btn {
  margin: 0;
}
/* Price bar pinned to the bottom of the screen on phones */
.book-bar {
  display: none;
}

/* ---------- 14. Account page and owner tools ---------- */
.account-links {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}
.account-panel .eyebrow {
  color: var(--site-coral);
  font-size: 11px;
  font-weight: 700;
}
.account-panel h2 {
  margin: 0;
}
.account-email {
  margin-top: -8px;
  color: var(--site-muted);
  font-size: 12px;
  text-align: start;
}
.account-profile {
  padding-top: 4px;
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--site-line);
}
.account-panel > .acts .btn {
  margin: 0;
}
.account-panel > .link-btn {
  justify-self: start;
}
/* Lists of bookings, submissions and units */
.req-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}
.req {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--site-line);
  border-radius: 6px;
  background: #fff;
}
.req b {
  display: block;
  color: var(--site-ink);
  font-size: 13px;
}
.req span {
  color: var(--site-muted);
  font-size: 11px;
  line-height: 1.7;
}
.req-side {
  display: grid;
  justify-items: end;
  gap: 4px;
  flex: none;
}
/* Status pill: pill-<status> is added in account.js */
.pill {
  padding: 3px 8px;
  border-radius: 4px;
  background: #eef2f0;
  font-size: 10px !important;
  font-weight: 700;
  white-space: nowrap;
}
.pill-new,
.pill-pending {
  color: #7a5a12 !important;
  background: #fbf1d6;
}
.pill-contacted {
  color: #2b5949 !important;
  background: #e6f0f4;
}
.pill-confirmed,
.pill-approved {
  color: #27654b !important;
  background: #eaf4ec;
}
.pill-cancelled,
.pill-rejected {
  color: #8a3a2c !important;
  background: #f8e9e5;
}
/* Dashed boxes under a list row: blocked dates, owner progress, "you rated" */
.dates-box,
.step-box {
  margin: -4px 0 6px;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
  border: 1px dashed var(--site-line);
  border-radius: 6px;
  background: #fbfcfb;
  font-size: 12px;
}
.dates-box .chips {
  margin: 0;
}
.dates-box .chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip-x {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #8a3a2c;
  background: #f8e9e5;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.dates-add {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 8px;
}
.dates-add .btn {
  grid-column: 1 / -1;
  margin: 0;
}
.owner-progress {
  margin-top: 6px;
  display: flex;
  gap: 4px;
}
.owner-progress i {
  height: 5px;
  flex: 1;
  border-radius: 3px;
  background: #e2e8e4;
}
.owner-progress i.on {
  background: var(--site-forest);
}

/* ---------- 15. Ratings ---------- */
.stars {
  color: #d39b2a;
  letter-spacing: 1px;
  white-space: nowrap;
}
.rating-sum {
  margin: 8px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--site-ink);
  font-size: 13px;
  font-weight: 600;
}
.review-list {
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
}
.review-list li {
  padding: 12px 14px;
  border: 1px solid var(--site-line);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  line-height: 1.7;
}
.review-list small {
  color: var(--site-muted);
}
.review-form {
  margin-top: 6px;
  padding: 14px;
  display: grid;
  gap: 10px;
  border: 1px dashed var(--site-line);
  border-radius: 8px;
  background: #fbfcfb;
}
/* Five star buttons, always ordered 1 to 5 from left */
.star-input {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  direction: ltr;
}
.star-input button {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--site-line);
  border-radius: 8px;
  color: #c9ced0;
  background: #fff;
  font-size: 20px;
  cursor: pointer;
}
.star-input button.on {
  color: #d39b2a;
  border-color: #ecd6a6;
  background: #fdf7ea;
}

/* ---------- 16. Support (FAQ) ---------- */
details {
  margin-bottom: 9px;
  padding: 15px 16px;
  border: 1px solid var(--site-line);
  border-radius: 6px;
  background: #fff;
}
summary {
  color: var(--site-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
details p {
  margin-top: 10px;
  color: var(--site-muted);
  font-size: 12px;
  line-height: 1.8;
}

/* ---------- 17. Terms (legal draft in Arabic and English) ---------- */
html[lang='en'] .legal-ar,
html[lang='ar'] .legal-en {
  display: none;
}
.legal .note.warn {
  margin-bottom: 16px;
  border-inline-start-color: var(--site-coral);
  color: #765146;
  background: #fff5ef;
}
.legal .cl {
  padding-inline-start: 22px;
  color: var(--site-muted);
  font-size: 12px;
  line-height: 1.9;
}
.legal .cl li {
  margin-bottom: 9px;
}
.legal .cl b {
  color: var(--site-ink);
}
/* [__] gaps that still need a legal decision */
.legal mark {
  padding: 0 3px;
  border-radius: 4px;
  color: inherit;
  background: #f5e6be;
}

/* ---------- 18. Footer ---------- */
footer {
  padding: 36px 5% 20px;
  color: #dce6e0;
  background: var(--site-forest);
  font-size: 14px;
}
.f-top {
  max-width: 1240px;
  margin: 0 auto;
  padding: 34px 5.5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
}
.f-brand p {
  margin-top: 12px;
  color: #b9cbc2;
  font-size: 12px;
  white-space: nowrap;
}
.f-links {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  gap: 12px 22px;
}
.f-links a {
  color: #e3ece7;
  font-size: 11px;
  text-decoration: none;
}
.f-links a:hover {
  color: var(--nuzul-cream);
  text-decoration: underline;
}
.f-copy {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 5.5% 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #aebfb7;
  font-size: 10px;
}

/* ---------- 19. Typography and English (LTR) layout ---------- */
.hero h1,
.units h2,
.wrap h1,
.wrap h2,
.card-body h3 {
  text-wrap: balance;
}
p,
li,
summary {
  text-wrap: pretty;
  orphans: 2;
  widows: 2;
}
.u-grid [dir='ltr'],
[dir='ltr'] .f,
[dir='ltr'] .s-err {
  text-align: left;
}
[dir='ltr'] .drawer {
  left: auto;
  right: 0;
}
[dir='ltr'] .drawer:not(.open) {
  transform: translateX(100%);
}
[dir='ltr'] .timeline li {
  padding: 0 0 22px 56px;
}
[dir='ltr'] .timeline li::before {
  right: auto;
  left: 0;
}
[dir='ltr'] .timeline li::after {
  right: auto;
  left: 18px;
  border-right: 0;
  border-left: 2px dashed #c8d6ce;
}
[dir='ltr'] .star-input {
  justify-content: flex-start;
}

/* ---------- 20. Animations and responsive rules ---------- */
@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Wide screens: horizontal timeline on the home page */
@media (min-width: 901px) {
  .timeline.h {
    position: relative;
    grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
    gap: 18px;
  }
  /* One dashed line from the first circle to the last */
  .timeline.h::before {
    content: '';
    position: absolute;
    top: 19px;
    inset-inline: 19px;
    border-top: 2px dashed #c8d6ce;
  }
  .timeline.h li {
    padding: 54px 0 0;
    align-content: start; /* titles and text start on the same line in every step */
    justify-items: center;
    text-align: center;
  }
  .timeline.h li::before {
    z-index: 1;
    right: 50%;
    transform: translateX(50%);
    box-shadow: 0 0 0 7px var(--tl-bg, #fff);
  }
  [dir='ltr'] .timeline.h li::before {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .timeline.h li::after {
    display: none;
  }
  /* First and last steps line up with the section's start and end edges */
  .timeline.h li:first-child {
    justify-items: start;
    text-align: start;
  }
  .timeline.h li:last-child {
    justify-items: end;
    text-align: end;
  }
  .timeline.h li:first-child::before {
    right: 0;
    left: auto;
    transform: none;
  }
  .timeline.h li:last-child::before {
    right: auto;
    left: 0;
    transform: none;
  }
  [dir='ltr'] .timeline.h li:first-child::before {
    right: auto;
    left: 0;
    transform: none;
  }
  [dir='ltr'] .timeline.h li:last-child::before {
    right: 0;
    left: auto;
    transform: none;
  }
}

/* Tablets: photo moves above the content */
@media (max-width: 1000px) {
  .wrap.split {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .split-art {
    position: relative;
    top: auto;
    order: -1;
    min-height: 190px;
  }
  .dest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .site-header {
    padding-inline: 4%;
  }
  .site-header-inner {
    gap: 12px;
  }
  .site-header .top-nav {
    gap: 0;
  }
  .site-header .nl {
    padding-inline: 8px;
    font-size: 11px;
  }
  .units,
  .wrap {
    padding-inline: 4%;
  }
  .u-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(250px, 0.8fr);
    gap: 20px;
  }
}

/* Phones */
@media (max-width: 700px) {
  :root {
    --h: 48px; /* slightly taller touch targets */
  }
  .demo-bar {
    font-size: 10px;
  }
  .site-header {
    min-height: 60px;
    padding-inline: 16px;
  }
  .site-header-inner {
    min-height: 60px;
  }
  .site-header .top-nav {
    display: none;
  }
  .site-header #burger {
    display: inline-flex;
  }
  .site-header .logo .ar {
    font-size: 24px;
  }
  .site-header .logo-mark {
    width: 28px;
    height: 28px;
  }
  .uses {
    padding: 0 18px 8px;
  }
  .use-grid {
    grid-template-columns: 1fr;
  }
  .band {
    padding: 40px 18px;
  }
  .dest-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .dest {
    min-height: 150px;
  }
  .dest span {
    padding: 28px 12px 10px;
    font-size: 14px;
  }
  .units {
    padding: 34px 18px 48px;
  }
  .units h2 {
    margin-bottom: 16px;
    font-size: 21px;
  }
  .grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ph {
    height: 180px;
  }
  .card-body {
    padding: 13px 14px 15px;
  }
  .wrap {
    padding: 34px 18px 48px;
  }
  .wrap h1 {
    font-size: 29px;
  }
  .wrap h2 {
    margin-top: 25px;
    font-size: 18px;
  }
  .card-form {
    padding: 18px;
  }
  .u-hero {
    min-height: 240px;
  }
  .u-grid {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .u-grid h1 {
    font-size: 26px;
  }
  .book {
    position: static;
  }
  .book-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 9;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--site-line);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -6px 18px rgba(20, 49, 40, 0.08);
  }
  .book-bar .btn {
    margin: 0;
  }
  #p-unit .wrap {
    padding-bottom: 96px;
  }
  .req {
    flex-direction: column;
    align-items: stretch;
  }
  .req-side {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .f-top {
    padding: 27px 18px;
    flex-direction: column;
    gap: 22px;
  }
  .f-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .f-copy {
    padding: 13px 18px 16px;
  }
}

/* Small phones */
@media (max-width: 360px) {
  .site-header {
    padding-inline: 12px;
  }
  /* Below the 96px lockup minimum: symbol + Arabic name only */
  .site-header .logo .sep,
  .site-header .logo .en {
    display: none;
  }
  .site-header .burger {
    min-width: 38px;
    padding-inline: 8px;
  }
}