/* كتلة | محفظة — لونُ المنتج (أزرق) وتصميمُ شاشاته. يُحمَّل بعد @kutlh/design 0.1.0 (tokens.css ثم components.css)
   ولا يغيّر شيئًا من المشترك: لونُ المنتج عبر --k-accent وحده، والباقي تخطيطُ شاشات المحفظة. */

:root {
  --k-accent: #1F4FD8;
  --k-accent-hover: #1A42B5;
  --k-accent-soft: #EAF0FE;
  --k-accent-soft-text: #1A3FA8;
  --k-on-accent: #FFFFFF;
  --w-hero-from: #1F4FD8;
  --w-hero-to: #163A9E;
  --w-hero-ink: #FFFFFF;
  --w-hero-muted: rgb(255 255 255 / .74);
  --w-plus: var(--k-success);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --k-accent: #82A8FF;
    --k-accent-hover: #A0BEFF;
    --k-accent-soft: #14213D;
    --k-accent-soft-text: #A9C3FF;
    --k-on-accent: #0A1430;
    --w-hero-from: #1B3A86;
    --w-hero-to: #10234F;
    --w-hero-ink: #F2F6FF;
    --w-hero-muted: rgb(242 246 255 / .7);
  }
}
:root[data-theme="dark"] {
  --k-accent: #82A8FF;
  --k-accent-hover: #A0BEFF;
  --k-accent-soft: #14213D;
  --k-accent-soft-text: #A9C3FF;
  --k-on-accent: #0A1430;
  --w-hero-from: #1B3A86;
  --w-hero-to: #10234F;
  --w-hero-ink: #F2F6FF;
  --w-hero-muted: rgb(242 246 255 / .7);
}

/* ——— الهيكل ——— */
.w-main {
  inline-size: 100%;
  max-inline-size: 640px;
  margin-inline: auto;
  padding: var(--k-5) var(--k-4) calc(var(--k-14) + env(safe-area-inset-bottom));
  display: grid;
  gap: var(--k-5);
}
@media (min-width: 900px) {
  .w-main { max-inline-size: 1040px; padding: var(--k-8) var(--k-8) var(--k-14); gap: var(--k-6); }
  .w-main--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .w-main--split > .w-span { grid-column: 1 / -1; }
  .w-main--narrow { max-inline-size: 600px; }
}
.w-stack { display: grid; gap: var(--k-4); }
.w-row { display: flex; align-items: center; gap: var(--k-3); flex-wrap: wrap; }
.w-row--between { justify-content: space-between; }
.w-title { margin: 0; font: 600 var(--k-text-2xl)/1.3 var(--k-font-display); }
.w-lead { margin: 0; color: var(--k-ink-2); font-size: var(--k-text-md); }
.w-muted { color: var(--k-muted); font-size: var(--k-text-sm); }
.w-section-title { margin: 0; font: 600 var(--k-text-lg)/1.4 var(--k-font-display); }
.w-back { display: inline-flex; align-items: center; gap: 6px; color: var(--k-muted); text-decoration: none; font-size: var(--k-text-sm); }
.w-back svg { inline-size: 16px; block-size: 16px; transform: scaleX(-1); }
.w-back:hover { color: var(--k-ink); }
[hidden] { display: none !important; }

