/* ═══════════════════════════════════════════════
   هايبر مكة — كارت رقمي
   أزرق فاتح جدًا + أبيض هادي
   ═══════════════════════════════════════════════ */

:root{
  --ink:#0B2540;
  --ink2:#41607A;
  --ink3:#8099AD;
  --red:#D8232A;
  --green:#1B7539;
  --green-l:#2E9C55;
  --ice:#E9F4FC;
  --ice2:#D2E9F8;
  --line:rgba(11,37,64,.085);
  --line2:rgba(11,37,64,.055);
  --paper:#FFFFFF;
  --bg:#F4FAFE;
  --wa:#1FA855;
  --ipn:#5B2FBF;
  --r:24px;
  --sh:0 1px 2px rgba(11,37,64,.04), 0 10px 30px -12px rgba(11,37,64,.18);
  --sh-l:0 1px 2px rgba(11,37,64,.05), 0 18px 48px -16px rgba(11,37,64,.24);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Almarai",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15.5px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:86px;
}

/* خلفية ناعمة */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(70% 42% at 78% -6%, #DCF0FC 0%, transparent 62%),
    radial-gradient(58% 38% at 8% 4%, #EAF6FF 0%, transparent 60%),
    radial-gradient(92% 46% at 50% 104%, #E7F3FC 0%, transparent 66%);
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ── الحاوية ── */
.wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:468px;
  margin-inline:auto;
  padding:0 16px;
}

/* ── الهيدر ── */
.top{
  display:flex;
  align-items:center;
  gap:12px;
  padding:20px 0 6px;
}
.mark{
  width:52px;height:52px;
  flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:17px;
  box-shadow:var(--sh);
}
.mark svg{width:32px;height:32px}

.bname{
  font-family:"Baloo Bhaijaan 2",system-ui,sans-serif;
  font-weight:800;
  font-size:25px;
  line-height:1.15;
  letter-spacing:-.2px;
  display:block;
}
.bname b{color:var(--red);font-weight:800}
.bname span{color:var(--ink)}
.btag{
  display:block;
  font-size:11.5px;
  color:var(--ink3);
  letter-spacing:.3px;
  margin-top:1px;
}
.btag i{font-style:normal;color:var(--green);font-weight:700}

/* ── الهيرو ── */
.hero{
  padding:26px 2px 18px;
  text-align:center;
}
.kick{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:"Oswald",sans-serif;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:var(--green);
  background:#E4F5EA;
  border:1px solid #CFEBD9;
  border-radius:999px;
  padding:5px 13px 4px;
  direction:ltr;
}
.kick b{font-weight:500}
h1{
  font-family:"Baloo Bhaijaan 2",system-ui,sans-serif;
  font-weight:800;
  font-size:33px;
  line-height:1.28;
  letter-spacing:-.4px;
  margin:14px 0 8px;
}
h1 em{
  font-style:normal;
  color:var(--green);
  position:relative;
  white-space:nowrap;
}
.lead{
  margin:0;
  color:var(--ink2);
  font-size:14.5px;
  line-height:1.8;
  max-width:34ch;
  margin-inline:auto;
}

/* ── الكروت ── */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sh);
  padding:18px;
  margin-bottom:14px;
  position:relative;
  overflow:hidden;
}

.shead{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:14px;
}
.shead .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(27,117,57,.11);
  flex:0 0 auto;
}
.shead h2{
  font-family:"Baloo Bhaijaan 2",sans-serif;
  font-weight:700;
  font-size:16.5px;
  margin:0;
  letter-spacing:-.1px;
}
.shead .tail{
  margin-inline-start:auto;
  font-family:"Oswald",sans-serif;
  font-size:9.5px;
  letter-spacing:2px;
  color:var(--ink3);
  text-transform:uppercase;
  direction:ltr;
}

