/* ═══════════════════════════════════════════════════════════════════════════
   Najd Travel Extranet · design system
   Visual language follows the MyHotels B2C mockups:
   deep-blue actions, white cards on cool gray, green rating badges,
   IBM Plex Sans Arabic, full RTL/LTR mirroring.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --blue-900:#172554; --blue-800:#1e3a8a; --blue-700:#1d4ed8; --blue-600:#2563eb;
  --blue-050:#eff6ff; --blue-100:#dbeafe;
  --ink:#0f172a; --ink-2:#334155; --ink-3:#64748b; --line:#e2e8f0; --line-2:#cbd5e1;
  --bg:#f1f5f9; --card:#ffffff;
  --green:#15803d; --green-bg:#dcfce7; --green-badge:#16a34a;
  --amber:#b45309; --amber-bg:#fef3c7;
  --red:#b91c1c; --red-bg:#fee2e2;
  --teal:#0d9488; --coral:#e11d48;
  --gold:#f59e0b;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 4px 14px rgba(15,23,42,.06);
  --shadow-lg:0 8px 30px rgba(15,23,42,.12);
  --r:12px; --r-sm:8px;
  --season-low:#0d9488; --season-shoulder:#f59e0b; --season-high:#e11d48;
  font-size:15px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',-apple-system,'Segoe UI',Tahoma,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:lining-nums tabular-nums;
}
.num-latin,.money,[lang=en]{font-variant-numeric:lining-nums tabular-nums}
input,select,textarea,button{font:inherit;color:inherit}
/* Western digits — must come AFTER font:inherit; Arabic font substitutes 0-9 → ٠-٩ */
.num-latin,.date-input,.date-wrap,.date-wrap input,
input[type=time],input[type=number],input[inputmode=numeric],input[inputmode=tel],
.money,.rate-badge,.score-big,.kpi>b,.tbl td.num-latin,span.num-latin,.rule-chips b,.stepper b,.rates-grid input,.set-grid .num-latin{
  font-family:"Segoe UI","IBM Plex Sans",Tahoma,Arial,sans-serif!important;
  font-variant-numeric:lining-nums tabular-nums!important;
  font-feature-settings:"lnum" 1!important;
  direction:ltr;unicode-bidi:isolate;
}
.date-wrap{display:flex;flex:1;min-width:0;direction:ltr;unicode-bidi:isolate;position:relative}
.date-input{text-align:left;letter-spacing:.02em;cursor:pointer}
.date-native{position:absolute;opacity:0;width:0;height:0;pointer-events:none;overflow:hidden}
.searchbar .date-wrap{width:100%}
.searchbar .date-wrap .date-input{width:100%;border:0;background:none;outline:0;font-weight:600}
[dir=rtl] body{letter-spacing:0}
a{color:var(--blue-700);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{vertical-align:middle}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.25}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.muted{color:var(--ink-3)} .small{font-size:.85rem} .tiny{font-size:.78rem}
.nowrap{white-space:nowrap}
.hide{display:none!important}
.grow{flex:1}

/* ── money ─────────────────────────────────────────────────────────────── */
.money{display:inline-flex;align-items:baseline;gap:.18em;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.money .sar{width:.82em;height:.92em;translate:0 .08em;flex:none}
.money b{font-weight:700}
.money .dec{font-size:.72em;font-weight:600;color:inherit;opacity:.85}
.strike{ text-decoration:line-through; opacity:.55 }

/* ── buttons & inputs ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:0;cursor:pointer;
  border-radius:var(--r-sm);padding:.62em 1.15em;font-weight:600;transition:.15s;white-space:nowrap}
.btn-primary{background:var(--blue-800);color:#fff}
.btn-primary:hover{background:var(--blue-700)}
.btn-ghost{background:#fff;border:1px solid var(--line-2);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--blue-700);color:var(--blue-700)}
.btn-danger{background:var(--red);color:#fff}
.btn-link{background:none;color:var(--blue-700);padding:.3em .4em}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-lg{padding:.8em 1.6em;font-size:1.02rem}
.btn-sm{padding:.35em .7em;font-size:.85rem}
.input,select.input,textarea.input{width:100%;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:.6em .8em;outline:none;transition:.15s}
.input:focus{border-color:var(--blue-600);box-shadow:0 0 0 3px var(--blue-100)}
label.lbl{display:block;font-size:.82rem;font-weight:600;color:var(--ink-2);margin:0 0 .3em}
.field{margin-bottom:.9rem}
.check{display:flex;align-items:center;gap:.55em;padding:.35em 0;cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--blue-700)}

/* ── header ────────────────────────────────────────────────────────────── */
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.topbar-inner{display:flex;align-items:center;gap:1.2rem;height:60px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.06rem;color:var(--blue-900)}
.brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--blue-800),var(--blue-600));
  display:grid;place-items:center;color:#fff;font-size:1.05rem;font-weight:800}
