/* =====================================================================
   Maqam design system
   Warm boutique hospitality: linen surfaces, ink type, one clay accent.
   Shared by the landing page (/) and the hotel offer (/offer).
   Fonts (Thmanyah Display + Thmanyah Sans) are embedded in each page.
   ===================================================================== */

:root{
  /* surfaces */
  --canvas:#F7F3EE;      /* linen: page background */
  --surface:#FFFFFF;     /* cards */
  --sand:#EFE7DC;        /* soft panels */
  --sand-2:#E5D9C9;
  --paper:#FBF8F4;       /* inset tiles */

  /* ink */
  --ink:#1E1B18;
  --ink-2:#4A433C;
  --muted:#7B7168;
  --faint:#A99F94;
  --line:rgba(30,27,24,.09);
  --line-2:rgba(30,27,24,.16);

  /* accents */
  --clay:#B5582F;        /* the one brand accent */
  --clay-2:#94451F;
  --clay-soft:#F4E4D8;
  --palm:#2E6A4E;        /* success, paid, done */
  --palm-soft:#E1EEE6;
  --amber:#E2A15A;       /* warm light, lit windows */
  --amber-soft:#F8E7D2;

  /* WhatsApp light */
  --wa-bg:#EFE7DE;
  --wa-in:#FFFFFF;
  --wa-out:#D9FDD3;
  --wa-link:#0A7C59;
  --wa-sys:#FFF3CF;

  /* shape + depth */
  --r-s:12px; --r:20px; --r-l:28px; --r-xl:40px;
  --shadow-1:0 1px 2px rgba(48,34,20,.05),0 2px 8px rgba(48,34,20,.04);
  --shadow-2:0 1px 2px rgba(48,34,20,.04),0 14px 34px rgba(48,34,20,.08);
  --shadow-3:0 2px 6px rgba(48,34,20,.05),0 34px 90px rgba(48,34,20,.16);

  /* type */
  --display:'Thmanyah Display',Georgia,'Times New Roman',serif;
  --text:'Thmanyah Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;

  /* dawn: the sky inside the arch */
  --dawn:linear-gradient(180deg,#F3D3B6 0%,#F1C7A5 28%,#EED7C2 62%,#F4ECE2 100%);
}

/* ---------- type ---------- */
.display,.h1,.h2,.h3{font-family:var(--display);font-weight:400;color:var(--ink);letter-spacing:-.015em}
.display{font-size:clamp(52px,7vw,104px);line-height:1.02}
.h1{font-size:clamp(44px,5.6vw,80px);line-height:1.05}
.h2{font-size:clamp(36px,4.2vw,60px);line-height:1.08}
.h3{font-size:clamp(26px,2.4vw,34px);line-height:1.15}
.display em,.h1 em,.h2 em,.h3 em{font-style:normal;color:var(--clay)}
.lead{font:400 clamp(18px,1.45vw,21px)/1.6 var(--text);color:var(--ink-2)}
.body{font:400 17px/1.6 var(--text);color:var(--ink-2)}
.small{font:400 14px/1.5 var(--text);color:var(--muted)}
.label{display:inline-flex;align-items:center;gap:10px;font:500 15px/1.2 var(--text);color:var(--clay)}
.label::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.num{font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font:500 16px var(--text);white-space:nowrap;cursor:pointer;border:0;text-decoration:none;transition:background .25s,box-shadow .25s,border-color .25s,color .25s}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 8px 24px rgba(30,27,24,.18)}
.btn-primary:hover{background:#2E2924}
.btn-secondary{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-secondary:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn-clay{background:var(--clay);color:#fff}
.btn-clay:hover{background:var(--clay-2)}
.btn-sm{height:42px;padding:0 18px;font-size:15px}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--shadow-2)}
.panel{background:var(--sand);border-radius:var(--r-xl)}
.chip{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-2);font:500 15px var(--text);color:var(--ink);white-space:nowrap}
[dir=rtl] .chip{padding:10px 10px 10px 16px}
.chip .ci{width:32px;height:32px;border-radius:50%;background:var(--clay-soft);color:var(--clay);display:grid;place-items:center;flex-shrink:0}
.chip .ci svg{width:17px;height:17px}
.chip b{font:500 14px var(--text);color:var(--palm)}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font:500 13px var(--text);color:var(--muted)}
.badge{width:48px;height:48px;border-radius:50%;background:var(--clay-soft);color:var(--clay);display:grid;place-items:center;flex-shrink:0}
.badge svg{width:22px;height:22px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font:500 13px var(--text);background:var(--palm-soft);color:var(--palm)}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.clay{background:var(--clay-soft);color:var(--clay)}
.ic{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- the arch: Maqam's window ---------- */
.arch{border-radius:999px 999px var(--r-l) var(--r-l);overflow:hidden;position:relative;background:var(--dawn)}
.arch .sun{position:absolute;left:50%;width:46%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle,#FBE6CF 0%,rgba(251,230,207,.55) 45%,rgba(251,230,207,0) 70%)}
.arch-frame{box-shadow:inset 0 0 0 1px rgba(30,27,24,.06)}
.logo-arch{fill:none;stroke:currentColor;stroke-linecap:round}

/* ---------- WhatsApp phone (light) ---------- */
.phone{position:relative;width:430px;height:880px;border-radius:64px;background:#fff;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 0 0 10px #24201C,0 0 0 11px #4B443D,0 40px 100px rgba(48,34,20,.22),0 10px 30px rgba(48,34,20,.10)}
.ph-notch{position:absolute;left:50%;top:14px;width:122px;height:35px;border-radius:20px;background:#0E0D0C;transform:translateX(-50%);z-index:6}
.ph-status{position:absolute;left:38px;right:34px;top:20px;display:flex;justify-content:space-between;font:600 17px -apple-system,system-ui,sans-serif;color:var(--ink);z-index:5;direction:ltr}
.ph-head{position:absolute;left:0;right:0;top:0;height:128px;padding:64px 20px 0;display:flex;gap:12px;align-items:center;background:#F7F6F3;border-bottom:1px solid rgba(0,0,0,.06);z-index:4}
.ph-av{width:44px;height:44px;border-radius:50%;background:var(--canvas);display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-2);flex-shrink:0;color:var(--clay)}
.ph-av svg{width:17px;height:22px;stroke-width:13}
.ph-head b{display:block;font:600 18px var(--text);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.ph-head small{font:400 13px var(--text);color:var(--muted)}
.ph-body{position:absolute;left:0;right:0;top:128px;bottom:82px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 14px 12px;overflow:hidden;
  background:radial-gradient(rgba(120,90,60,.07) 1px,transparent 1.6px) 0 0/20px 20px,var(--wa-bg)}
.ph-input{position:absolute;left:0;right:0;bottom:0;height:82px;background:#F7F6F3;display:flex;align-items:center;gap:10px;padding:0 14px 14px;border-top:1px solid rgba(0,0,0,.05)}
.ph-input span{flex:1;height:44px;border-radius:22px;background:#fff;color:#9A938B;font:400 16px var(--text);display:flex;align-items:center;padding:0 18px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.ph-input i{width:44px;height:44px;border-radius:50%;background:#1DAA61;display:block}
.row{display:flex;overflow:hidden;flex-shrink:0}
.row.out{justify-content:flex-end}
.bub{margin-top:8px;max-width:312px;padding:10px 14px 8px;border-radius:16px;font:400 17.5px/1.42 var(--text);color:#111B21;position:relative;transform-origin:0 100%;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.bub.in{background:var(--wa-in);border-start-start-radius:4px}
.bub.out{background:var(--wa-out);border-start-end-radius:4px;transform-origin:100% 100%}
[dir=rtl] .bub.in{transform-origin:100% 100%}
[dir=rtl] .bub.out{transform-origin:0 100%}
.bub .t{display:block;text-align:end;font:400 11.5px -apple-system,system-ui,sans-serif;color:#667781;margin-top:2px}
.bub.out .t::after{content:' ✓✓';color:#53BDEB}
.bub.sys{background:var(--wa-sys);color:#54470F;font-size:15.5px;border-radius:10px;box-shadow:none}
.typing .bub{padding:14px 16px;display:flex;gap:5px}
.typing .bub i{width:7px;height:7px;border-radius:50%;background:#A8A29B;animation:maqam-ty 1s infinite}
.typing .bub i:nth-child(2){animation-delay:.15s}.typing .bub i:nth-child(3){animation-delay:.3s}
@keyframes maqam-ty{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.menu{padding:0;overflow:hidden;width:296px}
.menu .mi{padding:12px 16px;border-top:1px solid rgba(0,0,0,.06);color:var(--wa-link);font-size:17px;text-align:center;position:relative}
.menu .mi:first-child{border-top:0}
.hl{position:absolute;inset:0;background:rgba(10,124,89,.10);opacity:0}
.prod{padding:5px;width:296px}
.prod .pimg{height:148px;border-radius:12px;background:radial-gradient(circle at 62% 38%,#F3D9BC,#D9A878 58%,#B9804F);display:grid;place-items:center;color:#fff;position:relative;overflow:hidden}
.prod .pimg svg{width:70px;height:70px;stroke-width:1.3}
.prod .pp{position:absolute;inset-inline-end:12px;top:12px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.92);font:600 14px var(--text);color:var(--ink)}
.prod .ptxt{padding:10px 9px 2px}
.prod .ptxt b{display:block;font-weight:600}
.prod .ptxt span{font-size:14px;color:#667781}
.prod .pbtn{margin-top:8px;border-top:1px solid rgba(0,0,0,.07);padding:11px 0 6px;text-align:center;color:var(--wa-link);font-weight:500;position:relative}
.sheet{position:absolute;left:0;right:0;bottom:0;height:410px;background:#fff;border-radius:32px 32px 0 0;padding:14px 28px 28px;z-index:7;box-shadow:0 -20px 60px rgba(48,34,20,.18)}
.sheet .hb{width:40px;height:5px;border-radius:3px;background:#D6D0C8;margin:0 auto 24px}
.sheet .sm{font:400 15px var(--text);color:var(--muted);text-align:center}
.sheet .amt{font:400 60px var(--display);text-align:center;margin:6px 0 20px;color:var(--ink)}
.sheet .amt span{font-size:26px;color:var(--muted)}
.sheet .meth{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font:400 16px var(--text);color:var(--ink-2)}
.sheet .meth svg{width:24px;height:24px;color:var(--clay)}
.sheet .meth .chg{margin-inline-start:auto;color:var(--faint)}
.paybtn{position:relative;margin-top:20px;height:60px;border-radius:18px;background:var(--ink);color:#fff;font:600 18px var(--text);overflow:hidden}
.paybtn>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px}
.paybtn .l2 i{width:24px;height:24px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:maqam-spin .7s linear infinite}
.paybtn .l3{background:var(--palm);color:#fff}
@keyframes maqam-spin{to{transform:rotate(360deg)}}
.tap{position:absolute;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:rgba(30,27,24,.12);border:1.5px solid rgba(30,27,24,.22);z-index:10;opacity:0;pointer-events:none;left:0;top:0}
.task{width:316px;padding:14px 16px 12px}
.tk-top{display:flex;justify-content:space-between;align-items:center}
.tk-badge{font:600 12px var(--text);color:var(--clay);background:var(--clay-soft);padding:4px 10px;border-radius:999px}
.tk-id{font:500 13px -apple-system,system-ui,sans-serif;color:#8A847D;direction:ltr;unicode-bidi:isolate}
.tk-room{font:400 42px/1.1 var(--display);margin:14px 0 2px;color:var(--ink)}
.tk-svc{font:500 19px var(--text)}
.tk-meta{font:400 14px var(--text);color:#667781;margin-top:4px}
.tk-state{position:relative;height:32px;margin-top:12px}
.tk-state>span{position:absolute;inset-inline-start:0;top:0;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font:500 13.5px var(--text);white-space:nowrap}
.tk-state>span::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.tk-state .s0{background:#F1EFEC;color:#6E6862}
.tk-state .s1{background:#E3F0FA;color:#2A6F9C}
.tk-state .s2{background:var(--amber-soft);color:#9A5F17}
.tk-state .s3{background:var(--palm-soft);color:var(--palm)}
.qr-row{gap:8px}
.qbtn{margin-top:8px;padding:11px 14px;border-radius:14px;background:#fff;color:var(--wa-link);font:500 16px var(--text);text-align:center;flex:1;white-space:nowrap;position:relative;overflow:hidden;box-shadow:0 1px .5px rgba(11,20,26,.13)}

/* ---------- iOS notification ---------- */
.notif{padding:16px 18px;border-radius:22px;background:rgba(255,255,255,.86);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:var(--shadow-3)}
.notif .nh{display:flex;align-items:center;gap:9px;font:500 13px var(--text);color:var(--muted);margin-bottom:6px}
.notif .nh i{width:22px;height:22px;border-radius:6px;background:#1DAA61;display:block}
.notif .nh .tm{margin-inline-start:auto}
.notif b{display:block;font:600 16px var(--text);color:var(--ink);margin-bottom:2px}
.notif p{font:400 16px/1.45 var(--text);color:var(--ink-2)}
.reply{display:inline-block;padding:10px 16px;border-radius:18px 18px 4px 18px;background:var(--wa-out);font:500 16px var(--text);color:#111B21;box-shadow:var(--shadow-1)}
[dir=rtl] .reply{border-radius:18px 18px 18px 4px}

/* ---------- guest profile ---------- */
.profile{padding:26px 28px}
.profile .ph{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.profile .ph b{font:400 26px var(--display);display:block;color:var(--ink)}
.profile .ph small{font:400 13px var(--text);color:var(--muted)}
.aff{margin-top:16px}
.aff .top{display:flex;justify-content:space-between;font:400 15px var(--text);color:var(--ink-2);margin-bottom:8px}
.aff .top b{font:600 15px var(--text);color:var(--ink)}
.aff .bar{height:6px;border-radius:4px;background:var(--sand);overflow:hidden}
.aff .bar i{display:block;height:100%;border-radius:4px;background:var(--clay);transform-origin:0 50%;transform:scaleX(0)}
[dir=rtl] .aff .bar i{transform-origin:100% 50%}
.aff.lo .bar i{background:var(--sand-2)}

/* ---------- dashboard ---------- */
.dash{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--shadow-3);display:grid;grid-template-columns:repeat(4,1fr)}
.dash-top{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dash-top b{font:400 24px var(--display);color:var(--ink);margin-inline-end:auto}
.live{display:inline-flex;align-items:center;gap:7px;font:500 13px var(--text);color:var(--palm)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--palm);animation:maqam-pulse 1.6s infinite}
@keyframes maqam-pulse{50%{opacity:.3}}
.kpi,.tile{border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);position:relative;overflow:hidden}
.kpi .k,.tile .k{font:500 14px var(--text);color:var(--muted)}
.kpi .v{font:400 clamp(34px,3.4vw,48px)/1 var(--display);margin-top:14px;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi .v small{font:400 15px var(--text);color:var(--muted);margin-inline-start:5px}
.kpi .dl{position:absolute;inset-inline-end:16px;top:16px;font:600 13px var(--text);color:var(--palm);direction:ltr;unicode-bidi:isolate}
.fi{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.fi .ico{width:38px;height:38px;border-radius:12px;background:var(--clay-soft);color:var(--clay);display:grid;place-items:center;flex-shrink:0}
.fi .ico svg{width:19px;height:19px}
.fi b{display:block;font:500 15px var(--text);color:var(--ink)}
.fi small{font:400 13px var(--text);color:var(--muted)}
.fi .am{margin-inline-start:auto;font:600 14px var(--text);color:var(--palm);direction:ltr;unicode-bidi:isolate}
.donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:16}
.legend{display:flex;flex-direction:column;gap:9px}
.legend div{display:flex;align-items:center;gap:10px;font:400 15px var(--text);color:var(--ink-2)}
.legend i{width:9px;height:9px;border-radius:3px;display:block}
.legend b{color:var(--ink);font:600 14px var(--text);margin-inline-start:auto}
/* ---------- Selection ---------- */
::selection{background:rgba(181,88,47,.24);color:inherit;text-shadow:none}
::-moz-selection{background:rgba(181,88,47,.24);color:inherit;text-shadow:none}

/* ---------- Arabic ---------- */
html[lang=ar] .display,html[lang=ar] .h1,html[lang=ar] .h2,html[lang=ar] .h3{font-weight:500;letter-spacing:0;line-height:1.3}
/* swash letters on the accent words: "الأحرف المرسلة" from the Thmanyah guide */
html[lang=ar] .display em,html[lang=ar] .h1 em,html[lang=ar] .h2 em,html[lang=ar] .h3 em{font-feature-settings:'salt' 1}
html[lang=ar] .lead,html[lang=ar] .body{line-height:1.8}
html[lang=ar] .bub{line-height:1.6}
.brand-ar{font-family:var(--display);font-feature-settings:'ss01' 1;letter-spacing:0}
[dir=rtl] .flip-rtl{transform:scaleX(-1)}
[data-hotel]{unicode-bidi:isolate}