/* ── كروت الدفع ── */
.pay{
  border:1px solid var(--line);
  border-radius:19px;
  padding:15px 15px 14px;
  background:linear-gradient(180deg,#FCFEFF,#F7FBFE);
  position:relative;
  overflow:hidden;
  margin-bottom:11px;
}
.pay:last-child{margin-bottom:0}
.pay::before{
  content:"";
  position:absolute;
  inset-inline-start:0;top:0;bottom:0;
  width:3px;
  background:var(--ipn);
}
.pay.etc::before{background:var(--green-l)}

.paytop{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:12px;
}
.pico{
  width:40px;height:40px;
  border-radius:12px;
  display:grid;place-items:center;
  flex:0 0 auto;
  background:#F0EAFD;
  color:var(--ipn);
}
.pay.etc .pico{background:#E8F6ED;color:var(--green)}
.pico svg{width:21px;height:21px}

.pname{
  font-weight:700;
  font-size:15px;
  line-height:1.35;
}
.pmeta{
  font-size:11.5px;
  color:var(--ink3);
  line-height:1.5;
}

.numbox{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:#fff;
  border:1px dashed var(--ice2);
  border-radius:13px;
  padding:9px 12px;
  margin-bottom:10px;
}
.num{
  font-family:"Oswald",sans-serif;
  font-weight:500;
  font-size:18px;
  letter-spacing:1.1px;
  direction:ltr;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.num.sm{
  font-size:13.5px;
  letter-spacing:.4px;
  font-family:"Almarai",sans-serif;
  font-weight:700;
  color:var(--ipn);
  word-break:break-all;
}

.btns{display:flex;gap:8px}
.btn{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:0;
  border-radius:12px;
  padding:11px 10px;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:transform .14s ease, box-shadow .2s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{width:15px;height:15px;flex:0 0 auto}
.btn:active{transform:scale(.97)}
.btn.solid{
  background:var(--ink);
  color:#fff;
  box-shadow:0 6px 16px -6px rgba(11,37,64,.55);
}
.btn.ghost{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
}
.btn.violet{background:var(--ipn);color:#fff;box-shadow:0 6px 16px -6px rgba(91,47,191,.6)}
.btn.green{background:var(--green);color:#fff;box-shadow:0 6px 16px -6px rgba(27,117,57,.55)}

.hint{
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-size:11.8px;
  line-height:1.7;
  color:var(--ink2);
  background:#FFF8E8;
  border:1px solid #F3E3BC;
  border-radius:12px;
  padding:9px 11px;
  margin-top:12px;
}
.hint b{color:#8A6010}

/* ── شرايط المزايا ── */
.strips{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:2px 0 16px;
}
.strip{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:15px;
  padding:11px 7px;
  text-align:center;
  box-shadow:0 1px 2px rgba(11,37,64,.04);
}
.strip svg{width:19px;height:19px;margin:0 auto 5px;display:block;color:var(--green)}
.strip span{
  display:block;
  font-size:10.8px;
  font-weight:700;
  line-height:1.35;
  color:var(--ink2);
}

/* ── نبذة ── */
.about p{
  margin:0 0 10px;
  font-size:14px;
  color:var(--ink2);
  line-height:1.85;
}
.about p:last-child{margin-bottom:0}
.about strong{color:var(--ink);font-weight:700}

/* ── المكان ── */
.place{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.place .pin{
  width:40px;height:40px;flex:0 0 auto;
  border-radius:12px;
  background:var(--ice);
  color:var(--ink);
  display:grid;place-items:center;
}
.place .pin svg{width:20px;height:20px}
.place .tt{
  font-size:13.8px;
  font-weight:700;
  line-height:1.6;
}
.place .sub{
  font-size:11.5px;
  color:var(--ink3);
  margin-top:2px;
}

/* ── التواصل ── */
.crows{display:flex;flex-direction:column;gap:1px;background:var(--line2);border-radius:14px;overflow:hidden}
.crow{
  display:flex;
  align-items:center;
  gap:11px;
  background:#fff;
  padding:11px 13px;
  transition:background .16s ease;
}
.crow:active{background:#F4FAFE}
.crow .ci{
  width:31px;height:31px;flex:0 0 auto;
  border-radius:10px;
  display:grid;place-items:center;
  background:var(--ice);
  color:var(--ink);
}
.crow .ci svg{width:15px;height:15px}
.crow.wa .ci{background:#E4F7EC;color:var(--wa)}
.crow.tel .ci{background:#EAF1F8;color:var(--ink2)}
.crow.mail .ci{background:#FDECEC;color:var(--red)}
.crow .ct{
  display:block;
  font-size:10.5px;
  color:var(--ink3);
  line-height:1.3;
}
.crow .cv{
  display:block;
  font-size:13.2px;
  font-weight:700;
  line-height:1.45;
  direction:ltr;
  unicode-bidi:isolate;
  text-align:right;
  font-family:"Oswald",sans-serif;
  letter-spacing:.5px;
  color:var(--ink);
}
.crow .cv.lat{
  font-family:"Almarai",sans-serif;
  direction:ltr;
  unicode-bidi:isolate;
  text-align:right;
  letter-spacing:0;
  font-size:12.4px;
  font-weight:700;
  word-break:break-all;
}
.crow .go{
  margin-inline-start:auto;
  color:var(--ink3);
  flex:0 0 auto;
}
.crow .go svg{width:15px;height:15px}

/* ── السوشيال ── */
.soc{
  display:flex;
  align-items:center;
  gap:13px;
  border:1px solid var(--line);
  border-radius:19px;
  padding:14px 15px;
  background:#fff;
  margin-bottom:11px;
  transition:transform .16s ease, box-shadow .2s ease;
  box-shadow:0 1px 2px rgba(11,37,64,.04);
}
.soc:last-child{margin-bottom:0}
.soc:active{transform:scale(.985)}
.soc .sic{
  width:50px;height:50px;
  flex:0 0 auto;
  border-radius:15px;
  display:grid;place-items:center;
  color:#fff;
}
.soc.fb .sic{background:linear-gradient(160deg,#2D6BE4,#1B4FA8);box-shadow:0 8px 20px -8px rgba(27,79,168,.7)}
.soc.tk .sic{background:linear-gradient(160deg,#1A1A1A,#3B3B3B);box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.soc .sic svg{width:25px;height:25px}
.soc .st{display:block;font-size:15px;font-weight:700;line-height:1.35}
.soc .sd{display:block;font-size:11.4px;color:var(--ink3);line-height:1.5}
.soc .go2{margin-inline-start:auto;color:var(--ink3)}
.soc .go2 svg{width:17px;height:17px}

/* ── شريط التقييم ── */
.rev{
  display:flex;
  align-items:center;
  gap:13px;
  background:linear-gradient(135deg,#0B2540,#143A5E);
  border-radius:var(--r);
  padding:17px;
  color:#fff;
  margin-bottom:14px;
  position:relative;
  overflow:hidden;
  box-shadow:var(--sh-l);
}
.rev::after{
  content:"";
  position:absolute;
  inset-inline-end:-40px;top:-40px;
  width:140px;height:140px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(46,156,85,.35),transparent 70%);
}
.rev .stars{display:flex;gap:2px;margin-bottom:3px}
.rev .stars svg{width:13px;height:13px;color:#F5B942}
.rev .rt{position:relative;z-index:1}
.rev .rt b{display:block;font-size:14px;font-weight:700;line-height:1.4}
.rev .rt span{font-size:11.5px;opacity:.66;line-height:1.5}
.rev .go3{
  margin-inline-start:auto;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18);
  border-radius:11px;
  padding:8px 12px;
  font-size:11.5px;
  font-weight:700;
  flex:0 0 auto;
  position:relative;z-index:1;
}

/* ── الفوتر ── */
.foot{
  text-align:center;
  padding:24px 8px 10px;
  color:var(--ink3);
  font-size:11.2px;
  line-height:1.9;
}
.foot .fbrand{
  font-family:"Baloo Bhaijaan 2",sans-serif;
  font-weight:700;
  font-size:14px;
  color:var(--ink);
  margin-bottom:2px;
}
.foot .by{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:9px;
  font-family:"Oswald",sans-serif;
  font-size:9px;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:var(--ink3);
  direction:ltr;
}

/* ── شريط سفلي ثابت ── */
.bar{
  position:fixed;
  inset-inline:0;
  bottom:0;
  z-index:40;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(244,250,254,.98) 62%,rgba(244,250,254,0));
}
.bar .inner{
  max-width:468px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:7px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:6px;
  box-shadow:0 8px 30px -10px rgba(11,37,64,.28);
}
.bar a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:11px;
  padding:10px 6px;
  font-size:12.4px;
  font-weight:700;
  color:var(--ink);
  transition:transform .14s ease;
}
.bar a:active{transform:scale(.96)}
.bar a svg{width:16px;height:16px;flex:0 0 auto}
.bar a.wa{background:#E4F7EC;color:var(--green)}
.bar a.tl{background:#EAF1F8;color:var(--ink2)}
.bar a.mp{background:var(--ice);color:var(--ink)}

/* ── التوست ── */
.toast{
  position:fixed;
  inset-inline:0;
  bottom:96px;
  z-index:60;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.toast span{
  background:var(--ink);
  color:#fff;
  font-size:12.4px;
  font-weight:700;
  padding:9px 17px;
  border-radius:11px;
  box-shadow:0 10px 30px -8px rgba(11,37,64,.5);
  opacity:0;
  transform:translateY(8px) scale(.96);
  transition:opacity .22s ease, transform .22s ease;
}
.toast.on span{opacity:1;transform:translateY(0) scale(1)}

/* ── الظهور ── */
[data-r]{
  opacity:0;
  transform:translateY(12px);
}
[data-r].in{
  opacity:1;
  transform:none;
  transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0ms);
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-r]{opacity:1;transform:none}
}

/* ── ديسكتوب ── */
@media (min-width:620px){
  body{padding-bottom:24px;font-size:16px}
  .wrap{max-width:492px;padding:0 20px}
  .bar{position:static;padding:0;background:none;margin-top:6px}
  .bar .inner{grid-template-columns:repeat(3,1fr);box-shadow:var(--sh)}
  h1{font-size:37px}
  .top{padding-top:34px}
}