/* ============================================================================
   15 · PERMISSIONS MANAGER & CHECKOUT

   The permission manager (subjects, modules, commands, staged save bar) and
   the shared payment checkout loader + result modal.

   Part of the dashboard stylesheet, split out of the former single style.css.
   LOAD ORDER IS LOAD-BEARING (later parts intentionally override earlier
   ones) — the canonical order is dashboard/views/partials/_app_styles.ejs.
   ========================================================================== */

/* ===== PERMISSIONS MANAGER ===== */
.pm-stack { display: flex; flex-direction: column; gap: 1.25rem; }

/* Info note */
.pm-note {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.95rem 1.1rem; margin-bottom: 1.25rem;
  border: 1px solid rgba(220,38,38,.22); border-radius: 16px;
  background: linear-gradient(120deg, rgba(220,38,38,.08), rgba(220,38,38,.02));
}
.pm-note ion-icon { font-size: 1.25rem; color: var(--crimson-glow); flex-shrink: 0; margin-top: 1px; }
.pm-note p { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }
.pm-note strong { color: var(--text); }
/* Neutral variant — used for the "some modules are disabled by admins" info note so it reads as
   informational rather than an enforcement warning. */
.pm-note.muted { border-color: var(--border); background: var(--bg-tertiary); }
.pm-note.muted ion-icon { color: var(--text-secondary); }

/* Segmented Users / Roles tabs */
.pm-segtabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; margin-bottom: 0.85rem;
  background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 12px; }
.subj-tab {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.9rem; border: none; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--text-secondary);
  font-family: var(--font); font-size: 0.8125rem; font-weight: 700;
  transition: background .18s var(--ease), color .18s var(--ease); }
.subj-tab ion-icon { font-size: 1rem; }
.subj-tab:hover { color: var(--text); }
.subj-tab.active { background: linear-gradient(135deg, var(--crimson), var(--crimson-dark)); color: #fff;
  box-shadow: 0 4px 14px -4px rgba(220,38,38,.6); }

/* Member search box */
.pm-search { display: flex; align-items: center; gap: 0.55rem; padding: 0 0.85rem;
  background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 12px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.pm-search:focus-within { border-color: rgba(220,38,38,.5); box-shadow: var(--ring-blue); }
.pm-search ion-icon { color: var(--text-muted); font-size: 1.05rem; flex-shrink: 0; }
.pm-search input { flex: 1; background: none; border: none; outline: none; color: var(--text);
  font-family: var(--font); font-size: 0.875rem; padding: 0.65rem 0; }
.pm-search input::placeholder { color: var(--text-muted); }

/* Member search results */
.pm-userlist { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; }
.pm-userlist:empty { margin-top: 0; }
.pm-userlist-hint { font-size: 0.8rem; color: var(--text-muted); padding: 0.4rem 0.15rem; }
.pm-user-row {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left;
  padding: 0.45rem 0.6rem; border: 1px solid transparent; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--text); font-family: var(--font); font-size: 0.85rem;
  transition: background .16s var(--ease), border-color .16s var(--ease); }
.pm-user-row:hover { background: var(--surface-hover); border-color: var(--border); }
.pm-user-row img { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.pm-user-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pm-user-row > ion-icon { color: var(--text-muted); font-size: 1.15rem; flex-shrink: 0; }
.pm-user-row:hover > ion-icon { color: var(--crimson-glow); }

/* Count pill on panel head */
.pm-count-pill { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; color: var(--crimson-glow);
  background: rgba(220,38,38,.14); border: 1px solid rgba(220,38,38,.28); border-radius: 9999px; padding: 0.15rem 0.6rem; }

/* Subject chips */
.pm-subj-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pm-empty-inline { display: flex; align-items: center; gap: 0.5rem; font-size: 0.83rem; color: var(--text-muted); padding: 0.35rem 0.15rem; }
.pm-empty-inline ion-icon { color: var(--pistachio); font-size: 1.05rem; }
.pm-subj {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.35rem 0.3rem 0.4rem; border-radius: 9999px; cursor: pointer;
  background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text);
  font-family: var(--font); font-size: 0.8125rem; font-weight: 600;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease); }
.pm-subj:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.pm-subj.active { border-color: transparent; background: linear-gradient(135deg, var(--crimson), var(--crimson-dark)); color: #fff;
  box-shadow: 0 5px 16px -6px rgba(220,38,38,.7); }
