/* ==========================================================================
   Booking request page (templates/pages/booking.html).
   Every class is prefixed booking-. Motion: transform/opacity only (selection states fade an overlay,
   the summary photo cross-fades, values tick in with page-booking.js using WAAPI opacity/translate).
   ========================================================================== */

/* the form lifts over the bottom of the hero */
body[data-page="booking"] { --booking-lift: clamp(2.75rem, 1.4rem + 4vw, 5.5rem); }
body[data-page="booking"] .page-hero__inner { padding-bottom: calc(clamp(3rem, 2rem + 4.5vw, 6.5rem) + var(--booking-lift)); }
.booking-section { padding-top: 0; padding-bottom: clamp(3.5rem, 2rem + 5vw, 7rem); }
.booking { position: relative; z-index: var(--z-raise); margin-top: calc(var(--booking-lift) * -1); }

.booking__form { display: grid; gap: clamp(1.25rem, .8rem + 1.6vw, 2rem); align-items: start; }
.booking__steps { display: grid; gap: clamp(1rem, .7rem + 1vw, 1.5rem); min-width: 0; outline: none; }
@media (min-width: 1024px) {
  .booking__form { grid-template-columns: minmax(0, 1fr) minmax(330px, 400px); }
}

/* ---- steps ---- */
.booking-step { min-width: 0; margin: 0; padding: clamp(1.3rem, .8rem + 2.2vw, 2.6rem); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-1); }
.booking-step--lead { box-shadow: var(--shadow-2); }
.booking-step__head { float: left; width: 100%; display: flex; align-items: center; gap: .9rem; padding: 0; margin: 0 0 .3rem; }
.booking-step__head + * { clear: both; }
.booking-step__num {
  display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--gold-500); color: var(--accent-ink);
  font-family: var(--font-latin); font-size: 1.2rem; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums;
}
.booking-step__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; color: var(--ink); }
:lang(en) .booking-step__title { font-weight: 600; }
.booking-step__text { margin-bottom: var(--space-m); padding-inline-start: calc(2.75rem + .9rem); color: var(--muted); font-size: var(--fs-small); line-height: 1.7; }
@media (max-width: 479px) { .booking-step__text { padding-inline-start: 0; } }

/* nights pill under the dates */
.booking-nights { display: inline-flex; align-items: center; gap: .55rem; margin-top: var(--space-s); padding: .45rem 1.05rem; border-radius: var(--r-pill); background: var(--gold-100); color: var(--gold-800); font-size: var(--fs-small); line-height: 1.5; }
.booking-nights .icon { color: var(--gold-700); }
.booking-nights strong { font-weight: 600; }

/* ---- room choice: radio cards ---- */
.booking-rooms { gap: .7rem; position: relative; }
.booking-rooms__proxy { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.booking-rooms__grid { display: grid; gap: .65rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .booking-rooms__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.booking-room {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: .95rem;
  min-height: 92px; padding: .55rem; padding-inline-end: 1rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-out);
}
/* selected: a gold frame + warm tint fade in (opacity only) */
.booking-room::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  border: 2px solid var(--gold-500); border-radius: inherit;
  background: linear-gradient(to var(--end-side), color-mix(in srgb, var(--gold-100) 85%, transparent), color-mix(in srgb, var(--gold-100) 35%, transparent));
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.booking-room:has(.booking-room__input:checked)::after { opacity: 1; }
@media (hover: hover) { .booking-room:hover { transform: translateY(-2px); } }
.booking-room:active { transform: scale(.985); }
.booking-room:has(.booking-room__input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.booking-room__input { position: absolute; top: 50%; inset-inline-start: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }

.booking-room__media { position: relative; display: block; width: 76px; aspect-ratio: 1; border-radius: calc(var(--r-md) - 5px); overflow: hidden; background: var(--stone-100); }
.booking-room__media picture, .booking-room__media img { width: 100%; height: 100%; object-fit: cover; }
.booking-room__media--icon { display: grid; place-items: center; background: var(--navy-900); color: var(--gold-400); --pattern-size: 28px; }
.booking-room__media--icon .icon { width: 28px; height: 28px; --icon-stroke: 1.4; }
.booking-room__body { display: grid; gap: .15rem; min-width: 0; }
.booking-room__name { font-weight: 600; font-size: 1rem; line-height: 1.45; color: var(--ink); }
.booking-room__meta { font-size: var(--fs-xs); line-height: 1.6; color: var(--muted); }
.booking-room__check { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); }
.booking-room__check::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: var(--gold-500); opacity: 0; scale: .4; transition: opacity var(--dur-fast) var(--ease-out), scale var(--dur-base) var(--ease-spring); }
.booking-room__check .icon { position: relative; width: 15px; height: 15px; --icon-stroke: 2.4; color: var(--navy-950); opacity: 0; scale: .5; transition: opacity var(--dur-fast) var(--ease-out), scale var(--dur-base) var(--ease-spring); }
.booking-room:has(.booking-room__input:checked) .booking-room__check::before,
.booking-room:has(.booking-room__input:checked) .booking-room__check .icon { opacity: 1; scale: 1; }
.booking-rooms:has(.booking-rooms__proxy[aria-invalid="true"]) .booking-room { border-color: var(--danger); }
/* phones: a smaller photo and ring; the ring stays beside the text like on desktop (on the photo it read as a white
   blotch rather than a choice) */
