/* ==========================================================================
   RAKNTY APP — clickable prototype
   Loads AFTER style.css and reuses its tokens, fonts and button system.
   Screens are absolutely stacked; app.js swaps the .is-on class.
   ========================================================================== */

:root{ --slide:-100%; --app-bar:64px; --tabbar:70px; }
html[dir="ltr"]{ --slide:100%; }

/* ------------------------------------------------------------ 1. Shell */
.app-body{
  background:
    radial-gradient(120% 80% at 50% 0%, #12304F 0%, transparent 60%),
    linear-gradient(180deg,#0B1D33,#050D18);
  min-height:100vh; display:grid; place-items:center;
  padding:clamp(0px,3vw,40px); overflow:hidden;
}

/* phone frame — desktop only */
.device{
  width:390px; height:min(844px, calc(100vh - 80px));
  background:#0A1729; border-radius:44px; padding:11px;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9), 0 0 0 2px rgba(255,255,255,.08),
             inset 0 0 0 1px rgba(255,255,255,.06);
  position:relative; flex:none;
}
.device::after{ /* notch */
  content:""; position:absolute; inset-block-start:11px; inset-inline-start:50%;
  transform:translateX(-50%); width:132px; height:26px;
  background:#0A1729; border-end-start-radius:16px; border-end-end-radius:16px; z-index:40;
}
.device__screen{
  width:100%; height:100%; border-radius:34px; overflow:hidden;
  background:var(--sand-50); display:flex; flex-direction:column; position:relative;
}

.statusbar{
  height:38px; flex:none; display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 22px 4px; font-family:var(--f-mono); font-size:.68rem; font-weight:600;
  color:var(--navy-700); background:var(--navy-700); color:#fff; z-index:30;
}
.statusbar span{ display:flex; align-items:center; gap:4px; }
.statusbar svg{ width:13px;height:13px; }

.app{ position:relative; flex:1; overflow:hidden; }

/* ----------------------------------------------------------- 2. Screens */
.screen{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:var(--sand-50);
  transform:translateX(var(--slide)); visibility:hidden;
  transition:transform .34s var(--ease-out), visibility .34s;
  will-change:transform;
}
.screen.is-on{ transform:none; visibility:visible; }
.screen__body{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:1rem 1rem calc(var(--tabbar) + 1.4rem);
  overscroll-behavior:contain;
}
.screen--notab .screen__body{ padding-block-end:1.4rem; }

/* app bar */
.appbar{
  flex:none; min-height:var(--app-bar); display:flex; align-items:center; gap:.6rem;
  padding:0 .8rem; background:var(--navy-700); color:#fff; position:relative; z-index:5;
}
.appbar h1{ font-size:1rem; font-weight:700; flex:1; text-align:center; line-height:1.4; }
.appbar__btn{
  width:38px;height:38px;border-radius:12px; flex:none; display:grid; place-items:center;
  color:#fff; transition:background .25s;
}
.appbar__btn:hover,.appbar__btn:active{ background:rgba(255,255,255,.12); }
.appbar__btn svg{ width:19px;height:19px; }
html[dir="rtl"] .appbar__btn--back svg{ transform:scaleX(-1); }
.appbar__spacer{ width:38px; flex:none; }
.appbar--brand{ justify-content:space-between; padding-inline:1rem; }
.appbar--brand img{ height:30px; width:auto; }
.badge-dot{
  position:absolute; inset-block-start:6px; inset-inline-end:6px;
  width:8px;height:8px;border-radius:50%; background:var(--gold); border:2px solid var(--navy-700);
}

/* ------------------------------------------------------- 3. Home header */
.hero-greet{
  background:linear-gradient(160deg,#143257,#0B1D33);
  color:#fff; padding:1.1rem 1.1rem 2.6rem; margin:-1rem -1rem 0;
  border-end-start-radius:26px; border-end-end-radius:26px;
}
.hero-greet small{ display:block; color:var(--on-dark-dim); font-size:.76rem; }
.hero-greet h2{ font-size:1.12rem; margin-block-start:.15rem; }
.balance-card{
  background:var(--white); border:1px solid var(--line); border-radius:18px;
  padding:.9rem 1rem; margin-block-start:-1.9rem; position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  box-shadow:var(--sh-1);
}
.balance-card small{ display:block; color:var(--text-soft); font-size:.72rem; }
.balance-card b{ font-family:var(--f-mono); font-size:1.2rem; color:var(--navy-700); }

/* --------------------------------------------------------- 4. Sections */
.sec-title{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  margin-block:1.4rem .7rem;
}
.sec-title h3{ font-size:.94rem; position:relative; padding-block-end:.3rem; }
.sec-title h3::after{
  content:""; position:absolute; inset-block-end:0; inset-inline-start:0;
  width:34px; height:3px; border-radius:2px; background:var(--gold);
}
.sec-title a{ font-size:.76rem; color:var(--gold-600); font-weight:700; }

/* tiles */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.tile{
  background:var(--white); border:1px solid var(--line); border-radius:16px;
  padding:.9rem .4rem; display:grid; place-items:center; gap:.5rem; text-align:center;
  transition:transform .2s var(--ease-out), box-shadow .2s, border-color .2s;
}
.tile:active{ transform:scale(.96); }
.tile:hover{ border-color:var(--gold); box-shadow:var(--sh-1); }
.tile svg{ width:30px;height:30px; color:var(--navy-700); }
.tile svg .g{ stroke:var(--gold); }
.tile span{ font-size:.72rem; font-weight:700; line-height:1.45; color:var(--text); }

/* list rows */
.rows{ display:grid; gap:.55rem; }
.row{
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:.85rem .95rem; display:flex; align-items:center; gap:.75rem;
  transition:border-color .2s, transform .2s var(--ease-out);
}
.row:active{ transform:scale(.985); }
.row:hover{ border-color:var(--gold); }
.row__ico{
  width:38px;height:38px;border-radius:11px; flex:none; display:grid; place-items:center;
  background:rgba(13,35,64,.06); color:var(--navy-700);
}
.row__ico svg{ width:19px;height:19px; }
.row__ico--gold{ background:rgba(200,154,75,.16); color:var(--gold-600); }
.row__t{ flex:1; min-width:0; }
.row__t b{ display:block; font-size:.86rem; line-height:1.5; }
.row__t small{ display:block; color:var(--text-soft); font-size:.72rem; line-height:1.6; }
.row__go{ width:16px;height:16px;color:var(--text-soft); flex:none; }
html[dir="rtl"] .row__go{ transform:scaleX(-1); }

/* venue row */
.venue__logo{
  width:52px;height:52px;border-radius:12px; flex:none; overflow:hidden;
  background:var(--sand-200); display:grid; place-items:center;
  font-family:var(--f-mono); font-size:.62rem; color:var(--navy-700); font-weight:600;
  text-align:center; line-height:1.2; padding:2px;
}
.meta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-block-start:.25rem; }
.meta i{
  font-style:normal; font-size:.68rem; color:var(--text-soft);
  display:inline-flex; align-items:center; gap:.22rem;
}
.meta i svg{ width:11px;height:11px; }
.meta i b{ font-family:var(--f-mono); color:var(--gold-600); font-weight:600; }
.busy{ display:inline-flex; gap:2px; align-items:flex-end; height:10px; }
.busy s{ width:3px; background:var(--line); border-radius:1px; text-decoration:none; }
.busy s:nth-child(1){ height:4px; } .busy s:nth-child(2){ height:7px; } .busy s:nth-child(3){ height:10px; }
.busy.lv1 s:nth-child(1){ background:#3FA35B; }
.busy.lv2 s:nth-child(1),.busy.lv2 s:nth-child(2){ background:var(--gold); }
.busy.lv3 s{ background:#C4483F; }

/* segmented control */
.seg{
  display:flex; gap:.25rem; background:var(--sand-200); padding:.25rem;
  border-radius:100px; margin-block-end:1rem;
}
.seg button{
  flex:1; padding:.5rem .3rem; border-radius:100px; font-size:.76rem; font-weight:700;
  font-family:var(--f-display); color:var(--text-soft); transition:all .25s; white-space:nowrap;
}
.seg button.is-on{ background:var(--navy-700); color:#fff; }
.seg--line{ background:none; padding:0; border-block-end:1px solid var(--line); border-radius:0; gap:.2rem; }
.seg--line button{ border-radius:0; padding-block:.6rem; position:relative; }
.seg--line button.is-on{ background:none; color:var(--navy-700); }
.seg--line button.is-on::after{
  content:""; position:absolute; inset-block-end:-1px; inset-inline:12%;
  height:3px; border-radius:2px 2px 0 0; background:var(--gold);
}
.seg .pill{
  display:inline-grid; place-items:center; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--gold); color:#fff;
  font-family:var(--f-mono); font-size:.6rem; margin-inline-start:4px;
}

/* search */
.search{
  display:flex; align-items:center; gap:.55rem; background:var(--white);
  border:1px solid var(--line); border-radius:100px; padding:.6rem .9rem; margin-block-end:.8rem;
}
.search svg{ width:16px;height:16px;color:var(--text-soft); flex:none; }
.search input{ flex:1; min-width:0; border:0; background:none; font-size:.84rem; outline:none; }
.viewtoggle{ display:flex; gap:.3rem; margin-block-end:.7rem; }
.viewtoggle button{
  width:38px;height:34px;border-radius:11px; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--white); color:var(--text-soft);
}
.viewtoggle button.is-on{ background:var(--navy-700); border-color:var(--navy-700); color:#fff; }
.viewtoggle svg{ width:17px;height:17px; }

/* faux map */
.map{
  position:relative; height:230px; border-radius:18px; overflow:hidden;
  border:1px solid var(--line); background:#E8EDF2; margin-block-end:.9rem;
}
.map svg{ width:100%; height:100%; }
.map__pin{ cursor:pointer; }
.map__pin circle.h{ fill:var(--gold); opacity:.25; animation:mp 2.6s ease-out infinite; transform-origin:center; }
@keyframes mp{ 0%{transform:scale(.5);opacity:.4} 100%{transform:scale(2.4);opacity:0} }

/* empty state */
.empty{ text-align:center; padding:2.6rem 1rem; }
.empty svg{ width:74px;height:74px; margin:0 auto 1rem; color:var(--sand-200); }
.empty b{ display:block; font-size:.92rem; margin-bottom:.3rem; }
.empty p{ color:var(--text-soft); font-size:.8rem; line-height:1.8; }

/* ticket / booking card */
.ticket{
  background:var(--white); border:1px solid var(--line); border-radius:18px;
  overflow:hidden; margin-block-end:.65rem;
}
.ticket__top{ padding:.9rem 1rem; display:flex; gap:.75rem; align-items:center; }
.ticket__cut{
  height:1px; margin:0 1rem;
  background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px);
}
.ticket__bot{ padding:.75rem 1rem; display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
.ticket__bot div small{ display:block; color:var(--text-soft); font-size:.68rem; }
.ticket__bot div b{ font-family:var(--f-mono); font-size:.86rem; color:var(--navy-700); }
.tag{
  font-size:.66rem; font-weight:700; padding:.2rem .55rem; border-radius:100px;
  background:rgba(200,154,75,.16); color:var(--gold-600);
}
.tag--ok{ background:rgba(63,163,91,.14); color:#2E7A43; }
.tag--no{ background:rgba(196,72,63,.14); color:#B03A31; }

/* wallet */
.wallet-card{
  background:linear-gradient(150deg,#143257,#071426); color:#fff;
  border-radius:20px; padding:1.2rem; position:relative; overflow:hidden;
}
.wallet-card small{ color:var(--on-dark-dim); font-size:.74rem; }
.wallet-card .amt{ font-family:var(--f-mono); font-size:2rem; color:var(--gold); line-height:1.2; direction:ltr; text-align:start; }
.wallet-card::after{
  content:""; position:absolute; inset-block-start:-40%; inset-inline-end:-15%;
  width:180px;height:180px;border-radius:50%; background:rgba(200,154,75,.16);
}
.split2{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-block-start:1rem; }

/* forms */
.f{ margin-block-end:.85rem; }
.f label{ display:block; font-size:.76rem; font-weight:700; margin-block-end:.35rem; }
.f label i{ color:#C4483F; font-style:normal; }
.f input,.f select,.f textarea{
  width:100%; padding:.75rem .9rem; border-radius:12px; font-size:.86rem;
  border:1.5px solid var(--line); background:var(--white); outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.f input:focus,.f select:focus,.f textarea:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,154,75,.16); }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.f3{ display:grid; grid-template-columns:1.2fr 1fr; gap:.6rem; }
.hint{ font-size:.7rem; color:var(--text-soft); margin-block-start:.3rem; }

/* egyptian plate preview */
.plate{
  display:flex; align-items:stretch; border:2px solid var(--navy-700); border-radius:8px;
  overflow:hidden; background:#fff; max-width:230px; margin:.6rem auto 0; direction:rtl;
}
.plate__eg{
  background:var(--navy-700); color:#fff; padding:.3rem .4rem; font-size:.5rem;
  display:grid; place-items:center; text-align:center; line-height:1.25; font-weight:700;
}
.plate__n{ flex:1; display:flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.4rem .5rem; font-family:var(--f-display); font-weight:700; font-size:1.15rem; color:var(--navy-700); }

/* app buttons */
.abtn{
  display:flex; align-items:center; justify-content:center; gap:.45rem; width:100%;
  padding:.85rem 1rem; border-radius:14px; font-family:var(--f-display);
  font-weight:700; font-size:.88rem; background:var(--gold); color:#0B1D33;
  transition:transform .2s var(--ease-out), filter .2s;
}
.abtn:active{ transform:scale(.98); }
.abtn svg{ width:16px;height:16px; }
.abtn--navy{ background:var(--navy-700); color:#fff; }
.abtn--ghost{ background:none; border:1.5px solid var(--line); color:var(--text); }
.abtn--sm{ padding:.6rem .9rem; font-size:.8rem; width:auto; }
.fab{
  width:36px;height:36px;border-radius:11px; background:var(--gold); color:#0B1D33;
  display:grid; place-items:center; flex:none;
}
.fab svg{ width:17px;height:17px; }

/* -------------------------------------------------------- 5. Tab bar */
.tabbar{
  position:absolute; inset-block-end:0; inset-inline:0; height:var(--tabbar); z-index:20;
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-block-start:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr); align-items:center;
  padding-block-end:6px;
}
.tabbar button{ display:grid; place-items:center; gap:3px; color:var(--text-soft); transition:color .2s; }
.tabbar svg{ width:21px;height:21px; }
.tabbar span{ font-size:.62rem; font-weight:700; }
.tabbar button.is-on{ color:var(--gold-600); }
.tabbar button.is-on svg{ color:var(--gold-600); }
.tabbar.is-hidden{ display:none; }

/* -------------------------------------------------- 6. Modals / sheets */
.scrim-app{
  position:absolute; inset:0; z-index:50; background:rgba(5,13,24,.55);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
}
.scrim-app.is-on{ opacity:1; visibility:visible; }
.modal{
  position:absolute; inset-inline:0; inset-block-end:0; z-index:60;
  background:var(--white); border-start-start-radius:24px; border-start-end-radius:24px;
  padding:1.1rem 1.1rem 1.6rem; transform:translateY(101%);
  transition:transform .36s var(--ease-out); max-height:86%; overflow-y:auto;
}
.modal.is-on{ transform:none; }
.modal__grip{ width:42px;height:4px;border-radius:2px;background:var(--sand-200); margin:0 auto .9rem; }
.modal h3{ font-size:1rem; margin-block-end:.2rem; text-align:center; }
.modal p.sub{ font-size:.78rem; color:var(--text-soft); text-align:center; margin-block-end:1rem; }
.modal__x{
  position:absolute; inset-block-start:.9rem; inset-inline-start:.9rem;
  width:28px;height:28px;border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--text-soft);
}
.modal__x svg{ width:13px;height:13px; }

/* stepper */
.stepper{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-block:1rem 1.2rem; }
.stepper button{
  width:44px;height:44px;border-radius:14px; background:var(--sand-100);
  display:grid; place-items:center; font-size:1.3rem; color:var(--navy-700); font-weight:700;
}
.stepper b{ font-family:var(--f-mono); font-size:1.5rem; min-width:90px; text-align:center; color:var(--navy-700); }
.chips{ display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; margin-block-end:1rem; }
.chips button{
  padding:.4rem .8rem; border-radius:100px; border:1.5px solid var(--line);
  font-family:var(--f-mono); font-size:.76rem; color:var(--text-soft);
}
.chips button.is-on{ border-color:var(--gold); background:rgba(200,154,75,.12); color:var(--gold-600); }

/* stars */
.stars{ display:flex; justify-content:center; gap:.4rem; margin-block:.8rem; }
.stars button svg{ width:32px;height:32px; color:var(--sand-200); transition:color .2s, transform .2s; }
.stars button.is-on svg{ color:var(--gold); }
.stars button:active svg{ transform:scale(1.15); }

/* toast */
.toast{
  position:absolute; inset-block-end:calc(var(--tabbar) + 14px); inset-inline:1rem; z-index:80;
  background:var(--navy-700); color:#fff; border-radius:14px; padding:.75rem 1rem;
  font-size:.8rem; text-align:center; box-shadow:var(--sh-2);
  opacity:0; transform:translateY(10px); visibility:hidden;
  transition:all .3s var(--ease-out);
}
.toast.is-on{ opacity:1; transform:none; visibility:visible; }

/* success screen */
.done{ text-align:center; padding:1.4rem 0; }
.done__ring{
  width:88px;height:88px;border-radius:50%; margin:0 auto 1.1rem;
  display:grid; place-items:center; background:rgba(63,163,91,.12); color:#2E7A43;
  animation:pop .45s var(--ease-out) both;
}
@keyframes pop{ from{ transform:scale(.6); opacity:0; } to{ transform:none; opacity:1; } }
.done__ring svg{ width:40px;height:40px; }
.qr{
  width:150px;height:150px; margin:1.2rem auto; padding:10px; background:#fff;
  border:1px solid var(--line); border-radius:14px;
}
.kv{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-block-end:1px dashed var(--line); font-size:.82rem; }
.kv:last-child{ border:0; }
.kv span{ color:var(--text-soft); }
.kv b{ font-family:var(--f-mono); }

/* ------------------------------------------------ 7. Demo affordances */
.demo-side{
  position:fixed; inset-block-start:50%; inset-inline-end:24px; transform:translateY(-50%);
  width:210px; color:#fff; z-index:5;
}
.demo-side h4{ font-size:.9rem; margin-block-end:.5rem; }
.demo-side p{ font-size:.76rem; color:var(--on-dark-dim); line-height:1.8; margin-block-end:1rem; }
.demo-side a{ font-size:.78rem; color:var(--gold); font-weight:700; }
.demo-side img{ height:34px; width:auto; margin-block-end:1rem; }
@media (max-width:1100px){ .demo-side{ display:none; } }

/* full-bleed on real phones */
@media (max-width:620px){
  .app-body{ padding:0; display:block; }
  .device{
    width:100%; height:100dvh; border-radius:0; padding:0; box-shadow:none;
  }
  .device::after{ display:none; }
  .device__screen{ border-radius:0; }
  .statusbar{ display:none; }
}

/* splash loading bar */
@keyframes loadbar{
  0%{ transform:translateX(-110%); }
  100%{ transform:translateX(260%); }
}