/* Marsa PoC — hand-written, logical properties only so one sheet serves LTR and RTL.
   No physical-side properties or physical alignment keywords anywhere; use the
   -inline-* / -block-* logical forms and text-align:start. See phase-1 brief rule 10. */

/* Vendored riyal glyph — Saudi-Riyal-Font (emran-alhaddad), fonts/regular @ main.
   Licence SIL OFL 1.1 (no Reserved Font Name). saudi_riyal.woff2, 1268 bytes,
   sha256 c15a031a5a2fdee1d92da7b8d32554463c2136331283a469eaf706beb761499d.
   The file maps the glyph onto NINE codepoints (A B C D, U+20C0/20C1, U+E001/2,
   U+E900). unicode-range: U+20C1 is the ONLY thing stopping every capital A/B/C/D
   on the page from rendering as a riyal — do not remove it. It also means the
   browser fetches this file only when a price is on screen. */
@font-face {
  font-family: "SaudiRiyal";
  src: url("../fonts/saudi_riyal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+20C1;
}

/* Vendored UI font — IBM Plex Sans Arabic, npm @ibm/plex-sans-arabic@1.1.0,
   package/fonts/complete/woff2. Licence SIL OFL 1.1 (Reserved Font Name "Plex":
   files are unmodified and unrenamed). Matched Arabic + Latin weights; the file
   carries full Latin, so the English view uses it too. No unicode-range — serves
   the whole page. */
@font-face {
  /* IBMPlexSansArabic-Regular.woff2, 71904 bytes,
     sha256 74112e1b7bf2e2c547989a4e947a60cba6cd1f9156e0065670134636e717199d */
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  /* IBMPlexSansArabic-SemiBold.woff2, 76408 bytes,
     sha256 869b2acd0a9660607a2025f0fe1c640110bf23d33417509328f07722922b8063 */
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --ink: #12203a;
  --muted: #5b6b82;
  --line: #e2e7ef;
  --accent: #0a6bb0;
  --accent-ink: #ffffff;
  --badge-bg: #e7f3ea;
  --badge-ink: #1f7a43;
  --radius: 12px;
  --maxw: 1160px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* SaudiRiyal is first but its unicode-range restricts it to U+20C1 alone, so it
     supplies only the riyal glyph and never any Latin/Arabic character, wherever
     it sits in the stack. IBM Plex Sans Arabic serves both scripts; system stack
     is the fallback. */
  font-family: "SaudiRiyal", "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Header */
.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
  padding-inline: 24px;
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}
.brand { display: flex; flex-direction: column; }
.brand-name { font-size: 1.4rem; font-weight: 600; }
.brand-tagline { font-size: .85rem; color: var(--muted); }

.controls { display: flex; align-items: center; gap: 12px; }
.toggle {
  display: inline-block;
  padding-block: 6px;
  padding-inline: 14px;
  font-size: .9rem;
  color: var(--muted);
}
.lang-toggle { border: 1px solid var(--line); border-radius: 999px; }
.cur-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.cur-toggle .toggle.is-active { background: var(--accent); color: var(--accent-ink); }

/* Main */
.site-main {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-block: 28px;
  padding-inline: 24px;
}
.page-title { font-size: 1.6rem; margin-block: 0 20px; }
.results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-block: 0 20px;
}
.results-count { color: var(--muted); margin: 0; }

/* Search layout: filter aside + results. Collapses to one column when narrow. */
.search-layout {
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 720px) {
  .search-layout { grid-template-columns: 1fr; }
}

/* Narrow-screen filter toggle (CSS-only). The checkbox is hidden accessibly at
   every width — not display:none, which would drop it from the tab order. */
.filters-toggle {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
/* Above 720px the bar is always visible (D-009), so the toggle label is hidden. */
.filters-toggle-label { display: none; }
@media (max-width: 720px) {
  .filters-toggle-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    padding-inline: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    font-weight: 600;
    cursor: pointer;
  }
  /* Collapsed by default; the checkbox reveals it. display:flex (not block)
     preserves the bar's own column layout and gaps. The hide rule uses
     .search-layout > .filter-bar (specificity 0,2,0) so it outranks the base
     .filter-bar { display: flex } (0,1,0) regardless of source order — an
     order-dependent fix would break when someone appends to this file. The
     :checked rule (0,3,0) still outranks the hide rule, so the panel opens. */
  .search-layout > .filter-bar { display: none; }
  .filters-toggle:checked ~ .filter-bar { display: flex; }
}