@media (max-width: 519px) {
  .booking-room { grid-template-columns: 60px minmax(0, 1fr) auto; gap: .75rem; min-height: 78px; padding-inline-end: .75rem; }
  .booking-room__media { width: 60px; }
  .booking-room__check { width: 22px; height: 22px; border-width: 1.5px; border-color: var(--gold-600); }
  .booking-room__check .icon { width: 13px; height: 13px; }
  .booking-room__name { font-size: .97rem; }
}

/* ---- guests ---- */
.booking-guests { display: grid; gap: var(--space-m) var(--space-s); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-l); padding-top: var(--space-l); border-top: 1px solid var(--line); }
.booking-guests__rooms { grid-column: 1 / -1; }
@media (min-width: 640px) { .booking-guests { grid-template-columns: repeat(3, minmax(0, 1fr)); } .booking-guests__rooms { grid-column: auto; } }
.booking-step .textarea { resize: none; } /* the native resize grip costs a one-off GPU shader compile on first paint (measured) */
.booking-guests .stepper { grid-template-columns: 46px minmax(2.5rem, 1fr) 46px; }

/* ---- summary (navy) ---- */
.booking-summary { --line: var(--line-on-dark); position: relative; color: var(--on-dark); background: var(--navy-900); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-2); }
@media (min-width: 1024px) { .booking-summary { position: sticky; top: calc(var(--header-h) + 1.25rem); } }
/* a summary taller than the screen would slide under the header while stuck: short screens keep it in the flow */
@media (min-width: 1024px) and (max-height: 820px) { .booking-summary { position: relative; top: auto; } }
.booking-summary__media { position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: var(--navy-950); }
@media (min-width: 640px) and (max-width: 1023px) { .booking-summary__media { aspect-ratio: 5 / 2; } }
/* short desktop screens (e.g. 1536×730): keep the send button inside the sticky summary's first view */
@media (min-width: 1024px) and (max-height: 820px) { .booking-summary__media { aspect-ratio: 5 / 2; } .booking-summary__row { padding: .5rem 0; } }
.booking-summary__media::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(to top, var(--navy-900) 0%, rgba(11, 29, 61, 0) 46%); }
.booking-summary__pic { position: absolute; inset: 0; }
.booking-summary__pic.is-current { z-index: 1; }
.booking-summary__pic.is-entering { z-index: 2; opacity: 0; }
.booking-summary__pic picture, .booking-summary__pic img { width: 100%; height: 100%; object-fit: cover; }
.booking-summary__pic--empty { display: grid; place-items: center; background: var(--navy-800); color: var(--gold-400); --pattern-size: 44px; }
.booking-summary__pic-mark { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; border: 1px solid rgba(194, 161, 95, .55); background: rgba(7, 21, 46, .55); }
.booking-summary__pic-mark .icon { width: 30px; height: 30px; --icon-stroke: 1.3; }
.booking-summary__body { display: grid; gap: var(--space-s); padding: clamp(1.35rem, 1rem + 1.4vw, 2rem); padding-top: .25rem; }
.booking-summary__title { font-size: var(--fs-h3); color: var(--white); }
.booking-summary__list { display: grid; margin: 0; }
.booking-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .62rem 0; border-bottom: 1px solid var(--line-on-dark); font-size: var(--fs-small); line-height: 1.6; }
.booking-summary__row:first-child { border-top: 1px solid var(--line-on-dark); }
.booking-summary__row dt { flex: none; color: var(--on-dark-muted); }
.booking-summary__row dd { margin: 0; min-width: 0; text-align: end; color: var(--on-dark); font-weight: 500; }
.booking-summary__row dd.is-empty { color: var(--on-dark-muted); font-weight: 400; }
.booking-summary__details { justify-self: start; color: var(--gold-400); font-size: var(--fs-small); }
.booking-summary__send { margin-top: var(--space-2xs); }
.booking-summary__note { font-size: var(--fs-xs); line-height: 1.75; color: var(--on-dark-soft); text-align: center; }
.booking-summary__assure { display: grid; gap: .55rem; padding-top: var(--space-s); border-top: 1px solid var(--line-on-dark); font-size: var(--fs-xs); color: var(--on-dark-soft); }
.booking-summary__assure li { display: flex; align-items: flex-start; gap: .65rem; line-height: 1.7; }
.booking-summary__assure .icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .2em; color: var(--gold-400); }
.booking-summary__consent { font-size: var(--fs-xs); line-height: 1.75; color: var(--on-dark-muted); }
.booking-summary__consent a { color: var(--gold-400); }