.pm-subj-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pm-subj-ic { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(220,38,38,.16); color: var(--crimson-glow); font-size: 0.8rem; flex-shrink: 0; }
.pm-subj-ic.role { background: rgba(147,197,114,.16); color: var(--pistachio); }
.pm-subj-ic.group { background: rgba(245,158,11,.16); color: var(--yellow); }
.pm-subj.active .pm-subj-ic { background: rgba(255,255,255,.2); color: #fff; }
.pm-subj-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-subj-clear { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; color: currentColor; opacity: 0.6; transition: opacity .16s var(--ease), background .16s var(--ease); }
.pm-subj-clear:hover { opacity: 1; background: rgba(255,255,255,.16); }
.pm-subj-clear ion-icon { font-size: 0.95rem; pointer-events: none; }

/* Editor empty state */
.pm-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.5rem 1rem; }
.pm-empty-icon { width: 58px; height: 58px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  background: rgba(220,38,38,.1); border: 1px solid rgba(220,38,38,.22); color: var(--crimson-glow); font-size: 1.6rem; margin-bottom: 1rem; }
.pm-empty-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 0.35rem; }
.pm-empty-desc { font-size: 0.85rem; color: var(--text-muted); max-width: 320px; line-height: 1.55; }

/* Editor head */
.pm-editor-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.1rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
.pm-head-av { width: 44px; height: 44px; border-radius: 13px; object-fit: cover; flex-shrink: 0; }
.pm-head-ic { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: rgba(220,38,38,.14); color: var(--crimson-glow); font-size: 1.3rem; flex-shrink: 0; }
.pm-head-ic.role { background: rgba(147,197,114,.14); color: var(--pistachio); }
.pm-head-ic.group { background: rgba(245,158,11,.14); color: var(--yellow); }
.pm-editor-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-editor-type { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }
/* Exit the editor — deselects the subject and returns to the "No one selected" state. */
.pm-editor-close { margin-left: auto; flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--text-muted); font-size: 1.15rem;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease); }
.pm-editor-close:hover { background: rgba(220,38,38,.14); border-color: rgba(220,38,38,.35); color: var(--crimson-glow); }

/* Role groups — picker list + role-membership modal */
.pm-group-list { display: flex; flex-direction: column; gap: 0.4rem; }
.pm-group-row { display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.4rem; border-radius: 11px;
  border: 1px solid var(--border); background: var(--bg-elev); transition: border-color .16s var(--ease), background .16s var(--ease); }
.pm-group-row:hover { border-color: var(--border-strong); }
.pm-group-row.active { border-color: transparent; background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(245,158,11,.06)); box-shadow: inset 0 0 0 1px rgba(245,158,11,.4); }
.pm-group-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.55rem; background: none; border: none;
  color: inherit; cursor: pointer; padding: 0.25rem 0.2rem; text-align: left; }
.pm-group-meta { min-width: 0; display: flex; flex-direction: column; }
.pm-group-name { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-group-count { font-size: 0.73rem; color: var(--text-muted); }
.pm-group-actions { display: flex; align-items: center; gap: 0.1rem; flex-shrink: 0; }
.pm-groles-list { display: flex; flex-direction: column; gap: 0.15rem; }
.pm-grole { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.5rem; border-radius: 9px; cursor: pointer;
  transition: background .14s var(--ease); }
.pm-grole:hover { background: var(--bg-elev); }
.pm-grole input { accent-color: var(--crimson); width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }
.pm-grole-name { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Category tabs — the editor's two vocabularies: capabilities Discord's native permission
   system also expresses (tri-state rows), and Azra-only ones (binary switch + the
   dashboard-only modules). Switching re-renders the editor; staged changes live in the
   working maps, never in the DOM, so tabs never touch them. */
.pm-cats-count { font-size: 0.72rem; color: var(--text-muted); margin: 0.9rem 0 0.45rem; }
.pm-cats { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.55rem; margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--border); scrollbar-width: thin; }
.pm-cats [data-tip]::after { left: 0; transform: none; }
.pm-cat { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.42rem; padding: 0.42rem 0.8rem;
  border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text-muted);
  cursor: pointer; font-family: var(--font); font-size: 0.76rem; font-weight: 600;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
.pm-cat ion-icon { font-size: 0.95rem; }
.pm-cat:hover { color: var(--text); background: rgba(255,255,255,.04); }
.pm-cat.active { color: var(--text); background: var(--surface-hover); border-color: var(--border-strong);
  box-shadow: inset 0 -2px 0 var(--crimson); }

/* Allow-all — the Discord Moderation card's bulk stage: one switch writes an explicit
   Allow on every command the card is showing (or clears them all back to the module
   default). It stages like any per-command switch; Save commits it. HIDDEN until the
   card is hovered (or expanded, for touch where hover is unreliable) — a row of
   collapsed cards stays a clean inventory, and the bulk stage appears exactly when
   the admin is considering that card. */
.pm-allow-all { display: none; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 0.6rem; padding: 0.6rem 0.9rem 0.7rem; border-top: 1px solid var(--border); }
.pm-mod:hover .pm-allow-all, .pm-mod.open .pm-allow-all { display: flex; }
.pm-allow-all-name { display: block; font-weight: 700; font-size: 0.8rem; color: var(--text); }
.pm-allow-all-sub { display: block; font-size: 0.7rem; color: var(--text-muted); margin-top: 0.1rem; }

/* Module cards — compact responsive tile grid instead of full-width rows. Each card carries its
   icon, name, status line and grant switch; a card with commands expands across the whole row
   when opened (see .pm-mod.open) so its command list gets the width it needs. */
.pm-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 0.6rem; }
.pm-mod { border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-tertiary); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
/* No overflow:hidden here on purpose: it would clip the editor's instant data-tip
   bubbles, which legitimately overflow the card edge. Nothing inside paints into the
   rounded corners (the head has no background; badges carry their own radius). */