/* ——— بطاقةُ الرصيد ——— */
.w-hero {
  position: relative; overflow: hidden;
  border-radius: 20px;
  padding: var(--k-6) var(--k-6) var(--k-5);
  color: var(--w-hero-ink);
  background:
    radial-gradient(120% 140% at 100% 0%, rgb(255 255 255 / .16) 0%, transparent 46%),
    linear-gradient(150deg, var(--w-hero-from), var(--w-hero-to));
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--w-hero-from) 80%, transparent);
  display: grid; gap: var(--k-4);
}
/* كتلٌ مائلة من هندسة شعار كتلة */
.w-hero::after {
  content: ""; position: absolute; inset-block-start: -30px; inset-inline-start: -50px;
  inline-size: 220px; block-size: 160px;
  background:
    linear-gradient(rgb(255 255 255 / .09), rgb(255 255 255 / .09)) 0 0 / 70px 150px no-repeat,
    linear-gradient(rgb(255 255 255 / .06), rgb(255 255 255 / .06)) 84px 30px / 70px 150px no-repeat;
  transform: skewX(-24deg);
  pointer-events: none;
}
.w-hero__label { font-size: var(--k-text-sm); color: var(--w-hero-muted); display: flex; align-items: center; gap: var(--k-2); }
.w-hero__amount { display: flex; align-items: baseline; gap: var(--k-2); font-family: var(--k-font-display); }
.w-hero__amount .k-num { font-size: 44px; font-weight: 600; letter-spacing: -.5px; line-height: 1; }
.w-hero__unit { font-size: var(--k-text-lg); color: var(--w-hero-muted); }
.w-hero__meta { display: flex; flex-wrap: wrap; gap: var(--k-2); }
.w-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--k-radius-pill);
  background: rgb(255 255 255 / .14); color: var(--w-hero-ink);
  font: 500 var(--k-text-xs)/1.5 var(--k-font-ui);
}
.w-chip svg { inline-size: 14px; block-size: 14px; }
.w-chip--warn { background: rgb(255 214 130 / .22); }
.w-hero__actions { display: flex; gap: var(--k-2); flex-wrap: wrap; position: relative; z-index: 1; }
.w-hero .k-btn--primary { --_bg: #FFFFFF; --_fg: #163A9E; --_bd: #FFFFFF; }
.w-hero .k-btn--primary:hover { --_bg: #EEF3FF; --_bd: #EEF3FF; }
.w-hero .k-btn--ghost { --_fg: var(--w-hero-ink); --_bd: rgb(255 255 255 / .28); }
.w-hero .k-btn--ghost:hover { --_bg: rgb(255 255 255 / .1); }
:root[data-theme="dark"] .w-hero .k-btn--primary { --_fg: #10234F; }
@media (min-width: 900px) { .w-hero { padding: var(--k-8); } .w-hero__amount .k-num { font-size: 52px; } }

/* ——— الشحنات ——— */
.w-topups { display: grid; gap: var(--k-2); }
.w-topup {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--k-3); align-items: center;
  padding: var(--k-4); border-radius: var(--k-radius-lg);
  background: var(--k-surface); border: 1px solid var(--k-line);
}
.w-topup__icon {
  inline-size: 40px; block-size: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--k-accent-soft); color: var(--k-accent-soft-text);
}
.w-topup__icon svg { inline-size: 20px; block-size: 20px; }
.w-topup__title { font-weight: 600; display: flex; align-items: baseline; gap: 6px; }
.w-topup__sub { color: var(--k-muted); font-size: var(--k-text-xs); }
.w-topup__bar { grid-column: 2 / -1; }
.w-topup--muted .w-topup__icon { background: var(--k-surface-2); color: var(--k-muted); }
.w-topup--muted .w-topup__title { color: var(--k-ink-2); }

/* ——— اختيار المبلغ ——— */
.w-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k-2); }
.w-amount {
  position: relative; display: grid; gap: 2px; justify-items: center; text-align: center;
  padding: var(--k-4) var(--k-2); border-radius: var(--k-radius-lg);
  background: var(--k-surface); border: 1px solid var(--k-line-strong); color: var(--k-ink);
  cursor: pointer; font: inherit;
  transition: border-color var(--k-fast) var(--k-ease), background var(--k-fast) var(--k-ease), transform var(--k-fast) var(--k-ease);
  -webkit-tap-highlight-color: transparent;
}
.w-amount:active { transform: scale(.98); }
.w-amount .k-num { font: 600 var(--k-text-2xl)/1.1 var(--k-font-display); }
.w-amount__unit { font-size: var(--k-text-xs); color: var(--k-muted); }
.w-amount[aria-checked="true"] { border-color: var(--k-accent); background: var(--k-accent-soft); box-shadow: inset 0 0 0 1px var(--k-accent); }
.w-amount[aria-checked="true"] .w-amount__unit { color: var(--k-accent-soft-text); }
.w-amount[disabled] { opacity: .4; cursor: not-allowed; }
.w-custom { display: grid; grid-template-columns: 1fr auto; gap: var(--k-2); align-items: center; }
.w-custom .k-input { text-align: start; font-size: var(--k-text-lg); }

