/* Villa Mouloud — standalone homepage styles (no framework).
   Tokens are inlined here so this folder is fully self-contained. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Marcellus&family=Mulish:wght@300;400;500;600;700;800&family=Markazi+Text:wght@400;500;600;700&family=Tajawal:wght@300;400;500;700;800&display=swap");

:root {
  --sand-50:#FAF6EF; --sand-100:#F4ECDF; --sand-200:#EADCC6; --sand-300:#DCC8AB; --sand-400:#C8AE8A;
  --clay-300:#DA9472; --clay-400:#C9714A; --clay-500:#B85C38; --clay-600:#9E4A2B; --clay-700:#7C3A22;
  --olive-300:#9AA07F; --olive-400:#6E7457; --olive-500:#545A40; --olive-600:#3F4530; --olive-700:#2C3122;
  --ink-900:#221D17; --ink-700:#3C342B; --ink-500:#6A5F52; --ink-300:#9C9082;
  --gold-400:#D5B069; --gold-500:#C39A4C; --gold-600:#A37F37;
  --white:#fff;
  --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-500); --text-faint:var(--ink-300);
  --border-soft:#E4D6BF; --border-medium:#D2BE9F;
  --font-display:"Cormorant Garamond",Georgia,serif; --font-wordmark:"Marcellus",serif; --font-sans:"Mulish",Arial,sans-serif;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
  --container-max:1240px; --container-pad:clamp(20px,5vw,64px); --section-gap:clamp(64px,9vw,128px);
  --shadow-sm:0 2px 8px rgba(40,28,16,.08); --shadow-md:0 10px 28px -12px rgba(40,28,16,.2);
  --shadow-lg:0 24px 60px -24px rgba(40,28,16,.3); --shadow-hero:0 40px 90px -40px rgba(30,20,12,.45);
  --shadow-inset:inset 0 1px 2px rgba(40,28,16,.06); --focus-ring:0 0 0 3px rgba(184,92,56,.28);
  --ease:cubic-bezier(.22,.61,.36,1); --dur:240ms;
}

[dir="rtl"] {
  --font-display:"Markazi Text","Cormorant Garamond",Georgia,serif;
  --font-sans:"Tajawal","Mulish",Arial,sans-serif;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--font-sans); font-size:16px; line-height:1.55; color:var(--text-body); background:var(--sand-50); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--text-strong); font-weight:600; line-height:1.08; letter-spacing:-.015em; margin:0; }
p { margin:0; text-wrap:pretty; }
a { color:var(--clay-600); text-decoration:none; }
img { display:block; }
button { font-family:inherit; }
::selection { background:var(--clay-300); color:var(--ink-900); }
.wrap { max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad); }

/* ---- Eyebrow / section intro ---- */
.eyebrow { display:flex; align-items:center; gap:12px; }
.eyebrow::before { content:""; width:32px; height:1px; background:var(--clay-500); }
.eyebrow span { font-size:11.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--clay-600); }
.eyebrow.center { justify-content:center; }
.eyebrow.inverse span { color:var(--gold-400); }
.intro { display:flex; flex-direction:column; gap:16px; max-width:640px; }
.intro.center { align-items:center; text-align:center; margin:0 auto; }
.intro h2 { font-size:clamp(2rem,3.6vw,2.9rem); }
.intro .lead { font-size:17px; line-height:1.6; color:var(--text-body); max-width:560px; }
.intro.inverse h2 { color:var(--sand-50); }
.intro.inverse .lead { color:rgba(245,239,230,.82); }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid transparent; border-radius:var(--radius-pill); font-weight:600; letter-spacing:.02em; cursor:pointer; transition:filter var(--dur) var(--ease),transform 140ms var(--ease); white-space:nowrap; text-decoration:none; }
.btn:hover { filter:brightness(.94); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.5; cursor:not-allowed; filter:none; transform:none; }
.btn-sm { padding:8px 16px; font-size:13px; min-height:36px; }
.btn-md { padding:12px 24px; font-size:14px; min-height:46px; }
.btn-lg { padding:16px 32px; font-size:15px; min-height:56px; }
.btn-primary { background:var(--clay-500); color:#FCEFE6; box-shadow:var(--shadow-sm); }
.btn-outline { background:transparent; color:var(--clay-600); border-color:var(--border-medium); }
.btn-ghost { background:transparent; color:var(--ink-700); }

/* ---- Badges ---- */
.badge { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; font-size:12px; font-weight:700; border-radius:var(--radius-pill); line-height:1.2; white-space:nowrap; }
.badge.clay { background:var(--clay-500); color:#fff; }
.badge.olive { background:var(--olive-500); color:#fff; }
.badge.gold { background:var(--gold-500); color:var(--ink-900); }

/* ---- Header ---- */
header { position:sticky; top:0; z-index:40; transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease); border-bottom:1px solid transparent; background:linear-gradient(180deg,rgba(28,22,16,.55),rgba(28,22,16,.12) 70%,rgba(28,22,16,0)); }
header.solid { background:rgba(28,22,16,.82); backdrop-filter:saturate(140%) blur(12px); border-bottom-color:rgba(255,255,255,.08); }
/* sticky still reserves flow height, pushing .hero down below it; fixed floats it over the hero photo instead */
header:has(+ .hero) { position:fixed; left:0; right:0; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px var(--container-pad); max-width:var(--container-max); margin:0 auto; }
.nav .logo img { height:44px; width:auto; }
.nav nav { display:flex; gap:28px; min-width:0; overflow:hidden; }
.nav nav a { font-size:14px; font-weight:500; color:#fff; white-space:nowrap; }
.nav nav a.active { color:var(--gold-400); }
.nav .right { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.nav .phone { font-size:14px; font-weight:600; color:var(--sand-50); direction:ltr; unicode-bidi:isolate; }

/* ---- Hero ---- */
.hero { position:relative; min-height:92vh; min-height:92svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.hero .bg { position:absolute; inset:0; z-index:0; }
.hero .bg img { width:100%; height:100%; object-fit:cover; object-position:center 65%; }
.hero .bg .scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(28,22,16,.5),rgba(28,22,16,.28) 38%,rgba(28,22,16,.82)); }
.hero .copy { position:relative; z-index:1; width:100%; padding-top:60px; }
.hero .copy .max { max-width:760px; }
.hero .kicker { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.hero .kicker::before { content:""; width:34px; height:1px; background:var(--gold-400); }
.hero .kicker span { font-size:12px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-400); }
.hero h1 { font-size:clamp(2.8rem,6vw,5rem); font-weight:500; line-height:1.04; letter-spacing:-.02em; color:var(--sand-50); text-wrap:balance; }
.hero .sub { font-size:clamp(1rem,1.4vw,1.22rem); line-height:1.6; color:rgba(250,246,239,.9); margin-top:22px; max-width:540px; }
.hero .booking { position:relative; z-index:1; width:100%; padding:40px var(--container-pad) 56px; }
.hero .perks { display:flex; gap:22px; margin-top:18px; flex-wrap:wrap; }
.hero .perks span { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:rgba(250,246,239,.92); }

/* ---- Booking bar ---- */
.booking-shell { position:relative; max-width:var(--container-max); margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.booking-bar { display:flex; align-items:stretch; gap:6px; background:var(--white); border:1px solid var(--border-soft); border-radius:var(--radius-pill); box-shadow:var(--shadow-hero); padding-block:12px; padding-inline:26px 12px; flex-wrap:wrap; }
.bf-field { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; justify-content:center; background:transparent; border:none; cursor:pointer; text-align:start; padding:0; }
.bf-cap { font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); }
.bf-val { font-size:15px; font-weight:600; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bf-val.empty { color:var(--ink-300); }
.bf-div { width:1px; align-self:stretch; background:var(--border-soft); flex:none; }
.bf-select { position:relative; display:flex; align-items:center; }
.bf-select select { appearance:none; -webkit-appearance:none; border:none; outline:none; background:transparent; font-family:var(--font-sans); font-size:15px; font-weight:600; color:var(--text-strong); padding-block:1px; padding-inline:0 22px; cursor:pointer; width:100%; }
.bf-select::after { content:"▾"; position:absolute; inset-inline-end:4px; pointer-events:none; color:var(--ink-500); font-size:12px; }
.bf-summary { min-height:22px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; color:var(--sand-50); }
.bf-summary strong { font-weight:700; }
.bf-summary .price { color:var(--gold-400); }
.bf-summary .muted { color:rgba(250,246,239,.85); font-size:13.5px; }

/* ---- Popovers ---- */
.pop { position:absolute; z-index:60; bottom:calc(100% + 14px); background:var(--white); border:1px solid var(--border-soft); box-shadow:var(--shadow-lg); }
.pop.cal { inset-inline-start:0; border-radius:var(--radius-xl); padding:22px; max-width:92vw; overflow-x:auto; }
.pop.guests { inset-inline-end:0; width:290px; max-width:84vw; border-radius:var(--radius-lg); padding:18px; display:flex; flex-direction:column; gap:16px; }
.pop.accom { inset-inline-start:0; width:260px; max-width:90vw; border-radius:var(--radius-lg); padding:8px; display:flex; flex-direction:column; gap:2px; }
.accom-opt { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 14px; border:none; border-radius:var(--radius-md); background:transparent; cursor:pointer; font-family:inherit; text-align:start; transition:background .12s; }
.accom-opt:hover { background:var(--sand-100); }
.accom-opt.accom-sel { background:var(--sand-100); font-weight:700; }
.accom-opt .accom-name { font-size:14px; font-weight:600; color:var(--text-strong); }
.accom-opt .accom-price { font-size:12px; color:var(--text-muted); white-space:nowrap; }
.pop[hidden] { display:none; }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-head .lbl { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); }
.cal-nav { width:36px; height:36px; border-radius:var(--radius-pill); border:1px solid var(--border-medium); background:var(--white); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink-700); }
.cal-nav:disabled { opacity:.4; cursor:not-allowed; }
.cal-months { display:flex; gap:28px; }
.cal-month { flex:1; min-width:252px; }
.cal-title { text-align:center; font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--text-strong); margin-bottom:12px; text-transform:capitalize; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.cal-wd { text-align:center; font-size:11px; font-weight:700; color:var(--text-faint); letter-spacing:.04em; padding-bottom:6px; }
.cal-cell { display:flex; justify-content:center; padding:2px 0; }
.cal-cell.ranged { background:#F4E1D4; }
.cal-day { width:36px; height:34px; border:none; border-radius:var(--radius-pill); background:transparent; color:var(--text-body); font-size:13.5px; font-weight:500; cursor:pointer; transition:background 140ms var(--ease); }
.cal-day:hover:not(:disabled):not(.endpoint) { background:var(--sand-200); }
.cal-day.ranged { background:#F4E1D4; color:var(--clay-700); }
.cal-day.endpoint { background:var(--clay-500); color:#fff; font-weight:700; }
.cal-day:disabled { color:var(--text-faint); text-decoration:line-through; opacity:.45; cursor:default; }
.cal-foot { display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:14px; border-top:1px solid var(--border-soft); }
.cal-clear { background:none; border:none; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--text-muted); text-decoration:underline; }
.cal-clear:disabled { text-decoration:none; opacity:.35; cursor:default; }

/* ---- Guest stepper ---- */
.step { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.step .lab b { display:block; font-size:15px; font-weight:600; color:var(--text-strong); }
.step .lab span { font-size:12.5px; color:var(--text-muted); }
.step .ctrl { display:flex; align-items:center; gap:14px; }
.step button { width:38px; height:38px; border-radius:var(--radius-pill); border:1px solid var(--border-medium); background:var(--white); color:var(--clay-600); font-size:20px; line-height:1; cursor:pointer; }
.step button:disabled { color:var(--ink-300); cursor:not-allowed; }
.step .n { min-width:22px; text-align:center; font-size:16px; font-weight:700; color:var(--text-strong); font-variant-numeric:tabular-nums; }
.step-div { height:1px; background:var(--border-soft); }

/* ---- Intro band ---- */
.intro-band { background:var(--sand-50); padding:var(--section-gap) 0; }
.intro-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,6vw,88px); align-items:center; }
.intro-grid .body { font-size:15.5px; line-height:1.72; color:var(--text-body); margin-top:20px; max-width:520px; }
.stats { display:flex; gap:36px; margin-top:36px; }
.stats .n { font-family:var(--font-display); font-size:40px; font-weight:600; color:var(--clay-600); line-height:1; }
.stats .l { font-size:13px; color:var(--text-muted); margin-top:6px; max-width:110px; }
.intro-grid .pic { position:relative; }
.intro-grid .pic img { width:100%; height:460px; object-fit:cover; border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); }
.intro-quote { position:absolute; bottom:-22px; inset-inline-start:-22px; background:var(--olive-500); color:var(--sand-50); padding:20px 26px; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); max-width:220px; font-family:var(--font-display); font-size:22px; font-weight:600; font-style:italic; }

/* ---- Features ---- */
.features { background:var(--sand-100); padding:var(--section-gap) 0; }
.features .stack { display:flex; flex-direction:column; gap:clamp(56px,8vw,104px); }
.feature-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.feature-row .pic { position:relative; overflow:hidden; border-radius:var(--radius-xl); box-shadow:var(--shadow-md); }
.feature-row .pic img { width:100%; height:420px; object-fit:cover; }
.feature-row .pic .badge { position:absolute; top:16px; inset-inline-start:16px; }
.feature-row.flip .pic { order:2; }

/* ---- Accommodations ---- */
.acc { background:var(--sand-50); padding:var(--section-gap) 0; }
.stays-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.stay { background:var(--white); border:1px solid var(--border-soft); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-sm); }
.stay .pic { position:relative; height:220px; overflow:hidden; }
.stay .pic img { width:100%; height:100%; object-fit:cover; }
.stay .pic .scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(28,22,16,0) 45%,rgba(28,22,16,.6)); }
.stay .pic .badges { position:absolute; top:14px; inset-inline-start:14px; display:flex; gap:8px; }
.stay .body { padding:22px 24px 24px; }
.stay .head { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.stay .ic { width:40px; height:40px; flex:none; border-radius:var(--radius-pill); background:var(--sand-100); display:flex; align-items:center; justify-content:center; }
.stay h3 { font-size:26px; }
.stay .tag { font-size:14.5px; color:var(--text-muted); margin-bottom:16px; }
.facts { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; }
.facts span { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-body); }
.amenities-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:64px 0 32px; }
.amenities-head h3 { font-size:clamp(1.6rem,2.6vw,2.1rem); }
.amenities-head .note { font-size:13.5px; color:var(--text-muted); }
.amenities-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px 36px; }
.amenity .gh { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.amenity .gh .ic { width:38px; height:38px; flex:none; border-radius:var(--radius-md); background:var(--sand-100); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; }
.amenity .gh h4 { font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-strong); }
.amenity ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.amenity li { display:flex; align-items:flex-start; gap:9px; font-size:14px; line-height:1.45; color:var(--text-body); }
.amenity li::before { content:""; width:5px; height:5px; margin-top:8px; flex:none; border-radius:50%; background:var(--gold-500); }
.rules-content { font-size:14px; line-height:1.6; color:var(--text-body); }
.rules-content p { margin:0 0 10px 0; }
.rules-content p:last-child { margin-bottom:0; }
.rules-content ol { margin:0 0 10px 0; padding:0 0 0 20px; }
.rules-content ol li { list-style:decimal; margin-bottom:6px; }
.rules-content ul + p, .rules-content ol + p { margin-top:10px; }