/* ---- done (WhatsApp opened) ---- */
.booking-done { max-width: 820px; margin-inline: auto; box-shadow: var(--shadow-2); }
.booking-done__title { max-width: 30ch; text-wrap: balance; }
.booking-done__recap { width: 100%; max-width: 32rem; margin-top: var(--space-2xs); padding: 1rem 1.25rem .6rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--stone-50); text-align: start; }
.booking-done__recap-title { margin-bottom: .3rem; font-size: var(--fs-small); font-weight: 600; color: var(--accent-ink); }
.booking-done__list { margin: 0; }
.booking-done__list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-small); line-height: 1.6; }
.booking-done__list > div:last-child { border-bottom: 0; }
.booking-done__list dt { flex: none; color: var(--muted); }
.booking-done__list dd { margin: 0; min-width: 0; text-align: end; font-weight: 500; overflow-wrap: anywhere; }
.booking-done__fallback { max-width: 34rem; font-size: var(--fs-small); color: var(--muted); }
.booking-done__actions .btn { flex: 1 1 13rem; }
@media (min-width: 720px) { .booking-done__actions .btn { flex: 0 1 auto; } }
.booking-done__more { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; }
.booking-done__link { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .35rem; border: 0; background: none; color: var(--accent-ink); font-weight: 600; font-size: var(--fs-small); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .32em; }
.booking-done__link .icon { width: 1.05em; height: 1.05em; }

/* ---- house rules ---- */
/* kept on its own compositor layer: after its reveal the eight icon cards would otherwise be re-rastered into the page
   layer mid-scroll (measured: a one-off 65–95 ms GPU stall on a first visit; 0 with the layer kept) */