/* ملخّص */
.w-summary { display: grid; gap: 0; }
.w-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--k-3); padding-block: 10px; border-block-end: 1px dashed var(--k-line); font-size: var(--k-text-sm); }
.w-summary__row:last-child { border-block-end: 0; }
.w-summary__row dt { color: var(--k-muted); }
.w-summary__row dd { margin: 0; font-weight: 600; }
.w-summary__row--total dd { font: 600 var(--k-text-lg)/1.2 var(--k-font-display); }

/* نموذجُ الدفع */
.w-pay { display: grid; gap: var(--k-3); }
.w-pay .mysr-form { inline-size: 100%; }
.w-secure { display: flex; align-items: center; gap: 6px; color: var(--k-muted); font-size: var(--k-text-xs); }
.w-secure svg { inline-size: 14px; block-size: 14px; }
.w-test-badge { background: var(--k-warning-soft); color: var(--k-warning); }

/* ——— الإقرار ——— */
.w-features { display: grid; gap: var(--k-3); }
.w-feature { display: grid; grid-template-columns: auto 1fr; gap: var(--k-3); align-items: start; }
.w-feature__icon { inline-size: 36px; block-size: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--k-accent-soft); color: var(--k-accent-soft-text); }
.w-feature__icon svg { inline-size: 18px; block-size: 18px; }
.w-feature b { display: block; font-weight: 600; }
.w-feature span { color: var(--k-muted); font-size: var(--k-text-sm); }
.w-terms { margin: 0; padding-inline-start: var(--k-5); display: grid; gap: var(--k-2); color: var(--k-ink-2); font-size: var(--k-text-sm); }
.w-check {
  display: grid; grid-template-columns: auto 1fr; gap: var(--k-3); align-items: start;
  padding: var(--k-4); border-radius: var(--k-radius); background: var(--k-surface-2); border: 1px solid var(--k-line);
  cursor: pointer; font-size: var(--k-text-sm);
}
.w-check input { inline-size: 20px; block-size: 20px; margin: 2px 0 0; accent-color: var(--k-accent); }

/* ——— السجلّ ——— */
.w-month { margin: var(--k-4) 0 var(--k-1); font: 600 var(--k-text-sm)/1.4 var(--k-font-ui); color: var(--k-muted); }
.w-tx { display: grid; grid-template-columns: auto 1fr auto; gap: var(--k-3); align-items: center; padding-block: var(--k-3); border-block-end: 1px solid var(--k-line); }
.w-tx:last-child { border-block-end: 0; }
.w-tx__icon { inline-size: 36px; block-size: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--k-surface-2); color: var(--k-ink-2); }
.w-tx__icon svg { inline-size: 18px; block-size: 18px; }
.w-tx__icon--in { background: var(--k-success-soft); color: var(--k-success); }
.w-tx__icon--out { background: var(--k-accent-soft); color: var(--k-accent-soft-text); }
.w-tx__icon--gone { background: var(--k-warning-soft); color: var(--k-warning); }
.w-tx__title { font-weight: 500; }
.w-tx__sub { color: var(--k-muted); font-size: var(--k-text-xs); }
.w-tx__amount { font-weight: 600; white-space: nowrap; }
.w-tx__amount--in { color: var(--w-plus); }
.w-tx__amount--gone { color: var(--k-muted); }