/* ---- Activities ---- */
.activities { background:var(--sand-50); padding:var(--section-gap) 0; }
.activities-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:52px; }
.card { display:flex; flex-direction:column; background:var(--white); border:1px solid var(--border-soft); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card .pic { position:relative; height:210px; overflow:hidden; }
.card .pic img { width:100%; height:100%; object-fit:cover; transition:transform 420ms var(--ease); }
.card:hover .pic img { transform:scale(1.05); }
.card .pic .badge { position:absolute; top:14px; inset-inline-start:14px; }
.card .body { padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; }
.card h3 { font-size:25px; }
.card p { font-size:14.5px; line-height:1.6; color:var(--text-body); }
.card .more { font-size:13.5px; font-weight:700; color:var(--clay-600); }

/* ---- Reviews ---- */
.reviews { background:var(--sand-100); padding:var(--section-gap) 0; }
.reviews-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap; margin-bottom:44px; }
.score { display:flex; align-items:center; gap:18px; }
.score .big { font-family:var(--font-display); font-size:64px; font-weight:600; line-height:.9; color:var(--clay-600); }
.score .meta { display:flex; flex-direction:column; gap:6px; }
.score .meta span { font-size:13.5px; color:var(--text-muted); }
.review-stage { display:flex; align-items:center; gap:22px; }
.review-card { flex:1; background:var(--white); border:1px solid var(--border-soft); border-radius:var(--radius-xl); box-shadow:var(--shadow-md); padding:clamp(28px,4vw,52px); }
.review-card .top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:20px; }
.review-card .quote { font-family:var(--font-display); font-size:clamp(1.4rem,2.3vw,1.95rem); font-style:italic; line-height:1.4; color:var(--text-strong); margin-bottom:28px; }
.review-card .who { display:flex; align-items:center; gap:14px; }
.review-card .av { width:52px; height:52px; flex:none; border-radius:var(--radius-pill); background:var(--olive-500); color:var(--sand-50); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; }
.review-card .who b { font-size:16px; font-weight:700; color:var(--text-strong); display:block; }
.review-card .who small { font-size:13.5px; color:var(--text-muted); }
.review-arrow { width:50px; height:50px; flex:none; border-radius:var(--radius-pill); border:1px solid var(--border-medium); background:var(--white); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink-700); box-shadow:var(--shadow-sm); }
.review-arrow:hover { background:var(--sand-100); }
.dots { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:30px; }
.dots button { width:10px; height:10px; padding:0; border:none; cursor:pointer; border-radius:var(--radius-pill); background:var(--sand-400); transition:width var(--dur) var(--ease),background var(--dur) var(--ease); }
.dots button.active { width:28px; background:var(--clay-500); }
/* reviews rail */
.reviews-rail { display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:none; }
.reviews-rail::-webkit-scrollbar { display:none; }
.review-slide { flex:0 0 calc(50% - 11px); scroll-snap-align:start; }
.rev-card { background:var(--white); border:1px solid var(--border-soft); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); padding:30px 30px 32px; display:flex; flex-direction:column; gap:18px; height:100%; box-sizing:border-box; }
.rev-card .top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rev-card .verified { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:var(--olive-600); }
.rev-card .quote { font-family:var(--font-display); font-size:20px; font-style:italic; line-height:1.5; color:var(--text-strong); flex:1; }
.rev-card .who { display:flex; align-items:center; gap:13px; padding-top:4px; }
.rev-card .av { width:48px; height:48px; flex:none; border-radius:var(--radius-pill); color:var(--sand-50); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; }
.rev-card .who b { font-size:15px; font-weight:700; color:var(--text-strong); display:block; }
.rev-card .who small { font-size:13px; color:var(--text-muted); }
.rail-nav { display:flex; justify-content:center; gap:12px; margin-top:26px; }
.rail-arrow { width:46px; height:46px; border-radius:var(--radius-pill); border:1px solid var(--border-medium); background:var(--white); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink-700); box-shadow:var(--shadow-sm); }
.rail-arrow:hover { background:var(--sand-100); }
.stars { display:inline-flex; gap:2px; }
.rating { display:inline-flex; align-items:center; gap:8px; }
.rating .num { font-weight:700; color:var(--text-strong); }