.brand small{display:block;font-weight:500;color:var(--ink-3);font-size:.68rem;line-height:1}
.brand--logo{padding:.15rem 0}
.brand-logo{height:42px;width:auto;max-width:160px;object-fit:contain;display:block}
.brand-logo--foot{height:34px;opacity:.9}
.brand-logo--login{height:72px;width:auto;max-width:220px;margin:0 auto}
.login-brand{display:flex;align-items:flex-start;justify-content:center;gap:.6rem;margin-bottom:1.2rem;position:relative}
.login-brand .login-lang{position:absolute;inset-inline-end:0;top:0}
.nav{display:flex;gap:.2rem;margin-inline-start:.6rem}
.nav a{padding:.45em .8em;border-radius:8px;color:var(--ink-2);font-weight:600;font-size:.92rem}
.nav a:hover{background:var(--blue-050);text-decoration:none}
.nav a.on{color:var(--blue-800);background:var(--blue-050)}
.topbar .spacer{flex:1}
.lang-btn{border:1px solid var(--line-2);background:#fff;border-radius:8px;padding:.35em .7em;cursor:pointer;font-weight:700;color:var(--ink-2)}
.userchip{display:flex;align-items:center;gap:.55em}
.userchip .avatar{width:32px;height:32px;border-radius:50%;background:var(--blue-100);color:var(--blue-800);display:grid;place-items:center;font-weight:800;font-size:.85rem}
.userchip .who{line-height:1.15}
.userchip .who b{display:block;font-size:.85rem}
.userchip .who span{font-size:.72rem;color:var(--ink-3)}

/* ── search pill (mockup 1) ───────────────────────────────────────────── */
.searchbar{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr auto;overflow:visible}
.searchbar .cell{display:flex;align-items:center;gap:.55em;padding:.85em 1em;border-inline-end:1px solid var(--line);position:relative;background:#f8fafc;margin:6px;border-radius:9px;border:1px solid transparent}
.searchbar .cell:focus-within{border-color:var(--blue-600);background:#fff}
.searchbar .cell svg{flex:none;color:var(--ink-3)}
.searchbar .cell input{border:0;background:none;outline:0;width:100%;font-weight:600}
.searchbar .go{margin:6px;border-radius:9px}
.searchbar .go .btn{height:100%;width:100%;font-size:1rem;border-radius:9px}
@media(max-width:900px){.searchbar{grid-template-columns:1fr 1fr}.searchbar .go{grid-column:1/-1}}

/* occupancy popover */
.occ-pop{position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:60;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:1rem;width:340px;max-width:92vw}
.occ-room{border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;margin-bottom:.7rem}
.occ-room h4{font-size:.85rem;color:var(--blue-800);margin-bottom:.4rem;display:flex;justify-content:space-between;align-items:center}
.stepper{display:flex;align-items:center;gap:.7em;justify-content:space-between;padding:.28em 0}
.stepper .name{font-size:.88rem}
.stepper .name small{display:block;color:var(--ink-3);font-size:.72rem}
.stepper .ctl{display:flex;align-items:center;gap:.6em}
.stepper button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);background:#fff;cursor:pointer;font-weight:800;color:var(--blue-800);display:grid;place-items:center}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.age-row{display:flex;gap:.4em;flex-wrap:wrap;margin-top:.3em}
.age-row select{border:1px solid var(--line-2);border-radius:7px;padding:.2em .4em;font-size:.82rem}

/* ── hero (index) ─────────────────────────────────────────────────────── */
.hero{padding:3.2rem 0 2.4rem;background:
  radial-gradient(1000px 380px at 15% -10%, #dbeafe 0%, transparent 60%),
  radial-gradient(900px 420px at 95% 0%, #ccfbf1 0%, transparent 55%),
  var(--bg)}
.hero h1{font-size:1.9rem;color:var(--blue-900);font-weight:800}
.hero p.sub{color:var(--ink-3);margin:0 0 1.4rem}
.quick{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.4em .95em;cursor:pointer;font-size:.88rem;font-weight:600;color:var(--ink-2);display:inline-flex;gap:.45em;align-items:center}
.chip:hover{border-color:var(--blue-600);color:var(--blue-800)}
.notice{display:flex;gap:.7em;align-items:flex-start;background:var(--blue-050);border:1px solid var(--blue-100);
  border-radius:12px;padding:.85em 1em;margin-top:1.2rem;font-size:.9rem;color:var(--blue-900)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin:2.2rem 0}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;box-shadow:var(--shadow)}
.tile h3{font-size:.98rem;display:flex;align-items:center;gap:.5em;color:var(--blue-900)}
.tile p{margin:.25rem 0 0;font-size:.86rem;color:var(--ink-3)}
.tile .ic{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:var(--blue-050);color:var(--blue-700);flex:none}

/* ── results layout (mockup 2) ────────────────────────────────────────── */
.results-wrap{display:grid;grid-template-columns:262px 1fr;gap:1.2rem;padding:1.2rem 0 3rem}
@media(max-width:920px){.results-wrap{grid-template-columns:1fr}.filters{order:2}}
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem;align-self:start;position:sticky;top:74px}
.filters h3{font-size:.95rem;display:flex;justify-content:space-between;align-items:center}
.f-group{border-top:1px solid var(--line);padding:.8rem 0}
.f-group h4{font-size:.83rem;color:var(--ink-2);margin-bottom:.5rem}
.stars-row{color:var(--gold);letter-spacing:.05em}
.result-head{display:flex;align-items:center;gap:1rem;margin-bottom:.9rem;flex-wrap:wrap}
.result-head .count{font-weight:700}
.sorts{display:flex;gap:.4rem;margin-inline-start:auto}
.sorts button{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:.35em .9em;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--ink-2)}
.sorts button.on{border-color:var(--blue-700);color:var(--blue-800);background:var(--blue-050)}

.hcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  display:grid;grid-template-columns:250px 1fr 218px;overflow:hidden;margin-bottom:1rem;position:relative}
@media(max-width:760px){.hcard{grid-template-columns:1fr}.hcard .himg{height:180px}}
.hcard .himg{position:relative;min-height:196px;background:var(--blue-100)}
.hcard .himg svg{width:100%;height:100%;display:block;object-fit:cover;position:absolute;inset:0}
.hcard .hbody{padding:1rem 1.1rem;min-width:0}
.hcard .hbody h3{font-size:1.08rem;color:var(--ink)}
.hcard .hbody h3 a{color:inherit}
.stars{color:var(--gold);font-size:.85rem;letter-spacing:.1em}
.locline{display:flex;align-items:center;gap:.35em;color:var(--ink-3);font-size:.85rem;margin:.15rem 0 .5rem}
.ticks{display:flex;flex-wrap:wrap;gap:.35em .9em;margin-top:.4rem}
.ticks span{display:inline-flex;align-items:center;gap:.35em;font-size:.8rem;color:var(--green)}
.hcard .hprice{border-inline-start:1px solid var(--line);padding:1rem;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:.15rem;background:#fcfdff}
[dir=rtl] .hcard .hprice{align-items:flex-start}
.rate-badge{display:inline-flex;align-items:center;gap:.5em;margin-bottom:.35rem}
.rate-badge .word{font-size:.8rem;font-weight:700;color:var(--green)}
.rate-badge .word small{display:block;font-weight:500;color:var(--ink-3);font-size:.68rem}
.rate-badge .num{background:var(--green-badge);color:#fff;font-weight:800;border-radius:8px 8px 8px 0;padding:.25em .5em;font-size:.9rem}
[dir=rtl] .rate-badge .num{border-radius:8px 8px 0 8px}
.hprice .total-lbl{font-size:.74rem;color:var(--ink-3)}
.hprice .amount{font-size:1.5rem;font-weight:800;color:var(--ink)}
.hprice .net-line{font-size:.76rem;color:var(--ink-3)}
.hprice .btn{margin-top:.6rem;width:100%}
.offer-ribbon{position:absolute;top:12px;inset-inline-start:-1px;background:linear-gradient(90deg,#059669,#10b981);color:#fff;
  font-size:.74rem;font-weight:700;padding:.3em .8em;border-radius:0 999px 999px 0;box-shadow:var(--shadow)}
[dir=rtl] .offer-ribbon{border-radius:999px 0 0 999px}
.onreq-pill{background:var(--amber-bg);color:var(--amber);font-size:.72rem;font-weight:700;border-radius:999px;padding:.2em .7em}

/* ── hotel page ─────────────────────────────────────────────────────── */
.hotel-page{display:flex;flex-direction:column;gap:0}
.hotel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.25rem 2rem;flex-wrap:wrap;
  width:100%;padding:0 0 1rem;margin:0 0 .25rem;border-bottom:1px solid var(--line)}
.hotel-head__main{flex:1;min-width:0;max-width:100%}
.hotel-head h1{margin:0 0 .35rem;font-size:clamp(1.15rem,2.5vw,1.55rem);line-height:1.35;word-break:break-word}
.hotel-head h1 .stars{font-size:.85em;color:var(--amber);margin-inline-start:.35em;white-space:nowrap}
.hotel-head__score{display:flex;align-items:center;gap:.65rem;flex-shrink:0;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:.55rem .75rem;box-shadow:var(--shadow)}
.hotel-head__score-text{text-align:end;line-height:1.25}
.hotel-head__score-word{font-weight:700;color:var(--green);font-size:.88rem}
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:minmax(140px,1fr) minmax(140px,1fr);
  gap:10px;margin:1rem 0;min-height:0;max-height:min(52vh,360px)}
.gallery .g{border-radius:12px;overflow:hidden;position:relative;background:var(--blue-100);min-height:0;min-width:0}
.gallery .g:first-child{grid-row:1/3}
.gallery .g svg{display:block;width:100%;height:100%;object-fit:cover}
.gallery .g img{display:block;width:100%;height:100%;object-fit:cover}
.hotel-meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:.65rem;align-items:center}
.hotel-meta__item{font-size:.82rem;color:var(--ink-2);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.35em .65em}
.hotel-meta__item b{color:var(--ink-3);font-weight:600;margin-inline-end:.35em}
.hotel-meta__map{font-size:.82rem;font-weight:600;color:var(--blue-700);text-decoration:none;padding:.35em .65em;border:1px solid var(--blue-100);border-radius:8px;background:var(--blue-050)}
.hotel-meta__map:hover{text-decoration:underline}
.hotel-about-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:.5rem}
.hotel-about-meta p{margin:.25rem 0 0;line-height:1.6;color:var(--ink-2)}
.hotel-about-meta a{color:var(--blue-700);word-break:break-all}
@media(max-width:760px){
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:130px 130px;max-height:none}
  .gallery .g:first-child{grid-column:1/-1;grid-row:auto;height:160px}
  .hotel-head__score{width:100%;justify-content:space-between}
}
.gallery--3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;max-height:min(48vh,340px)}
.gallery--3 .g:first-child{grid-row:1/3}
.gallery--3 .g:nth-child(n+2){min-height:0}
.gallery--many{grid-template-columns:repeat(3,1fr);grid-template-rows:none;grid-auto-rows:120px;max-height:none}
.gallery--many .g:first-child{grid-column:1/-1;grid-row:auto;height:min(42vh,280px)}
.gallery-more{position:absolute;inset:0;background:rgba(15,23,42,.52);color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:700;pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.searchbar .cell-btn{border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:inherit;width:100%}
@media(max-width:760px){
  .gallery--3{grid-template-columns:1fr;grid-template-rows:180px 120px 120px}
  .gallery--3 .g:first-child{grid-row:auto;height:180px}
}
.review-strip{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.85rem 1rem;margin:0 0 1rem}
.review-strip__label{font-size:.82rem;font-weight:700;color:var(--ink-2);white-space:nowrap}
.score-big{background:var(--green-badge);color:#fff;border-radius:10px;min-width:52px;min-height:52px;
  display:grid;place-items:center;font-weight:800;font-size:1.25rem;padding:.35em .55em;line-height:1}
.subscores{display:flex;gap:.75rem 1.25rem;align-items:center;flex-wrap:wrap;margin-inline-start:auto}
.subscores .s{display:inline-flex;align-items:center;gap:.45em;font-size:.82rem;color:var(--ink-2);white-space:nowrap}
.subscores .s b{background:var(--green-bg);color:var(--green);border-radius:6px;padding:.15em .5em;font-weight:800;font-size:.78rem}
.tabs{display:flex;gap:1.4rem;border-bottom:1px solid var(--line);margin:0 0 1.1rem;overflow-x:auto;flex-shrink:0}
.tabs button{background:none;border:0;padding:.7em 2px;cursor:pointer;font-weight:600;color:var(--ink-3);border-bottom:2.5px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--blue-800);border-color:var(--blue-800)}

