/* حجز Tick — refreshed visual layer (own teal + sand identity).
   Techniques: glass body>header with icon buttons, gradient buttons with inner highlight and soft glow,
   Readex Pro type, warm background, dark hero glow, rounded cards with lift, scroll reveal. */
:root{
  --ink:#14201d; --muted:#5d6f6a; --line:#e6e0d6; --white:#fff; --paper:#fbf8f3;
  --teal:#0b7a6e; --teal-2:#08594f; --teal-3:#0e9483; --mint:#e7f3ef; --sand:#d9a35b; --sand-2:#b9822f;
  --night:#0e1716; --night-2:#152321;
  --r-sm:10px; --r:14px; --r-lg:20px;
  --shadow-sm:0 1px 2px #0f1c1a14, 0 2px 8px #0f1c1a0d;
  --shadow:0 10px 30px -12px #0f1c1a40;
  --glow:0 12px 28px -12px #0b7a6ed9;
}
html{scroll-padding-top:84px}
body{background:var(--paper);font-family:'Readex Pro','Tajawal',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}

/* buttons */
.primary,button.primary,a.primary{
  background:linear-gradient(180deg,var(--teal-3),var(--teal));color:#fff;border:0;border-radius:12px;
  box-shadow:inset 0 1px 0 #ffffff40,var(--glow);font-weight:600;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.primary:hover{background:linear-gradient(180deg,var(--teal-3),var(--teal-2));transform:translateY(-1px);box-shadow:inset 0 1px 0 #ffffff40,0 16px 32px -12px #0b7a6ee6}
.primary:active{transform:translateY(0)}
.primary:disabled{filter:grayscale(.4) opacity(.6);transform:none}
.outline,a.outline,button.outline{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);transition:border-color .15s,background .15s,transform .15s}
.outline:hover{border-color:#bcd9d1;background:#f7fbfa}
.accent{background:linear-gradient(180deg,#e6b46c,var(--sand));color:#2a1c08;border:0;border-radius:12px;box-shadow:inset 0 1px 0 #ffffff59,0 12px 28px -12px #d9a35bd9;font-weight:700}
.chip{border-radius:999px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);transition:all .15s}
.chip:hover{border-color:#bcd9d1}
.chip.active{background:var(--night-2);color:#fff;border-color:var(--night-2)}
:focus-visible{outline:3px solid #d9a35b!important;outline-offset:2px}

/* body>header: dark glass, icon buttons */
body>header{position:sticky;top:0;z-index:30;background:#0e1716e6!important;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid #ffffff14!important;color:#fff}
body>header .nav{min-height:68px}
body>header .brand,body>header .brand span{color:#fff}
body>header .brand small{color:#ffffffa6}
body>header .brand .tick{color:var(--sand)}
body>header nav a,body>header nav button{color:#ffffffcc;font-weight:500;font-size:15px;padding:8px 10px;border-radius:10px;transition:background .15s,color .15s}
body>header nav a:hover,body>header nav button:hover{background:#ffffff14;color:#fff}
.icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#ffffff0f;border:1px solid #ffffff1f;color:#fff;position:relative;transition:background .15s,border-color .15s}
.icon-btn:hover{background:#ffffff1f;border-color:#ffffff38}
.icon-btn svg{width:20px;height:20px}
.icon-btn .dot{position:absolute;top:-3px;inset-inline-end:-3px;width:10px;height:10px;border-radius:50%;background:var(--sand);box-shadow:0 0 0 2px var(--night)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body>header .actions{gap:8px}
body>header #site-language{height:42px;border-radius:12px;background:#ffffff0f;border:1px solid #ffffff1f;color:#fff;box-shadow:none;padding:0 10px}
body>header #site-language option,body>header #site-language optgroup{color:#14201d}
.cta-pill{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;white-space:nowrap}
.cta-pill svg{width:16px;height:16px}

/* hero: dark with glow */
.hero{background:radial-gradient(60% 70% at 85% 0%,#0e948366,transparent 70%),radial-gradient(50% 60% at 10% 10%,#d9a35b40,transparent 70%),linear-gradient(270deg,#0b1513f0 5%,#0d1f1ccc 55%,#0d1f1c66),url('guide-photos/muttrah.jpg') center 55%/cover,#0e1716!important;min-height:540px}
.hero .kicker{background:#ffffff14;border-color:#ffffff2e;backdrop-filter:blur(8px)}
.hero .kicker i{background:var(--sand);box-shadow:0 0 0 4px #d9a35b33}
.hero h1{letter-spacing:-.5px}
.hero em{color:var(--sand)!important;background:linear-gradient(90deg,#f0c98d,var(--sand));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-label{backdrop-filter:blur(8px);background:#0e171699!important;border:1px solid #ffffff1f}

/* search */
.search.bk-search{border:0!important;background:#fff;border-radius:var(--r-lg);box-shadow:0 24px 60px -24px #0f1c1a59,0 0 0 1px #0f1c1a0f;padding:8px}
.bk-field{border-radius:14px;transition:background .15s}
.bk-field:hover{background:#f6f3ee}
.bk-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--mint);font-size:17px}
.bk-submit{min-width:120px}
.bk-pop{border-radius:var(--r-lg);box-shadow:0 30px 60px -20px #0f1c1a52,0 0 0 1px #0f1c1a0f;border:0}

/* sections & cards */
.section-head h2,h2{letter-spacing:-.3px}
.eyebrow{color:var(--teal);letter-spacing:.2px}
.card,.offer-card,.merchant-card,.guide-card,.knowledge-gov,.knowledge-topic,.service-card{border-radius:var(--r-lg)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.card:hover,.offer-card:hover,.merchant-card:hover,.guide-card:hover,.service-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d6e6e1!important}
.card .photo{transition:transform .5s ease}
.card:hover .photo{transform:scale(1.04)}
.card{overflow:hidden}
.tag{background:#0e1716cc!important;color:#fff;backdrop-filter:blur(6px)}
.heart{box-shadow:var(--shadow-sm)}
.card-bottom button{background:var(--mint);border-radius:10px;padding:6px 12px}
.offer-icon{background:linear-gradient(180deg,#e7f3ef,#d5ebe5);border-radius:14px}
.destination{border-radius:var(--r-lg)!important;transition:transform .2s ease}
.destination:hover{transform:translateY(-3px)}
.destination-section{background:linear-gradient(180deg,#eef6f3,#f6f1e8)!important}
.notice,.entry,.empty{border-radius:var(--r)!important}
.host{background:radial-gradient(60% 120% at 100% 0%,#0e948333,transparent 70%),linear-gradient(135deg,#0e1716,#152321)!important;color:#fff;border-radius:24px!important}
.host p{color:#ffffffb3!important}
.host .eyebrow{color:var(--sand)}
.host .outline{background:#ffffff14;border-color:#ffffff2e;color:#fff;box-shadow:none}
footer{background:#0e1716;color:#ffffffb3;border-top:0!important}
footer .brand,footer a,footer button{color:#ffffffd9!important}

/* dialogs */
dialog{border-radius:24px!important;box-shadow:0 40px 80px -30px #000000a6!important}
dialog::backdrop{background:#0b1312b3!important;backdrop-filter:blur(4px)}
.close{background:#f2efe9!important;transition:background .15s}
.close:hover{background:#e6e0d6!important}
.quote-breakdown{border-radius:var(--r)!important;background:#fcfbf8}
.option-card{border-radius:var(--r)!important;transition:border-color .15s,background .15s}
.badge{border-radius:999px}
.kpi{border-radius:var(--r)!important;background:linear-gradient(180deg,#f1f8f6,#e7f3ef)!important}
.dash-tabs .chip.active{background:var(--teal)!important;border-color:var(--teal)!important}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{scroll-behavior:auto!important}}

@media(max-width:820px){
  body>header nav{display:none}
  .cta-pill .cta-text{display:none}
  .cta-pill{width:42px;padding:0;justify-content:center}
}
@media(max-width:530px){
  body>header .brand small{display:none}
  body>header #site-language{width:76px}
  .hero{min-height:440px}
}
body>header nav{gap:2px;flex-wrap:nowrap}
body>header nav a,body>header nav button{white-space:nowrap}
body>header nav [data-panel="host"]{display:none}
body>header .brand,body>header .brand span,body>header .brand bdi:not(.tick){color:#fff!important}
body>header .brand .tick{color:var(--sand)!important}
@media(max-width:1100px){body>header nav a,body>header nav button{font-size:14px;padding:6px 7px}}
@media(max-width:960px){body>header nav{display:none}}
body>header .outline,body>header a.outline{background:#ffffff0f;border-color:#ffffff24;color:#fff;box-shadow:none}
body>header .outline:hover{background:#ffffff1f}
@media(max-width:820px){.cta-pill>svg:last-child{display:none}}