:root{
  --navy:#0E2A47; --navy-2:#163b61; --navy-soft:#22517f;
  --gold:#C9A227; --gold-2:#e0bd4a; --gold-soft:#f6edcf;
  --teal:#159a8c; --teal-soft:#e1f4f1;
  --ink:#14202e; --muted:#5d6b7a; --line:#e7ecf2;
  --bg:#f5f8fb; --card:#ffffff; --rose:#ef5777;
  --radius:14px; --radius-sm:10px;
  --shadow:0 10px 30px -12px rgba(14,42,71,.22);
  --shadow-lg:0 28px 60px -20px rgba(14,42,71,.35);
  --grad:linear-gradient(135deg,#0E2A47 0%,#163b61 55%,#22517f 100%);
  --grad-gold:linear-gradient(135deg,#C9A227,#e0bd4a);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Tajawal',sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.hide-sm{display:inline-flex}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;font-weight:700;font-size:15px;padding:12px 22px;transition:.2s;white-space:nowrap}
.btn--primary{background:var(--grad-gold);color:#3a2e05;box-shadow:0 8px 20px -8px rgba(201,162,39,.7)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(201,162,39,.85)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-2)}
.btn--ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--navy);color:var(--navy)}
.btn--sm{padding:9px 16px;font-size:14px}
.btn--lg{padding:15px 30px;font-size:17px}
.btn--block{width:100%}

/* ===== Topbar ===== */
.topbar{background:var(--navy);color:#cdd9e6;font-size:13px}
.topbar__inner{display:flex;justify-content:space-between;align-items:center;height:38px}
.topbar__left{display:flex;gap:18px}
.topbar__right{display:flex;gap:8px;align-items:center}
.chip{color:#dce6f1;font-size:13px;padding:5px 11px;border-radius:9px;background:rgba(255,255,255,.08)}
.chip:hover{background:rgba(255,255,255,.16)}
.chip--ghost{background:transparent;border:1px solid rgba(255,255,255,.2)}
.caret{font-size:10px;opacity:.7}

/* ===== Header ===== */
.header{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
.header__inner{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:11px;font-weight:900}
.brand__mark{width:42px;height:42px;border-radius:12px;background:var(--grad);color:var(--gold-2);display:grid;place-items:center;font-size:24px;box-shadow:var(--shadow)}
.brand__name{display:flex;flex-direction:column;font-size:19px;color:var(--navy);line-height:1.1}
.brand__name small{font-size:10px;font-weight:500;color:var(--muted);letter-spacing:1px}
.brand--light .brand__name{color:#fff}
.nav{display:flex;gap:6px;margin-inline-start:auto}
.nav__link{padding:9px 15px;border-radius:9px;font-weight:500;color:var(--muted);font-size:15px;transition:.2s}
.nav__link:hover{color:var(--navy);background:var(--bg)}
.nav__link.is-active{color:var(--navy);background:var(--gold-soft);font-weight:700}
.header__actions{display:flex;gap:10px;align-items:center}
.burger{display:none;flex-direction:column;gap:5px;padding:6px}
.burger span{width:24px;height:2.5px;background:var(--navy);border-radius:2px;transition:.3s}

/* ===== Hero ===== */
.hero{position:relative;color:#fff;padding:54px 0 130px;overflow:hidden;background:var(--grad)}
.hero::before{content:"";position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1512453979798-5ea266f8880c?auto=format&fit=crop&w=1600&q=70') center/cover;opacity:.22;mix-blend-mode:luminosity}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,42,71,.4),rgba(14,42,71,.85))}
.hero__inner{position:relative;z-index:2;text-align:center;max-width:820px;margin:0 auto}
.hero__badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:7px 16px;border-radius:9px;font-size:14px;margin-bottom:22px}
.hero__badge b{color:var(--gold-2)}
.hero h1{font-size:clamp(30px,5vw,52px);font-weight:900;line-height:1.18;margin-bottom:16px}
.hero h1 .accent{color:var(--gold-2)}
.hero p{font-size:clamp(15px,2.5vw,19px);color:#d7e2ee;margin-bottom:8px}
.hero__stats{display:flex;gap:32px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.hero__stat b{display:block;font-size:26px;color:var(--gold-2);font-weight:900}
.hero__stat span{font-size:13px;color:#cdd9e6}

/* ===== Search Widget ===== */
.searchwrap{position:relative;z-index:5;margin-top:-86px}
.search{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:10px}
.search__tabs{display:flex;gap:4px;padding:6px 6px 12px}
.search__tab{display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;font-weight:700;font-size:14px;color:var(--muted)}
.search__tab.is-active{background:var(--navy);color:#fff}
.search__tab:hover:not(.is-active){background:var(--bg)}
.search__row{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.search__row .field{flex:1 1 150px}
.search__row .search__go{flex:0 0 auto}
.field select.fld,.field input.fld{border:none;background:none;font-family:inherit;font-size:15px;font-weight:700;color:var(--ink);width:100%;outline:none;padding:0}
.field{background:var(--bg);border:1.5px solid transparent;border-radius:var(--radius-sm);padding:10px 14px;transition:.2s;cursor:pointer;text-align:start;position:relative}
.field:hover{border-color:var(--gold)}
.field label{display:block;font-size:11px;color:var(--muted);font-weight:700;margin-bottom:2px}
.field .val{font-size:15px;font-weight:700;color:var(--ink)}
.field .val.placeholder{color:#9aa7b4;font-weight:500}
.field input{border:none;background:none;font-family:inherit;font-size:15px;font-weight:700;color:var(--ink);width:100%;outline:none}
.search__go{align-self:stretch}
.search__go .btn{height:100%;padding:0 30px;font-size:16px}

/* autocomplete + popovers */
.pop{position:absolute;top:calc(100% + 8px);inset-inline-start:0;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;z-index:30;min-width:260px;border:1px solid var(--line)}
.pop__item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;cursor:pointer}
.pop__item:hover{background:var(--bg)}
.pop__item .ico{width:34px;height:34px;border-radius:9px;background:var(--teal-soft);display:grid;place-items:center;font-size:16px}
.pop__item b{font-size:14px}
.pop__item small{display:block;color:var(--muted);font-size:12px}
.counter{display:flex;align-items:center;justify-content:space-between;padding:10px 6px}
.counter+.counter{border-top:1px solid var(--line)}
.counter b{font-size:14px}.counter small{display:block;color:var(--muted);font-size:12px}
.stepper{display:flex;align-items:center;gap:12px}
.stepper button{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);font-size:18px;font-weight:700;color:var(--navy);display:grid;place-items:center}
.stepper button:hover{border-color:var(--gold);background:var(--gold-soft)}
.stepper span{min-width:18px;text-align:center;font-weight:700}

/* ===== Sections ===== */
.section{padding:64px 0}
.section--tight{padding:42px 0}
.section__head{text-align:center;max-width:620px;margin:0 auto 38px}
.section__eyebrow{color:var(--gold);font-weight:800;font-size:14px;letter-spacing:1px;text-transform:uppercase}
.section__title{font-size:clamp(24px,4vw,36px);font-weight:900;color:var(--navy);margin:6px 0 10px}
.section__sub{color:var(--muted);font-size:16px}
.section__head--row{display:flex;justify-content:space-between;align-items:flex-end;text-align:start;max-width:none}

/* destinations */
.dest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.dest{position:relative;border-radius:var(--radius);overflow:hidden;height:230px;box-shadow:var(--shadow);cursor:pointer}
.dest img{width:100%;height:100%;object-fit:cover;transition:.5s}
.dest:hover img{transform:scale(1.08)}
.dest::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(14,42,71,.88))}
.dest__body{position:absolute;inset-inline:0;bottom:0;padding:18px;z-index:2;color:#fff}
.dest__body h3{font-size:20px;font-weight:800}
.dest__body p{font-size:13px;color:#dce6f1}
.dest__price{display:inline-block;margin-top:8px;background:var(--grad-gold);color:#3a2e05;font-weight:800;font-size:13px;padding:4px 12px;border-radius:9px}
.dest--tall{grid-row:span 2;height:auto}

/* ===== Hotel cards ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hcard{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.25s;cursor:pointer;display:flex;flex-direction:column}
.hcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.hcard__media{position:relative;height:200px}
.hcard__media img{width:100%;height:100%;object-fit:cover}
.hcard__tag{position:absolute;top:12px;inset-inline-start:12px;background:var(--rose);color:#fff;font-size:12px;font-weight:700;padding:4px 11px;border-radius:9px}
.hcard__fav{position:absolute;top:10px;inset-inline-end:10px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:17px}
.hcard__body{padding:16px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.hcard__loc{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px}
.hcard__title{font-size:18px;font-weight:800;color:var(--navy)}
.stars{color:var(--gold);font-size:14px;letter-spacing:1px}
.hcard__amen{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.amen{font-size:12px;color:var(--muted);background:var(--bg);padding:4px 10px;border-radius:8px}
.hcard__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;padding-top:10px;border-top:1px solid var(--line)}
.rating{display:flex;align-items:center;gap:7px}
.rating__score{background:var(--navy);color:#fff;font-weight:800;font-size:14px;padding:4px 9px;border-radius:8px}
.rating small{display:block;font-size:12px;color:var(--muted)}
.price{text-align:end}
.price .old{font-size:13px;color:#9aa7b4;text-decoration:line-through}
.price .now{font-size:22px;font-weight:900;color:var(--navy)}
.price .now span{font-size:13px;font-weight:600;color:var(--muted)}
.price small{display:block;font-size:11px;color:var(--muted)}

/* ===== Results layout ===== */
.results{display:grid;grid-template-columns:280px 1fr;gap:26px;align-items:start}
.filters{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;position:sticky;top:90px}
.filters h4{font-size:16px;color:var(--navy);margin-bottom:6px}
.fblock{padding:16px 0;border-bottom:1px solid var(--line)}
.fblock:last-child{border:none;padding-bottom:0}
.fblock__t{font-weight:800;font-size:14px;margin-bottom:12px;color:var(--ink)}
.check{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14px;color:var(--muted);cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--gold)}
.check:hover{color:var(--ink)}
.range{width:100%;accent-color:var(--gold)}
.range-vals{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-top:6px}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}
.pill{border:1.5px solid var(--line);border-radius:9px;padding:6px 13px;font-size:13px;font-weight:600;color:var(--muted)}
.pill.is-active,.pill:hover{border-color:var(--gold);background:var(--gold-soft);color:var(--navy)}
.results__main{}
.results__bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.results__count b{color:var(--navy);font-size:18px}
.results__count span{color:var(--muted);font-size:14px}
.sortbar{display:flex;gap:8px;align-items:center}
.select{border:1.5px solid var(--line);border-radius:10px;padding:9px 13px;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);background:#fff}
.toggleview{display:flex;background:var(--bg);border-radius:10px;padding:3px}
.toggleview button{padding:7px 11px;border-radius:8px;font-size:15px;color:var(--muted)}
.toggleview button.is-active{background:#fff;color:var(--navy);box-shadow:var(--shadow)}

/* horizontal hotel row card */
.rcard{display:grid;grid-template-columns:240px 1fr auto;gap:0;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px;transition:.2s;cursor:pointer}
.rcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.rcard__media{position:relative}
.rcard__media img{width:100%;height:100%;object-fit:cover;min-height:210px}
.rcard__body{padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.rcard__side{padding:18px 20px;background:var(--bg);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;min-width:190px;text-align:end}
.rcard__loc{color:var(--muted);font-size:13px}
.rcard__title{font-size:20px;font-weight:800;color:var(--navy)}
.tagline{color:var(--teal);font-size:13px;font-weight:700}

/* ===== Hotel detail ===== */
.detail__gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:420px;border-radius:var(--radius);overflow:hidden}
.detail__gallery img{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:.3s}
.detail__gallery img:hover{filter:brightness(1.05)}
.detail__gallery img:first-child{grid-row:span 2}
.detail__grid{display:grid;grid-template-columns:1fr 360px;gap:28px;margin-top:28px;align-items:start}
.panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:20px}
.panel h3{font-size:20px;color:var(--navy);margin-bottom:14px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fact{text-align:center;padding:14px;background:var(--bg);border-radius:var(--radius-sm)}
.fact .ico{font-size:22px}
.fact b{display:block;font-size:14px;margin-top:4px}
.fact small{color:var(--muted);font-size:12px}
.amen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.amen-grid div{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink)}
.amen-grid .ico{width:36px;height:36px;border-radius:10px;background:var(--teal-soft);display:grid;place-items:center}
.roomrow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px;border:1.5px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px}
.roomrow:hover{border-color:var(--gold)}
.roomrow__info b{font-size:16px;color:var(--navy)}
.roomrow__info p{font-size:13px;color:var(--muted)}
.roomrow__info .feat{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
.roomrow__price{text-align:end;white-space:nowrap}
.bookbox{position:sticky;top:90px}
.bookbox .price-lg{font-size:30px;font-weight:900;color:var(--navy)}
.bookbox .price-lg span{font-size:14px;color:var(--muted);font-weight:600}
.bookbox .line{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);padding:7px 0}
.bookbox .line.total{border-top:1.5px dashed var(--line);margin-top:8px;padding-top:12px;color:var(--ink);font-weight:800;font-size:17px}
.bookbox .line.total b{color:var(--navy)}

/* review */
.reviewbar{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.bigscore{text-align:center}
.bigscore b{font-size:42px;font-weight:900;color:var(--navy);line-height:1}
.revbars{flex:1;min-width:240px}
.revbar{display:flex;align-items:center;gap:10px;font-size:13px;margin:5px 0}
.revbar .track{flex:1;height:7px;background:var(--bg);border-radius:99px;overflow:hidden}
.revbar .fill{height:100%;background:var(--grad-gold)}

/* ===== Steps / Booking ===== */
.steps{display:flex;justify-content:center;gap:0;margin:0 auto 34px;max-width:680px}
.step{flex:1;text-align:center;position:relative;color:var(--muted);font-size:14px;font-weight:700}
.step::before{content:"";position:absolute;top:16px;inset-inline-start:-50%;width:100%;height:3px;background:var(--line);z-index:0}
.step:first-child::before{display:none}
.step .dot{width:34px;height:34px;border-radius:50%;background:#fff;border:2.5px solid var(--line);display:grid;place-items:center;margin:0 auto 8px;position:relative;z-index:1;font-weight:800}
.step.is-done .dot{background:var(--teal);border-color:var(--teal);color:#fff}
.step.is-done::before{background:var(--teal)}
.step.is-active .dot{background:var(--navy);border-color:var(--navy);color:#fff}
.step.is-active{color:var(--navy)}
.booking-grid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.inp{display:flex;flex-direction:column;gap:6px}
.inp label{font-size:13px;font-weight:700;color:var(--ink)}
.inp input,.inp select,.inp textarea{border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-family:inherit;font-size:15px;outline:none;transition:.2s}
.inp input:focus,.inp select:focus,.inp textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.summary__hotel{display:flex;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.summary__hotel img{width:64px;height:64px;border-radius:12px;object-fit:cover}
.paytype{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.payopt{flex:1;min-width:120px;border:1.5px solid var(--line);border-radius:12px;padding:14px;text-align:center;cursor:pointer;font-weight:700;font-size:14px}
.payopt.is-active{border-color:var(--gold);background:var(--gold-soft)}
.payopt .ico{font-size:22px;display:block;margin-bottom:4px}

/* confirmation */
.confirm{text-align:center;max-width:560px;margin:0 auto}
.confirm__check{width:96px;height:96px;border-radius:50%;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;font-size:48px;margin:0 auto 22px;animation:pop .5s ease}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.confirm__code{display:inline-block;background:var(--bg);border:2px dashed var(--gold);border-radius:12px;padding:12px 28px;font-size:22px;font-weight:900;color:var(--navy);letter-spacing:2px;margin:16px 0}

/* ===== Packages ===== */
.pkg{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.25s;cursor:pointer}
.pkg:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.pkg__media{position:relative;height:220px}
.pkg__media img{width:100%;height:100%;object-fit:cover}
.pkg__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.55))}
.pkg__flag{position:absolute;top:14px;inset-inline-start:14px;background:rgba(255,255,255,.92);padding:5px 13px;border-radius:9px;font-weight:800;font-size:13px;z-index:2}
.pkg__days{position:absolute;bottom:14px;inset-inline-start:14px;color:#fff;z-index:2;font-weight:800;font-size:15px}
.pkg__body{padding:18px}
.pkg__body h3{font-size:19px;color:var(--navy);font-weight:800}
.pkg__incl{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.pkg__incl span{font-size:12px;background:var(--teal-soft);color:var(--teal);padding:4px 10px;border-radius:8px;font-weight:700}
.pkg__foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:14px}

/* ===== Trust / features ===== */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feat-card{background:var(--card);border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow);text-align:center;transition:.25s}
.feat-card:hover{transform:translateY(-5px)}
.feat-card .ico{width:62px;height:62px;border-radius:18px;background:var(--grad);color:var(--gold-2);display:grid;place-items:center;font-size:28px;margin:0 auto 16px}
.feat-card--plain{border-top:3px solid var(--gold);padding-top:24px}
.feat-card--plain h3{margin-bottom:9px}
.feat-card h3{font-size:18px;color:var(--navy);margin-bottom:7px}
.feat-card p{font-size:14px;color:var(--muted)}

.cta-band{background:var(--grad);border-radius:24px;padding:48px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(201,162,39,.08);inset-inline-end:-40px;top:-80px}
.cta-band h2{font-size:clamp(24px,4vw,34px);font-weight:900;margin-bottom:10px}
.cta-band p{color:#d7e2ee;margin-bottom:22px;font-size:17px}

/* ===== Dashboard ===== */
.dash{display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start}
.dash__side{background:var(--navy);border-radius:var(--radius);padding:18px;color:#cdd9e6}
.dash__side .brand{margin-bottom:20px}
.dnav{display:flex;flex-direction:column;gap:4px}
.dnav a{padding:11px 14px;border-radius:11px;font-size:14px;font-weight:600;display:flex;gap:10px;align-items:center;color:#cdd9e6}
.dnav a:hover{background:rgba(255,255,255,.08);color:#fff}
.dnav a.is-active{background:var(--grad-gold);color:#3a2e05;font-weight:800}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.kpi{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.kpi__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.kpi .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px}
.kpi b{font-size:28px;font-weight:900;color:var(--navy);display:block}
.kpi small{color:var(--muted);font-size:13px}
.kpi .delta{font-size:12px;font-weight:800;padding:3px 8px;border-radius:8px}
.delta--up{background:var(--teal-soft);color:var(--teal)}
.delta--down{background:#fde8ee;color:var(--rose)}
.dash-panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:20px}
.dash-panel__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.dash-panel__head h3{font-size:18px;color:var(--navy)}
table{width:100%;border-collapse:collapse}
th{text-align:start;font-size:12px;color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:13px 12px;border-bottom:1px solid var(--line);font-size:14px}
tr:last-child td{border:none}
.badge{font-size:12px;font-weight:800;padding:4px 11px;border-radius:9px}
.badge--green{background:var(--teal-soft);color:var(--teal)}
.badge--gold{background:var(--gold-soft);color:#9a7b15}
.badge--rose{background:#fde8ee;color:var(--rose)}
.badge--blue{background:#e4eefb;color:#2b6cb0}
.miniava{width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;display:inline-grid;place-items:center;font-size:13px;font-weight:700;margin-inline-end:8px}
.chart{display:flex;align-items:flex-end;gap:10px;height:180px;padding-top:10px}
.bar{flex:1;background:var(--grad-gold);border-radius:8px 8px 0 0;position:relative;transition:.3s;min-height:6px}
.bar:hover{filter:brightness(1.05)}
.bar span{position:absolute;bottom:-22px;inset-inline:0;text-align:center;font-size:11px;color:var(--muted)}
.bar b{position:absolute;top:-20px;inset-inline:0;text-align:center;font-size:11px;font-weight:800;color:var(--navy)}

/* ===== Toast ===== */
.toast{position:fixed;bottom:28px;inset-inline-start:50%;transform:translate(-50%,120px);background:var(--navy);color:#fff;padding:14px 24px;border-radius:14px;box-shadow:var(--shadow-lg);font-weight:600;z-index:200;opacity:0;transition:.35s;display:flex;gap:10px;align-items:center}
.toast.show{transform:translate(-50%,0);opacity:1}

/* ===== misc ===== */
.breadcrumb{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:14px;padding:18px 0}
.breadcrumb a:hover{color:var(--navy)}
.tag-soft{display:inline-flex;align-items:center;gap:6px;background:var(--gold-soft);color:#9a7b15;font-weight:700;font-size:13px;padding:5px 12px;border-radius:9px}
.fade{animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== Auth / Login ===== */
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 110px)}
.auth__panel{background:var(--grad);color:#fff;padding:60px 50px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.auth__panel::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.04);inset-inline-end:-60px;bottom:-80px}
.auth__panel .brand{margin-bottom:30px}
.auth__panel h2{font-size:34px;font-weight:900;margin-bottom:12px}
.auth__panel>p{color:#d7e2ee;font-size:17px;max-width:420px;margin-bottom:26px;line-height:1.7}
.auth__feats{list-style:none;display:flex;flex-direction:column;gap:14px}
.auth__feats li{font-size:15px;color:#e8eef5}
.auth__formwrap{display:flex;align-items:center;justify-content:center;padding:40px}
.auth__card{width:100%;max-width:400px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:36px 32px}
.auth__lock{width:60px;height:60px;border-radius:16px;background:var(--gold-soft);display:grid;place-items:center;font-size:26px;margin:0 auto 18px}
.auth__card h3{font-size:24px;color:var(--navy);text-align:center}
.auth__sub{color:var(--muted);text-align:center;margin-bottom:24px;font-size:14px}
.auth__card .inp{margin-bottom:16px}
.auth__row{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.auth__forgot{color:var(--navy);font-size:13px;font-weight:700;cursor:pointer}
.auth__forgot:hover{color:var(--gold)}
.auth__hint{text-align:center;color:var(--muted);font-size:12px;margin-top:16px;background:var(--bg);padding:10px;border-radius:10px}

/* ===== Dashboard extras ===== */
.dash__user{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.dash__user-info{flex:1}
.dash__user-info b{color:#fff;font-size:14px;display:block}
.dash__user-info small{color:#aebcce;font-size:12px}
.dash__user button{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.08);color:#cdd9e6;font-size:16px}
.dash__user button:hover{background:var(--rose);color:#fff}
.link-gold{color:var(--navy);font-weight:700;font-size:14px;cursor:pointer}
.link-gold:hover{color:var(--gold)}
.aibanner{background:var(--grad)!important;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.search-inp{flex:1;min-width:200px;border:1.5px solid var(--line);border-radius:10px;padding:10px 14px;font-family:inherit;font-size:14px;outline:none}
.search-inp:focus{border-color:var(--gold)}
.iconbtn{width:30px;height:30px;border-radius:8px;color:var(--muted);font-size:18px;font-weight:900}
.iconbtn:hover{background:var(--bg);color:var(--navy)}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.setrow b{font-size:14px;color:var(--ink)}.setrow small{display:block;color:var(--muted);font-size:12px}
.ailog{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.ailog:last-child{border:none}.ailog b{font-size:14px}.ailog small{display:block;color:var(--muted);font-size:12px}
.dot-on{width:9px;height:9px;border-radius:50%;background:var(--teal);margin-inline-start:auto;box-shadow:0 0 0 3px var(--teal-soft)}
.switch{position:relative;display:inline-block;width:50px;height:28px;flex-shrink:0}
.switch input{display:none}
.slider{position:absolute;inset:0;background:#cbd5e0;border-radius:999px;transition:.3s;cursor:pointer}
.slider::before{content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;top:3px;inset-inline-end:3px;transition:.3s}
.switch input:checked+.slider{background:var(--teal)}
.switch input:checked+.slider::before{transform:translateX(-22px)}
.convo-grid{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start}
.convo-item{display:flex;align-items:center;gap:10px;padding:11px;border-radius:12px;cursor:pointer;position:relative}
.convo-item:hover{background:var(--bg)}
.convo-item.is-active{background:var(--gold-soft)}
.convo-item__b{flex:1;min-width:0}
.convo-item__top{display:flex;justify-content:space-between}
.convo-item__top b{font-size:14px}.convo-item__top small{color:var(--muted);font-size:11px}
.convo-item p{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0 5px}
.unread{position:absolute;top:11px;inset-inline-start:11px;background:var(--rose);color:#fff;font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:999px;display:grid;place-items:center;padding:0 5px}
.chan-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 18px;margin-bottom:18px}
.chan-bar>span:first-child{font-weight:800;color:var(--navy);font-size:14px}
.chan{font-size:12px;font-weight:800;padding:4px 12px;border-radius:9px;display:inline-block}
.chan--wa{background:#dcf7e3;color:#0c8a43}
.chan--ig{background:#fde4f0;color:#c1338a}
.chan--fb{background:#e4edfb;color:#1d62d6}
.chan-note{font-size:12px;color:var(--muted);font-weight:500;margin-inline-start:auto}
.convo-tabs{display:flex;gap:6px;padding:4px 6px;flex-wrap:wrap}
.convo-item__tags{display:flex;gap:6px;align-items:center;margin-top:5px;flex-wrap:wrap}
.chat__head .chan{font-size:11px}
.chat{display:flex;flex-direction:column;height:520px;padding:0;overflow:hidden}
.chat__head{display:flex;align-items:center;gap:10px;padding:16px;border-bottom:1px solid var(--line)}
.chat__head b{font-size:15px;color:var(--navy)}.chat__head small{font-size:12px}
.chat__body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.bubble{max-width:80%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.6}
.bubble time{display:block;font-size:10px;opacity:.6;margin-top:4px}
.bubble--in{background:#fff;align-self:flex-start;border-bottom-right-radius:4px;box-shadow:var(--shadow)}
.bubble--out{background:var(--navy);color:#fff;align-self:flex-end;border-bottom-left-radius:4px}
.ai-tag{display:block;font-size:10px;color:var(--gold-2);font-weight:800;margin-bottom:3px}
.chat__foot{display:flex;gap:8px;padding:14px;border-top:1px solid var(--line)}
.chat__foot input{flex:1;border:1.5px solid var(--line);border-radius:9px;padding:10px 16px;font-family:inherit;outline:none}
.cicon{vertical-align:middle;border-radius:6px}
.convo-grid{grid-template-columns:300px 1fr}
.convo-tabs{align-items:center}
.chan-tab{padding:5px;border:1.5px solid var(--line);border-radius:9px;background:#fff;line-height:0;display:inline-flex}
.chan-tab:hover{border-color:var(--gold);background:var(--gold-soft)}
.chat__head .cicon{margin-inline-start:4px}
.chat__actions{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
.custpanel{align-self:start}
.cust__head{display:flex;gap:11px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.cust__head b{color:var(--navy);font-size:16px;display:block}
.cust__head small{color:var(--muted);font-size:12px}
.miniava--lg{width:48px;height:48px;font-size:19px}
.cust__row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:14px;color:var(--muted);border-bottom:1px solid var(--line)}
.cust__row b{color:var(--ink)}
.cust__h{font-size:14px;color:var(--navy);margin:16px 0 9px}
.histitem{padding:10px 12px;background:var(--bg);border-radius:11px;margin-bottom:7px}
.histitem b{display:block;font-size:13px;color:var(--navy)}
.histitem span{font-size:12px;color:var(--muted)}
.clabels{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.clabel{background:var(--gold-soft);color:#9a7b15;font-size:12px;font-weight:700;padding:5px 12px;border-radius:9px}
.addlabel{display:flex;gap:6px}
.addlabel input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:9px;padding:9px 11px;font-family:inherit;font-size:13px;outline:none}
.addlabel input:focus{border-color:var(--gold)}
.modal-overlay{position:fixed;inset:0;background:rgba(14,42,71,.55);display:flex;align-items:center;justify-content:center;z-index:300;padding:20px}
.modal{background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);width:100%;max-width:580px;max-height:90vh;overflow:auto;animation:fade .25s ease}
.modal__head{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line)}
.modal__head h3{color:var(--navy);font-size:18px}
.modal__x{font-size:17px;color:var(--muted);width:34px;height:34px;border-radius:9px}
.modal__x:hover{background:var(--bg);color:var(--ink)}
.modal__body{padding:22px}
.modal__body textarea{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;font-family:inherit;font-size:14px;outline:none;resize:vertical}
.modal__body textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.modal__note{background:var(--bg);border-radius:11px;padding:12px 14px;font-size:13px;color:var(--muted);margin-top:14px}
.modal__foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--line)}
.flightcard{display:grid;grid-template-columns:1.3fr 2fr 1fr;gap:16px;align-items:center;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 22px;margin-bottom:14px}
.flightcard__air{display:flex;align-items:center;gap:11px}
.airlogo{width:42px;height:42px;border-radius:11px;background:var(--grad);color:var(--gold-2);display:grid;place-items:center;font-weight:800}
.flightcard__air b{color:var(--navy)}.flightcard__air small{color:var(--muted);font-size:12px;display:block}
.flightcard__route{display:flex;align-items:center;gap:14px;justify-content:center}
.fc-time{text-align:center}.fc-time b{font-size:18px;color:var(--navy)}.fc-time small{color:var(--muted);display:block;font-size:12px}
.fc-line{flex:1;text-align:center;color:var(--muted);font-size:12px;min-width:80px}
.fc-line span{display:block;height:2px;background:var(--line);margin-bottom:5px;border-radius:2px}
.flightcard__price{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.visa-req{list-style:none;margin:12px 0;display:flex;flex-direction:column;gap:7px}
.visa-req li{font-size:13px;color:var(--muted);padding-inline-start:16px;position:relative}
.visa-req li::before{content:"";position:absolute;inset-inline-start:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.bk-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;background:var(--bg);border-radius:10px;padding:16px}
.bk-grid div small{display:block;color:var(--muted);font-size:12px;margin-bottom:3px}
.bk-grid div b{color:var(--navy);font-size:14px}
.bk-timeline{display:flex;justify-content:space-between;margin:4px 0}
.bk-step{flex:1;text-align:center;position:relative;color:var(--muted);font-size:12px;font-weight:700}
.bk-step::before{content:"";position:absolute;top:14px;inset-inline-start:-50%;width:100%;height:3px;background:var(--line);z-index:0}
.bk-step:first-child::before{display:none}
.bk-dot{width:30px;height:30px;border-radius:50%;background:#fff;border:2.5px solid var(--line);display:grid;place-items:center;margin:0 auto 6px;position:relative;z-index:1;font-weight:800;font-size:13px}
.bk-step.is-done .bk-dot{background:var(--teal);border-color:var(--teal);color:#fff}
.bk-step.is-done::before{background:var(--teal)}
.bk-step.is-active .bk-dot{background:var(--navy);border-color:var(--navy);color:#fff}
.bk-step.is-active{color:var(--navy)}
.bk-cancelled{background:#fde8ee;color:var(--rose);font-weight:800;text-align:center;padding:14px;border-radius:12px}
.bk-fin{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.bk-finrow{display:flex;justify-content:space-between;padding:11px 14px;font-size:14px;color:var(--muted);border-bottom:1px solid var(--line)}
.bk-finrow:last-child{border-bottom:none}
.bk-finrow b{color:var(--ink)}
.bk-finrow.profit{background:var(--teal-soft)}
.bk-finrow.profit b{color:var(--teal)}
.bk-finrow.due b{color:var(--rose)}
.daycard{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1.5px solid var(--line);border-radius:14px;margin-bottom:12px}
.daycard__num{background:var(--grad);color:var(--gold-2);font-weight:800;font-size:13px;padding:8px 12px;border-radius:10px;white-space:nowrap}
.daycard__body{flex:1;display:flex;flex-direction:column;gap:8px}
.dayinp{border:1.5px solid var(--line);border-radius:9px;padding:9px 12px;font-family:inherit;font-size:14px;outline:none;width:100%;resize:vertical}
.dayinp:focus{border-color:var(--gold)}
.dayinp--title{font-weight:700;color:var(--navy)}
.invoice{border:1.5px solid var(--line);border-radius:14px;overflow:hidden}
.invoice__head{display:flex;justify-content:space-between;align-items:center;padding:14px;background:var(--bg)}
.invoice__head b{color:var(--navy);display:block}.invoice__head small{color:var(--muted);font-size:12px}
.invoice__qr{width:48px;height:48px;border:2px solid var(--navy);border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:11px;color:var(--navy)}
.permtable th,.permtable td{text-align:center}
.permtable th:first-child,.permtable td:first-child{text-align:start;min-width:160px}
.perm-yes{color:var(--teal);font-weight:900;font-size:16px}
.perm-no{color:#cbd5e0;font-weight:700}
.funnel{margin-bottom:14px}
.funnel__bar{background:var(--grad-gold);height:34px;border-radius:8px;display:flex;align-items:center;padding:0 12px;color:#3a2e05;font-weight:800;min-width:50px}
.funnel span{font-size:13px;color:var(--muted);display:block;margin-top:3px}

/* ===== New Header (hojuzat-style) ===== */
.sheader{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 12px -6px rgba(14,42,71,.18)}
.sheader__top{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo-img{height:42px;width:auto;display:block}
.logo-chip{background:#fff;border-radius:9px;padding:7px 12px;display:inline-flex;align-items:center}
.logo-chip img{height:32px;width:auto;display:block}
.brand-logo{display:inline-flex;align-items:center;gap:10px}
.brand-sub{color:#cdd9e6;font-size:11px;font-weight:700}
.dash__side .brand-logo{flex-direction:column;align-items:flex-start;gap:7px;margin-bottom:18px}
.logo{display:flex;flex-direction:column;line-height:1.15}
.logo b{font-size:24px;font-weight:900;color:var(--navy)}
.logo span{font-size:11px;color:var(--gold);font-weight:700;letter-spacing:.5px}
.logo--light b{color:#fff}.logo--light span{color:var(--gold-2)}
.sheader__actions{display:flex;align-items:center;gap:14px}
.sheader__contact{font-size:14px;color:var(--muted);font-weight:700}
.sheader__chip{font-size:14px;font-weight:700;color:var(--ink);padding:7px 13px;border-radius:8px;border:1px solid var(--line)}
.sheader__chip:hover{border-color:var(--gold);color:var(--navy)}
.sheader__login{background:var(--grad-gold);color:#3a2e05;font-weight:800;font-size:14px;padding:10px 22px;border-radius:9px}
.sheader__login:hover{filter:brightness(1.05)}
.sheader__nav{background:var(--navy)}
.sheader__navinner{display:flex;gap:6px;height:50px;align-items:center}
.sheader__nav .nav__link{color:#cdd9e6;font-weight:700;padding:8px 16px;border-radius:8px;font-size:15px;background:none}
.sheader__nav .nav__link:hover{background:rgba(255,255,255,.1);color:#fff}
.sheader__nav .nav__link.is-active{color:#3a2e05;background:var(--grad-gold)}

/* ===== Cities (text grid, no icons) ===== */
.cities__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.city-link{padding:14px 10px;text-align:center;border-radius:12px;background:#fff;border:1px solid var(--line);font-weight:700;color:var(--navy);font-size:15px;cursor:pointer;transition:.2s}
.city-link:hover{border-color:var(--gold);background:var(--gold-soft);transform:translateY(-2px)}
.city-link small{display:block;color:var(--muted);font-size:12px;font-weight:500;margin-top:2px}

/* ===== New Footer (hojuzat-style) ===== */
.sfooter{background:var(--navy);color:#cdd9e6;margin-top:40px}
.sfooter__partners{display:flex;align-items:center;gap:16px;padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.1);flex-wrap:wrap}
.sfooter__partners>span{font-size:13px;color:#8a99ab;font-weight:700}
.pay-list{display:flex;gap:9px;flex-wrap:wrap}
.pay{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:6px 14px;font-size:13px;font-weight:800;color:#e8eef5;letter-spacing:.3px}
.sfooter__grid{display:grid;grid-template-columns:1.9fr 1.2fr 1fr 1fr 1fr;gap:28px;padding:44px 20px}
.sfooter__col h4{color:#fff;font-size:15px;margin-bottom:14px}
.sfooter__col a{display:block;color:#aebcce;font-size:14px;padding:5px 0;transition:.2s}
.sfooter__col a:hover{color:var(--gold-2)}
.sfooter__about p{color:#aebcce;font-size:14px;line-height:1.85;margin:14px 0}
.sfooter__about .logo{display:flex;flex-direction:column;margin-bottom:0}
.sfooter__about .logo b{display:block}
.sfooter__about .logo span{display:block;padding:0}
.sfooter__social{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.sfooter__social a{color:#cdd9e6;font-size:13px;font-weight:700;padding:0}
.sfooter__social a:hover{color:var(--gold-2)}
.sfooter__bottom{background:rgba(0,0,0,.22)}
.sfooter__bottominner{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font-size:13px;color:#8a99ab;flex-wrap:wrap;gap:8px}
.sfooter__demo{background:var(--gold-soft);color:#9a7b15;padding:4px 12px;border-radius:9px;font-weight:700}

/* ===== Footer ===== */
.footer{background:var(--navy);color:#cdd9e6;padding:54px 0 0;margin-top:40px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px;padding-bottom:36px}
.footer__grid h4{color:#fff;font-size:16px;margin-bottom:14px}
.footer__grid a{display:block;color:#aebcce;font-size:14px;padding:5px 0;transition:.2s}
.footer__grid a:hover{color:var(--gold-2)}
.footer__grid p{color:#aebcce;font-size:14px;margin:4px 0}
.footer__about{color:#aebcce!important;font-size:14px;line-height:1.8;margin:14px 0!important}
.socials{display:flex;gap:10px;margin-top:16px}
.socials span{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:14px;font-weight:800;color:#cdd9e6;cursor:pointer;transition:.2s}
.socials span:hover{background:var(--grad-gold);color:#3a2e05}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;padding:20px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:#8a99ab;flex-wrap:wrap;gap:8px}
.footer__demo{background:var(--gold-soft);color:#9a7b15;padding:4px 12px;border-radius:9px;font-weight:700}

/* ===== Responsive ===== */
@media(max-width:980px){
  .dest-grid{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .results{grid-template-columns:1fr}
  .filters{position:static}
  .detail__grid,.booking-grid{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .dash{grid-template-columns:1fr}
  .dash__side{position:static;background:var(--navy);border-radius:14px;padding:10px;margin-bottom:4px}
  .dash__side .brand,.dash__user{display:none}
  .dnav{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}
  .dnav a{white-space:nowrap;flex:0 0 auto;padding:9px 14px}
  .rcard{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .auth{grid-template-columns:1fr}
  .auth__panel{display:none}
  .convo-grid{grid-template-columns:1fr}
  .sfooter__grid{grid-template-columns:1fr 1fr}
  .cities__grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .sheader__top{flex-wrap:wrap;height:auto;padding:10px 0;gap:10px}
  .sheader__contact{display:none}
  .sheader__navinner{overflow-x:auto;gap:4px}
  .sheader__nav .nav__link{white-space:nowrap;font-size:14px;padding:7px 12px}
  .hide-sm{display:none}
  .dest-grid,.cards,.feat-grid{grid-template-columns:1fr}
  .cities__grid{grid-template-columns:repeat(2,1fr)}
  .sfooter__grid{grid-template-columns:1fr}
  .hero{padding-bottom:70px}
  .searchwrap{margin-top:-46px}
  .detail__gallery{grid-template-columns:1fr 1fr;height:300px}
  .amen-grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .dash-panel{overflow-x:auto}
  .dash-panel table{min-width:600px}
  .bk-grid{grid-template-columns:1fr 1fr}
  .flightcard{grid-template-columns:1fr;gap:12px}
  .flightcard__price{flex-direction:row;align-items:center;justify-content:space-between}
  .search__tabs{overflow-x:auto}
  .search__tab{white-space:nowrap}
  .modal__foot{flex-wrap:wrap}
  .toolbar{flex-direction:column;align-items:stretch}
}

/* ===== Dark Mode ===== */
body.dark{
  --bg:#0e1820; --card:#16222e; --ink:#e8eef5; --muted:#9fb0c0; --line:#27343f;
  --navy:#eaf1f8; --gold-soft:#3a3320; --teal-soft:#16302c;
}
body.dark .sheader{background:#16222e;box-shadow:0 2px 12px -6px rgba(0,0,0,.5)}
body.dark .sheader__nav{background:#0a131c}
body.dark .dash__side{background:#0a131c}
body.dark .sfooter{background:#0a131c}
body.dark .modal{background:var(--card)}
body.dark .pop{background:var(--card)}
body.dark .auth__card{background:var(--card)}
body.dark .city-link{background:var(--card)}
body.dark .chan-tab{background:var(--card)}
body.dark .rating__score{background:#2b3a48}
body.dark .btn--navy{background:#2b3a48;color:#fff}
body.dark .btn--ghost{color:var(--ink)}
body.dark .bubble--in{background:#22303d;color:var(--ink)}
body.dark .chat__body{background:#0e1820}
body.dark .toast{background:#22303d}
body.dark .search-inp,body.dark .inp input,body.dark .inp select,body.dark .inp textarea,body.dark .dayinp,body.dark .addlabel input,body.dark .select,body.dark .chat__foot input{background:#0e1820;color:var(--ink)}
body.dark .field{background:#0e1820}
body.dark .fact,body.dark .histitem,body.dark .bk-grid,body.dark .amen{background:#0e1820}
body.dark .modal__note,body.dark .auth__hint{background:#0e1820}
.theme-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);color:#cdd9e6;font-size:14px;font-weight:700}
body.dark .sheader .logo-img{background:#fff;border-radius:8px;padding:5px 9px;height:32px}

/* ===== Hotel page — Booking-style layout ===== */
.hp-tabs{position:sticky;top:122px;z-index:40;background:var(--card);border-bottom:1px solid var(--line);margin-bottom:18px;box-shadow:0 5px 12px -10px rgba(14,42,71,.5)}
.hp-tabs__inner{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.hp-tabs__inner::-webkit-scrollbar{display:none}
.hp-tab{padding:14px 18px;font-size:15px;font-weight:700;color:var(--muted);white-space:nowrap;border-bottom:3px solid transparent;cursor:pointer;transition:.2s}
.hp-tab:hover{color:var(--navy);background:var(--bg)}
.hp-tab.is-active{color:var(--navy);border-bottom-color:var(--gold)}

.hp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin:8px 0 16px}
.hp-head__type{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);font-weight:700;flex-wrap:wrap}
.hp-head__name{font-size:32px;color:var(--navy);margin:7px 0 5px;line-height:1.25}
.hp-head__addr{font-size:14px;color:var(--muted)}
.hp-link{color:var(--navy);font-weight:700;text-decoration:underline;cursor:pointer}
.hp-loc{color:var(--teal);font-weight:800}
.hp-head__side{display:flex;flex-direction:column;align-items:flex-end;gap:9px;min-width:200px}
.hp-head__price{font-size:14px;color:var(--muted);text-align:end}
.hp-head__price b{display:block;font-size:22px;color:var(--navy)}

.hp-gallery{position:relative}
.hp-gallery__all{position:absolute;inset-block-end:14px;inset-inline-end:14px;background:rgba(255,255,255,.94);color:var(--navy);font-size:13px;font-weight:800;padding:9px 16px;border-radius:9px;box-shadow:var(--shadow)}

.hp-row{display:grid;grid-template-columns:1fr 330px;gap:22px;align-items:start;margin-top:22px}
.hp-topfac{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hp-chk{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:7px 12px}
.hp-chk::before{content:"✓";color:var(--teal);font-weight:900}

.hp-score{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.hp-score__num{background:var(--navy);color:#fff;font-weight:900;font-size:20px;padding:10px 14px;border-radius:9px 9px 9px 0}
.hp-score__txt b{display:block;color:var(--navy);font-size:16px}
.hp-score__txt small{color:var(--muted);font-size:13px}
.hp-hi{list-style:none}
.hp-hi li{display:flex;gap:9px;font-size:14px;color:var(--ink);padding:8px 0;border-bottom:1px dashed var(--line)}
.hp-hi li:last-child{border-bottom:none}
.hp-hi li::before{content:"✓";color:var(--teal);font-weight:900}

/* availability table */
.hp-searchbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--gold-soft);border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:14px;font-size:14px;font-weight:700;color:#9a7b15}
.hp-rt-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.hp-rt{width:100%;border-collapse:collapse;min-width:940px}
.hp-rt th{background:var(--navy);color:#fff;font-size:14px;font-weight:800;padding:13px 14px;text-align:start;white-space:nowrap}
.hp-rt td{border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line);padding:14px;vertical-align:top;font-size:14px}
.hp-rt td:last-child{border-inline-end:none}
.hp-rt tbody tr:last-child td{border-bottom:1px solid var(--line)}
.hp-rt tbody tr:hover{background:var(--bg)}
.hp-rt__name{color:var(--navy);font-weight:800;font-size:16px;display:block;margin-bottom:6px}
.hp-rt__meta{color:var(--muted);font-size:13px;line-height:1.95}
.hp-rt__amen{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.hp-rt__amen span{font-size:12px;color:var(--muted);background:var(--bg);border-radius:7px;padding:3px 9px}
.hp-guests{display:flex;gap:3px;align-items:center;color:var(--navy);flex-wrap:wrap}
.hp-guests small{color:var(--muted);display:block;width:100%;margin-top:5px;font-size:12.5px}
.hp-price__old{color:#9aa7b4;text-decoration:line-through;font-size:13px}
.hp-price__now{font-size:21px;font-weight:900;color:var(--navy);line-height:1.3}
.hp-price__note{color:var(--muted);font-size:12px;margin-top:3px}
.hp-opts{list-style:none;display:grid;gap:7px}
.hp-opts li{display:flex;gap:7px;font-size:13.5px;color:var(--teal);font-weight:700;line-height:1.5}
.hp-opts li::before{content:"✓";font-weight:900}
.hp-opts li.warn{color:var(--rose)}
.hp-opts li.warn::before{content:"!"}
.hp-opts li.mute{color:var(--muted);font-weight:600}
.hp-opts li.mute::before{content:"·"}
.hp-qty{width:92px;padding:9px 10px;border:1.5px solid var(--line);border-radius:9px;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);background:var(--card)}
.hp-rt tfoot td{background:var(--bg);padding:16px;border:none}
.hp-reserve{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.hp-reserve__sum b{color:var(--navy);font-size:21px}
.hp-reserve__sum small{display:block;color:var(--muted);font-size:12.5px;font-weight:600}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none}

/* facilities */
.hp-fac{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hp-fac h4{color:var(--navy);font-size:15px;margin-bottom:9px}
.hp-fac ul{list-style:none;display:grid;gap:7px}
.hp-fac li{display:flex;gap:8px;font-size:14px;color:var(--muted);line-height:1.6}
.hp-fac li::before{content:"✓";color:var(--teal);font-weight:900}

/* reviews */
.hp-revgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}
.hp-revcard{border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;background:var(--card)}
.hp-revcard__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:9px}
.hp-revcard__who b{color:var(--navy);font-size:15px}
.hp-revcard__who small{display:block;color:var(--muted);font-size:12.5px}
.hp-revcard q{display:block;color:var(--ink);font-size:14px;line-height:1.85;quotes:none}
.hp-revcard__stay{color:var(--muted);font-size:12.5px;margin-top:9px;border-top:1px dashed var(--line);padding-top:9px}

/* rules + fine print + faq */
.hp-rule{display:grid;grid-template-columns:210px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.hp-rule:last-child{border-bottom:none}
.hp-rule b{color:var(--navy)}
.hp-rule span{color:var(--muted);line-height:1.9}
.hp-fine{background:var(--bg);border:1px dashed var(--line);border-radius:var(--radius-sm);padding:16px;color:var(--muted);font-size:13.5px;line-height:1.95}
.hp-faq details{border-bottom:1px solid var(--line);padding:13px 0}
.hp-faq details:last-child{border-bottom:none}
.hp-faq summary{cursor:pointer;font-weight:700;color:var(--navy);font-size:15px;list-style:none;display:flex;justify-content:space-between;gap:10px}
.hp-faq summary::-webkit-details-marker{display:none}
.hp-faq summary::after{content:"+";color:var(--gold);font-weight:900}
.hp-faq details[open] summary::after{content:"−"}
.hp-faq p{color:var(--muted);font-size:14px;margin-top:9px;line-height:1.9}

@media(max-width:980px){
  .hp-row{grid-template-columns:1fr}
  .hp-fac{grid-template-columns:repeat(2,1fr)}
  .hp-revgrid{grid-template-columns:1fr}
  .hp-tabs{top:0}
}
@media(max-width:640px){
  .hp-fac{grid-template-columns:1fr}
  .hp-head__name{font-size:24px}
  .hp-head__side{align-items:stretch;width:100%}
  .hp-head__price{text-align:start}
  .hp-rule{grid-template-columns:1fr;gap:4px}
  .hp-tabs{position:static}
}
body.dark .hp-rt th{background:#0a131c;color:#e8eef5}
body.dark .hp-score__num{background:#2b3a48}
body.dark .hp-chk,body.dark .hp-rt__amen span,body.dark .hp-rt tfoot td,body.dark .hp-fine,body.dark .hp-qty{background:#0e1820}
body.dark .hp-searchbar{background:#3a3320;color:var(--gold-2)}
body.dark .hp-gallery__all{background:rgba(22,34,46,.94);color:var(--ink)}

/* ===== Search results — Booking-style ===== */
.sr-map{position:relative;height:158px;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:16px;border:1px solid var(--line);display:grid;place-items:center;
  background:radial-gradient(circle at 62% 40%,rgba(201,162,39,.30),transparent 40%),
   repeating-linear-gradient(0deg,rgba(14,42,71,.07) 0 1px,transparent 1px 26px),
   repeating-linear-gradient(90deg,rgba(14,42,71,.07) 0 1px,transparent 1px 26px),
   linear-gradient(160deg,#e9f1f8,#dae6f1)}
.sr-map__pin{position:absolute;inset-inline-start:38%;inset-block-start:32%;width:13px;height:13px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 6px rgba(239,87,119,.22)}
.sr-map__btn{background:#fff;color:var(--navy);font-weight:800;font-size:13.5px;padding:9px 18px;border-radius:9px;box-shadow:var(--shadow);z-index:1}

.sr-filters{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;position:sticky;top:130px}
.sr-filters__t{padding:13px 18px;border-bottom:1px solid var(--line);font-weight:800;color:var(--navy);font-size:15px;display:flex;justify-content:space-between;align-items:center}
.sr-filters__t a{font-size:13px;font-weight:700;color:var(--muted);text-decoration:underline;cursor:pointer}
.sr-fg{padding:15px 18px;border-bottom:1px solid var(--line)}
.sr-fg:last-child{border-bottom:none}
.sr-fg h5{font-size:14px;color:var(--ink);margin-bottom:9px;font-weight:800}
.sr-chk{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14px;color:var(--muted);cursor:pointer}
.sr-chk input{width:17px;height:17px;accent-color:var(--gold);flex:0 0 auto}
.sr-chk:hover{color:var(--ink)}
.sr-chk__n{margin-inline-start:auto;color:#9aa7b4;font-size:13px;font-weight:600}
.sr-chk .stars{font-size:12px}

.sr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.sr-head h2{font-size:22px;color:var(--navy);line-height:1.4}
.sr-head p{color:var(--muted);font-size:13.5px;margin-top:2px}
.sr-sorts{display:flex;gap:8px;overflow-x:auto;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line);scrollbar-width:none}
.sr-sorts::-webkit-scrollbar{display:none}
.sr-sort{border:1.5px solid var(--line);background:var(--card);border-radius:9px;padding:8px 15px;font-size:13.5px;font-weight:700;color:var(--muted);white-space:nowrap;transition:.2s}
.sr-sort:hover{border-color:var(--navy);color:var(--navy)}
.sr-sort.is-active{border-color:var(--navy);background:var(--navy);color:#fff}

.sr-card{display:grid;grid-template-columns:240px 1fr 234px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:16px;transition:.2s;cursor:pointer}
.sr-card:hover{box-shadow:var(--shadow-lg)}
.sr-card__media{position:relative;min-height:236px}
.sr-card__media img{width:100%;height:100%;object-fit:cover}
.sr-card__fav{position:absolute;inset-block-start:10px;inset-inline-end:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.93);color:var(--rose);display:grid;place-items:center;font-size:16px;box-shadow:var(--shadow)}
.sr-card__tag{position:absolute;inset-block-start:10px;inset-inline-start:10px;background:var(--rose);color:#fff;font-size:12px;font-weight:800;padding:5px 11px;border-radius:8px}
.sr-card__body{padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.sr-card__name{font-size:19px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sr-card__loc{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sr-card__loc a{color:var(--navy);text-decoration:underline;font-weight:700}
.sr-locscore{color:var(--teal);font-weight:800;font-size:13px;margin-top:2px}
.sr-room{font-weight:800;color:var(--ink);font-size:14.5px;margin-top:9px}
.sr-bed{color:var(--muted);font-size:13px}
.sr-perks{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.sr-perk{font-size:12.5px;font-weight:800;color:var(--teal);background:var(--teal-soft);border-radius:7px;padding:4px 10px}
.sr-perk::before{content:"✓ "}
.sr-left{color:var(--rose);font-weight:800;font-size:13px;margin-top:7px}
.sr-card__side{padding:16px 18px;border-inline-start:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;text-align:end;gap:16px}
.sr-rate{display:flex;align-items:center;gap:9px}
.sr-rate__txt b{display:block;font-size:13.5px;color:var(--navy)}
.sr-rate__txt small{color:var(--muted);font-size:12px}
.sr-rate__num{background:var(--navy);color:#fff;font-weight:900;font-size:15px;padding:7px 10px;border-radius:8px 8px 8px 0}
.sr-price__meta{color:var(--muted);font-size:12.5px}
.sr-price__old{color:#9aa7b4;text-decoration:line-through;font-size:13px}
.sr-price__now{font-size:23px;font-weight:900;color:var(--navy);line-height:1.3}
.sr-price__tax{color:var(--muted);font-size:12px;margin-bottom:10px}
.sr-empty{background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);padding:40px 20px;text-align:center;color:var(--muted)}

@media(max-width:980px){
  .sr-filters{position:static}
  .sr-card{grid-template-columns:200px 1fr}
  .sr-card__side{grid-column:1/-1;border-inline-start:none;border-block-start:1px solid var(--line);flex-direction:row;align-items:center;justify-content:space-between}
}
@media(max-width:640px){
  .sr-card{grid-template-columns:1fr}
  .sr-card__media{min-height:180px}
  .sr-card__side{flex-direction:column;align-items:stretch;text-align:start}
  .sr-rate{justify-content:flex-start}
}
body.dark .sr-rate__num{background:#2b3a48}
body.dark .sr-sort.is-active{background:#2b3a48;border-color:#2b3a48}
body.dark .sr-map{background:linear-gradient(160deg,#16222e,#0e1820)}
body.dark .sr-map__btn{background:#22303d;color:var(--ink)}
.sr-divider{font-size:17px;font-weight:800;color:var(--navy);margin:26px 0 14px;padding-top:20px;border-top:1px solid var(--line)}

/* ===== Checkout (book.html) — Booking-style ===== */
body.checkout .sheader__nav{display:none}
.ck-bar{background:var(--card);border-bottom:1px solid var(--line);margin-bottom:24px}
.ck-bar__inner{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 20px;flex-wrap:wrap}
.ck-secure{color:var(--teal);font-weight:800;font-size:13.5px;display:flex;gap:8px;align-items:center}
.ck-secure::before{content:"✓";font-weight:900}
.ck-steps{display:flex;align-items:center;gap:10px}
.ck-stepi{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--muted);white-space:nowrap}
.ck-stepi__n{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:13px;font-weight:800}
.ck-stepi.is-active{color:var(--navy)}
.ck-stepi.is-active .ck-stepi__n{background:var(--navy);border-color:var(--navy);color:#fff}
.ck-stepi.is-done{color:var(--teal)}
.ck-stepi.is-done .ck-stepi__n{background:var(--teal);border-color:var(--teal);color:#fff}
.ck-steps__line{width:44px;height:2px;background:var(--line)}

.ck-grid{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
.ck-note{background:var(--teal-soft);border:1px solid rgba(21,154,140,.25);color:#0f6f66;border-radius:var(--radius-sm);padding:13px 16px;font-size:14px;font-weight:700;margin-bottom:16px;display:flex;gap:9px}
.ck-note::before{content:"✓";font-weight:900}
.ck-hint{color:var(--muted);font-size:12.5px;margin:-6px 0 14px}
.ck-radio{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.ck-radio label{flex:1;min-width:200px;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;cursor:pointer}
.ck-radio input{accent-color:var(--gold);width:17px;height:17px}
.ck-radio label:has(input:checked){border-color:var(--gold);background:var(--gold-soft)}

.ck-extra{display:flex;align-items:flex-start;gap:11px;border:1.5px solid var(--line);border-radius:10px;padding:13px 14px;margin-bottom:10px;cursor:pointer}
.ck-extra input{accent-color:var(--gold);width:18px;height:18px;margin-top:3px;flex:0 0 auto}
.ck-extra b{display:block;font-size:14.5px;color:var(--ink)}
.ck-extra small{color:var(--muted);font-size:12.5px}
.ck-extra__p{margin-inline-start:auto;font-weight:900;color:var(--navy);white-space:nowrap;font-size:14px}
.ck-extra:has(input:checked){border-color:var(--gold);background:var(--gold-soft)}
.ck-roomline{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}

.ck-side{position:sticky;top:100px;display:grid;gap:14px}
.ck-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ck-box__h{padding:12px 16px;border-bottom:1px solid var(--line);font-weight:800;color:var(--navy);font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.ck-box__b{padding:14px 16px}
.ck-hotel{display:flex;gap:12px}
.ck-hotel img{width:76px;height:76px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.ck-hotel b{color:var(--navy);font-size:15px;display:block}
.ck-hotel small{color:var(--muted);font-size:12.5px;display:block}
.ck-dates{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ck-dates>div{border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.ck-dates small{color:var(--muted);font-size:11.5px;display:block}
.ck-dates b{color:var(--navy);font-size:13.5px;display:block;margin:3px 0}
.ck-dates span{color:var(--muted);font-size:11.5px}
.ck-kv{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--muted);padding:6px 0}
.ck-kv b{color:var(--ink);font-weight:700}
.ck-kv--sep{border-top:1px dashed var(--line);margin-top:6px;padding-top:10px}
.ck-total{background:var(--navy);color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.ck-total small{display:block;font-size:11.5px;opacity:.78;font-weight:600}
.ck-total b{font-size:24px;font-weight:900}
.ck-good{background:var(--teal-soft);color:#0f6f66;border-radius:var(--radius-sm);padding:12px 14px;font-size:13.5px;font-weight:700}
.ck-good div{display:flex;gap:8px}
.ck-good div::before{content:"✓";font-weight:900}
.ck-good div+div{margin-top:8px}
.ck-change{color:var(--navy);font-weight:700;font-size:13px;text-decoration:underline;cursor:pointer}

@media(max-width:980px){
  .ck-grid{grid-template-columns:1fr}
  .ck-side{position:static;order:-1}
  .ck-bar__inner{justify-content:center}
}
@media(max-width:640px){
  .ck-steps__line{width:20px}
  .ck-stepi{font-size:13px}
}
body.dark .ck-total{background:#0a131c}
body.dark .ck-note,body.dark .ck-good{color:var(--teal);border-color:rgba(21,154,140,.3)}

/* ==========================================================================
   BRAND SKIN — إبدأ رحلتك (erehletk.com)
   Re-skins the whole booking system onto the site's identity: the amber→rose→
   violet "grid" gradient over black and white, Century Gothic / Madani Arabic,
   and square corners. Appended last so it wins over the tokens above.
   ========================================================================== */

/* ---------- Fonts (served from the main site at /assets/fonts) ---------- */
@font-face{font-family:'Madani Arabic';src:url('/assets/fonts/madani-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Madani Arabic';src:url('/assets/fonts/madani-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Madani Arabic';src:url('/assets/fonts/madani-900.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'RB';src:url('/assets/fonts/rb-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'RB';src:url('/assets/fonts/rb-700.woff2') format('woff2');font-weight:700;font-display:swap}
/* Latin + digits come from Century Gothic even in Arabic — the Madani demo cut
   ships watermarked numerals, and the brand sheet sets figures in Century. */
@font-face{font-family:'Brand Head Latin';src:url('/assets/fonts/century-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-02FF,U+2000-206F,U+20A0-20BF,U+2190-21FF}
@font-face{font-family:'Brand Head Latin';src:url('/assets/fonts/century-700.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-02FF,U+2000-206F,U+20A0-20BF,U+2190-21FF}
@font-face{font-family:'Brand Body Latin';src:url('/assets/fonts/century-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-02FF,U+2000-206F,U+20A0-20BF}
@font-face{font-family:'Brand Body Latin';src:url('/assets/fonts/century-700.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-02FF,U+2000-206F,U+20A0-20BF}

/* ---------- Tokens remapped to the brand ---------- */
:root{
  --amber:#E3A03C; --violet:#7B31A8;
  --grid:linear-gradient(135deg,#E3A03C 0%,#BC5E86 50%,#7B31A8 100%);
  --ease:cubic-bezier(.25,.46,.45,.94);
  --font-head:'Brand Head Latin','Madani Arabic',sans-serif;
  --font-body:'Brand Body Latin','RB',sans-serif;

  --navy:#141414; --navy-2:#2b2b2b; --navy-soft:#3d3d3d;
  --gold:#E3A03C; --gold-2:#BC5E86; --gold-soft:rgba(227,160,60,.13);
  --teal:#7B31A8; --teal-soft:rgba(123,49,168,.09);
  --ink:#141414; --muted:#808285; --line:#e8e8e8;
  --bg:#f7f7f7; --card:#fff; --rose:#BC5E86;
  --radius:0px; --radius-sm:0px;
  --shadow:0 6px 34px rgba(0,0,0,.08);
  --shadow-lg:0 14px 50px rgba(0,0,0,.14);
  --grad:linear-gradient(135deg,#E3A03C 0%,#BC5E86 50%,#7B31A8 100%);
  --grad-gold:linear-gradient(135deg,#E3A03C 0%,#BC5E86 50%,#7B31A8 100%);
}

/* ---------- Base typography ---------- */
body{font-family:var(--font-body);font-size:15px;line-height:27px;color:var(--muted);background:var(--white,#fff)}
h1,h2,h3,h4,h5,h6,.panel h3,.hp-head__name,.sr-card__name,.sr-head h2,.hp-rt__name,.section__title,
.ck-box__h,.hp-score__txt b,.sr-rate__txt b,.rcard__title,.logo{font-family:var(--font-head);color:var(--ink)}
.container{max-width:1100px}
::selection{background:var(--violet);color:#fff}

/* ---------- Buttons ---------- */
.btn{border-radius:0;font-family:var(--font-head);font-weight:700;font-size:13.5px;letter-spacing:.6px;
  padding:14px 30px;border:2px solid var(--ink);background:transparent;color:var(--ink);
  position:relative;overflow:hidden;z-index:0;box-shadow:none;
  transition:color .35s var(--ease),border-color .35s var(--ease)}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--grid);
  transform:scaleX(0);transform-origin:inline-start;transition:transform .4s var(--ease)}
.btn:hover{color:#fff;border-color:transparent;transform:none;box-shadow:none}
.btn:hover::before{transform:scaleX(1)}
.btn--primary{background:var(--grid);border-color:transparent;color:#fff}
.btn--primary::before{background:var(--ink)}
.btn--primary:hover{color:#fff}
.btn--navy{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--navy::before{background:var(--grid)}
.btn--ghost{border:2px solid var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:transparent;color:#fff}
.btn--sm{padding:10px 20px;font-size:12.5px}
.btn--lg{padding:16px 34px;font-size:14px}
.btn[disabled],.btn[disabled]:hover{opacity:.4;color:var(--muted);border-color:var(--line);background:transparent}
.btn[disabled]::before{display:none}
.btn--primary[disabled]{background:var(--line)}

/* ---------- Top bar ---------- */
.top-bar{background:var(--grid);color:#fff;font-size:12px;letter-spacing:.6px;height:44px;display:flex;align-items:center}
.top-bar .container{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;width:100%}
.top-phone{direction:ltr;unicode-bidi:isolate;display:inline-flex;align-items:center;gap:6px;justify-self:start}
.top-bar a:hover,.top-bar button:hover{opacity:.75}
.social-list{display:flex;align-items:center;justify-content:center;gap:17px}
.social-list a{opacity:.9;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.social-list a:hover{opacity:1;transform:translateY(-2px)}
.lang-switch{justify-self:end;display:inline-flex;align-items:center;gap:7px;color:#fff;background:transparent;
  font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:1px;padding:5px 12px;border:1px solid rgba(255,255,255,.55)}
.lang-switch:hover{background:#fff;color:var(--violet);border-color:#fff;opacity:1}
.flag{display:block;flex:none}

/* ---------- Header ---------- */
.site-header{background:#fff;position:sticky;inset-block-start:0;z-index:120;border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:96px}
.site-header .logo{display:flex;align-items:center}
.site-header .logo img{height:66px;width:auto;display:block}
.main-nav>ul{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0}
.main-nav>ul>li{position:relative}
.main-nav>ul>li>a{font-family:var(--font-head);font-size:13.5px;font-weight:700;letter-spacing:.8px;color:var(--ink);padding-block:10px;display:inline-block;position:relative}
.main-nav>ul>li>a::after{content:'';position:absolute;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;
  background:var(--grid);transform:scaleX(0);transform-origin:inline-start;transition:transform .3s var(--ease)}
.main-nav>ul>li:hover>a::after,.main-nav>ul>li.current>a::after{transform:scaleX(1)}
.header-tools{display:flex;align-items:center;gap:12px}
.tool{font-family:var(--font-head);font-size:12.5px;font-weight:700;letter-spacing:.8px;color:var(--ink);
  border:1px solid var(--line);padding:9px 14px;display:inline-flex;align-items:center;background:transparent}
.tool:hover{border-color:var(--ink)}
body.checkout .main-nav{display:none}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--ink);color:#fff;padding-block:78px;text-align:center}
.newsletter h2{color:#fff;font-size:34px;margin-bottom:8px}
.newsletter p{color:rgba(255,255,255,.7);margin-bottom:28px}
.newsletter-form{display:flex;max-width:520px;margin-inline:auto}
.newsletter-form input{flex:1;height:54px;padding-inline:20px;border:0;background:#fff;color:var(--ink);font-family:inherit;outline:none}
.newsletter-form button{height:54px;padding-inline:32px;background:var(--grid);color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:1.2px;transition:filter .3s var(--ease)}
.newsletter-form button:hover{filter:brightness(1.12)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.65);padding-block:74px 0;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:52px}
.site-footer h6{color:#fff;font-size:13px;letter-spacing:2px;margin-bottom:22px;position:relative;padding-bottom:14px;font-weight:700}
.site-footer h6::after{content:'';position:absolute;inset-block-end:0;inset-inline-start:0;width:38px;height:3px;background:var(--grid)}
.site-footer a:hover{color:#fff}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin-bottom:11px;font-size:14px}
.footer-contact{list-style:none;margin:0;padding:0}
.footer-contact li{margin-bottom:13px;font-size:14px;display:flex;gap:11px;align-items:flex-start}
.footer-contact i{background:var(--grid);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-top:5px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-block:22px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;font-size:13px;flex-wrap:wrap}
.demo-flag{background:var(--grid);color:#fff;padding:3px 10px;font-size:11px;font-weight:700;margin-inline-start:8px}
.site-footer .pay-list{display:flex;gap:8px;flex-wrap:wrap}
.site-footer .pay{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:0;
  padding:5px 12px;font-size:12px;font-weight:700;color:#e8eef5}
.whatsapp-fab{position:fixed;inset-block-end:28px;inset-inline-start:28px;z-index:150;width:46px;height:46px;
  background:#25D366;color:#fff;border-radius:50%;display:grid;place-items:center;box-shadow:var(--shadow)}

/* ---------- Component fixes after the remap ---------- */
.tag-soft{border-radius:0;background:var(--gold-soft);color:#8a5a12;font-family:var(--font-head)}
.sr-perk,.hp-chk,.hp-perk{border-radius:0}
.sr-perk{background:var(--teal-soft);color:var(--violet)}
.hp-score__num,.sr-rate__num{border-radius:0;background:var(--grid)}
.rating__score{border-radius:0;background:var(--grid)}
.hp-rt th{background:var(--ink)}
.ck-total{background:var(--ink)}
.sr-sort.is-active{background:var(--ink);border-color:var(--ink)}
.sr-card__tag,.hcard__tag{border-radius:0;background:var(--grid)}
.hp-tab.is-active{border-bottom-color:var(--violet)}
.hp-tabs{inset-block-start:96px}
.filters,.sr-filters{inset-block-start:112px}
.bookbox,.ck-side{inset-block-start:112px}
.stars{color:var(--amber)}
.sr-locscore,.hp-loc{color:var(--violet)}
.hp-opts li,.hp-hi li::before,.hp-chk::before,.ck-note::before,.ck-good div::before{color:var(--violet)}
.ck-note,.ck-good{color:#5f2585;border-radius:0;background:var(--teal-soft)}
.sr-map{background:linear-gradient(160deg,#f2f2f2,#e6e6e6);border-radius:0}
.sr-map__btn,.hp-gallery__all{border-radius:0;font-family:var(--font-head)}
.panel,.sr-card,.ck-box,.hp-rt-wrap,.sr-empty,.hp-revcard,.city-link,.pkg,.confirm__code{border-radius:0}
.inp input,.inp select,.inp textarea,.hp-qty,.select,.field,.search-inp,.pill,.sr-chk input{border-radius:0}
.inp input:focus,.inp select:focus,.inp textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--teal-soft)}
.pill.is-active,.pill:hover{border-color:var(--violet);background:var(--teal-soft);color:var(--violet)}
.search__tab.is-active{background:var(--grid);color:#fff;border-radius:0}
.step.is-done .dot{background:var(--violet);border-color:var(--violet)}
.step.is-done::before{background:var(--violet)}
.step.is-active .dot{background:var(--ink);border-color:var(--ink)}
.ck-stepi.is-done .ck-stepi__n{background:var(--violet);border-color:var(--violet)}
.ck-stepi.is-active .ck-stepi__n{background:var(--ink);border-color:var(--ink)}
.confirm__check{background:var(--teal-soft);color:var(--violet)}
.hero{background:var(--grid)}
.hero::before,.hero::after{display:none}

@media(max-width:900px){
  .main-nav{display:none}
  .header-inner{height:76px}
  .site-header .logo img{height:52px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .top-bar .container{grid-template-columns:1fr auto}
  .social-list{display:none}
  .hp-tabs{inset-block-start:0}
}
@media(max-width:640px){
  .footer-grid{grid-template-columns:1fr}
  .newsletter-form{flex-direction:column;gap:10px}
}

/* ---------- Hero + search bar: the site's slider caption and gradient filter bar ---------- */
.hero{background:#111;padding:110px 0 140px}
.hero::before{content:"";display:block;position:absolute;inset:0;opacity:1;mix-blend-mode:normal;
  background:url('https://images.unsplash.com/photo-1512453979798-5ea266f8880c?auto=format&fit=crop&w=1600&q=70') center/cover}
.hero::after{content:"";display:block;position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.68) 100%)}
.hero__inner{text-align:start;max-width:680px;margin:0}
.hero h1{color:#fff;font-family:var(--font-head);font-weight:700;font-size:clamp(30px,5vw,54px);line-height:1.2}
.hero h1 .accent{background:var(--grid);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero p{color:rgba(255,255,255,.9);font-size:17px;line-height:31px}

.searchwrap{margin-top:-56px}
.search{background:var(--grid);padding:22px 26px;box-shadow:var(--shadow-lg)}
.search__tabs{padding:0 0 16px;gap:6px}
.search__tab{border-radius:0;color:rgba(255,255,255,.9);font-family:var(--font-head);font-size:12.5px;
  font-weight:700;letter-spacing:.8px;padding:8px 16px;border:1px solid rgba(255,255,255,.45)}
.search__tab:hover:not(.is-active){background:rgba(255,255,255,.16);color:#fff}
.search__tab.is-active{background:#fff;color:var(--ink);border-color:#fff}
.field{background:#fff;border:0;padding:9px 14px;min-height:56px;display:flex;flex-direction:column;justify-content:center}
.field:hover{border:0}
.field label{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:1.2px;color:#8b8b8b;margin-bottom:3px}
.search__go .btn{background:var(--ink);color:#fff;border-color:var(--ink);height:100%;min-height:56px;padding-inline:34px}
.search__go .btn::before{background:#fff}
.search__go .btn:hover{color:var(--ink);border-color:var(--ink)}
.pop{border-radius:0}
.pop__item{border-radius:0}
.pop__item .ico{border-radius:0}
.stepper button{border-radius:50%}
.stepper button:hover{border-color:var(--violet);background:var(--teal-soft)}

/* ---------- Sections, cards and remaining gold/navy leftovers ---------- */
.section__eyebrow{background:var(--grid);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;font-family:var(--font-head);letter-spacing:2px}
.section__title{font-family:var(--font-head);font-weight:700}
.dest,.hcard,.pkg,.feat-card{border-radius:0}
.dest::after{background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85))}
.dest__price{background:var(--grid);color:#fff;border-radius:0;font-family:var(--font-head)}
.city-link:hover{border-color:var(--violet);background:var(--teal-soft)}
.cta-band{background:var(--grid);border-radius:0}
.amen,.hcard__amen .amen{border-radius:0}
.toast{border-radius:0}
.modal,.modal__head,.auth__card{border-radius:0}

/* ---------- Post-launch fixes ---------- */
/* 1. The accent headline sits on a dark photo — the brand gradient's violet end
      goes muddy there, so the hero uses a lightened cut of the same ramp. */
.hero h1 .accent{background:linear-gradient(135deg,#F5BE6C 0%,#EC8FB6 48%,#C282E4 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* 2. Mobile: keep the nav reachable as a scrolling row instead of hiding it,
      and stop the top bar wrapping the phone number onto two lines. */
@media(max-width:900px){
  .main-nav{display:block;order:3;width:100%;border-top:1px solid var(--line)}
  .main-nav>ul{gap:20px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
  .main-nav>ul::-webkit-scrollbar{display:none}
  .main-nav>ul>li{flex:0 0 auto}
  .main-nav>ul>li>a{padding-block:4px;font-size:13px;white-space:nowrap}
  .header-inner{flex-wrap:wrap;height:auto;padding-block:12px;row-gap:2px}
  body.checkout .main-nav{display:none}
  .top-bar{height:auto;padding-block:9px}
  .top-bar .container{grid-template-columns:auto auto;gap:10px;justify-content:space-between}
  .top-phone{font-size:11.5px;white-space:nowrap}
  .lang-switch{padding:4px 9px;font-size:11px}
}

/* ==========================================================================
   MATCH THE LIVE SITE (measured 2026-08-23)
   The site rounds cards, buttons, fields and the filter bar to 10px — the
   earlier square-corner assumption was wrong. Its fields are 46px tall, not 75.
   ========================================================================== */
:root{--radius:10px;--radius-sm:10px}

.panel,.sr-card,.ck-box,.hp-rt-wrap,.sr-empty,.hp-revcard,.city-link,.pkg,.confirm__code,
.dest,.hcard,.feat-card,.search,.sr-map,.sr-filters,.modal,.auth__card,.toast,.cta-band,
.btn,.tag-soft,.sr-perk,.hp-chk,.hp-score__num,.sr-rate__num,.rating__score,.hp-searchbar,
.sr-card__tag,.hcard__tag,.sr-map__btn,.hp-gallery__all,.field,.inp input,.inp select,
.inp textarea,.hp-qty,.select,.search-inp,.pill,.search__tab,.sr-sort,.pop,.pop__item,
.ck-note,.ck-good,.hp-fine,.amen,.detail__gallery,.dest__price,.demo-flag,.ck-extra,
.ck-radio label,.tool,.lang-switch,.site-footer .pay,.roomrow,.payopt{border-radius:10px}
.detail__gallery img{border-radius:0}
.stepper button,.sr-card__fav,.confirm__check,.step .dot,.ck-stepi__n{border-radius:50%}

/* ---------- Search box: the site's proportions, not the old tall ones ---------- */
.search{padding:22px 30px}
.search__tabs{padding:0 0 14px;gap:7px}
.search__tab{padding:6px 28px;font-size:12.5px;line-height:1.7}
.field{min-height:58px;padding:7px 16px}
.field label{font-size:10.5px;margin-bottom:1px;letter-spacing:1px}
.field .val,.field input.fld,.field select.fld,.field input{font-size:14.5px}
.search__go .btn{min-height:58px;padding-inline:42px}

/* ---------- Result card: shorter and wider ---------- */
.results{grid-template-columns:252px 1fr;gap:20px}
.sr-card{grid-template-columns:212px 1fr 208px}
.sr-card__media{min-height:206px}
.sr-card__body{padding:13px 16px;gap:2px}
.sr-card__side{padding:13px 16px;gap:10px}
.sr-card__name{font-size:17.5px}
.sr-card__loc{font-size:12px}
.sr-locscore{font-size:12.5px;margin-top:1px}
.sr-room{margin-top:7px;font-size:14px}
.sr-bed{font-size:12.5px}
.sr-perks{margin-top:6px;gap:6px}
.sr-perk{padding:3px 9px;font-size:12px}
.sr-left{margin-top:5px;font-size:12.5px}
.sr-price__now{font-size:21px}
.sr-price__tax{margin-bottom:8px}
.sr-sorts{padding-bottom:12px;margin-bottom:14px}
.sr-sort{padding:7px 17px}

/* The active-tab rule above is more specific, so it kept the square corner. */
.search__tab,.search__tab.is-active,.sr-sort,.sr-sort.is-active{border-radius:10px}
/* The 27px body line-height was inflating every search field to 69px. */
.field{min-height:56px;padding:6px 16px;justify-content:center}
.field label{line-height:1.5;margin-bottom:0}
.field .val,.field input.fld,.field select.fld,.field input,.field select{line-height:1.5}
.search__go .btn{min-height:56px}


/* ================= Phone layout =================
   The "Result card: shorter and wider" block further up sets .results and
   .sr-card at the top level — after the @media(max-width:980px) block — so it
   won out at every width and the page laid itself out 1032px wide on a 375px
   screen. That is why the phone showed a cropped desktop and pinch-zoom
   revealed the rest.
   This block is last in the file, so it wins. Nothing here applies above
   900px, so the desktop layout is unchanged. */
@media (max-width:900px){

  /* Filters stop being a fixed 252px column and sit above the results. */
  .results{grid-template-columns:1fr !important;gap:14px;}
  .sr-filters{position:static;}
  .sr-map{width:100%;}

  /* The card becomes a compact row: thumbnail down the side, name and details
     beside it, price underneath — so a whole result fits the screen width
     instead of demanding 740px. */
  .sr-card{grid-template-columns:106px minmax(0,1fr) !important;}
  .sr-card__media{grid-row:1 / span 2;min-height:0;height:100%;}
  .sr-card__media img{width:100%;height:100%;object-fit:cover;}
  .sr-card__body{grid-column:2;padding:10px 12px 4px;min-width:0;}
  .sr-card__side{
    grid-column:2;padding:0 12px 11px;gap:5px;
    align-items:flex-start;text-align:start;
  }

  /* Type scaled for the narrower column. */
  .sr-card__name{font-size:14px;line-height:1.35;}
  .sr-card__loc{font-size:11px;}
  .sr-locscore{font-size:11px;}
  .sr-room{margin-top:5px;font-size:12px;}
  .sr-bed{font-size:11px;}
  .sr-perks{margin-top:5px;gap:4px;}
  .sr-perk{padding:2px 7px;font-size:10px;}
  .sr-left{font-size:11px;}
  .sr-price__now{font-size:17px;}
  .sr-price__tax{font-size:10.5px;margin-bottom:6px;}
  .sr-rate{font-size:11px;}

  /* Sort chips scroll rather than wrap into a block. */
  .sr-sorts{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .sr-sorts::-webkit-scrollbar{display:none;}
  .sr-sort{flex:0 0 auto;padding:6px 12px;font-size:11.5px;white-space:nowrap;}

  .sr-head{font-size:16px;}

  /* Nothing on a phone may be wider than the screen. */
  .container{padding-inline:14px;}
  .dest-grid{grid-template-columns:repeat(2,1fr);}
  .cards{grid-template-columns:1fr;}
  .detail__grid,.booking-grid{grid-template-columns:1fr;}
  .facts,.amen-grid{grid-template-columns:repeat(2,1fr);}
  .detail__gallery{grid-template-columns:1fr;grid-template-rows:auto;height:auto;}
  .form-row{grid-template-columns:1fr;}
  .steps{max-width:100%;}
}

/* A 1fr track has an automatic min-content floor, so the single results column
   inflated to its widest child (599px) inside a 347px box and the page kept
   overflowing. minmax(0,1fr) lets the track actually shrink; min-width:0 does
   the same for the flex/grid children inside each card. */
@media (max-width:900px){
  .results{grid-template-columns:minmax(0,1fr) !important;}
  .results__main,.sr-filters,.sr-map,.sr-head,.sr-sorts{min-width:0;max-width:100%;}
  .sr-card{min-width:0;}
  .sr-card__body,.sr-card__side,.sr-card__media{min-width:0;}
  .sr-card__name,.sr-card__loc,.sr-room,.sr-bed,.sr-left{overflow-wrap:anywhere;}
  .sr-perks{flex-wrap:wrap;}
}

/* ================= Phone round two =================
   Search panel sized like the home page, map and filters behind icon buttons,
   and the result card reordered. Everything is inside the media query except
   the availability button, which was asked to go on every screen. */

/* 4d. "اعرض التوفر" leaves the card at every width. */
.sr-card__side .btn--block{display:none;}

@media (max-width:900px){

  /* 1. The search panel matches the home page: tabs on one row, fields two to
        a row, and 42px controls instead of 56px. */
  .search__tabs{flex-wrap:nowrap;overflow-x:auto;gap:5px;scrollbar-width:none;}
  .search__tabs::-webkit-scrollbar{display:none;}
  .search__tab{flex:1 1 0;min-width:0;padding:8px 4px;font-size:10.5px;white-space:nowrap;text-align:center;}
  .search__row{display:flex;flex-wrap:wrap;gap:9px;}
  .search__row .field{flex:1 1 calc(50% - 5px);min-width:0;min-height:44px;padding:5px 12px;}
  .search__row .field label{font-size:9.5px;}
  .search__row .field .val,.search__row .field input,.search__row .field select{font-size:12.5px;}
  .search__go{flex:1 1 100%;min-height:0;}
  .search__go .btn{width:100%;min-height:44px;}

  /* 2 + 3. The map panel and the 950px filter column stop taking up the page.
        Both move into a sheet opened from a small icon button. */
  .sr-map,.sr-filters{display:none;}
  .sr-tools{display:flex;gap:8px;margin-bottom:12px;}
  .sr-tool{
    flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:7px;
    min-height:42px;padding:0 12px;border:1px solid var(--line);border-radius:10px;
    background:#fff;font-family:inherit;font-weight:700;font-size:12.5px;color:inherit;cursor:pointer;
  }
  .sr-tool svg{width:16px;height:16px;flex:none;}
  .sr-tool__n{
    display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
    border-radius:9px;background:var(--grad,linear-gradient(135deg,#E3A03C,#BC5E86 50%,#7B31A8));
    color:#fff;font-size:10.5px;
  }

  /* The sheet itself: a panel that rises from the bottom over a scrim. */
  .msheet{position:fixed;inset:0;z-index:400;display:none;}
  .msheet.is-open{display:block;}
  .msheet__back{position:absolute;inset:0;background:rgba(0,0,0,.45);}
  .msheet__panel{
    position:absolute;inset-inline:0;inset-block-end:0;max-height:86vh;
    display:flex;flex-direction:column;
    background:#fff;border-radius:16px 16px 0 0;
    padding-block-end:env(safe-area-inset-bottom,0px);
  }
  .msheet__head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 16px;border-block-end:1px solid var(--line);flex:none;
  }
  .msheet__title{font-weight:700;font-size:15px;}
  .msheet__x{
    width:34px;height:34px;border:0;border-radius:50%;background:#f1f1f4;
    font-size:19px;line-height:1;cursor:pointer;color:inherit;
  }
  .msheet__body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 16px 18px;}
  /* Inside the sheet the two panels take the full width and lose their card look. */
  .msheet__body .sr-filters,.msheet__body .sr-map{display:block;width:100%;box-shadow:none;padding:0;}
  .msheet__body .sr-map{min-height:220px;}
  body.msheet-open{overflow:hidden;}

  /* 4. The card: name first, stars beneath it, score beside the name, then the
        details, then the price. The rows were each 27px tall for a single line
        of text, which is what stretched the card — and with it the picture — so
        the line-heights come down and the image comes back to a sane shape. */
  .sr-card{grid-template-columns:112px minmax(0,1fr) !important;}
  .sr-card__media{grid-row:1 / span 2;min-height:0;}
  .sr-card__body{padding:9px 11px 3px;}
  .sr-card__side{padding:0 11px 10px;}

  .sr-nameline{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
  .sr-card__name{
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    font-size:13.5px;line-height:1.3;min-width:0;
  }
  .sr-card__name .stars{font-size:9px;letter-spacing:.5px;line-height:1;}
  .sr-nameline .sr-rate{flex:none;display:flex;align-items:center;gap:5px;}
  .sr-nameline .sr-rate__txt{font-size:9.5px;line-height:1.2;text-align:end;}
  .sr-nameline .sr-rate__num{width:30px;height:30px;font-size:12px;}

  .sr-card__loc{font-size:10.5px;line-height:1.5;margin-top:3px;}
  .sr-locscore{font-size:10.5px;line-height:1.5;margin-top:2px;}
  .sr-room{font-size:11.5px;line-height:1.45;margin-top:4px;}
  .sr-bed{font-size:10.5px;line-height:1.45;}
  .sr-perks{margin-top:4px;gap:4px;}
  .sr-perk{padding:2px 6px;font-size:9.5px;line-height:1.5;}
  .sr-left{font-size:10px;line-height:1.4;margin-top:3px;}
  .sr-price__meta{font-size:10px;line-height:1.4;}
  .sr-price__old{font-size:11px;line-height:1.4;}
  .sr-price__now{font-size:16px;line-height:1.25;}
  .sr-price__tax{font-size:9.5px;line-height:1.4;margin-bottom:0;}
}

/* The hidden attribute loses to an explicit display, so the count badge kept
   showing a bare "0" when nothing was filtered. */
@media (max-width:900px){ .sr-tool__n[hidden]{display:none;} }

/* ================= Phone: hotel photo mosaic =================
   The five detail photos stacked one under another on a phone. They now sit as
   a three-up mosaic — one tall photo on the right, two on the left — with the
   lower-left tile carrying a "+N" badge into the full album. Phones only; the
   desktop keeps its 2fr 1fr 1fr strip. */
@media (max-width:900px){
  .detail__gallery{
    grid-template-columns:1.55fr 1fr;
    grid-template-rows:1fr 1fr;
    gap:6px;height:auto;aspect-ratio:4/3;
  }
  /* First photo is the tall one. In RTL the first column is the right-hand one,
     which is where it was asked to sit. */
  .detail__gallery > *:nth-child(1){grid-row:1 / span 2;}
  /* Only three tiles show; the rest live in the album behind the badge. */
  .detail__gallery > *:nth-child(n+4){display:none;}
  .detail__gallery img{width:100%;height:100%;object-fit:cover;display:block;}

  .dg-more{position:relative;overflow:hidden;}
  .dg-more__badge{
    position:absolute;inset:0;width:100%;border:0;padding:0;
    display:grid;place-items:center;gap:2px;
    background:rgba(0,0,0,.46);color:#fff;cursor:pointer;
    font-family:inherit;font-weight:700;font-size:15px;line-height:1.2;
  }
  .dg-more__badge small{display:block;font-size:9.5px;font-weight:400;opacity:.9;}

  /* The site's own "عرض كل الصور" button is a placeholder that only raises a
     toast, so it is redundant next to a badge that opens the real album. */
  .hp-gallery__all{display:none;}
}

/* The album itself, inside the site's existing modal. */
.dg-album{display:grid;gap:8px;}
.dg-album img{width:100%;height:auto;border-radius:10px;display:block;}

/* place-items centres each grid row separately, so the count and the word sat
   half a tile apart. A centred flex column keeps them together — and the
   badge lays out LTR so the plus stays in front of the number instead of
   being flipped to "2+" by the Arabic direction. */
@media (max-width:900px){
  .dg-more__badge{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:1px;direction:ltr;
  }
  .dg-more__badge small{margin-top:1px;}
}