/* Filter bar */
.filter-bar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  inset-block-start: 16px;
}
.filter-group { border: 0; margin: 0; padding: 0; }
.filter-group legend {
  font-weight: 600;
  font-size: .95rem;
  padding: 0;
  margin-block-end: 8px;
}
.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .92rem;
  margin-block: 4px;
  cursor: pointer;
}
.filter-option input { inline-size: 16px; block-size: 16px; }
.filter-hint {
  font-size: .8rem;
  color: var(--muted);
  margin-block: 6px 0;
  line-height: 1.4;
}
.filter-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-block-start: 1px solid var(--line);
  padding-block-start: 16px;
}
.btn-apply {
  font: inherit;
  font-weight: 600;
  text-align: center;
  padding-block: 10px;
  padding-inline: 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}
/* Filtering is instant under htmx, so the Apply button is redundant then; it
   stays for the no-JS path, where the .htmx-on class is never added. */
.htmx-on .btn-apply { display: none; }
.clear-all { font-size: .9rem; color: var(--accent); text-align: start; }
.active-filters { font-size: .85rem; color: var(--muted); margin: 0; }

/* Empty state — a screen a partner lands on, not an error. */
.empty-state {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding-block: 64px;
  padding-inline: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.empty-headline { font-size: 1.4rem; margin: 0; }
.empty-body {
  max-width: 42ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.empty-active { margin: 0; color: var(--muted); font-size: .9rem; }
.empty-clear {
  margin-block-start: 12px;
  font-weight: 600;
  padding-block: 10px;
  padding-inline: 24px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
}

/* Grid */
.boat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}

/* Card */
.boat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-media {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--line);
}
.card-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  /* Grow to fill the equal-height card so the button's margin-block-start:auto
     has slack to push against; cards with no daily rate absorb it as whitespace
     above the button, which is correct — they genuinely have less to say. */
  flex: 1;
}
.card-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.card-name { font-size: 1.15rem; margin: 0; }
.card-type {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
  white-space: nowrap;
}
.card-location { color: var(--muted); margin: 0; font-size: .92rem; }

.card-specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: .9rem;
  color: var(--muted);
}

.card-pricing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-block-start: 2px;
}
.from-label { font-size: .85rem; color: var(--muted); }
.price-amount { font-size: 1.15rem; font-weight: 600; }
.per-unit { font-size: .82rem; color: var(--muted); }
.price-daily { flex-basis: 100%; font-size: .95rem; }

.card-operator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  margin-block-start: 2px;
}
.badge-licensed {
  background: var(--badge-bg);
  color: var(--badge-ink);
  padding-block: 2px;
  padding-inline: 8px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
}
.operator-name { color: var(--muted); }

.card-view {
  margin-block-start: auto;
  display: block;
  text-align: center;
  padding-block: 9px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: .92rem;
}

/* The riyal glyph is supplied by the SaudiRiyal @font-face at the top of this
   file (its unicode-range restricts it to U+20C1 alone), so .riyal needs no
   font-family — the body stack handles it. Keep this class only as the hook for
   sizing/alignment against the digits, and adjust with font-size / line-height
   ONLY if the glyph sits too high or low.
   NEVER give .riyal display:inline-block, display:block, or any unicode-bidi
   value. Any of those makes the glyph an atomic inline box, which bidi treats
   as a neutral object instead of the weak ET character it is — the symbol can
   then land on the wrong side of the numeral inside the <bdi>. inline-block is
   the exact thing someone reaches for to vertically align a webfont glyph; do
   not. Keep it a plain inline span. */
.riyal { font-size: 1em; }

/* Footer */
.site-footer {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-block: 28px;
  padding-inline: 24px;
  color: var(--muted);
  font-size: .85rem;
  text-align: start;
}