/* ——— الإعدادات ——— */
.w-options { display: grid; gap: var(--k-2); }
.w-option {
  display: grid; grid-template-columns: auto 1fr; gap: var(--k-3); align-items: start; text-align: start;
  padding: var(--k-4); border-radius: var(--k-radius-lg); border: 1px solid var(--k-line-strong);
  background: var(--k-surface); color: var(--k-ink); font: inherit; cursor: pointer;
}
.w-option[aria-checked="true"] { border-color: var(--k-accent); box-shadow: inset 0 0 0 1px var(--k-accent); }
.w-radio { inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2px solid var(--k-line-strong); margin-block-start: 2px; display: grid; place-items: center; }
.w-option[aria-checked="true"] .w-radio { border-color: var(--k-accent); }
.w-option[aria-checked="true"] .w-radio::after { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--k-accent); }
.w-option b { display: block; font-weight: 600; }
.w-option span { color: var(--k-muted); font-size: var(--k-text-sm); }
.w-switch { position: relative; inline-size: 46px; block-size: 28px; flex: none; }
.w-switch input { appearance: none; -webkit-appearance: none; margin: 0; inline-size: 100%; block-size: 100%; border-radius: 999px; background: var(--k-line-strong); cursor: pointer; transition: background var(--k-fast) var(--k-ease); }
.w-switch input:checked { background: var(--k-accent); }
.w-switch::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 22px; block-size: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform var(--k-fast) var(--k-ease); pointer-events: none; }
.w-switch:has(input:checked)::after { transform: translateX(-18px); }

/* ——— النتيجة ——— */
.w-result { display: grid; justify-items: center; text-align: center; gap: var(--k-3); padding: var(--k-8) var(--k-5); }
.w-result__icon { inline-size: 64px; block-size: 64px; border-radius: 50%; display: grid; place-items: center; }
.w-result__icon svg { inline-size: 30px; block-size: 30px; }
.w-result__icon--ok { background: var(--k-success-soft); color: var(--k-success); }
.w-result__icon--fail { background: var(--k-danger-soft); color: var(--k-danger); }
.w-result__icon--wait { background: var(--k-accent-soft); color: var(--k-accent); }
.w-result__icon--wait .k-btn__spinner { inline-size: 26px; block-size: 26px; border-width: 3px; }

/* ——— الدخول ——— */
.w-signin { display: grid; gap: var(--k-3); }
.w-provider { justify-content: center; }
.w-provider svg { inline-size: 20px; block-size: 20px; }
.w-dev { border-style: dashed; }

.w-footer { color: var(--k-muted); font-size: var(--k-text-xs); text-align: center; display: grid; gap: 4px; padding-block: var(--k-4); }
.w-footer a { color: inherit; }

.w-skeleton { border-radius: var(--k-radius); background: linear-gradient(90deg, var(--k-surface-2), var(--k-elevated), var(--k-surface-2)); background-size: 200% 100%; animation: w-shimmer 1.2s linear infinite; }
@keyframes w-shimmer { to { background-position: -200% 0; } }

.w-toast { position: fixed; inset-inline: var(--k-4); inset-block-end: calc(var(--k-4) + env(safe-area-inset-bottom)); z-index: 40; max-inline-size: 520px; margin-inline: auto; }

/* أيقوناتٌ داخل النصّ (المكوّناتُ المشتركة تحدّد مقاساتها الخاصّة بقواعد أدقّ) */
.w-i { inline-size: 1.15em; block-size: 1.15em; flex: none; vertical-align: -0.2em; }
.w-hero__label .w-i { inline-size: 18px; block-size: 18px; }
.w-setting-link { text-decoration: none; color: inherit; display: grid; grid-template-columns: auto 1fr auto; gap: var(--k-3); align-items: center; }
.w-setting-link b { display: block; font-weight: 600; }
.w-setting-link .w-i { inline-size: 18px; block-size: 18px; }

