/* Icons: one hidden sprite per page, every icon a short reference into it (ui_icon). */
.ui-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/*
 * 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: navy units and a gold coin on a light grey tile with a thin
   border, so the logo stays light and clean on every surface. On dark surfaces
   (.is-on-dark) the tile turns translucent and the units white. */
:root{--brand-navy:#1a2842;--brand-navy-deep:#0d1526;--brand-gold:#D6B370;--brand-coin:#C49A4A;--brand-tile:#f2f4f7;--brand-tile-line:#dfe3ea;--brand-tile-dark:linear-gradient(150deg,var(--brand-navy),var(--brand-navy-deep))}
.pu-mark-coin{fill:var(--brand-coin,currentColor)}
.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-navy);line-height:1;
  border:1px solid var(--brand-tile-line);
}
.is-on-dark .pu-logo,.pu-logo.is-on-dark{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#fff;--brand-coin:var(--brand-gold)}
.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,.16) 0,rgba(214,179,112,0) 70%),linear-gradient(170deg,#f7f8fa,#eceff4);
  color:var(--brand-navy);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-navy)}
.pu-splash-mark .pu-sp-u4{fill:var(--brand-coin)}
.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:#5b6474;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(26,40,66,.1);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}
}


/* Support conversations (views/_support_chat.php): the account's messages and
   the support team's, as bubbles on opposite sides, then the reply box. */
.sc{display:grid;gap:14px;min-width:0}
.sc-list{list-style:none;margin:0;padding:16px;display:grid;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:18px;min-width:0}
.sc-msg{display:flex;min-width:0}
.sc-msg.is-mine{justify-content:flex-start}
.sc-msg.is-theirs{justify-content:flex-end}
.sc-bubble{max-width:min(78%,560px);min-width:0;padding:10px 13px 8px;border-radius:16px;background:var(--page);border:1px solid var(--line-soft);display:grid;gap:4px}
.sc-msg.is-mine .sc-bubble{background:#1a2842;border-color:#1a2842;color:#fff;border-start-start-radius:6px}
.sc-msg.is-theirs .sc-bubble{border-start-end-radius:6px}
.sc-who{font-size:12px;font-weight:700;opacity:.75}
.sc-bubble p{margin:0;font-size:14.5px;line-height:1.7;overflow-wrap:anywhere;white-space:normal}
.sc-bubble time{font-size:11.5px;opacity:.6}
.sc-photo{display:block;border-radius:12px;overflow:hidden;max-width:260px}
.sc-photo img{display:block;width:100%;height:auto;max-height:260px;object-fit:cover}
.sc-file{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 10px;border-radius:12px;background:rgba(127,127,127,.12);color:inherit;font-size:13.5px;font-weight:600;text-decoration:none}
.sc-file svg{width:17px;height:17px;flex:0 0 auto}
.sc-file span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-file small{opacity:.7;font-weight:500;flex:0 0 auto}
.sc-closed{display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px;border-radius:12px;background:var(--page-2);color:var(--muted);font-size:13.5px}
.sc-closed svg{width:16px;height:16px;flex:0 0 auto}
.sc-form{display:grid;gap:10px;padding:14px;background:var(--paper);border:1px solid var(--line);border-radius:18px}
.sc-form textarea{resize:vertical;min-height:84px}
.sc-form-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.sc-attach{position:relative;display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:62%;min-height:40px;padding:0 14px;border:1px dashed var(--line);border-radius:999px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-soft);background:var(--page)}
.sc-attach:hover,.sc-attach:focus-within,.sc-attach.has-file{border-style:solid;border-color:#c3c9d4}
.sc-attach svg{width:17px;height:17px;flex:0 0 auto}
.sc-attach span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-attach input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.sc-row.is-unread b,.sc-inbox-row.is-unread b{font-weight:800}
.sc-start{margin-block-end:14px}
.uf-actions{margin:10px 0 0}
@media (max-width:420px){.sc-list{padding:10px}.sc-bubble{max-width:90%}}

/* A payment brand's logo in a white chip (HostedMethods::logoHtml): same shape as the card schemes everywhere. */
.hm-chip{box-sizing:border-box;padding:3px 5px;background:#fff;border:1px solid #e6e8ee;border-radius:6px;object-fit:contain;flex:0 0 auto}