.booking-policies__grid { will-change: transform; display: grid; gap: clamp(.75rem, .5rem + .8vw, 1.1rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .booking-policies__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .booking-policies__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.booking-policy { display: flex; align-items: flex-start; gap: .95rem; padding: 1.25rem 1.3rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.booking-policy__body { min-width: 0; }
.booking-policy__title { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--ink); }
.booking-policy__text { margin-top: .2rem; font-size: var(--fs-small); line-height: 1.75; color: var(--muted); }

/* ---- talk to reception ---- */
.booking-direct__inner { display: grid; justify-items: center; gap: var(--space-s); text-align: center; }
.booking-direct__title { font-size: var(--fs-h2); color: var(--white); }
.booking-direct__text { max-width: 36rem; font-size: var(--fs-lead); color: var(--on-dark-soft); }
.booking-direct__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: var(--space-xs); }
.booking-direct__num { font-weight: 500; opacity: .78; direction: ltr; unicode-bidi: isolate; font-variant-numeric: lining-nums; }
@media (max-width: 639px) { .booking-direct__actions { width: 100%; } .booking-direct__actions .btn { width: 100%; } }
@media (max-width: 380px) { .booking-direct__num { display: none; } }

/* ---------------------------------------------------------------------------------------------------------------- */
/* quick mode (page-booking.js): room + dates arrived with the link → steps 1–2 fold into one line */
.booking-quick { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.15rem; border: 1px solid var(--gold-500); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2); }
.booking-quick[hidden] { display: none; }
.booking-quick__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--gold-100); color: var(--gold-700); }
.booking-quick__body { flex: 1; min-width: 0; display: grid; gap: .1rem; font-size: var(--fs-small); line-height: 1.6; }
.booking-quick__title { font-weight: 600; color: var(--accent-ink); }
.booking-quick__text { color: var(--ink); font-weight: 500; }
.booking-quick__edit { display: inline-flex; align-items: center; gap: .4rem; flex: none; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; color: var(--ink); font-weight: 600; font-size: var(--fs-small); }
.booking-quick__edit .icon { width: 1.05em; height: 1.05em; color: var(--gold-700); }
.booking.is-quick :is([data-step="stay"], [data-step="room"]) { display: none; }
.booking.is-quick .booking-quick { animation: abyat-fade-up .5s var(--ease-out); }
.booking-nojs, .booking-nojs a { color: var(--ink); }

/* phones: no decorative key badge above the summary (the chosen room's photo is in its card already) */
@media (max-width: 1023px) { .booking-summary__media { display: none; } .booking-summary__body { padding-top: clamp(1.35rem, 1rem + 1.4vw, 2rem); } }

/* phones/tablets: the send bar (page-booking.js toggles .is-shown) */
.booking-bar { position: fixed; z-index: var(--z-float); inset-inline: 0; bottom: 0; padding: .75rem max(var(--gutter), env(safe-area-inset-left)) calc(.75rem + env(safe-area-inset-bottom)); background: rgba(7, 21, 46, .96); box-shadow: 0 -12px 30px -16px rgba(0, 0, 0, .55); opacity: 0; transform: translate3d(0, 110%, 0); transition: transform .45s var(--ease-expo), opacity .3s var(--ease-out); pointer-events: none; }
.booking-bar.is-shown { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 1024px) { .booking-bar { display: none; } }
html[data-motion="calm"] .booking-bar { transform: none; transition: opacity .25s var(--ease-out); }
html.has-bottom-bar .motion-switch--float { opacity: 0; pointer-events: none; }
/* phones: every «احجز» button lands here — a compact hero (the photo as a short strip, no intro paragraph: the send
   note in the summary says the same) so the dates of step 01 are on the first screen */
@media (max-width: 699px) {
  body[data-page="booking"] .page-hero--framed .page-hero__frame { aspect-ratio: 5 / 2; }
  body[data-page="booking"] .page-hero--framed .page-hero__copy { margin-top: -1.5rem; gap: var(--space-2xs); }
  body[data-page="booking"] .page-hero__sub { display: none; }
  body[data-page="booking"] { --booking-lift: 1.5rem; }
  body[data-page="booking"] .page-hero__inner { padding-bottom: calc(1.5rem + var(--booking-lift)); }
}
.booking-done__ref { margin-top: var(--space-2xs); }
.booking-done__copy { display: grid; justify-items: center; gap: .15rem; max-width: 34rem; }
.booking-done__copy-hint { font-size: var(--fs-xs); line-height: 1.6; color: var(--muted); }