/* ---- Contact ---- */
.contact { background:var(--olive-600); padding:var(--section-gap) 0; }
.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,6vw,80px); align-items:start; }
.contact-info { display:flex; flex-direction:column; gap:22px; margin-top:38px; }
.contact-info .item { display:flex; gap:16px; align-items:flex-start; }
.contact-info .ic { flex:none; width:42px; height:42px; border-radius:var(--radius-pill); background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.contact-info .l { font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-400); }
.contact-info .v { font-size:15.5px; color:var(--sand-50); margin-top:4px; }
.form-card { background:var(--white); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:clamp(24px,3vw,38px); }
.form-card form { display:flex; flex-direction:column; gap:16px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--text-muted); }
.field label .req { color:var(--clay-500); }
.field input,.field select,.field textarea { font-family:var(--font-sans); font-size:15px; color:var(--text-strong); background:var(--white); border:1px solid var(--border-medium); border-radius:var(--radius-md); box-shadow:var(--shadow-inset); padding:13px 14px; outline:none; transition:border-color 140ms var(--ease),box-shadow 140ms var(--ease); }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--clay-500); box-shadow:var(--focus-ring); }
.field textarea { resize:vertical; line-height:1.55; }
.fields-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-sent { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:40px 12px; }
.form-sent .ic { width:58px; height:58px; border-radius:var(--radius-pill); background:#DCE7D4; display:flex; align-items:center; justify-content:center; }
.form-sent h3 { font-size:28px; }
.form-sent p { font-size:15px; color:var(--text-muted); max-width:320px; }

/* ---- Footer ---- */
footer { background:var(--ink-900); color:var(--sand-100); padding:72px 0 0; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,56px); }
footer img.logo { height:52px; width:auto; margin-bottom:18px; }
footer .about { font-size:14.5px; line-height:1.65; color:rgba(244,236,223,.66); max-width:320px; }
footer .social { display:flex; gap:12px; margin-top:22px; }
footer .social a { width:38px; height:38px; border-radius:var(--radius-pill); background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; }
footer .ch { font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-400); margin-bottom:16px; }
footer ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
footer ul a,footer ul li { font-size:14px; color:rgba(244,236,223,.72); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); margin-top:48px; padding:22px 0 28px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer-bottom span { font-size:13px; color:rgba(244,236,223,.5); }