/* نموذجُ Moyasar بألوان المحفظة في الوضعين (يُحمَّل CSSُه بعد هذا، فالمحدِّداتُ أدقّ) */
.w-pay .mysr-form .mysr-form-label, .w-pay .mysr-form .mysr-form-footer, .w-pay .mysr-form .mysr-form-footer a { color: var(--k-muted); font-family: var(--k-font-ui); }
.w-pay .mysr-form .mysr-form-input {
  background: var(--k-surface); color: var(--k-ink); border-color: var(--k-line-strong); font-family: var(--k-font-ui);
}
.w-pay .mysr-form .mysr-form-input::placeholder { color: var(--k-muted); }
.w-pay .mysr-form .mysr-form-input:focus { border-color: var(--k-accent); box-shadow: var(--k-focus); outline: none; }
.w-pay .mysr-form .mysr-form-button {
  background: var(--k-accent); color: var(--k-on-accent); border-radius: var(--k-radius); min-block-size: 48px; font-family: var(--k-font-ui);
}
.w-pay .mysr-form .mysr-form-button:hover { background: var(--k-accent-hover); }
.w-pay .mysr-form .mysr-form-button svg, .w-pay .mysr-form .mysr-form-button svg path { fill: currentColor; }
/* Moyasar يضع ألوانه بقواعد أدقّ أو لاحقة؛ هذه وحدها بـ!important (الألوان فقط) لتُقرأ في الوضع الداكن */
.w-pay .mysr-form .mysr-form-label, .w-pay .mysr-form .mysr-form-footer, .w-pay .mysr-form .mysr-form-footer * { color: var(--k-muted) !important; }
.w-pay .mysr-form .mysr-form-button { background-color: var(--k-accent) !important; color: var(--k-on-accent) !important; }
.w-pay .mysr-form .mysr-form-button:hover { background-color: var(--k-accent-hover) !important; }
.w-pay .mysr-form label, .w-pay .mysr-form .mysr-form-labelGroup, .w-pay .mysr-form .mysr-form-labelGroup * { color: var(--k-ink-2) !important; opacity: 1 !important; }
body.k main .w-pay .mysr-form div.mysr-form-labelGroup label.mysr-form-label { color: var(--k-ink-2) !important; }
/* محدِّدُ Moyasar بثلاثة معرّفات و!important؛ أربعةٌ هنا تكفي للونٍ يُقرأ في الوضع الداكن */
.w-pay #mysr-form-form-el#mysr-form-form-el#mysr-form-form-el#mysr-form-form-el label.mysr-form-label { color: var(--k-ink-2) !important; }

/* ——— الشروط والأحكام ——— */
.w-terms-doc { display: grid; gap: var(--k-5); }
.w-terms-doc h2 { margin: 0 0 var(--k-2); font: 600 var(--k-text-lg)/1.4 var(--k-font-display); }
.w-terms-doc ol { margin: 0; padding-inline-start: var(--k-5); display: grid; gap: var(--k-2); color: var(--k-ink-2); font-size: var(--k-text-sm); line-height: 1.9; }
.w-check a { color: var(--k-accent); font-weight: 600; }

/* ترتيبُ «تلقائي» داخل خياره */
.w-order { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-2); margin-block-start: var(--k-3); }
.w-order .k-tabs__tab { font-size: var(--k-text-xs); padding: 8px var(--k-3); }
.w-option > span:last-child { min-inline-size: 0; }
.w-option:focus-visible { box-shadow: var(--k-focus); outline: none; }

/* سطرُ نسبة النموذج المدمج إلى مزوّد الدفع وسطرُ وضع الاختبار لديه: مخفيّان (شروطُ المزوّد لا تشترط إظهاره —
   شروط الخدمة لديه تشترط إظهارَ هويّة التاجر نفسه، وهي في صفحة الشروط). شارةُ وضع الاختبار عندنا تبقى ظاهرة. */
.w-pay #mysr-form-form-el#mysr-form-form-el#mysr-form-form-el#mysr-form-form-el .mysr-form-footer,
.w-pay .mysr-form .mysr-form-footer { display: none !important; }