/* ============================================================================
   Phase 3 — listing detail page. Logical properties only, as everywhere else.
   ============================================================================ */

.back-link {
  display: inline-block;
  color: var(--accent);
  font-size: .92rem;
  margin-block-end: 16px;
}
.section-title { font-size: 1.2rem; margin-block: 24px 12px; }

/* Gallery — CSS scroll-snap strip, no JavaScript. */
.gallery {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: 8px;
}
.gallery-img {
  flex: 0 0 auto;
  inline-size: min(80%, 520px);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  scroll-snap-align: start;
}

/* Two-column body: content + sticky booking panel; stacks when narrow. */
.detail-body {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 360px);
  gap: 32px;
  align-items: start;
  margin-block-start: 24px;
}
@media (max-width: 860px) {
  .detail-body { grid-template-columns: 1fr; }
}

.detail-name { font-size: 1.8rem; margin-block: 0 6px; }
.detail-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  color: var(--muted);
  margin-block: 0 10px;
}
.detail-type {
  color: var(--accent);
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .04em;
}
.detail-operator { display: flex; align-items: center; gap: 8px; margin-block: 0 2px; }
.detail-since { color: var(--muted); font-size: .9rem; margin: 0; }

/* Specs */
.spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 20px;
}
.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-block-end: 1px solid var(--line);
  padding-block: 6px;
}
.spec-k { color: var(--muted); }
.spec-v { font-weight: 600; text-align: end; }
.spec-wide { grid-column: 1 / -1; color: var(--muted); }

.detail-desc { margin-block: 0 8px; line-height: 1.7; }
.highlight-list {
  margin: 0;
  padding-inline-start: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.6;
}

/* Zawil notice — copy only, visually distinct so it reads as a requirement. */
.zawil-notice {
  background: #fff7e6;
  border: 1px solid #f0d9a8;
  border-radius: var(--radius);
  padding: 16px;
  margin-block-start: 24px;
}
.zawil-title { font-size: 1.05rem; margin-block: 0 6px; }

/* Booking panel */
.booking-panel { position: sticky; inset-block-start: 16px; }
.booking-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.booking-group { border: 0; margin: 0; padding: 0; }
.booking-group legend { font-weight: 600; font-size: .95rem; padding: 0; margin-block-end: 8px; }
.radio-option { display: flex; align-items: center; gap: 8px; margin-block: 5px; font-size: .92rem; cursor: pointer; }
.checkbox-option {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-block: 6px;
  font-size: .92rem;
  cursor: pointer;
}
.svc-name { flex: 1; }
.svc-price { color: var(--muted); font-size: .88rem; white-space: nowrap; }

.field, .days-field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-weight: 600; font-size: .95rem; }
.field-note { font-size: .82rem; color: var(--muted); margin-block: 0 2px; }
.booking-form select {
  font: inherit;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
}

/* Days field: in the DOM only for multi-day-capable boats, shown by CSS only
   while the multi_day radio is checked — works with and without JavaScript. */
.days-field { display: none; }
.booking-form:has(input[name="dur"][value="multi_day"]:checked) .days-field { display: flex; }

.request-booking { inline-size: 100%; }

/* Price breakdown */
.breakdown { border-block-start: 1px solid var(--line); padding-block-start: 14px; }
.bd-title { font-size: 1.05rem; margin-block: 0 10px; }
.bd-section { margin-block-end: 12px; }
.bd-heading {
  font-weight: 600;
  font-size: .8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-block: 0 4px;
}
.bd-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-block: 3px; }
.bd-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-mult { color: var(--muted); font-size: .85rem; }
.bd-totals { border-block-start: 1px solid var(--line); padding-block-start: 10px; }
.bd-total {
  font-weight: 600;
  font-size: 1.05rem;
  border-block-start: 1px solid var(--line);
  margin-block-start: 4px;
  padding-block-start: 8px;
}
.bd-usd-note { font-size: .8rem; color: var(--muted); margin-block: 8px 0; line-height: 1.5; }