.pm-mod:hover { border-color: var(--border-strong); }
.pm-mod.is-on { border-color: rgba(220,38,38,.35); box-shadow: inset 3px 0 0 var(--crimson); }
.pm-mod.open { grid-column: 1 / -1; }
.pm-mod-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.6rem 0.7rem; cursor: pointer; user-select: none; }
.pm-mod-left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.pm-expand { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0;
  font-size: 0.85rem; color: var(--text-muted); transition: transform .22s var(--ease); }
.pm-expand.ghost { visibility: hidden; }
.pm-mod.open .pm-expand { transform: rotate(90deg); }
.pm-mod-badge { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--text-secondary); font-size: 1.05rem; flex-shrink: 0;
  transition: background .18s var(--ease), color .18s var(--ease); }
.pm-mod.is-on .pm-mod-badge { background: rgba(220,38,38,.16); border-color: rgba(220,38,38,.3); color: var(--crimson-glow); }
.pm-mod-name { font-weight: 700; font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-mod-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.1rem; }
.pm-tag { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; padding: 0.05rem 0.35rem; border-radius: 5px; }
.pm-tag.allow { color: var(--pistachio); background: rgba(147,197,114,.14); }
.pm-tag.deny { color: var(--crimson-glow); background: rgba(220,38,38,.14); }

/* Command list — the open card spans the full grid row, so its commands flow in two columns. */
.pm-cmds { display: none; padding: 0.45rem 0.9rem 0.7rem 0.9rem; border-top: 1px solid var(--border); }
.pm-mod.open .pm-cmds { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 0 1.5rem; align-items: center; animation: pmFade .2s var(--ease); }
@keyframes pmFade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.pm-cmd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.15rem; }
/* Bare sibling rows — the Moderation capability modal reuses .pm-cmd OUTSIDE .pm-cmds and
   depends on this adjacency divider; keep it so that page keeps its look. */
.pm-cmd + .pm-cmd { border-top: 1px solid var(--border); }
.pm-cmd-info { min-width: 0; }
.pm-cmd-name { font-size: 0.8125rem; color: var(--text); font-weight: 600; }
.pm-cmd-hint { display: block; font-size: 0.68rem; color: var(--text-muted); margin-top: 0.1rem; }
/* Inside the editor's command grid the rows reflow across columns, so sibling adjacency no
   longer tracks visual rows — every row carries its own divider instead, except the first row. */
.pm-cmds .pm-cmd { gap: 0.75rem; padding: 0.5rem 0.1rem; border-top: 1px solid var(--border); }
.pm-cmds .pm-cmd:nth-child(-n+2) { border-top: none; }
/* Below this width the command grid collapses to one column, so the second item needs its divider back. */
@media (max-width: 880px) {
  .pm-cmds .pm-cmd:nth-child(2) { border-top: 1px solid var(--border); }
}