/* room options table */
.rooms-table{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:2.2rem}
.rt-head{display:grid;grid-template-columns:1.25fr 1.5fr .9fr;background:#f8fafc;border-bottom:1px solid var(--line);
  font-size:.8rem;font-weight:700;color:var(--ink-3);padding:.7em 1.1em;gap:1rem}
.rt-group{border-bottom:1px solid var(--line)}
.rt-group:last-child{border-bottom:0}
.rt-group>.gname{background:#fbfcfe;padding:.6em 1.1em;font-weight:700;color:var(--blue-900);border-bottom:1px solid var(--line);display:flex;gap:.7em;align-items:center;flex-wrap:wrap}
.rt-row{display:grid;grid-template-columns:1.25fr 1.5fr .9fr;gap:1rem;padding:1em 1.1em;border-bottom:1px dashed var(--line)}
.rt-row:last-child{border-bottom:0}
@media(max-width:820px){.rt-head{display:none}.rt-row{grid-template-columns:1fr}}
.rt-room .rimg{width:120px;height:84px;border-radius:9px;overflow:hidden;background:var(--blue-100);position:relative;float:inline-start;margin-inline-end:.8em}
.rt-room .rimg svg{position:absolute;inset:0;width:100%;height:100%}
.rt-room .meta{font-size:.8rem;color:var(--ink-3);display:flex;flex-direction:column;gap:.15em;margin-top:.2em}
.rt-room .meta span{display:flex;align-items:center;gap:.4em}
.plan-name{font-weight:700;display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.pct-chip{background:var(--green-bg);color:var(--green);font-weight:800;font-size:.76rem;border-radius:999px;padding:.15em .6em}
.plan-lines{margin:.35em 0 0;padding:0;list-style:none;font-size:.8rem;display:flex;flex-direction:column;gap:.2rem}
.plan-lines span{display:flex;gap:.45em;align-items:flex-start}
.plan-lines li{display:flex;gap:.45em;align-items:flex-start;margin:.18em 0}
.plan-lines .ok{color:var(--green)}
.plan-lines .warn{color:var(--amber)}
.plan-lines .info{color:var(--ink-3)}
.rt-price{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
[dir=rtl] .rt-price{align-items:flex-start}
.rt-price .amount{font-size:1.28rem;font-weight:800}
.rt-price .btn{margin-top:.45rem;min-width:120px}
.unavail{color:var(--red);background:var(--red-bg);border-radius:8px;padding:.5em .8em;font-size:.84rem;display:inline-flex;gap:.5em;align-items:center}

/* ── rate DNA strip (signature) ───────────────────────────────────────── */
.dna{display:flex;gap:2px;margin-top:.45em;direction:ltr}
.dna i{flex:1;height:9px;border-radius:3px;min-width:7px;position:relative;cursor:default;opacity:.92}
.dna i.low{background:var(--season-low)} .dna i.shoulder{background:var(--season-shoulder)} .dna i.high{background:var(--season-high)}
.dna i.wknd::after{content:"";position:absolute;inset-inline:0;top:-3px;height:2px;border-radius:2px;background:var(--blue-800);opacity:.55}
.dna i:hover{transform:scaleY(1.5)}
.dna-legend{display:flex;gap:1em;font-size:.7rem;color:var(--ink-3);margin-top:.3em;flex-wrap:wrap}
.dna-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:.3em;vertical-align:-1px}
.dna-tip{position:fixed;z-index:90;background:var(--ink);color:#fff;border-radius:8px;padding:.45em .7em;font-size:.75rem;pointer-events:none;box-shadow:var(--shadow-lg);direction:inherit}

/* ── book page (mockup 4) ─────────────────────────────────────────────── */
.book-strip{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1.1rem;display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;margin:1.1rem 0}
.book-strip .kv b{display:block;font-size:.72rem;color:var(--ink-3);font-weight:600}
.book-strip .price{margin-inline-start:auto;text-align:end}
.book-strip .price .amount{font-size:1.35rem;font-weight:800}
.section{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem;margin-bottom:1.1rem}
.section>h2{font-size:1.06rem;margin-bottom:.9rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.grid3{display:grid;grid-template-columns:.7fr 1fr 1fr;gap:.9rem}
@media(max-width:680px){.grid2,.grid3{grid-template-columns:1fr}}
.guest-block{border:1px solid var(--line);border-radius:10px;padding:.9rem;margin-bottom:.8rem;background:#fbfcfe}
.guest-block h3{font-size:.9rem;color:var(--blue-900);display:flex;justify-content:space-between}
.charcount{font-size:.75rem;color:var(--ink-3);text-align:end}
.warn-box{display:flex;gap:.6em;background:var(--amber-bg);border:1px solid #fde68a;color:var(--amber);border-radius:10px;padding:.7em .9em;font-size:.85rem}
.ok-box{display:flex;gap:.6em;background:var(--green-bg);border:1px solid #bbf7d0;color:var(--green);border-radius:10px;padding:.7em .9em;font-size:.85rem}
.err-box{display:flex;gap:.6em;background:var(--red-bg);border:1px solid #fecaca;color:var(--red);border-radius:10px;padding:.7em .9em;font-size:.9rem}
.paycard{display:flex;gap:.8em;align-items:flex-start;border:1.5px solid var(--line-2);border-radius:10px;padding:.9em;cursor:pointer}
.paycard.on{border-color:var(--blue-700);background:var(--blue-050)}
.totals{border-top:1px solid var(--line);margin-top:1rem;padding-top:1rem}
.totals .row{display:flex;justify-content:space-between;padding:.22em 0;font-size:.92rem}
.totals .row.total{font-size:1.15rem;font-weight:800;border-top:1px dashed var(--line);margin-top:.4em;padding-top:.6em}

/* ── voucher / confirmation ───────────────────────────────────────────── */
.voucher{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.v-head{background:linear-gradient(120deg,var(--blue-900),var(--blue-700));color:#fff;padding:1.4rem 1.5rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.v-head .ok-ic{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center}
.v-head h1{font-size:1.3rem;margin:0;color:#fff}
.v-head .ref{font-size:1.05rem;font-weight:800;letter-spacing:.06em;background:rgba(255,255,255,.14);border-radius:8px;padding:.3em .8em}
.v-head .qr{margin-inline-start:auto;background:#fff;border-radius:10px;padding:7px;line-height:0}
.v-photo{height:180px;line-height:0;overflow:hidden;background:var(--line)}
.v-photo img,.v-photo svg{width:100%;height:180px;object-fit:cover;display:block}
.v-body{padding:1.4rem 1.5rem}
.v-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.2rem}
.v-grid .kv b{display:block;font-size:.72rem;color:var(--ink-3);font-weight:600;margin-bottom:.15em}
.status-pill{display:inline-flex;align-items:center;gap:.4em;font-weight:700;border-radius:999px;padding:.25em .9em;font-size:.85rem}
.status-pill.confirmed{background:var(--green-bg);color:var(--green)}
.status-pill.on_request{background:var(--amber-bg);color:var(--amber)}
.status-pill.cancelled{background:var(--red-bg);color:var(--red)}
.nights-tbl{width:100%;border-collapse:collapse;font-size:.86rem;margin:.5rem 0 1rem}
.nights-tbl th{font-size:.72rem;color:var(--ink-3);text-align:start;border-bottom:1px solid var(--line);padding:.4em .5em}
.nights-tbl td{padding:.45em .5em;border-bottom:1px dashed var(--line)}
.season-dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-inline-end:.4em;vertical-align:-.5px}
.v-actions{display:flex;gap:.7rem;flex-wrap:wrap;padding:1rem 1.5rem;border-top:1px solid var(--line);background:#fbfcfe}

/* ── bookings list ────────────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:.9rem}
.tbl thead th{background:#f8fafc;text-align:start;padding:.7em .9em;font-size:.76rem;color:var(--ink-3);border-bottom:1px solid var(--line)}
.tbl td{padding:.7em .9em;border-bottom:1px solid var(--line)}
.tbl tbody tr:hover{background:var(--blue-050);cursor:pointer}
.tbl tbody tr:last-child td{border-bottom:0}
.toolbar{display:flex;gap:.6rem;align-items:center;margin:1.1rem 0;flex-wrap:wrap}
.toolbar .input{width:auto}

/* ── admin ───────────────────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.4rem}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem}
.kpi b{font-size:1.5rem;display:block}
.kpi span{font-size:.8rem;color:var(--ink-3)}
.rates-grid{width:100%;border-collapse:collapse;background:#fff;font-size:.85rem}
.rates-grid th,.rates-grid td{border:1px solid var(--line);padding:.4em .5em;text-align:center}
.rates-grid th{background:#f8fafc;font-size:.72rem;color:var(--ink-3)}
.rates-grid td.rname{text-align:start;font-weight:600;min-width:170px}
.rates-grid input{width:82px;border:1px solid transparent;border-radius:6px;padding:.25em .3em;text-align:center;background:transparent;direction:ltr}
.rates-grid input:focus{border-color:var(--blue-600);background:#fff;outline:0}
.rates-grid input.dirty{background:var(--amber-bg);border-color:#fcd34d}
.season-col-low{box-shadow:inset 0 3px 0 var(--season-low)}
.season-col-shoulder{box-shadow:inset 0 3px 0 var(--season-shoulder)}
.season-col-high{box-shadow:inset 0 3px 0 var(--season-high)}
.offer-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;margin-bottom:1rem}
.offer-card .head{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.offer-card .head h3{font-size:1rem;margin:0}
.badge{font-size:.72rem;font-weight:700;border-radius:999px;padding:.18em .7em}
.badge.on{background:var(--green-bg);color:var(--green)}
.badge.off{background:var(--red-bg);color:var(--red)}
.badge.blue{background:var(--blue-050);color:var(--blue-800)}
.rule-chips{display:flex;gap:.4em;flex-wrap:wrap;margin:.5em 0}
.rule-chips span{border:1px solid var(--line);border-radius:8px;padding:.22em .6em;font-size:.76rem;background:#fbfcfe}
.switch{position:relative;width:40px;height:22px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;background:var(--line-2);border-radius:999px;transition:.15s;cursor:pointer}
.switch i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s}
.switch input:checked+i{background:var(--green-badge)}
.switch input:checked+i::after{translate:18px 0}
[dir=rtl] .switch input:checked+i::after{translate:-18px 0}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:80;display:grid;place-items:center;padding:1rem}
.modal{background:#fff;border-radius:14px;max-width:460px;width:100%;padding:1.3rem;box-shadow:var(--shadow-lg)}
.modal h3{margin-bottom:.6rem}
.modal .acts{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem}

/* toast */
#toast{position:fixed;bottom:22px;inset-inline-start:50%;translate:-50% 0;z-index:99;background:var(--ink);color:#fff;
  border-radius:10px;padding:.7em 1.2em;font-size:.9rem;box-shadow:var(--shadow-lg);opacity:0;transition:.25s;pointer-events:none}
[dir=rtl] #toast{translate:50% 0}
#toast.show{opacity:1}

/* login */
.login-wrap{min-height:calc(100vh - 8rem);display:grid;place-items:center;padding:1.5rem;background:
  radial-gradient(900px 500px at 10% 0%, #dbeafe 0%, transparent 55%),
  radial-gradient(800px 480px at 100% 100%, #ccfbf1 0%, transparent 50%), var(--bg)}
.login-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);width:410px;max-width:100%;padding:2rem}
.login-card .brand{justify-content:center;margin-bottom:1.2rem;flex-direction:column;text-align:center;gap:.6rem}
.login-card .brand .logo{width:52px;height:52px;font-size:1.5rem;border-radius:13px}
.login-hint{background:var(--blue-050);border:1px dashed var(--blue-100);border-radius:10px;padding:.7em .9em;font-size:.78rem;color:var(--blue-900);margin-top:1rem}
.login-hint code{background:#fff;border-radius:5px;padding:.05em .4em;direction:ltr;display:inline-block}

/* footer */
.footer{padding:2rem 0 2.6rem;color:var(--ink-3);font-size:.8rem;border-top:1px solid var(--line);margin-top:2rem;background:#fff}
.footer-inner,.footer .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.footer-inner--contact{align-items:flex-start;gap:1.4rem 2rem}
.footer-legal{display:flex;flex-direction:column;gap:.35rem;max-width:22rem;text-align:end}
.login-footer{margin-top:0;border-top:0;background:transparent}
.login-footer .footer-inner{justify-content:center;text-align:center;flex-direction:column;align-items:center}
.login-footer .contact-block{align-items:center}
.login-footer .contact-block__lines{align-items:center}
.contact-block{display:flex;flex-direction:column;gap:.45rem;flex:1;min-width:240px}
.contact-block__name{font-weight:700;color:var(--ink-2);font-size:.88rem}
.contact-block__lines{display:flex;flex-direction:column;gap:.25rem;line-height:1.45}
.contact-block a{color:var(--blue-700);text-decoration:none}
.contact-block a:hover{text-decoration:underline}
.contact-block--compact{font-size:.78rem;margin-top:1rem;padding-top:.85rem;border-top:1px dashed var(--line)}
.v-contact .contact-block--compact{margin-top:1.2rem}

/* skeleton */
.skel{background:linear-gradient(90deg,#eef2f7 25%,#f8fafc 50%,#eef2f7 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:10px}
@keyframes sk{to{background-position:-200% 0}}

/* ── print voucher ────────────────────────────────────────────────────── */
@media print{
  body{background:#fff}
  .topbar,.v-actions,.footer,#toast,.no-print{display:none!important}
  .v-contact{display:block!important}
  .voucher{border:0;box-shadow:none}
  .container{max-width:100%;padding:0}
  .v-head{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .v-photo{height:140px}
  .v-photo img,.v-photo svg{height:140px}
  .status-pill,.ok-box,.warn-box,.err-box,.season-dot,.pct-chip{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}