/* 404 */
.not-found {
  text-align: center;
  padding-block: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.not-found-title { font-size: 1.6rem; margin: 0; }
.not-found-body { color: var(--muted); margin: 0; }
.btn-link {
  display: inline-block;
  font-weight: 600;
  padding-block: 10px;
  padding-inline: 24px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  margin-block-start: 8px;
}

/* ============================================================================
   Phase 4 — mock booking flow. Logical properties only. No card-shaped input.
   ============================================================================ */

/* Persistent demo banner — high-contrast, bold, sticky; not decoration. */
.mock-banner {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  margin: 0 0 20px;
  padding-block: 12px;
  padding-inline: 20px;
  background: #b4520a;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  border-radius: 8px;
  letter-spacing: .01em;
}
.mock-title { font-size: 1.6rem; margin-block: 0 20px; }

.mock-layout {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 380px);
  gap: 32px;
  align-items: start;
}
@media (max-width: 860px) {
  .mock-layout { grid-template-columns: 1fr; }
}

.mock-summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.summary-boat { font-size: 1.2rem; font-weight: 600; margin: 0; }
.summary-loc { color: var(--muted); margin-block: 2px 14px; }
.summary-list { margin: 0; }
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 8px;
  border-block-start: 1px solid var(--line);
}
.summary-row dt { color: var(--muted); margin: 0; }
.summary-row dd { margin: 0; font-weight: 600; text-align: end; }
.summary-services { margin: 0; padding-inline-start: 18px; font-weight: 600; }

.mock-side { display: flex; flex-direction: column; gap: 16px; }
.mock-breakdown {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  border-block-start-width: 1px; /* it's a full card here, not a divider */
}

/* No-card notice — prominent block, not small print, and it is true. */
.no-card-notice {
  margin: 0;
  padding: 14px 16px;
  background: var(--badge-bg);
  color: var(--badge-ink);
  border: 1px solid #bfe0c9;
  border-radius: 8px;
  font-weight: 600;
  line-height: 1.5;
}
.confirm-mock { inline-size: 100%; }
.mock-cancel { text-align: center; color: var(--accent); font-size: .95rem; }

/* Confirmation — the last screen; give it room. */
.confirmation {
  max-width: 46ch;
  margin-inline: auto;
  text-align: center;
  padding-block: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.confirm-title { font-size: 1.9rem; margin: 0; }
.confirm-body { margin: 0; line-height: 1.7; }
.confirm-demo { margin: 0; color: var(--muted); }

/* ============================================================================
   Phase 5 — visual pass. Mobile-first (primary target is a 390px phone).
   No template or JS changes; logical properties only; weights stay 400/600.
   ============================================================================ */

/* Typography: crisp headings in both scripts; Arabic gets more line-height. */
h1, h2, h3 { line-height: 1.25; }
html[lang="ar"] body { line-height: 1.85; }
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 { line-height: 1.4; }

/* Tighten page gutters on small phones so content isn't squeezed. */
@media (max-width: 480px) {
  .site-main { padding-inline: 16px; padding-block: 20px; }
  .site-header { padding-inline: 16px; gap: 10px; }
  .detail-body, .mock-layout, .search-layout { gap: 22px; }
  .page-title, .mock-title, .detail-name { font-size: 1.4rem; }
}

/* Finger-sized hit areas on touch devices (>= ~44px), bigger control glyphs. */
@media (pointer: coarse) {
  .filter-option, .radio-option, .checkbox-option {
    min-block-size: 44px;
    align-items: center;
  }
  .filter-option input,
  .radio-option input,
  .checkbox-option input { inline-size: 20px; block-size: 20px; }
  .booking-form select { min-block-size: 44px; }
  .toggle { padding-block: 10px; }
  .card-view, .btn-apply, .btn-link, .mock-cancel { min-block-size: 44px; }
}

/* Gallery: momentum scroll + a peek of the next image as the "more to scroll"
   hint (the 80% item width already reveals the next frame at the inline edge). */
.gallery {
  scroll-padding-inline: 0;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}
@media (max-width: 480px) {
  .gallery-img { inline-size: 82%; }
}