/* ---- Modal ---- */
.modal-backdrop { position:fixed; inset:0; z-index:80; background:rgba(28,22,16,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:24px; animation:fade var(--dur) var(--ease); }
.modal-backdrop[hidden] { display:none; }
.modal { background:var(--white); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); max-width:440px; width:100%; padding:34px; text-align:center; animation:pop var(--dur) var(--ease); }
.modal .ic { width:56px; height:56px; border-radius:var(--radius-pill); background:#F2DCCF; display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; }
.modal h3 { font-size:30px; margin-bottom:6px; }
.modal .sub { font-size:14.5px; color:var(--text-muted); margin-bottom:22px; }
.modal .recap { text-align:start; background:var(--sand-50); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:18px 20px; display:flex; flex-direction:column; gap:12px; margin-bottom:22px; }
.modal .recap .row { display:flex; justify-content:space-between; gap:16px; }
.modal .recap .k { font-size:13px; color:var(--text-muted); }
.modal .recap .v { font-size:14px; font-weight:700; color:var(--text-strong); text-align:end; }
.modal .actions { display:flex; gap:16px; flex-wrap:wrap; margin-top:6px; }
.modal .actions .btn { flex:1; min-width:140px; padding:14px 18px; }
@keyframes fade { from{opacity:0} to{opacity:1} }
@keyframes pop { from{opacity:0;transform:translateY(12px) scale(.98)} to{opacity:1;transform:none} }

/* ---- Responsive ---- */
@media (max-width:900px) {
  .nav nav,.nav .phone { display:none; }
  .nav .right a.btn { display:none; }
  .nav-user { display:none; }
  .intro-grid,.contact-grid,.feature-row { grid-template-columns:1fr; }
  .feature-row.flip .pic { order:0; }
  .activities-grid,.footer-grid,.amenities-grid,.reviews-grid { grid-template-columns:1fr 1fr; }
  .stays-grid { grid-template-columns:1fr; }
  .hero { min-height:88vh; min-height:88svh; }
  .hero .booking { padding-top:28px; padding-bottom:40px; }
}
@media (max-width:640px) {
  .hero { min-height:auto; padding-top:104px; }
  .hero .copy { padding-top:0; }
  .hero .copy .max { max-width:none; }
  .hero .sub { max-width:none; }
  .hero .booking { padding-top:24px; padding-bottom:32px; }
  .hero .perks { gap:14px 20px; margin-top:16px; }
  .hero .perks span { font-size:13px; }
  /* Modal: the box itself scrolls, backdrop is a fixed container */
  .modal-backdrop { align-items:flex-start; overflow:hidden; padding:16px; }
  .modal { max-height:calc(100vh - 32px); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:22px 18px; }
  .modal .actions { flex-direction:column; }
  .modal .actions .btn { min-width:0; width:100%; }
  /* Verify overlay: same strategy */
  .auth-overlay { align-items:flex-start; overflow:hidden; padding:16px; }
  .verify-box { max-height:calc(100vh - 32px); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:22px 18px; align-items:stretch; }
  .verify-box .btn { width:100%; box-sizing:border-box; }
  .verify-icon,.verify-title,.verify-sub,.verify-spam,.auth-close { align-self:center; }
}
@media (max-width:560px) {
  .activities-grid,.footer-grid,.amenities-grid,.fields-2 { grid-template-columns:1fr; }
  .review-arrow { display:none; }
  .review-slide { flex:0 0 100%; }
  .stats { flex-wrap:wrap; gap:24px; }
  /* Reservation form mobile: dates row → accommodation → guests */
  .booking-bar { border-radius:var(--radius-xl); padding:8px; gap:4px; }
  .bf-div { display:none; }
  .bf-checkin,.bf-checkout { order:1; flex:0 0 calc(50% - 2px); padding:12px 14px; background:var(--sand-50); border-radius:var(--radius-md); }
  .bf-accom { order:2; flex:0 0 100%; padding:12px 14px; background:var(--sand-50); border-radius:var(--radius-md); }
  .bf-guests { order:3; flex:0 0 100%; padding:12px 14px; background:var(--sand-50); border-radius:var(--radius-md); }
  #bf-submit { order:4; flex:0 0 100%; margin-inline-start:0; }
}

/* ---- Menu FAB ---- */
.menu-fab { position:fixed; bottom:30px; inset-inline-end:24px; z-index:890; width:56px; height:56px; border-radius:50%; background:var(--clay-600); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 24px rgba(0,0,0,.35); transition:background .15s,transform .15s; }
.menu-fab:hover { background:var(--clay-700,#8b4513); transform:scale(1.08); }

/* ---- Language dropdown (FR | EN | AR) ---- */
.lang-pick { position:relative; display:flex; align-items:center; }
.lang-select {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='rgba(250,246,239,.82)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  border:1px solid rgba(255,255,255,.28); border-radius:6px; color:rgba(250,246,239,.9);
  font-size:12px; font-weight:700; cursor:pointer; padding:6px 26px 6px 11px; letter-spacing:.06em;
  text-transform:uppercase; line-height:1; transition:background-color .15s,border-color .15s;
  max-width:100%;
}
.lang-select:hover { background-color:rgba(255,255,255,.14); }
.lang-select:focus-visible { outline:2px solid rgba(255,255,255,.7); outline-offset:1px; }
.lang-select option { color:#1a1a1a; background:#fff; text-transform:none; }
/* Solid/dark headers get a white-pill look matching the previous lang-btn style */
.solid .lang-select,.lv-header .lang-select,.ph-header .lang-select,.menu-header .lang-select {
  background-color:rgba(255,255,255,.9); border-color:rgba(180,160,140,.35); color:var(--ink-700);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23241d16' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.solid .lang-select:hover,.lv-header .lang-select:hover,.ph-header .lang-select:hover,.menu-header .lang-select:hover { background-color:#fff; }
[dir="rtl"] .lang-select { padding:6px 11px 6px 26px; background-position:left 10px center; }

/* ---- Mobile hamburger ---- */
.nav-ham { display:none; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.1); border-radius:6px; cursor:pointer; padding:6px 9px; color:rgba(250,246,239,.9); transition:background .15s; }
.nav-ham:hover { background:rgba(255,255,255,.18); }
.solid .nav-ham,.lv-header .nav-ham,.ph-header .nav-ham { background:rgba(255,255,255,.9); border-color:rgba(180,160,140,.35); color:var(--ink-700); }
.solid .nav-ham:hover,.lv-header .nav-ham:hover,.ph-header .nav-ham:hover { background:#fff; }

/* ---- Mobile nav overlay ---- */
.m-nav { display:none; position:fixed; inset:0; z-index:100; background:rgba(16,11,7,.97); flex-direction:column; padding:20px 24px 36px; }
.m-nav.open { display:flex; animation:fade 180ms var(--ease,ease); }
.m-nav-top { display:flex; align-items:center; justify-content:space-between; }
.m-nav-top img { height:38px; opacity:.85; }
.m-nav-close { border:none; background:rgba(255,255,255,.08); border-radius:50%; width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:rgba(250,246,239,.75); flex-shrink:0; transition:background .15s; }
.m-nav-close:hover { background:rgba(255,255,255,.14); }
.m-nav-links { display:flex; flex-direction:column; margin-top:28px; }
.m-nav-links a { font-size:clamp(22px,8vw,30px); font-family:var(--font-display,Georgia,serif); font-weight:500; color:rgba(250,246,239,.72); padding:13px 0; border-bottom:1px solid rgba(255,255,255,.07); text-decoration:none; transition:color .15s; }
.m-nav-links a:first-child { border-top:1px solid rgba(255,255,255,.07); }
.m-nav-links a.active { color:var(--gold-400,#D5B069); }
.m-nav-links a:hover { color:rgba(250,246,239,1); }
.m-nav-foot { margin-top:auto; padding-top:24px; display:flex; flex-direction:column; gap:14px; }
.m-nav-phone { font-size:14px; font-weight:600; color:rgba(250,246,239,.4); text-decoration:none; direction:ltr; unicode-bidi:isolate; }
.m-nav-book { display:inline-flex; align-items:center; justify-content:center; padding:15px 28px; background:var(--clay-500,#B85C38); color:#fff; border-radius:999px; font-size:14px; font-weight:700; text-decoration:none; letter-spacing:.02em; }
.m-nav-logout-btn { display:none; align-items:center; justify-content:center; padding:12px 24px; border:1px solid rgba(255,255,255,.18); background:transparent; border-radius:999px; font-size:14px; font-weight:600; color:rgba(250,246,239,.55); cursor:pointer; transition:border-color .15s,color .15s; }
.m-nav-logout-btn:hover { border-color:rgba(255,255,255,.35); color:rgba(250,246,239,.9); }
@media (max-width:900px) { .nav-ham { display:inline-flex; } }

/* ---- Auth overlay ---- */
.auth-overlay { position:fixed; inset:0; z-index:100; background:rgba(28,22,16,.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:16px; animation:fade var(--dur) var(--ease); }
.auth-box { background:var(--white); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); width:100%; max-width:800px; display:grid; grid-template-columns:1fr 1.1fr; overflow:hidden; max-height:calc(100vh - 32px); animation:pop var(--dur) var(--ease); }
.auth-recap { background:var(--olive-600); padding:36px 32px; display:flex; flex-direction:column; gap:18px; min-height:0; overflow:hidden; }
.auth-recap .recap-logo { height:36px; width:auto; object-fit:contain; margin-bottom:6px; }
.auth-recap .recap-title { font-family:var(--font-display); font-size:25px; font-weight:600; color:var(--sand-50); line-height:1.15; }
.auth-recap .recap-sub { font-size:13.5px; color:rgba(250,246,239,.72); line-height:1.5; }
.auth-recap .recap-card { background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-lg); padding:16px 18px; display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.auth-recap .recap-row { display:flex; justify-content:space-between; gap:12px; }
.auth-recap .recap-k { font-size:12px; color:rgba(250,246,239,.6); }
.auth-recap .recap-v { font-size:13px; font-weight:700; color:var(--sand-50); text-align:end; }
.auth-form-side { padding:18px 26px; overflow-y:auto; min-height:0; display:flex; flex-direction:column; }
.auth-close { align-self:flex-end; width:28px; height:28px; border:none; background:var(--sand-100); border-radius:var(--radius-pill); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink-500); margin-bottom:10px; flex-shrink:0; }
.auth-close:hover { background:var(--sand-200); }
.auth-tabs { display:flex; border:1px solid var(--border-soft); border-radius:var(--radius-pill); padding:3px; margin-bottom:12px; }
.auth-tab { flex:1; padding:7px; font-size:13px; font-weight:600; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-pill); color:var(--text-muted); transition:background var(--dur) var(--ease),color var(--dur) var(--ease); }
.auth-tab.active { background:var(--clay-500); color:#fff; }
.auth-form-side form { display:flex; flex-direction:column; gap:8px; }
.auth-error-banner { background:#FEF0EB; border:1px solid #f3c4b0; border-radius:var(--radius-md); padding:11px 14px; font-size:13px; color:var(--clay-700); display:flex; align-items:flex-start; gap:9px; }
.auth-switch { text-align:center; font-size:13px; color:var(--text-muted); margin-top:6px; }
.auth-switch button { background:none; border:none; color:var(--clay-600); font-size:13px; font-weight:600; cursor:pointer; text-decoration:underline; padding:0; }
/* ---- Password toggle ---- */
.pw-wrap { position:relative; }
.pw-wrap input { padding-inline-end:44px; width:100%; box-sizing:border-box; }
.pw-eye { position:absolute; inset-inline-end:11px; top:50%; transform:translateY(-50%); border:none; background:none; cursor:pointer; color:var(--ink-300); padding:4px; display:flex; align-items:center; }
.pw-eye:hover { color:var(--ink-700); }
/* ---- Username suggestion pills ---- */
.suggestion-pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:4px; }
.suggestion-pill { padding:5px 13px; font-size:12px; font-weight:600; border:1px solid var(--border-medium); border-radius:var(--radius-pill); cursor:pointer; background:var(--white); color:var(--text-muted); transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease); }
.suggestion-pill:hover { background:var(--sand-100); color:var(--text-strong); border-color:var(--border-medium); }
.suggestion-pill.selected { background:var(--olive-500); border-color:var(--olive-500); color:#fff; }
.nav-user { display:inline-flex; flex-shrink:0; }
.nav-logout { border:none; background:transparent; cursor:pointer; padding:6px 8px; color:var(--ink-300); display:flex; align-items:center; border-radius:var(--radius-md); flex-shrink:0; }
.nav-logout:hover { color:var(--clay-600); background:var(--sand-200); }

/* ---- Email verification overlay ---- */
.verify-box { background:var(--white); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); width:100%; max-width:440px; padding:28px 32px 32px; display:flex; flex-direction:column; align-items:center; gap:14px; animation:pop var(--dur) var(--ease); }
.verify-icon { width:72px; height:72px; border-radius:50%; background:var(--sand-100); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.verify-title { font-size:1.35rem; text-align:center; }
.verify-sub { font-size:14px; color:var(--text-muted); text-align:center; line-height:1.55; }
.verify-email { color:var(--text-strong); font-weight:700; word-break:break-all; }
.verify-spam { font-size:12.5px; color:var(--text-faint); text-align:center; }
/* ---- Field error ---- */
.field.has-error input,.field.has-error select { border-color:var(--clay-500); box-shadow:0 0 0 3px rgba(184,92,56,.16); }
.field-error-msg { font-size:12px; color:var(--clay-600); margin-top:3px; }
/* ---- Booking error banner ---- */
.bk-error-banner { display:flex; align-items:flex-start; gap:12px; background:#FEF0EB; border:1px solid #f3c4b0; border-radius:var(--radius-lg); padding:14px 18px; font-size:14px; color:var(--clay-700); margin-top:12px; animation:pop var(--dur) var(--ease); }
/* ---- Button busy spinner ---- */
.btn-busy { position:relative; pointer-events:none; }
.btn-busy .btn-txt { opacity:0; }
.btn-busy::after { content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
.btn-outline.btn-busy::after { border-color:rgba(184,92,56,.25); border-top-color:var(--clay-500); }
@keyframes spin { to { transform:rotate(360deg); } }
/* ---- Done modal ---- */
.modal-done .ic { background:#D4EDCA; }
/* ---- Responsive auth ---- */
@media (max-width:640px) { .auth-box { grid-template-columns:1fr; } .auth-recap { display:none; } .auth-form-side { padding:22px 20px; } }

/* ---- Blog sidebar ---- */
.blog-sidebar { display:flex; flex-direction:column; gap:24px; position:sticky; top:96px; align-self:start; max-height:calc(100vh - 112px); overflow-y:auto; }
.sb-block { background:var(--sand-50,#faf8f5); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:20px 22px; }
.sb-title { font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); margin-bottom:14px; display:flex; align-items:center; gap:7px; }
.sb-search { display:flex; align-items:center; gap:9px; border:1px solid var(--border-medium); border-radius:var(--radius-pill); padding:9px 14px; background:var(--white); }
.sb-search input { border:none; outline:none; font-size:14px; color:var(--text-strong); background:transparent; width:100%; }
.sb-articles { display:flex; flex-direction:column; gap:14px; }
.sb-art { display:flex; align-items:center; gap:12px; cursor:pointer; border-radius:var(--radius-md); padding:4px; transition:background var(--dur) var(--ease); }
.sb-art:hover { background:var(--sand-100); }
.sb-art img { width:68px; height:52px; object-fit:cover; border-radius:var(--radius-md); flex-shrink:0; }
.sb-info h4 { font-size:13px; font-weight:600; color:var(--text-strong); line-height:1.35; margin-bottom:3px; }
.sb-info span { font-size:11.5px; color:var(--text-muted); }
.sb-cats { display:flex; flex-direction:column; gap:6px; }
.sb-cats li { display:flex; align-items:center; justify-content:space-between; font-size:13.5px; padding:6px 0; border-bottom:1px solid var(--border-soft); color:var(--text-body); cursor:pointer; transition:color var(--dur) var(--ease); }
.sb-cats li:last-child { border-bottom:none; }
.sb-cats li:hover { color:var(--clay-600); }
.sb-cats li span { font-size:11px; background:var(--sand-100); border-radius:var(--radius-pill); padding:2px 9px; font-weight:600; color:var(--text-muted); }

/* ---- Blog article content typography ---- */
.art-content p { font-size:16px; line-height:1.82; color:var(--text-body); margin-bottom:22px; }
.art-content p:last-child { margin-bottom:0; }

/* ---- Responsive blog ---- */
@media (max-width:900px) {
  .blog-sidebar { position:static; max-height:none; overflow-y:visible; }
}
@media (max-width:760px) {
  .blog-sidebar { display:none; }
}