/* Segmented allow / deny / inherit */
.pm-seg { display: inline-flex; flex-shrink: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-secondary); }
.pm-seg button { border: none; background: transparent; color: var(--text-muted); cursor: pointer;
  font-family: var(--font); font-size: 0.72rem; font-weight: 700; padding: 0.32rem 0.6rem;
  border-right: 1px solid var(--border); transition: background .15s var(--ease), color .15s var(--ease); }
.pm-seg button:first-child { border-radius: 8px 0 0 8px; }
.pm-seg button:last-child { border-right: none; border-radius: 0 8px 8px 0; }
.pm-seg button:hover { background: rgba(255,255,255,.05); color: var(--text); }
.pm-seg button.active { color: var(--text); background: var(--surface-hover); }
.pm-seg button.allow.active { color: #0c1f09; background: linear-gradient(135deg, var(--pistachio-light), var(--pistachio-dark)); }
.pm-seg button.deny.active { color: #fff; background: linear-gradient(135deg, var(--crimson), var(--crimson-dark)); }
/* Azra-only binary switch, nothing picked: the row follows the module grant. The default
   side is styled EXACTLY like the tri-state's selected "Inherit" button, so "this row is
   on its default" reads the same across both control shapes. */
.pm-seg button.is-default { color: var(--text); background: var(--surface-hover); }

/* ── Instant tooltips ──────────────────────────────────────────────────────────
   Native `title` bubbles appear on the browser's own ~1s delay and cannot be
   styled, so the editor carries its descriptions in data-tip instead: the bubble
   is pure CSS (::after) and shows the moment the pointer arrives. Placement
   variants keep bubbles readable — seg buttons hug their RIGHT edge (they sit at
   the row's right), the command name grows rightward, everything else centers. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; z-index: 90; pointer-events: none;
  bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  max-width: 280px; width: max-content;
  padding: 0.4rem 0.6rem; border-radius: 8px;
  background: rgba(10,10,14,.96); border: 1px solid var(--border-strong);
  color: var(--text); font-family: var(--font); font-size: 0.72rem; font-weight: 500;
  line-height: 1.4; text-align: left; white-space: normal;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transition: opacity .08s linear, visibility .08s;
}
[data-tip]:hover::after { opacity: 1; visibility: visible; }
.pm-seg [data-tip]::after { left: auto; right: 0; transform: none; }
.pm-cmd-name[data-tip]::after { left: 0; transform: none; }

@media (max-width: 560px) {
  .pm-cmd { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .pm-seg { width: 100%; }
  .pm-seg button { flex: 1; }
}

/* Sticky "unsaved changes" save bar. Every edit in the editor is staged in memory and only
   committed when the manager clicks Save — this bar surfaces the pending count + Save/Discard.
   It stays out of the flow (fixed) and only shows while there are staged changes. */
.pm-savebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(15,15,18,.72), rgba(15,15,18,.94));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  transform: translateY(120%); opacity: 0; pointer-events: none;
  transition: transform .25s cubic-bezier(.16,.84,.44,1), opacity .2s ease;
}
.pm-savebar.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.pm-savebar-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.pm-savebar-msg {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.9rem; font-weight: 600; color: var(--text);
}
.pm-savebar-msg ion-icon { font-size: 1.2rem; color: var(--yellow); }
.pm-savebar-actions { display: inline-flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.pm-savebar-status { font-size: 0.82rem; color: var(--text-secondary); }
.pm-savebar-status.ok { color: var(--green, #57F287); }
.pm-savebar-status.err { color: var(--red); }
/* Keep the last panel clear of the fixed bar so it never hides the bottom row. */
.pm-stack { padding-bottom: 4.5rem; }
@media (max-width: 560px) {
  .pm-savebar-inner { gap: 0.6rem; }
  .pm-savebar-actions { width: 100%; margin-left: 0; }
  .pm-savebar-actions .btn { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PAYMENT CHECKOUT FEEDBACK — shared loader + result modal (paymentUI.js)
   Used by BOTH gateways: Razorpay (INR) and Dodo Payments (USD).
   ═══════════════════════════════════════════════════════════════════════════════ */
.pay-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: radial-gradient(120% 120% at 50% 0%, rgba(220,38,38,0.10), rgba(6,8,14,0.86) 55%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  animation: pay-fade 0.2s ease both;
}
.pay-overlay.is-closing { animation: pay-fade 0.14s ease reverse both; }
@keyframes pay-fade { from { opacity: 0; } to { opacity: 1; } }

.pay-card {
  width: min(420px, 100%);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(220,38,38,0.05), inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 2rem 1.75rem 1.75rem;
  text-align: center;
  animation: pay-pop 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes pay-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pay-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.pay-brand img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; }

.pay-title { font-size: 1.15rem; font-weight: 800; color: var(--text); margin: 0.15rem 0 0.4rem; line-height: 1.25; }
.pay-msg   { font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; margin: 0 auto; max-width: 32ch; }
.pay-note  { font-size: 0.72rem; color: var(--text-muted); opacity: 0.8; margin-top: 0.65rem; line-height: 1.5; }

/* Loader spinner ring */
.pay-ring {
  width: 64px; height: 64px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.08);
  border-top-color: var(--blurple);
  border-right-color: var(--blurple);
  animation: spin 0.85s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
  position: relative;
}
.pay-ring span {
  position: absolute; inset: 8px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: rgba(220,38,38,0.45);
  animation: spin 1.3s linear infinite reverse;
}

/* Stepped progress list */
.pay-steps {
  list-style: none;
  margin: 1.25rem auto 0.25rem;
  padding: 0.85rem 0.5rem;
  max-width: 300px;
  text-align: left;
  border-top: 1px solid var(--border);
}
.pay-step {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.82rem; color: var(--text-muted);
  padding: 0.28rem 0.25rem;
  transition: color 0.2s ease;
}
.pay-step-dot {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--border);
  background: transparent;
  transition: all 0.25s ease;
}
.pay-step-dot ion-icon { font-size: 0.72rem; color: #fff; opacity: 0; transition: opacity 0.2s ease; }
.pay-step.is-active { color: var(--text); font-weight: 600; }
.pay-step.is-active .pay-step-dot {
  border-color: var(--blurple);
  box-shadow: 0 0 0 4px rgba(220,38,38,0.14);
  animation: pay-step-pulse 1.1s ease-in-out infinite;
}
.pay-step.is-done { color: var(--text); }
.pay-step.is-done .pay-step-dot { border-color: var(--green); background: var(--green); }
.pay-step.is-done .pay-step-dot ion-icon { opacity: 1; }
@keyframes pay-step-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(220,38,38,0.14); } 50% { box-shadow: 0 0 0 6px rgba(220,38,38,0.05); } }

.pay-hint {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.7rem; color: var(--text-muted); opacity: 0.75;
  margin-top: 1rem;
}

/* Result modal — animated status icon */
.pay-icon { width: 76px; height: 76px; margin: 0 auto 1.1rem; }
.pay-icon-svg { width: 100%; height: 100%; }
.pay-icon-ring {
  fill: none; stroke-width: 2.5;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: pay-draw 0.55s cubic-bezier(0.65, 0, 0.45, 1) 0.05s forwards;
}
.pay-icon-mark {
  fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: pay-draw 0.35s cubic-bezier(0.65, 0, 0.45, 1) 0.5s forwards;
}
.pay-icon-mark--2 { animation-delay: 0.64s; }
@keyframes pay-draw { to { stroke-dashoffset: 0; } }

.pay-status-success .pay-icon-ring { stroke: var(--green); }
.pay-status-success .pay-icon-mark { stroke: var(--green); }
.pay-status-success .pay-icon { filter: drop-shadow(0 6px 20px rgba(147,197,114,0.35)); }
.pay-status-declined .pay-icon-ring { stroke: var(--red); }
.pay-status-declined .pay-icon-mark { stroke: var(--red); }
.pay-status-declined .pay-icon { filter: drop-shadow(0 6px 20px rgba(239,68,68,0.32)); }
.pay-status-pending .pay-icon-ring { stroke: var(--yellow); }
.pay-status-pending .pay-icon-mark { stroke: var(--yellow); }
.pay-status-pending .pay-icon { filter: drop-shadow(0 6px 20px rgba(245,158,11,0.30)); }

.pay-actions {
  display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1.4rem;
}
@media (max-width: 420px) {
  .pay-actions { flex-direction: column-reverse; }
  .pay-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pay-overlay, .pay-card { animation: none; }
  .pay-ring, .pay-ring span, .pay-step.is-active .pay-step-dot { animation: none; }
  .pay-icon-ring, .pay-icon-mark { animation: none; stroke-dashoffset: 0; }
}