:root{
    --emerald:#1e93d6; --emerald-strong:#1574ad; --emerald-soft:#e8f4fc;
    --gold:#c69a45; --gold-soft:#f3e9d2;
    --ink:#14201d; --muted:#5b6b66; --line:#e2eae6;
    --paper:#ffffff; --panel:#f5f8f6; --panel-2:#eef4f1;
    --shadow:0 18px 44px -22px rgba(14,60,50,.45);
    --radius:18px; --radius-sm:12px;
    --font:-apple-system,"Segoe UI",Tahoma,"Noto Naskh Arabic","Noto Sans Arabic",sans-serif;
    --maxw:1160px;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --emerald:#4fb8ec; --emerald-strong:#2f9bd6; --emerald-soft:#10222e;
      --gold:#d9b968; --gold-soft:#2a2415;
      --ink:#e9f1ee; --muted:#9db3ac; --line:#20302b;
      --paper:#0c1613; --panel:#101d18; --panel-2:#13221d;
      --shadow:0 20px 50px -24px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="light"]{
    --emerald:#1e93d6; --emerald-strong:#1574ad; --emerald-soft:#e8f4fc;
    --gold:#c69a45; --gold-soft:#f3e9d2;
    --ink:#14201d; --muted:#5b6b66; --line:#e2eae6;
    --paper:#ffffff; --panel:#f5f8f6; --panel-2:#eef4f1; --shadow:0 18px 44px -22px rgba(14,60,50,.45);
  }
  :root[data-theme="dark"]{
    --emerald:#4fb8ec; --emerald-strong:#2f9bd6; --emerald-soft:#10222e;
    --gold:#d9b968; --gold-soft:#2a2415;
    --ink:#e9f1ee; --muted:#9db3ac; --line:#20302b;
    --paper:#0c1613; --panel:#101d18; --panel-2:#13221d; --shadow:0 20px 50px -24px rgba(0,0,0,.7);
  }

  *{box-sizing:border-box}
  .page{direction:rtl; font-family:var(--font); color:var(--ink); background:var(--paper);
    line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  .page :where(h1,h2,h3){margin:0; line-height:1.2; text-wrap:balance; font-weight:800; letter-spacing:-.01em}
  .page p{margin:0}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
  .num{font-variant-numeric:tabular-nums}
  a{color:inherit; text-decoration:none}

  /* top bar */
  .topbar{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--paper) 88%,transparent);
    backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
  .topbar .wrap{display:flex; align-items:center; gap:26px; height:66px}
  .brand{display:flex; align-items:center; gap:10px; font-weight:900; font-size:1.25rem; letter-spacing:-.02em}
  .brand .mark{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;
    background:linear-gradient(145deg,var(--emerald),var(--emerald-strong)); color:#fff; font-size:16px}
  .brand b{color:var(--emerald)}
  .nav{display:flex; gap:22px; margin-inline-start:8px}
  .nav a{color:var(--muted); font-weight:600; font-size:.95rem; padding:6px 0; border-bottom:2px solid transparent}
  .nav a:hover{color:var(--ink); border-color:var(--gold)}
  .spacer{flex:1}
  .btn{display:inline-flex; align-items:center; gap:8px; border-radius:11px; font-weight:700; cursor:pointer;
    border:1px solid transparent; font-family:inherit; font-size:.95rem; padding:10px 18px; transition:.18s}
  .btn-ghost{color:var(--ink); background:transparent}
  .btn-ghost:hover{background:var(--panel)}
  .btn-solid{background:linear-gradient(145deg,var(--emerald),var(--emerald-strong)); color:#fff; box-shadow:var(--shadow)}
  .btn-solid:hover{transform:translateY(-1px)}
  .iconbtn{background:transparent;border:1px solid var(--line);width:40px;height:40px;border-radius:11px;cursor:pointer;color:var(--ink);display:grid;place-items:center}

  /* hero */
  .hero{position:relative; background:
      radial-gradient(120% 120% at 90% -10%, rgba(198,154,69,.18), transparent 55%),
      linear-gradient(160deg,var(--emerald-strong),var(--emerald) 70%);
    color:#fff; padding:70px 0 130px; overflow:hidden}
  .hero .pattern{position:absolute; inset:0; opacity:.10; background-size:64px 64px;
    background-image:
      radial-gradient(circle at 32px 32px, transparent 12px, #fff 12px 13px, transparent 13px),
      conic-gradient(from 45deg at 32px 32px, #fff 0 25%, transparent 0 50%, #fff 0 75%, transparent 0)}
  .hero .pattern2{position:absolute; inset:0; opacity:.06;
    background-image:linear-gradient(45deg,#fff 1px,transparent 1px),linear-gradient(-45deg,#fff 1px,transparent 1px);
    background-size:26px 26px}
  .hero .wrap{position:relative}
  .eyebrow{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.82rem;
    letter-spacing:.06em; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.22)}
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}
  .hero h1{font-size:clamp(2rem,4.6vw,3.4rem); margin:20px 0 14px; max-width:16ch}
  .hero h1 span{color:var(--gold)}
  .hero .lead{font-size:clamp(1.02rem,1.7vw,1.2rem); color:rgba(255,255,255,.9); max-width:52ch}
  .trust-inline{display:flex; gap:22px; flex-wrap:wrap; margin-top:22px; color:rgba(255,255,255,.9); font-weight:600; font-size:.92rem}
  .trust-inline span{display:flex; align-items:center; gap:8px}
  .trust-inline svg{width:18px;height:18px;stroke:var(--gold)}

  /* search card */
  .searchwrap{position:relative; margin-top:-72px; z-index:20}
  .search{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:16px}
  .search .grid{display:grid; grid-template-columns:1.4fr 1fr 1fr .9fr .9fr auto; gap:12px; align-items:end}
  .field{display:flex; flex-direction:column; gap:6px}
  .field label{font-size:.78rem; font-weight:700; color:var(--muted)}
  .field .control{display:flex; align-items:center; gap:9px; background:var(--panel); border:1px solid var(--line);
    border-radius:var(--radius-sm); padding:11px 12px}
  .field .control:focus-within{border-color:var(--emerald); background:var(--paper)}
  .field svg{width:17px;height:17px;stroke:var(--emerald);flex:none}
  .field input,.field select{border:0;background:transparent;font-family:inherit;font-size:.95rem;color:var(--ink);width:100%;outline:none}
  .search .go{height:46px; padding:0 22px; font-size:1rem; border-radius:var(--radius-sm)}
  .search .go svg{width:18px;height:18px;stroke:#fff}

  /* section shell */
  section.block{padding:64px 0}
  .head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px}
  .head .label{color:var(--gold); font-weight:800; font-size:.8rem; letter-spacing:.1em; margin-bottom:8px}
  .head h2{font-size:clamp(1.5rem,2.6vw,2.05rem)}
  .head p{color:var(--muted); margin-top:8px; max-width:46ch}
  .head a.more{color:var(--emerald); font-weight:700; white-space:nowrap}

  /* pillars */
  .pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
  .pillar{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
  .pillar .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;
    background:var(--emerald-soft); color:var(--emerald)}
  .pillar .ic svg{width:22px;height:22px;stroke:var(--emerald)}
  .pillar h3{font-size:1.05rem; margin-bottom:6px}
  .pillar p{color:var(--muted); font-size:.92rem}

  /* hotels */
  .hotels{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
  .hotel{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
    box-shadow:0 1px 0 var(--line); transition:.2s}
  .hotel:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--emerald-soft)}
  .hotel .ph{height:168px; position:relative; display:grid; place-items:center; color:#fff}
  .hotel .ph .kaaba{width:52px;height:52px;opacity:.9}
  .hotel .ph .dist{position:absolute; inset-inline-start:12px; top:12px; background:rgba(0,0,0,.42);
    backdrop-filter:blur(4px); color:#fff; font-weight:700; font-size:.78rem; padding:6px 11px; border-radius:999px;
    display:flex; align-items:center; gap:6px}
  .hotel .ph .dist svg{width:13px;height:13px;stroke:var(--gold)}
  .hotel .body{padding:16px 17px 18px}
  .hotel .stars{color:var(--gold); font-size:.9rem; letter-spacing:2px; margin-bottom:4px}
  .hotel h3{font-size:1.08rem}
  .hotel .loc{color:var(--muted); font-size:.86rem; margin-top:3px; display:flex; align-items:center; gap:6px}
  .hotel .loc svg{width:14px;height:14px;stroke:var(--muted)}
  .hotel .foot{display:flex; align-items:flex-end; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
  .hotel .price b{font-size:1.3rem; color:var(--emerald)}
  .hotel .price small{color:var(--muted); font-weight:600}
  .hotel .price .from{display:block;color:var(--muted);font-size:.74rem}
  .tag-meal{font-size:.72rem;font-weight:700;color:var(--gold);background:var(--gold-soft);padding:4px 9px;border-radius:999px}

  /* catering feature */
  .feature{background:
      radial-gradient(120% 140% at 100% 0%, rgba(198,154,69,.16), transparent 50%),
      linear-gradient(160deg,var(--emerald),var(--emerald-strong)); color:#fff; border-radius:26px; overflow:hidden}
  .feature .inner{display:grid; grid-template-columns:1.1fr .9fr; gap:10px; align-items:center}
  .feature .txt{padding:48px}
  .feature .label{color:var(--gold); font-weight:800; letter-spacing:.1em; font-size:.8rem; margin-bottom:12px}
  .feature h2{font-size:clamp(1.6rem,2.8vw,2.2rem); margin-bottom:14px; max-width:16ch}
  .feature p{color:rgba(255,255,255,.9); max-width:44ch; margin-bottom:22px}
  .meals{display:flex; flex-wrap:wrap; gap:10px}
  .meal{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:999px;
    padding:9px 15px; font-weight:600; font-size:.9rem; display:flex; align-items:center; gap:8px}
  .feature .art{align-self:stretch; min-height:340px; position:relative;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.14))}
  .feature .plate{position:absolute; inset:0; display:grid; place-items:center}
  .feature .plate .circle{width:230px;height:230px;border-radius:50%;
    background:radial-gradient(circle at 40% 35%, #fff6e6, #efd9a9 60%, #d8b877);
    box-shadow:inset 0 0 0 14px rgba(255,255,255,.35), 0 30px 60px -20px rgba(0,0,0,.5); display:grid; place-items:center; font-size:74px}

  /* choose row */
  .choose{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
  .choose .opt{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center}
  .choose .opt .big{font-size:1.5rem}
  .choose .opt h4{margin:8px 0 4px;font-size:1rem}
  .choose .opt p{color:var(--muted);font-size:.86rem}

  /* transport */
  .transport{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .tcard{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--paper)}
  .tcard .ic{width:42px;height:42px;border-radius:11px;background:var(--gold-soft);display:grid;place-items:center;margin-bottom:12px}
  .tcard .ic svg{width:22px;height:22px;stroke:var(--gold)}
  .tcard h3{font-size:1rem;margin-bottom:4px}
  .tcard p{color:var(--muted);font-size:.88rem}

  /* faq */
  .faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
  details.q{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:4px 6px}
  details.q summary{list-style:none; cursor:pointer; padding:16px 14px; font-weight:700; display:flex; justify-content:space-between; align-items:center; gap:12px}
  details.q summary::-webkit-details-marker{display:none}
  details.q summary .pm{color:var(--emerald); font-size:1.3rem; transition:.2s}
  details.q[open] summary .pm{transform:rotate(45deg)}
  details.q .ans{padding:0 14px 16px; color:var(--muted)}

  /* cta */
  .cta{background:var(--panel-2); border:1px solid var(--line); border-radius:26px; padding:46px; text-align:center}
  .cta h2{font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:10px}
  .cta p{color:var(--muted); margin-bottom:22px}
  .cta .btn-solid{padding:13px 26px; font-size:1.02rem}

  /* footer */
  footer.site{border-top:1px solid var(--line); padding:40px 0; color:var(--muted); margin-top:30px}
  footer.site .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
  footer.site .cols{display:flex; gap:40px; flex-wrap:wrap}
  footer.site a{color:var(--muted)} footer.site a:hover{color:var(--emerald)}

  .reveal{opacity:0; transform:translateY(14px); animation:rise .6s ease forwards}
  @keyframes rise{to{opacity:1; transform:none}}
  @media (prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none}}

  @media(max-width:900px){
    .nav{display:none}
    .search .grid{grid-template-columns:1fr 1fr}
    .search .go{grid-column:1/-1}
    .pillars,.hotels,.transport,.choose{grid-template-columns:1fr 1fr}
    .feature .inner{grid-template-columns:1fr} .feature .art{min-height:220px}
  }
  @media(max-width:560px){
    .search .grid{grid-template-columns:1fr}
    .pillars,.hotels,.transport,.choose{grid-template-columns:1fr}
    .feature .txt{padding:30px}
  }

/* ===== الصفحات الداخلية (قائمة/تفاصيل الفندق) ===== */
.subhead{background:linear-gradient(160deg,var(--emerald-strong),var(--emerald)); color:#fff; padding:26px 0}
.subhead .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.subhead h1{font-size:clamp(1.4rem,2.6vw,2rem)}
.breadcrumb{color:var(--muted); font-size:.88rem; margin:16px 0; display:flex; gap:8px; align-items:center}
.breadcrumb a{color:var(--emerald); font-weight:600}

/* filters */
.filters{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; margin-top:-30px; position:relative; z-index:5}
.filters .row{display:flex; flex-wrap:wrap; gap:10px; align-items:end}
.filters .field{flex:1 1 140px; min-width:120px}
.filters .go{flex:0 0 auto; align-self:end}
.chipcheck{display:inline-flex; align-items:center; gap:7px; font-size:.85rem; font-weight:600; color:var(--muted); background:var(--panel); border:1px solid var(--line); padding:8px 12px; border-radius:999px; cursor:pointer}
.chipcheck input{accent-color:var(--emerald); width:16px; height:16px}
/* rating badge (Booking-style) */
.rbadge{display:inline-flex; align-items:center; gap:8px}
.rbadge .sc{background:linear-gradient(145deg,var(--emerald),var(--emerald-strong)); color:#fff; font-weight:800; font-size:.95rem; padding:5px 9px; border-radius:9px 9px 9px 2px; min-width:34px; text-align:center}
.rbadge .lb{display:flex; flex-direction:column; line-height:1.15; font-weight:800; font-size:.85rem; color:var(--ink)}
.rbadge .lb small{font-weight:600; font-size:.72rem; color:var(--muted)}
.reviews-list{display:flex; flex-direction:column; gap:14px}
.rev{border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--panel)}
.rev .top{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px}
.rev .who{font-weight:800}
.rev .rt{color:var(--gold); letter-spacing:2px; font-size:.9rem}
.rev .cmt{color:var(--muted); font-size:.92rem}
.rev .dt{color:var(--muted); font-size:.75rem}
.starpick{display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px}
.starpick input{display:none}
.starpick label{font-size:1.6rem; color:var(--line); cursor:pointer; transition:.1s}
.starpick input:checked ~ label,.starpick label:hover,.starpick label:hover ~ label{color:var(--gold)}
/* favorite heart */
.favheart{background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4); color:#fff; width:46px; height:46px; border-radius:50%; font-size:1.3rem; cursor:pointer; display:grid; place-items:center; transition:.15s}
.favheart:hover{background:rgba(255,255,255,.3); transform:scale(1.08)}
.favheart.on{background:#fff}
/* seasonal note */
.season-note{background:var(--gold-soft); border:1px solid var(--gold); color:var(--ink); border-radius:12px; padding:10px 14px; margin-top:16px; font-size:.85rem; font-weight:700; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.season-note .chip{background:var(--paper); border:1px solid var(--line); font-weight:700}
/* favorites grid (account) */
.favgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.favcard{display:flex; gap:12px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--paper); padding:10px; transition:.15s}
.favcard:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
.favcard .thumb{flex:0 0 78px; height:78px; border-radius:10px; background:linear-gradient(150deg,var(--emerald),var(--emerald-strong)); background-size:cover; background-position:center; display:grid; place-items:center; font-size:1.6rem}
.favcard .info{display:flex; flex-direction:column; gap:2px; min-width:0}
.favcard .info b{font-size:.95rem}
/* بوّابة الشركاء المستقلة (door) */
.door{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;direction:rtl;font-family:var(--font);color:var(--ink);background:var(--paper)}
.door .side{background:linear-gradient(160deg,var(--emerald),var(--emerald-strong));color:#fff;padding:48px 44px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.door .side .mk{font-size:2rem;font-weight:900;display:flex;align-items:center;gap:10px}
.door .side h2{font-size:1.9rem;font-weight:800;line-height:1.25;margin:0}
.door .side p{opacity:.92;font-size:1rem;margin:0;max-width:420px}
.door .side ul{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:10px}
.door .side li{display:flex;align-items:center;gap:10px;font-weight:600;opacity:.96}
.door .side li b{background:rgba(255,255,255,.2);width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none}
.door .form{display:flex;align-items:center;justify-content:center;padding:34px 24px}
.door .form .box{width:100%;max-width:420px}
.door .form h1{font-size:1.5rem;font-weight:800;margin:0 0 4px}
.door .form .sub{color:var(--muted);margin:0 0 18px;font-size:.92rem}
@media(max-width:840px){.door{grid-template-columns:1fr}.door .side{display:none}}

/* listing rows */
.hlist{display:flex; flex-direction:column; gap:16px; margin-top:26px}
.hrow{display:grid; grid-template-columns:230px 1fr 210px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:.18s}
.hrow:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
.hrow .img{position:relative; min-height:170px; display:grid; place-items:center; color:#fff}
.hrow .img .dist{position:absolute; top:10px; inset-inline-start:10px; background:rgba(0,0,0,.42); color:#fff; font-weight:700; font-size:.76rem; padding:5px 10px; border-radius:999px}
.hrow .mid{padding:16px 18px}
.hrow .mid .stars{color:var(--gold); letter-spacing:2px; font-size:.9rem}
.hrow .mid h3{font-size:1.15rem; margin:3px 0}
.hrow .mid .loc{color:var(--muted); font-size:.88rem; display:flex; gap:6px; align-items:center}
.hrow .mid .am{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.chip{font-size:.74rem; color:var(--muted); background:var(--panel); border:1px solid var(--line); padding:4px 9px; border-radius:999px}
.hrow .side{border-inline-start:1px solid var(--line); padding:16px; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:8px; text-align:end}
.hrow .side .from{color:var(--muted); font-size:.74rem}
.hrow .side .p{font-size:1.5rem; font-weight:800; color:var(--emerald)}
.hrow .side small{color:var(--muted)}

/* detail */
.gallery{display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:150px 150px; gap:8px; border-radius:var(--radius); overflow:hidden; margin-top:18px}
.gallery .g{position:relative; display:grid; place-items:center; color:rgba(255,255,255,.9); font-size:34px}
.gallery .g:first-child{grid-row:1/3}
.detail-grid{display:grid; grid-template-columns:1fr 340px; gap:26px; margin-top:26px; align-items:start}
.panel{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:18px}
.panel h2{font-size:1.2rem; margin-bottom:12px}
.amgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.amgrid .a{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.9rem}
.amgrid .a svg{width:16px;height:16px;stroke:var(--emerald)}
.rooms-t{width:100%; border-collapse:collapse}
.rooms-t th,.rooms-t td{padding:12px 10px; border-bottom:1px solid var(--line); text-align:start}
.rooms-t th{font-size:.8rem; color:var(--muted); font-weight:700}
.rooms-t .rt{font-weight:700}
.rooms-t .board{font-size:.74rem; color:var(--gold); background:var(--gold-soft); padding:3px 8px; border-radius:999px}
.rooms-t .rp{font-weight:800; color:var(--emerald); font-size:1.05rem}
.book-box{position:sticky; top:84px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px}
.book-box .price{font-size:1.9rem; font-weight:800; color:var(--emerald)}
.book-box .price .old{font-size:1rem; color:var(--muted); text-decoration:line-through; font-weight:600; margin-inline-start:8px}
.book-box .bf{display:flex; flex-direction:column; gap:6px; margin:12px 0}
.book-box label{font-size:.78rem; font-weight:700; color:var(--muted)}
.book-box .ctrl{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 11px}
.book-box .ctrl input,.book-box .ctrl select{border:0;background:transparent;width:100%;font-family:inherit;color:var(--ink);outline:none}
.mapbox{height:200px; border-radius:12px; overflow:hidden; background:
    linear-gradient(0deg,var(--panel-2),var(--panel)); position:relative; display:grid; place-items:center; border:1px solid var(--line)}
.mapbox .pin{font-size:30px}
.mapbox .mlabel{position:absolute; bottom:10px; inset-inline-start:10px; background:var(--paper); border:1px solid var(--line); padding:6px 10px; border-radius:8px; font-size:.82rem; font-weight:600}
@media(max-width:900px){
  .filters .row{grid-template-columns:1fr 1fr}
  .hrow{grid-template-columns:1fr} .hrow .side{border-inline-start:0; border-top:1px solid var(--line); align-items:stretch; text-align:center}
  .detail-grid{grid-template-columns:1fr} .book-box{position:static}
  .gallery{grid-template-columns:1fr 1fr; grid-template-rows:140px 140px} .gallery .g:first-child{grid-row:auto; grid-column:1/3}
  .amgrid{grid-template-columns:1fr 1fr}
}

/* ===== نماذج الدخول/التسجيل + الإدارة ===== */
.authwrap{max-width:460px;margin:50px auto;padding:0 20px}
.authwrap.wide{max-width:920px}
.authcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}
.authcard h1{font-size:1.5rem;margin-bottom:4px}
.authcard .sub{color:var(--muted);margin-bottom:20px}
.frm{display:flex;flex-direction:column;gap:14px}
.frm .f{display:flex;flex-direction:column;gap:6px}
.frm label{font-size:.82rem;font-weight:700;color:var(--muted)}
.frm input,.frm select,.frm textarea{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-family:inherit;font-size:.95rem;color:var(--ink);outline:none;width:100%}
.frm input:focus,.frm select:focus,.frm textarea:focus{border-color:var(--emerald);background:var(--paper)}
.frm .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.alert{padding:12px 14px;border-radius:10px;margin-bottom:14px;font-size:.92rem}
.alert-err{background:#fdecea;color:#b3261e;border:1px solid #f7c9c4}
.alert-ok{background:#e9f7ef;color:#1a7a43;border:1px solid #bfe6cf}
@media (prefers-color-scheme:dark){.alert-err{background:#2a1512;color:#ff9c8f;border-color:#40201b}.alert-ok{background:#12241a;color:#7fe0a6;border-color:#1e3a2a}}

/* admin shell */
.admin{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.admin .side{background:var(--panel);border-inline-end:1px solid var(--line);padding:20px 14px}
.admin .side .b{font-weight:900;font-size:1.2rem;margin-bottom:20px;display:flex;gap:8px;align-items:center;padding:0 8px}
.admin .side a{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:10px;color:var(--muted);font-weight:600;margin-bottom:4px}
.admin .side a:hover,.admin .side a.on{background:var(--emerald-soft);color:var(--emerald)}
.admin .main{padding:26px 30px}
.admin .main h1{font-size:1.5rem;margin-bottom:20px}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.stat .n{font-size:1.8rem;font-weight:800;color:var(--emerald)}
.stat .l{color:var(--muted);font-size:.88rem}
.dtable{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.dtable th,.dtable td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:start}
.dtable th{background:var(--panel);font-size:.8rem;color:var(--muted)}
.badge{font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px}
.badge.on{background:var(--emerald-soft);color:var(--emerald)} .badge.off{background:var(--panel-2);color:var(--muted)}
@media(max-width:820px){.admin{grid-template-columns:1fr}.admin .side{display:flex;overflow-x:auto;gap:6px}.admin .side .b{display:none}.stat-row{grid-template-columns:1fr 1fr}.frm .row2{grid-template-columns:1fr}}

/* ===== تدفّق طلب الحجز ===== */
.booklay{display:grid;grid-template-columns:1fr 350px;gap:26px;align-items:start;margin-top:24px}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:18px}
.step h2{font-size:1.1rem;margin-bottom:4px;display:flex;align-items:center;gap:10px}
.step .n{width:26px;height:26px;border-radius:50%;background:var(--emerald);color:#fff;display:grid;place-items:center;font-size:.85rem;font-weight:800;flex:none}
.step .hint{color:var(--muted);font-size:.85rem;margin-bottom:14px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;transition:.15s}
.opt-card:hover{border-color:var(--emerald)}
.opt-card input{accent-color:var(--emerald);width:18px;height:18px}
.opt-card .t{font-weight:700}
.opt-card .d{color:var(--muted);font-size:.84rem}
.opt-card .pr{margin-inline-start:auto;font-weight:800;color:var(--emerald);white-space:nowrap}
.opt-card.sel{border-color:var(--emerald);background:var(--emerald-soft)}
.summary{position:sticky;top:84px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.summary .sh{background:var(--emerald);color:#fff;padding:16px 18px;font-weight:800}
.summary .sb{padding:16px 18px}
.summary .hn{font-weight:700;margin-bottom:2px}
.summary .meta{color:var(--muted);font-size:.85rem;margin-bottom:12px}
.sum{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.sum.total{border-bottom:0;border-top:2px solid var(--line);margin-top:6px;padding-top:12px;font-size:1.15rem;font-weight:800}
.sum.total b{color:var(--emerald)}
.sum .muted{color:var(--muted)}
.trustbar{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;color:var(--muted);font-size:.82rem}
.trustbar span{display:flex;align-items:center;gap:6px}
.trustbar svg{width:15px;height:15px;stroke:var(--emerald)}
.done-hero{text-align:center;padding:44px 20px 10px}
.done-hero .ok{width:74px;height:74px;border-radius:50%;background:var(--emerald-soft);color:var(--emerald);display:grid;place-items:center;font-size:38px;margin:0 auto 16px}
.done-hero .ref{display:inline-block;background:var(--panel);border:1px dashed var(--emerald);border-radius:10px;padding:8px 18px;font-size:1.3rem;font-weight:800;color:var(--emerald);letter-spacing:1px;margin-top:8px}
.steps-line{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.steps-line .s{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:.85rem;color:var(--muted)}
@media(max-width:860px){.booklay{grid-template-columns:1fr}.summary{position:static}}