/* ===== الخط (Noto Naskh Arabic — نفس خط أندرويد) ===== */
@font-face {
  font-family: 'Naskh';
  src: url('/dashboard/fonts/naskh-arabic.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'Naskh';
  src: url('/dashboard/fonts/naskh-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}

/* Roboto — خط الأرقام والحروف اللاتينية في أندرويد */
@font-face {
  font-family: 'RobotoLocal';
  src: url('/dashboard/fonts/roboto-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'RobotoLocal';
  src: url('/dashboard/fonts/roboto-latin-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ===== الألوان والمقاييس =====
   كل المقاسات محسوبة على عرض 360px (عرض الشاشة الأصلية)،
   وتتكبّر تلقائياً مع عرض الهاتف (حتى 480px على الكمبيوتر). */
:root {
  --cyan: #00bcd5;
  --teal: #018697;
  --gold: #d6ca42;
  --yellow: #fec107;
  --gcyan: #00b1cd;
  --line: #8692a0;
  --muted: #807d90;
  --navbg: #fafafa;
  --ink: #000;
  --text: #212121;        /* نص شاشة التأكيد */
  --slate: #596978;       /* دائرة أيقونة الهاتف */
  --sheet: #f2f2f2;       /* بطاقة تفاصيل المبلغ */
  --danger: #d32f2f;      /* أخطاء الحقول */
  --w: min(100vw, 480px);
  --u: calc(var(--w) / 360);
  --hair: 1px;            /* سمك الحدود الرفيعة */
  --ring: 1px;            /* سمك الإطار الذهبي حول الدوائر */
}
@media (min-resolution: 2dppx) {
  :root {
    --hair: calc(.55 * var(--u));
    --ring: calc(.75 * var(--u));
  }
}

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

html, body {
  margin: 0;
  height: 100%;
  background: #fff;
  overflow: hidden;
}

body {
  font-family: 'Naskh', 'Noto Naskh Arabic', 'Noto Sans Arabic', Tahoma, sans-serif;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  outline: none;
}
button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

svg { display: block; overflow: visible; }

/* ===== الإطار ===== */
.app {
  position: relative;
  width: var(--w);
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  padding-top: env(safe-area-inset-top);
}

@media (min-width: 481px) {
  html, body { background: #e9edf1; }
  .app { box-shadow: 0 0 24px rgba(0, 0, 0, .12); }
}

/* ===== الرأس ===== */
.hdr {
  position: relative;
  flex: none;
  height: calc(140.5 * var(--u));
  background: var(--cyan);
  color: #fff;
}

.bar {
  position: relative;
  height: calc(53 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}

.bar h1 {
  margin: 0;
  font-size: calc(19 * var(--u));
  font-weight: 400;
  line-height: 1;
  transform: translateY(calc(1.6 * var(--u)));
}

.menu {
  position: absolute;
  right: calc(15.5 * var(--u));
  top: calc(19.5 * var(--u));
  width: calc(24 * var(--u));
  height: calc(16 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.menu i {
  display: block;
  height: calc(3.5 * var(--u));
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, .25) 0%,
    #fff 32%,
    #fff 68%,
    rgba(255, 255, 255, .25) 100%);
}

.quick {
  position: absolute;
  top: calc(57 * var(--u));
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.q {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}

.circle {
  width: calc(47.5 * var(--u));
  height: calc(47.5 * var(--u));
  border-radius: 50%;
  background: var(--teal);
  box-shadow: inset 0 0 0 var(--ring) var(--gold);
  display: grid;
  place-items: center;
  transition: transform .12s, filter .12s;
}
.circle svg {
  width: calc(25 * var(--u));
  height: calc(25 * var(--u));
  color: #fff;
}
.q:active .circle { transform: scale(.94); filter: brightness(1.12); }

.ql {
  margin-top: calc(4.6 * var(--u));
  font-size: calc(11.65 * var(--u));
  line-height: 1.2;
  white-space: nowrap;
}

/* ===== الخدمات ===== */
.grid {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(10.75 * var(--u)) calc(11 * var(--u));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(3.5 * var(--u)) calc(3.1 * var(--u));
  align-content: start;
}

.tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  box-shadow: inset 0 0 0 var(--hair) var(--line);
  border-radius: calc(2.6 * var(--u));
  transition: background-color .12s;
}
.tile:active { background: #eef3f5; }

.tile svg {
  position: absolute;
  left: 50%;
  top: calc(17.1 * var(--u));
  width: calc(38.2 * var(--u));
  height: calc(38.2 * var(--u));
  transform: translateX(-50%);
}
.tile.c svg { color: var(--cyan); }
.tile.y svg { color: var(--yellow); }
.tile.g svg { color: var(--gcyan); }

.tile span {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(79.5 * var(--u));
  transform: translateY(-50%);
  font-size: calc(12.9 * var(--u));
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* ===== الشريط السفلي ===== */
.tabs {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(55.75 * var(--u) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--navbg);
  box-shadow: 0 calc(-1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .045);
  position: relative;
  z-index: 1;
}

.tab {
  position: relative;
  color: var(--muted);
}
.tab.on { color: var(--cyan); }

.tab svg {
  position: absolute;
  left: 50%;
  top: calc(6.75 * var(--u));
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  transform: translateX(-50%);
}

.tab span {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(42.5 * var(--u));
  transform: translateY(-50%);
  font-size: calc(13.6 * var(--u));
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
.tab.on span { font-size: calc(15.5 * var(--u)); }
.tab:active svg { transform: translateX(-50%) scale(.9); }

/* ===== شاشة الخطأ ===== */
.err {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.err[hidden] { display: none; }
.err p {
  margin: 0;
  direction: ltr;
  font-family: Roboto, 'Segoe UI', Arial, sans-serif;
  font-size: 20px;
  color: #222;
  letter-spacing: .3px;
}

/* ===== شاشة تحويل الأموال =====
   القياسات مأخوذة من الصورة الأصلية (عرض 360) */
.screen {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 10;
  width: var(--w);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  background: #fafafa;
  padding-top: env(safe-area-inset-top);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen[hidden] { display: none; }

.t-hdr {
  position: relative;
  flex: none;
  height: calc(198.25 * var(--u));
  background: var(--cyan);
  color: #fff;
}

.t-back {
  position: absolute;
  right: calc(15.8 * var(--u));
  top: calc(16.05 * var(--u));
  width: calc(23.6 * var(--u));
  height: calc(23.6 * var(--u));
  color: #fff;
}
.t-back svg { width: 100%; height: 100%; }
.t-back:active { opacity: .7; }

.t-cards {
  position: absolute;
  top: calc(80.25 * var(--u));
  left: calc(6 * var(--u));
  right: calc(6.25 * var(--u));
  height: calc(94.75 * var(--u));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(12.25 * var(--u));
}

.t-card {
  position: relative;
  color: #fff;
  transition: filter .12s;
}
.t-card.send { background: var(--teal); }
.t-card.req { background: var(--yellow); }
.t-card:active { filter: brightness(.94); }

.t-card .t-ic {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.t-card.send .t-ic {
  top: calc(25 * var(--u));
  width: calc(84.75 * var(--u));
  height: calc(22.5 * var(--u));
  color: var(--teal);
}
.t-card.req .t-ic {
  top: calc(25.4 * var(--u));
  width: calc(70.5 * var(--u));
  height: calc(22.25 * var(--u));
  color: var(--yellow);
}

.t-card span {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(70.8 * var(--u));
  transform: translateY(-50%);
  font-size: calc(13 * var(--u));
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* عناوين الأقسام */
.t-sec {
  flex: none;
  margin: 0;
  height: calc(64 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efefef;
  color: #000;
  font-size: calc(15.47 * var(--u));
  font-weight: 400;
  line-height: 1;
  padding-top: calc(1.6 * var(--u));
}
.t-sec2 { height: calc(64.5 * var(--u)); padding-top: calc(1.2 * var(--u)); }
#transfer .bar h1 { transform: translate(calc(-1 * var(--u)), calc(3 * var(--u))); }

/* التحويل السريع */
.t-quick {
  position: relative;
  flex: none;
  height: calc(128.5 * var(--u));
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fafafa;
}
.t-quick::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(179.5 * var(--u));
  width: calc(1.25 * var(--u));
  background: #efefef;
  pointer-events: none;
}

.t-q {
  position: relative;
  color: var(--cyan);
  transition: background-color .12s;
}
.t-q:active { background: #f0f0f0; }
.t-q svg {
  position: absolute;
  left: 50%;
  top: calc(22.75 * var(--u));
  height: calc(35.75 * var(--u));
  transform: translateX(-50%);
}
.t-q.qr svg { width: calc(35.75 * var(--u)); }
.t-q.nfc svg { width: calc(19.25 * var(--u)); }

.t-q span {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(83.6 * var(--u));
  transform: translateY(-50%);
  color: #000;
  font-size: calc(15.8 * var(--u));
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
.lat {
  font-family: 'RobotoLocal', Roboto, 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: 1.08em;
}

/* اللوحة */
.t-board {
  position: relative;
  flex: 1 0 auto;
  min-height: calc(200 * var(--u));
  background: #fafafa;
}
.t-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(17.7 * var(--u));
  margin: 0;
  transform: translateY(-50%);
  font-size: calc(11.9 * var(--u));
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: #000;
}
.t-add {
  position: absolute;
  left: calc(126.5 * var(--u));
  top: calc(67.75 * var(--u));
  width: calc(106.75 * var(--u));
  height: calc(106.75 * var(--u));
  color: var(--cyan);
  transition: background-color .12s;
}
.t-add:active { background: #eef8fa; }
.t-dash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.t-plus {
  position: absolute;
  left: 50%;
  top: calc(50% + .25 * var(--u));
  width: calc(35 * var(--u));
  height: calc(35.5 * var(--u));
  transform: translate(-50%, -50%);
}

/* ===== شاشة إرسال الأموال ===== */
.s-screen { overflow: hidden; }

.s-hdr {
  position: relative;
  flex: none;
  height: calc(128 * var(--u));
  background: var(--cyan);
  color: #fff;
}
#send .bar h1 { transform: translate(calc(-1 * var(--u)), calc(3 * var(--u))); }

.s-tabs {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(60 * var(--u));
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.s-tab {
  position: relative;
  color: var(--cyan);
}
.s-tab svg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.s-tab .i-phone { top: calc(6 * var(--u)); width: calc(18.75 * var(--u)); height: calc(33.5 * var(--u)); color: var(--yellow); }
.s-tab .i-user  { top: calc(6.25 * var(--u)); width: calc(28.5 * var(--u)); height: calc(32.25 * var(--u)); }
.s-tab .i-bank  { top: calc(7 * var(--u)); width: calc(32.5 * var(--u)); height: calc(31.25 * var(--u)); }
.s-tab .i-fb    { top: calc(4.75 * var(--u)); width: calc(35.5 * var(--u)); height: calc(35.5 * var(--u)); }
.s-tab span {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(52.8 * var(--u));
  transform: translateY(-50%);
  font-size: calc(8.35 * var(--u));
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: rgba(255, 255, 255, .5);
}
.s-tab.on span { color: #fff; }
.s-tab.on::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(2 * var(--u));
  background: #fff;
}
.s-tab:active svg { opacity: .8; }

/* الحقول */
.s-form {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fafafa;
  padding-bottom: calc(24 * var(--u));
}
.s-field {
  position: relative;
  height: calc(94.75 * var(--u));
  margin: 0 calc(21.5 * var(--u));
}
.s-field::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(92 * var(--u));
  height: max(.5px, calc(.5 * var(--u)));
  background: #000;
  pointer-events: none;
}
.s-field:focus-within::after { height: calc(1.75 * var(--u)); }

.s-field label {
  position: absolute;
  right: calc(-1.25 * var(--u));
  top: calc(37.4 * var(--u));
  transform: translateY(-50%);
  font-size: calc(15.45 * var(--u));
  line-height: 1.2;
  white-space: nowrap;
  color: #000;
}

.s-field input {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(57.25 * var(--u));
  height: calc(31 * var(--u));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: #000;
  text-align: right;
  caret-color: var(--cyan);
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
.s-field input.num {
  font-family: 'RobotoLocal', Roboto, Arial, sans-serif;
  font-size: calc(17.77 * var(--u));
  letter-spacing: 0;
}
.f-phone input { left: calc(32 * var(--u)); }
.f-note input { top: calc(59.55 * var(--u)); }
.s-field input:not(.num) {
  font-family: inherit;
  font-size: calc(17.85 * var(--u));
  direction: rtl;
}
.s-field input::placeholder { color: #646464; opacity: 1; }
/* النص الإرشادي لحقلي الرقم والمبلغ يُكتب بالعربية: نفس خط ومقاس "أدخل ملاحظة"
   ويُحاذى لليمين، ثم يعود الحقل لاتجاه الأرقام (ltr) بمجرد بدء الكتابة */
.s-field input.num:placeholder-shown { direction: rtl; }
.s-field input.num::placeholder {
  font-family: 'Naskh', 'Noto Naskh Arabic', 'Noto Sans Arabic', Tahoma, sans-serif;
  font-size: calc(17.85 * var(--u));
  letter-spacing: 0;
}

.s-contacts {
  position: absolute;
  left: calc(-2.5 * var(--u));
  top: calc(58.5 * var(--u));
  width: calc(28.75 * var(--u));
  height: calc(26.75 * var(--u));
  color: var(--yellow);
}
.s-contacts svg { width: 100%; height: 100%; }
.s-contacts:active { opacity: .7; }

/* رسالة الخطأ: على يسار سطر العنوان، والخط السفلي يصبح أحمر */
.s-err {
  position: absolute;
  left: 0;
  top: calc(37.4 * var(--u));
  transform: translateY(-50%);
  font-size: calc(12.5 * var(--u));
  line-height: 1.2;
  white-space: nowrap;
  color: var(--danger);
  pointer-events: none;
}
.s-field.bad label { color: var(--danger); }
.s-field.bad::after { height: calc(1.75 * var(--u)); background: var(--danger); }
.s-field.bad input { caret-color: var(--danger); }
.s-field.shake { animation: s-shake .32s ease-in-out; }
@keyframes s-shake {
  20%, 60% { transform: translateX(calc(-5 * var(--u))); }
  40%, 80% { transform: translateX(calc(5 * var(--u))); }
}
@media (prefers-reduced-motion: reduce) {
  .s-field.shake { animation: none; }
}

/* زر الإرسال */
.s-send {
  flex: none;
  height: calc(57 * var(--u) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--yellow);
  color: #fff;
  font-size: calc(16 * var(--u));
  line-height: 1;
  transition: filter .12s;
}
.s-send:active { filter: brightness(.95); }

/* ===== شاشة تأكيد تحويل الأموال =====
   القياسات مأخوذة من الصورة الأصلية (عرض 360) */
.c-screen { overflow: hidden; }

.c-hdr {
  position: relative;
  flex: none;
  height: calc(57 * var(--u));
  background: var(--cyan);
  color: #fff;
}
#confirm .bar h1 { transform: translate(calc(-.5 * var(--u)), calc(3 * var(--u))); }

.c-body {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fafafa;
}
.c-sheet {
  position: relative;
  height: calc(370 * var(--u));
}

.c-title,
.c-lbl,
.c-row dt {
  position: absolute;
  margin: 0;
  transform: translateY(-50%);
  font-size: calc(16.4 * var(--u));
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text);
}
.c-title { right: calc(11.75 * var(--u)); top: calc(26.6 * var(--u)); font-size: calc(16.6 * var(--u)); }

/* المستلم: دائرة الهاتف + الرقم */
.c-avatar {
  position: absolute;
  right: calc(12 * var(--u));
  top: calc(51.75 * var(--u));
  width: calc(41.5 * var(--u));
  height: calc(41.5 * var(--u));
  border-radius: 50%;
  background: var(--slate);
  display: grid;
  place-items: center;
  color: #fff;
}
.c-avatar svg { width: calc(16 * var(--u)); height: calc(28 * var(--u)); }

.c-num,
.c-amount {
  position: absolute;
  margin: 0;
  transform: translateY(-50%);
  font-family: 'RobotoLocal', Roboto, Arial, sans-serif;
  font-size: calc(16.6 * var(--u));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: #000;
}
.c-num { right: calc(59.75 * var(--u)); top: calc(73.7 * var(--u)); }

/* البطاقة */
.c-card {
  position: absolute;
  left: calc(11.75 * var(--u));
  right: calc(11.75 * var(--u));
  top: calc(105 * var(--u));
  height: calc(241.75 * var(--u));
  background: var(--sheet);
  border-radius: calc(4 * var(--u));
}
.c-lbl { right: calc(17.75 * var(--u)); }
.c-l-amount { top: calc(28.9 * var(--u)); }
.c-l-fees { top: calc(114.2 * var(--u)); }
.c-amount { right: calc(17.75 * var(--u)); top: calc(60.85 * var(--u)); }

.c-div {
  position: absolute;
  left: calc(11.75 * var(--u));
  right: calc(11.75 * var(--u));
  top: calc(84.75 * var(--u));
  height: calc(1 * var(--u));
  margin: 0;
  border: 0;
  background: #fff;
}

.c-rows { margin: 0; }
.c-row {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
}
.c-row.r1 { top: calc(145.25 * var(--u)); }
.c-row.r2 { top: calc(179.5 * var(--u)); }
.c-row.r3 { top: calc(213.75 * var(--u)); }
/* العنوان والقيمة على نفس خط الأساس (مثل الأصل) */
.c-row dt { right: calc(17.75 * var(--u)); top: calc(2.5 * var(--u)); }
.c-row dd {
  position: absolute;
  left: calc(18 * var(--u));
  top: calc(.75 * var(--u));
  margin: 0;
  transform: translateY(-50%);
  font-family: 'RobotoLocal', Roboto, Arial, sans-serif;
  font-size: calc(16.5 * var(--u));
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
}
/* الشرطة في منتصف السطر */
.c-row::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(.75 * var(--u));
  width: calc(4 * var(--u));
  height: calc(1 * var(--u));
  background: var(--text);
  transform: translate(-50%, -50%);
}

/* ===== نافذة الرمز السري =====
   القياسات مأخوذة من الصورة الأصلية (عرض 360) */
.pin {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, .6);
}
.pin[hidden] { display: none; }

/* منطقة التوسيط = الجزء الظاهر من الشاشة (تصغر عند ظهور لوحة المفاتيح) */
.pin-area {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-box {
  position: relative;
  width: calc(186.25 * var(--u));
  height: calc(204.25 * var(--u));
  background: #fff;
  border-radius: calc(2 * var(--u));
  box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .35);
  overflow: hidden;
}

.pin-x {
  position: absolute;
  right: calc(5 * var(--u));
  top: calc(5 * var(--u));
  width: calc(17.75 * var(--u));
  height: calc(17.75 * var(--u));
  color: #969fa6;
}
.pin-x svg { width: 100%; height: 100%; }
.pin-x::before {               /* مساحة لمس أكبر من الرسم */
  content: '';
  position: absolute;
  inset: calc(-8 * var(--u));
}
.pin-x:active { opacity: .6; }

.pin-title {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(56.7 * var(--u));
  margin: 0;
  transform: translate(calc(2 * var(--u)), -50%);
  font-size: calc(16.6 * var(--u));
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: var(--text);
}

/* خانات الرمز: 4 خطوط، وتظهر نقطة فوق كل رقم مكتوب (من اليسار) */
.pin-code {
  position: absolute;
  left: calc(17.75 * var(--u));
  top: calc(96 * var(--u));
  width: calc(143.25 * var(--u));
  height: calc(29.25 * var(--u));
}
.pin-code i {
  position: absolute;
  bottom: 0;
  width: calc(24.75 * var(--u));
  height: 100%;
}
.pin-code i:nth-child(1) { left: 0; }
.pin-code i:nth-child(2) { left: calc(39.5 * var(--u)); }
.pin-code i:nth-child(3) { left: calc(79 * var(--u)); }
.pin-code i:nth-child(4) { left: calc(118.5 * var(--u)); }
.pin-code i::after {           /* الخط */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(1 * var(--u));
  background: #000;
}
.pin-code i.on::before {       /* النقطة */
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(9.75 * var(--u));
  width: calc(8.4 * var(--u));
  height: calc(8.4 * var(--u));
  margin-left: calc(-4.2 * var(--u));
  border-radius: 50%;
  background: #000;
}
.pin-code.shake { animation: s-shake .32s ease-in-out; }
.pin-code.bad i::after { background: var(--danger); }

/* الحقل الحقيقي شفاف فوق الخانات: يفتح لوحة الأرقام ولا يظهر أي رقم */
.pin-code input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;             /* أقل من 16px يجعل آيفون يكبّر الصفحة */
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  user-select: none;
}
.pin-code input::selection { background: transparent; }

.pin-send {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(57 * var(--u));
  background: var(--cyan);
  color: #fff;
  font-size: calc(16.4 * var(--u));
  line-height: 1;
  transition: filter .12s;
}
.pin-send:active { filter: brightness(.94); }

@media (prefers-reduced-motion: reduce) {
  .pin-code.shake { animation: none; }
}

/* ===== دائرة التحميل (بعد "ارسل الطلب") =====
   نفس ProgressBar في أندرويد: نفس التعتيم (60%) فوق كل الشاشة، وفي الوسط قوس
   أزرق يدور ويطول ويقصر. المقاسات من الصورة الأصلية (عرض 360):
   نصف القطر 17.25 والسمك 3.25 ← محيط الدائرة 108.38 */
.busy {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.busy[hidden] { display: none; }

/* الدوران الثابت: لفّتان كل 4.444 ثانية (مثل أندرويد) */
.busy-spin {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  animation: busy-rotate 2222ms linear infinite;
}
/* إزاحة إضافية ربع لفة مع كل دورة للقوس */
.busy-spin svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: busy-offset 1333ms linear infinite;
}
/* القوس: يطول حتى ثلاثة أرباع الدائرة ثم يقصر (كل 1.333 ثانية) */
.busy-spin circle {
  fill: none;
  stroke: #054a97;
  stroke-width: 3.25;
  stroke-dasharray: .01 108.38;
  animation: busy-arc 1333ms infinite;
}
@keyframes busy-rotate { to { transform: rotate(360deg); } }
@keyframes busy-offset { to { transform: rotate(90deg); } }
@keyframes busy-arc {
  0% {
    stroke-dasharray: .01 108.38;
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
  50% {
    stroke-dasharray: 81.29 108.38;
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
  100% {
    stroke-dasharray: .01 108.38;
    stroke-dashoffset: -81.28;
  }
}

/* ===== إيصال المحاكاة =====
   القياسات مأخوذة من صورة المرجع (عرض 360 وحدة): البطاقة 303×410،
   كل عنصر في موضعه العمودي المطابق، والنص يلتفّ طبيعياً مثل الأصل. */
.demo-receipt {
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(12 * var(--u));
  direction:rtl;
}
.demo-receipt[hidden] { display:none; }
.demo-receipt-backdrop {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.60);
}
.demo-receipt-card {
  position:relative;
  width:calc(303 * var(--u));
  height:calc(410 * var(--u));
  max-width:100%;
  max-height:calc(100dvh - 24px);
  flex:none;
  overflow:hidden;
  border-radius:calc(5 * var(--u));
  background:#fff;
  color:#000;
  box-shadow:0 calc(7 * var(--u)) calc(22 * var(--u)) rgba(0,0,0,.22);
  text-align:center;
}
.demo-receipt-card p { margin:0; }
.demo-num {
  font-family:'RobotoLocal',Roboto,Arial,sans-serif;
  font-weight:400;
}

/* العنوان */
.demo-receipt-card h2 {
  position:absolute;
  top:calc(15.8 * var(--u));
  left:0;
  right:0;
  margin:0;
  font-size:calc(18.85 * var(--u));
  font-weight:700;
  line-height:1.25;
  white-space:nowrap;
}

/* علامة النجاح */
.demo-check {
  position:absolute;
  top:calc(51.5 * var(--u));
  left:50%;
  width:calc(64 * var(--u));
  height:calc(64 * var(--u));
  transform:translateX(-50%);
}
.demo-check svg { display:block; width:100%; height:100%; overflow:visible; }
.demo-check circle,
.demo-check path {
  fill:none;
  stroke:#3fa63c;
  stroke-width:4.4;
}
.demo-check path { stroke-linecap:butt; stroke-linejoin:round; }

/* المستفيد + المبلغ (يلتفّ: MRU في السطر الثاني) */
.demo-summary {
  position:absolute;
  top:calc(139.9 * var(--u));
  left:calc(18 * var(--u));
  right:calc(18 * var(--u));
  font-size:calc(16.7 * var(--u));
  line-height:calc(23.6 * var(--u));
}
.demo-summary .demo-num,
.demo-datetime-line .demo-num { font-size:calc(16.5 * var(--u)); }

/* معرّف المحاكاة */
.demo-transaction-label {
  position:absolute;
  top:calc(210.2 * var(--u));
  left:0;
  right:0;
  font-size:calc(16.7 * var(--u));
  line-height:1.25;
  white-space:nowrap;
}
.demo-reference {
  position:absolute;
  top:calc(234 * var(--u));
  left:calc(8 * var(--u));
  right:calc(8 * var(--u));
  font-size:calc(16.5 * var(--u));
  line-height:1.25;
  white-space:nowrap;
}

/* التاريخ والوقت */
.demo-datetime-line {
  position:absolute;
  top:calc(255.8 * var(--u));
  left:calc(8 * var(--u));
  right:calc(8 * var(--u));
  font-size:calc(16.7 * var(--u));
  line-height:1.25;
  white-space:nowrap;
}

/* إضافة إلى المفضلة: النجمة يمين النص */
.demo-favorite {
  position:absolute;
  top:calc(313.3 * var(--u));
  left:0;
  right:0;
  height:calc(29.8 * var(--u));
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(4.0 * var(--u));
  padding-left:calc(3.6 * var(--u));
  color:#1f1f1f;
  font-size:calc(14.5 * var(--u));
  line-height:1;
}
.demo-favorite span { position:relative; top:calc(-.4 * var(--u)); }
.demo-favorite svg {
  width:calc(29.8 * var(--u));
  height:calc(29.8 * var(--u));
  color:#8e97a3;
  flex:none;
}

.demo-disclosure {
  position:absolute;
  left:calc(5 * var(--u));
  right:calc(5 * var(--u));
  bottom:calc(59 * var(--u));
  color:#a32323;
  font-size:calc(8 * var(--u));
  line-height:1.1;
  white-space:nowrap;
}

/* زر "تم" */
.demo-done {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:calc(57 * var(--u));
  background:#00cde0;
  color:#fff;
  padding:0 0 calc(2.4 * var(--u));
  font-size:calc(15.5 * var(--u));
  line-height:1;
}
.demo-done:active { filter:brightness(.95); }
@media (max-height:650px) {
  .demo-receipt { overflow-y:auto; align-items:center; }
  .demo-receipt-card { margin:auto 0; max-height:none; }
}