/*
 * PAYUNIT — shared design foundation (v18)
 * ===========================================================================
 * The single source of truth for the light PAYUNIT language: tokens, reset,
 * typography, and the primitives every surface reuses — buttons, fields,
 * cards, notices, tables. The public site loads it, and the customer and
 * administration consoles are meant to load it too as they are rebuilt.
 *
 * Two notes on what is NOT here:
 *
 *  - assets/checkout.css deliberately inlines the same tokens instead of
 *    importing this file. The checkout is a single page opened once by a
 *    stranger; one request beats a shared cache it will never reuse. If a
 *    token changes here, change it there too — they are one system.
 *
 *  - Nothing in this file is generated. tools/build-assets.mjs compiles
 *    assets/styles/* into base.css / app.css / admin.css and never touches
 *    this file, so it is safe to edit by hand.
 */

/* ---------- Fonts (Arabic only; Latin uses the system stack) ------------- */
@font-face{font-family:"PU Arabic";src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"PU Arabic";src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"PU Arabic";src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"PU Arabic";src:url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}

/* ---------- Tokens ------------------------------------------------------- */
:root{
  /* Ink scale */
  --ink:#0d1526;
  --ink-soft:#344054;
  --muted:#667085;
  --faint:#8a94a6;
  /* Surfaces */
  --paper:#ffffff;
  --page:#f4f5f8;
  --page-2:#eceef3;
  --line:#e6e8ee;
  --line-soft:#eff1f5;
  /* Brand */
  --gold:#c39a4e;
  --gold-deep:#8a6b30;
  --gold-soft:#f3e9d5;
  --gold-line:#e8d5ac;
  /* Status */
  --ok:#067647;      --ok-bg:#ecfdf3;   --ok-line:#abefc6;
  --warn:#b54708;    --warn-bg:#fffaeb; --warn-line:#fedf89;
  --bad:#b42318;     --bad-bg:#fef3f2;  --bad-line:#fecdca;
  --info:#175cd3;    --info-bg:#eff8ff; --info-line:#b2ddff;
  /* Geometry */
  --r-xl:24px; --r-lg:20px; --r-md:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(13,21,38,.04),0 14px 34px -18px rgba(13,21,38,.24);
  --shadow-sm:0 1px 2px rgba(13,21,38,.05);
  --shadow-lg:0 2px 4px rgba(13,21,38,.04),0 24px 56px -24px rgba(13,21,38,.3);
  --focus:0 0 0 3px rgba(195,154,78,.32);
  /* Type */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
html[lang="ar"]{--sans:"PU Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif}

/* ---------- Reset -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--page);scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;min-height:100dvh;
  font-family:var(--sans);font-size:15px;line-height:1.65;color:var(--ink);
  background:var(--page);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-touch-callout:none;
}
/* App-like interaction: interface copy is not selectable. Form controls remain
   selectable so amounts/codes can still be edited normally. Explicit Copy
   buttons continue to use the Clipboard API and are unaffected. */
body,body *{-webkit-user-select:none;user-select:none}
input,textarea,select,[contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img{-webkit-user-drag:none}
h1,h2,h3,h4,p,dl,dd,dt,figure,ul,ol{margin:0}
/* Components here set display:flex/grid, which outranks the `hidden` attribute's
   UA rule. Without this, an element the server marked hidden renders as an empty
   coloured box — which is exactly what the withdrawal error line did. */
[hidden]{display:none!important}
ul,ol{padding:0;list-style:none}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
::selection{background:rgba(195,154,78,.24);color:var(--ink)}

/* ---------- Utilities ---------------------------------------------------- */
.pu-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.pu-mono{font-family:var(--mono);letter-spacing:.01em}
.pu-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Hidden by clipping rather than by being pushed off-screen: in RTL an
   `inset-inline-start:-9999px` element is pushed off the RIGHT edge, which the
   browser counts as page width and turns into a horizontal scrollbar. */
.pu-skip{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;z-index:99}
.pu-skip:focus{
  width:auto;height:auto;clip-path:none;overflow:visible;
  inset-block-start:0;inset-inline-start:12px;padding:12px 18px;
  background:var(--ink);color:#fff;border-radius:0 0 var(--r-md) var(--r-md);font-weight:600;
}

/* ---------- Installable PWA prompt -------------------------------------- */
.pwa-install{
  position:fixed;z-index:120;inset-inline:12px;inset-block-end:calc(12px + env(safe-area-inset-bottom));
  margin-inline:auto;width:min(560px,calc(100vw - 24px));
  background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 18px 48px -18px rgba(13,21,38,.38);backdrop-filter:blur(16px);
  padding:14px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  transform:translateY(14px);opacity:0;transition:opacity .2s ease,transform .2s ease;
}
.pwa-install.is-visible{transform:translateY(0);opacity:1}
.pwa-install[hidden]{display:none!important}
.pwa-install-icon{width:48px;height:48px;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:var(--ink);flex:0 0 auto}
.pwa-install-icon img{width:48px;height:48px;object-fit:cover}
.pwa-install-copy{min-width:0;display:grid;gap:2px}
.pwa-install-copy b{font-size:14px;font-weight:700;line-height:1.45;color:var(--ink)}
.pwa-install-copy small{font-size:12px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.pwa-install-actions{display:flex;align-items:center;gap:6px}
.pwa-install-primary{min-height:38px;padding-inline:14px;border-radius:11px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.pwa-install-close{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--faint);cursor:pointer;font-size:20px;line-height:1}
.pwa-install-close:hover{background:var(--page-2);color:var(--ink)}
.pwa-install-help{grid-column:1/-1;margin-top:-2px;padding:10px 12px;border-radius:12px;background:var(--page);color:var(--ink-soft);font-size:12px;line-height:1.65}
@media(max-width:520px){
  .pwa-install{grid-template-columns:auto minmax(0,1fr);padding:12px}
  .pwa-install-actions{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto}
  .pwa-install-primary{width:100%;min-height:42px}
}
@media(display-mode:standalone){.pwa-install{display:none!important}}

/* ---------- Buttons ------------------------------------------------------ */
.pu-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding-inline:20px;border-radius:var(--r-md);cursor:pointer;
  font-size:14.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  background:linear-gradient(180deg,#1a2842,#0d1526);color:#fff;
  box-shadow:0 1px 2px rgba(13,21,38,.16),0 10px 22px -14px rgba(13,21,38,.6);
  transition:transform .14s,box-shadow .14s,filter .14s,background .14s,border-color .14s;
}
.pu-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.pu-btn:active{transform:translateY(0) scale(.995)}
.pu-btn[disabled],.pu-btn[aria-busy="true"]{opacity:.6;cursor:default;transform:none;filter:none}
.pu-btn svg{width:17px;height:17px;flex:0 0 auto}
.pu-btn-lg{min-height:54px;padding-inline:26px;font-size:15.5px;border-radius:var(--r-md)}
.pu-btn-sm{min-height:38px;padding-inline:14px;font-size:13px;border-radius:var(--r-sm)}
.pu-btn-block{width:100%}
.pu-btn-ghost{background:var(--paper);color:var(--ink);border:1.5px solid var(--line);box-shadow:var(--shadow-sm)}
.pu-btn-ghost:hover{filter:none;background:var(--paper);border-color:#d3d7e0}
.pu-btn-soft{background:var(--page-2);color:var(--ink);border:1.5px solid transparent;box-shadow:none}
.pu-btn-soft:hover{filter:none;background:#e4e7ee;transform:none}
/* Destructive, but never louder than the primary action: a refund or a
   cancellation should look deliberate, not alarming. */
.pu-btn-danger{background:var(--bad-bg);color:var(--bad);border:1.5px solid var(--bad-line);box-shadow:none}
.pu-btn-danger:hover{filter:none;background:#fee4e2;border-color:#fda29b}
.pu-btn-quiet{background:transparent;color:var(--ink-soft);box-shadow:none;padding-inline:12px}
.pu-btn-quiet:hover{filter:none;background:var(--page-2);color:var(--ink);transform:none}

/* ---------- Fields ------------------------------------------------------- */
.pu-field{display:block}
.pu-field>span{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-block-end:6px}
.pu-input{
  width:100%;min-height:46px;padding:11px 13px;border-radius:var(--r-md);
  border:1.5px solid var(--line);background:var(--paper);color:var(--ink);
  font:inherit;font-size:14.5px;transition:border-color .16s,box-shadow .16s;
}
select.pu-input{padding-inline-end:34px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px;background-position:right 12px center}
html[dir="rtl"] select.pu-input{background-position:left 12px center}
.pu-input::placeholder{color:#a6adba}
.pu-input:hover{border-color:#d3d7e0}
.pu-input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(13,21,38,.08)}
.pu-input[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 3px rgba(180,35,24,.09)}
.pu-help{display:block;font-size:12px;color:var(--faint);margin-block-start:5px;line-height:1.5}
.pu-help:empty{display:none}

/* ---------- Cards -------------------------------------------------------- */
.pu-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.pu-card-pad{padding:22px}
/* ---------- Notices ------------------------------------------------------ */
.pu-note{display:flex;align-items:flex-start;gap:9px;padding:12px 13px;border-radius:var(--r-md);font-size:13px;line-height:1.6;border:1px solid}
.pu-note svg{width:16px;height:16px;flex:0 0 auto;margin-block-start:2px}
.pu-note-info{background:var(--info-bg);border-color:var(--info-line);color:#1849a9}
.pu-note-ok{background:var(--ok-bg);border-color:var(--ok-line);color:#05603a}
.pu-note-warn{background:var(--warn-bg);border-color:var(--warn-line);color:#93370d}
.pu-note-bad{background:var(--bad-bg);border-color:var(--bad-line);color:#912018}
.pu-note-quiet{background:var(--page-2);border-color:var(--line);color:var(--ink-soft)}

/* ---------- Pills & badges ----------------------------------------------- */
/* ---------- Brand mark --------------------------------------------------- */
/* The Payunit mark: the gold units P on the navy of the brand (the same navy
   gradient as the primary buttons and the balance card), so the logo, the app
   icon and the interface read as one identity. */
:root{--brand-navy:#1a2842;--brand-navy-deep:#0d1526;--brand-gold:#D6B370;--brand-tile:linear-gradient(150deg,var(--brand-navy),var(--brand-navy-deep))}
.pu-logo{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--brand-tile);color:var(--brand-gold);line-height:1;
  box-shadow:0 4px 10px -5px rgba(13,21,38,.55),inset 0 1px rgba(255,255,255,.1);
}
.pu-logo-lg{width:40px;height:40px;border-radius:12px}
.pu-logo .pu-mark{display:block;width:54%;height:54%}
.pu-wordmark{display:inline-flex;align-items:center;line-height:0}
.pu-brand-word{display:block;line-height:0;color:inherit}
/* ---------- Definition rows (receipts, specs, fee tables) ---------------- */
.pu-rows{display:grid;gap:1px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--line-soft)}
.pu-rows>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;background:var(--paper)}
.pu-rows dt{font-size:12.5px;color:var(--muted);font-weight:500;flex:0 0 auto}
.pu-rows dd{font-size:13.5px;font-weight:600;text-align:end;word-break:break-word;min-width:0}

/* ---------- Motion ------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ==========================================================================
 * Responsive foundation (v18.1)
 * --------------------------------------------------------------------------
 * Two defaults that every surface built on this file inherits, so the same
 * min-width:auto overflow can never reappear one component at a time:
 *   - definition rows wrap instead of widening their card;
 *   - anything holding user-supplied text breaks long tokens.
 * ========================================================================== */
.pu-rows{grid-template-columns:minmax(0,1fr)}
.pu-rows>div{flex-wrap:wrap}
.pu-rows dt,.pu-rows dd{min-width:0;overflow-wrap:anywhere}
.pu-note,.pu-note>span{min-width:0}
.pu-btn{max-width:100%}
.pu-field,.pu-input{min-width:0}

/* Touch targets stay at least 44px on coarse pointers, whatever the density. */
@media(pointer:coarse){
  .pu-btn-sm{min-height:44px}}

/* A button label that cannot fit is better on two lines than clipped. The
   nowrap default holds everywhere it fits; below 380px it gives way. */
@media(max-width:380px){
  .pu-btn{white-space:normal;text-wrap:balance;line-height:1.35;padding-block:10px}
}

/* Horizontal arrows encode reading direction, not a compass point: "back"
   points left in English and right in Arabic. ui_icon() marks exactly those
   icons, so one rule mirrors every one of them. The raw paths are drawn
   LTR-correct, so only RTL flips — vertical and semantic icons (deposit,
   withdraw, transfer) are never marked and never move. */
html[dir="rtl"] .ui-icon-directional{transform:scaleX(-1)}

/* Names, amounts and references carry their own direction (dir="auto" or
   "ltr") so they read correctly, but they are placed by the page: start and end
   are resolved against the parent's direction, not the value's own. Without
   this an English title in an Arabic list sat at the wrong edge, and an amount
   drifted away from the status under it. Zero specificity, so a component that
   sets its own alignment keeps it; paragraphs, code and form fields are left to
   their own direction. */
:where([dir="auto"],[dir="ltr"]):where(:not(html,p,pre,input,textarea,select)){text-align:-webkit-match-parent;text-align:match-parent}

.pu-wordmark-text{display:inline-block;font-size:1em;font-weight:700;line-height:1.35;letter-spacing:0;text-transform:none}

/* Shared language control for public, checkout, account, admin and auth shells. */
.pu-language-switch{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:38px;min-width:70px;padding-inline:13px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);font-size:12.5px;font-weight:700;color:var(--faint);flex:0 0 auto;text-decoration:none;line-height:1;white-space:nowrap;transition:border-color .16s}
.pu-language-switch b{font-size:inherit;font-weight:700;color:var(--faint)}.pu-language-switch b.is-on{color:var(--ink)}.pu-language-switch>span{opacity:.45}.pu-language-switch:hover{border-color:#c4cad4}.pu-language-switch:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
@media(max-width:360px){.pu-language-switch{min-width:63px;padding-inline:9px}}

/* قيمة قابلة للنسخ: النص كاملًا يلتف عند الحاجة، وزر النسخ بجانبه */
.pu-copyval{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0;flex-wrap:wrap}
.pu-copyval-text{min-width:0;overflow-wrap:anywhere;word-break:break-all;font-size:inherit;color:inherit}
.pu-copybtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);font:inherit;font-size:12px;font-weight:600;line-height:1.4;cursor:pointer;transition:border-color .16s,background .16s,color .16s}
.pu-copybtn:hover{background:var(--page-2);border-color:#cfd4de;color:var(--ink)}
.pu-copybtn svg{width:14px;height:14px}
.pu-copybtn.is-done{border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok)}
.pu-rows dd{min-width:0;overflow-wrap:anywhere}

/* زر النسخ: أيقونة فقط، دون نص يزيح التنسيق. النص يبقى لقارئ الشاشة. */
.pu-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pu-copyval{flex-wrap:nowrap;gap:6px}
.pu-copybtn{width:30px;height:30px;padding:0;justify-content:center;border-radius:9px}
.pu-copybtn svg{width:15px;height:15px}

/* ---------- Opening screen (views/_splash.php) ---------------------------- */
/* About 3.8 s: the four gold units of the mark arrive one by one, the coin lands
   (with the chime in the installed app), a shine passes over the mark, the name
   and tagline rise, a thin line fills, then the screen fades into the page. */
.pu-splash{display:none}
.pu-splash-on .pu-splash{
  position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;
  background:radial-gradient(70% 45% at 50% 42%,rgba(214,179,112,.14) 0,rgba(214,179,112,0) 70%),linear-gradient(170deg,var(--brand-navy),var(--brand-navy-deep));
  color:#fff;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  animation:pu-splash-out .5s ease-in 3.3s forwards;
}
.pu-splash-on body{overflow:hidden}
.pu-splash-in{display:grid;justify-items:center;gap:14px;text-align:center}
.pu-splash-logo{position:relative;display:grid;place-items:center;width:clamp(76px,20vw,96px);aspect-ratio:1}
.pu-splash-mark{width:100%;height:100%;overflow:visible;fill:var(--brand-gold)}
.pu-splash-mark path{transform-box:fill-box;transform-origin:center;opacity:0}
.pu-sp-u1{animation:pu-sp-in-top .55s cubic-bezier(.2,1.3,.4,1) .25s forwards}
.pu-sp-u2{animation:pu-sp-in-bottom .55s cubic-bezier(.2,1.3,.4,1) .55s forwards}
.pu-sp-u3{animation:pu-sp-in-side .6s cubic-bezier(.2,1.3,.4,1) .85s forwards}
.pu-sp-u4{animation:pu-sp-coin .7s cubic-bezier(.3,1.6,.45,1) 1.2s forwards}
.pu-sp-shine{animation:pu-sp-shine 1s ease-in-out 1.9s both}
.pu-splash-ring{position:absolute;inset:-26%;border-radius:50%;border:2px solid rgba(214,179,112,.5);opacity:0;animation:pu-splash-ring 1.2s ease-out 1.45s forwards}
.pu-splash-name{margin-top:22px;font-size:clamp(26px,7vw,34px);font-weight:700;line-height:1.2;animation:pu-splash-rise .6s ease-out 2.05s both}
.pu-splash-tag{font-size:14px;color:rgba(255,255,255,.72);animation:pu-splash-rise .6s ease-out 2.35s both}
.pu-splash-bar{display:block;width:120px;height:3px;margin-top:18px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;animation:pu-splash-rise .4s ease-out 2.4s both}
.pu-splash-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--brand-gold);transform:scaleX(0);transform-origin:right;animation:pu-sp-bar .9s ease-in-out 2.45s forwards}
[dir=ltr] .pu-splash-bar i{transform-origin:left}
@keyframes pu-sp-in-top{from{opacity:0;transform:translateY(-40%) scale(.6)}to{opacity:1;transform:none}}
@keyframes pu-sp-in-bottom{from{opacity:0;transform:translateY(40%) scale(.6)}to{opacity:1;transform:none}}
@keyframes pu-sp-in-side{from{opacity:0;transform:translateX(45%) scale(.6)}to{opacity:1;transform:none}}
@keyframes pu-sp-coin{0%{opacity:0;transform:translateY(-160%) scale(.5)}60%{opacity:1;transform:translateY(8%) scale(1.08)}100%{opacity:1;transform:none}}
@keyframes pu-sp-shine{from{transform:skewX(-18deg) translateX(0)}to{transform:skewX(-18deg) translateX(190px)}}
@keyframes pu-sp-bar{to{transform:scaleX(1)}}
@keyframes pu-splash-ring{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.4)}}
@keyframes pu-splash-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pu-splash-out{to{opacity:0;visibility:hidden;transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){
  .pu-splash-on .pu-splash{animation:pu-splash-out .2s linear .8s forwards}
  .pu-splash-mark path{opacity:1}
  .pu-splash-mark path,.pu-sp-shine,.pu-splash-ring,.pu-splash-name,.pu-splash-tag,.pu-splash-bar,.pu-splash-bar i{animation:none}
  .pu-splash-bar{display:none}
}