/* ═══════════════════════════════════════════════════════════════════
   Renewal Page — v2  (Theme-aware · Class-based · Radius-respecting)
   Path: /opt/public_html/admin/assets/css/renewal.css
   ───────────────────────────────────────────────────────────────
   Namespace:  .rn-*    (renewal-page only)
               .bsh-*   (shared bottom-sheet — sheet-system.css)
   Uses ONLY CSS variables from style.css (no hex, no color-mix).
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Edge-to-edge على المستوى الأعلى ─── */
.page[data-page="renewal"] {
  padding-inline: 0 !important;
  max-inline-size: 100%;
}
.page[data-page="renewal"] > .page-head {
  padding-inline: 12px;
}
@media (min-width: 600px) {
  .page[data-page="renewal"] > .page-head { padding-inline: 16px; }
}

/* ─── Loading skeletons ─── */
.rn-loading {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 600px) { .rn-loading { padding: 12px 0; gap: 12px; } }
.rn-skel {
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: rnShimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-lg, 14px);
}
.rn-skel-bill { block-size: 220px; }
.rn-skel-tile { block-size: 96px; }
@keyframes rnShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Error / Empty ─── */
.rn-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--txt-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.rn-empty-ic {
  inline-size: 40px;
  block-size: 40px;
  color: var(--bad);
}
.rn-empty b { color: var(--txt); font-size: 15px; }

/* ─── Content grid ─── */
.rn-content {
  padding-block: 8px 96px;
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 600px) {
  .rn-content { padding-block: 12px 96px; gap: 12px; }
}
@media (min-width: 900px) {
  .rn-content {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "bill  tiles-header"
      "bill  tiles"
      "bill  tiles-spacer";
    align-items: start;
    gap: 14px;
  }
  .rn-bill        { grid-area: bill; align-self: start; position: sticky; inset-block-start: 80px; }
  .rn-sec-head    { grid-area: tiles-header; margin-block-start: 4px; }
  .rn-tiles       { grid-area: tiles; }
}

/* ═══════════════════════════════════════════════════════════════════
   BILL CARD (Hero)
   ═══════════════════════════════════════════════════════════════════ */
.rn-bill {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 18px);
  padding: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 600px) { .rn-bill { padding: 20px; } }

/* Severity accent stripe */
.rn-bill::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 3px;
  background: linear-gradient(90deg, var(--accent), var(--ok));
  transition: background 0.3s;
}
.rn-bill[data-severity="warn"]::before { background: linear-gradient(90deg, var(--warn), var(--warn)); }
.rn-bill[data-severity="bad"]::before  { background: linear-gradient(90deg, var(--bad),  var(--bad));  }
.rn-bill[data-severity="none"]::before { background: linear-gradient(90deg, var(--info), var(--info)); }

/* Head */
.rn-bill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rn-bill-head-l {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--txt);
  font-size: 14px;
}
.rn-bill-head-l .ic { inline-size: 18px; block-size: 18px; color: var(--accent); }

.rn-bill-badge {
  padding: 4px 10px;
  border-radius: var(--r-pill, 20px);
  font-size: 11.5px;
  font-weight: 800;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
.rn-bill-badge[data-kind="ok"]      { background: var(--ok-soft);   color: var(--ok); }
.rn-bill-badge[data-kind="warn"]    { background: var(--warn-soft); color: var(--warn); }
.rn-bill-badge[data-kind="bad"]     { background: var(--bad-soft);  color: var(--bad); }
.rn-bill-badge[data-kind="neutral"] { background: var(--surface-3); color: var(--txt-2); }
.rn-bill-badge[data-kind="info"]    { background: var(--info-soft); color: var(--info); }

/* Active body */
.rn-bill-body { display: flex; flex-direction: column; gap: 8px; }
.rn-bill-plan-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.rn-bill-plan {
  font-size: 20px;
  font-weight: 800;
  color: var(--txt);
  line-height: 1.2;
}
.rn-bill-plan-type {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--r-pill, 12px);
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
.rn-bill-expire {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--txt-2);
  font-size: 13px;
}
.rn-bill-expire .ic { inline-size: 14px; block-size: 14px; color: var(--txt-3); }

/* Empty body */
.rn-bill-empty {
  text-align: center;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.rn-bill-empty-ic {
  inline-size: 32px;
  block-size: 32px;
  color: var(--warn);
  margin-block-end: 4px;
}
.rn-bill-empty b { color: var(--txt); font-size: 15px; }
.rn-bill-empty span { color: var(--txt-2); font-size: 12.5px; }

/* Meta (balance + pay code) */
.rn-bill-meta {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
}
.rn-bill-meta-cell {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rn-bill-meta-sep {
  inline-size: 1px;
  background: var(--line);
  flex: none;
}
.rn-bill-meta-lbl {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--txt-3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.rn-bill-meta-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--txt);
  word-break: break-word;
}

/* Primary CTA */
.rn-bill-cta {
  inline-size: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: var(--on-accent);
  border: none;
  border-radius: var(--r-md, 12px);
  font-size: 15px;
  font-weight: 800;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
}
.rn-bill-cta:hover  { transform: translateY(-1px); box-shadow: var(--glow); }
.rn-bill-cta:active { transform: translateY(0); }
.rn-bill-cta .ic    { inline-size: 18px; block-size: 18px; }
.rn-bill-cta[data-severity="warn"] {
  background: linear-gradient(135deg, var(--warn), var(--warn));
}
.rn-bill-cta[data-severity="bad"] {
  background: linear-gradient(135deg, var(--bad), var(--bad));
  animation: rnPulse 2s ease-in-out infinite;
}
@keyframes rnPulse {
  0%, 100% { box-shadow: 0 0 0 0 hsl(354 78% 58% / 0); }
  50%      { box-shadow: 0 0 0 6px hsl(354 78% 58% / .15); }
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION HEAD
   ═══════════════════════════════════════════════════════════════════ */
.rn-sec-head {
  padding: 6px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rn-sec-head b { font-size: 14px; color: var(--txt); font-weight: 800; }
.rn-sec-head small { font-size: 11.5px; color: var(--txt-3); }
@media (min-width: 600px) { .rn-sec-head { padding: 6px 16px 0; } }
@media (min-width: 900px) { .rn-sec-head { padding: 0; } }

/* ═══════════════════════════════════════════════════════════════════
   TILES
   ═══════════════════════════════════════════════════════════════════ */
.rn-tiles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 600px) { .rn-tiles { gap: 12px; } }

.rn-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s;
}
.rn-tile[data-state="inactive"] {
  border-color: var(--line);
  opacity: 0.9;
}
.rn-tile[data-state="highlight"] {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Head */
.rn-tile-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rn-tile-ic {
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--r-md, 12px);
  display: grid;
  place-items: center;
}
.rn-tile-ic .ic { inline-size: 20px; block-size: 20px; }
.rn-tile-ic[data-kind="primary"] { background: var(--accent-soft); color: var(--accent); }
.rn-tile-ic[data-kind="warn"]    { background: var(--warn-soft);   color: var(--warn); }
.rn-tile-ic[data-kind="info"]    { background: var(--info-soft);   color: var(--info); }
.rn-tile-ic[data-kind="ok"]      { background: var(--ok-soft);     color: var(--ok); }

.rn-tile-info {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rn-tile-info b { font-size: 14px; font-weight: 700; color: var(--txt); }
.rn-tile-info span {
  font-size: 12px;
  color: var(--txt-2);
  line-height: 1.4;
}
.rn-tile-info .rn-tile-sub-price {
  font-size: 11px;
  color: var(--txt-3);
  margin-block-start: 2px;
}

.rn-tile-metric {
  flex: none;
  text-align: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-inline-size: 60px;
}
.rn-tile-metric span { font-size: 16px; font-weight: 800; color: var(--txt); }
.rn-tile-metric small { font-size: 10.5px; color: var(--txt-3); }

/* Actions */
.rn-tile-actions {
  display: flex;
  gap: 6px;
}
.rn-tile-btn {
  flex: 1;
  min-inline-size: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--txt);
  border-radius: var(--r-md, 10px);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.rn-tile-btn:hover  { background: var(--surface-3); border-color: var(--accent-line); }
.rn-tile-btn:active { transform: scale(0.98); }
.rn-tile-btn .ic { inline-size: 14px; block-size: 14px; }
.rn-tile-btn-primary {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-line);
}
.rn-tile-btn-primary:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.rn-tile-btn-danger {
  color: var(--bad);
  border-color: var(--line);
}
.rn-tile-btn-danger:hover  { background: var(--bad-soft); border-color: var(--bad); }
.rn-tile-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.rn-plus {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   PICK LIST (used inside full-renew sheet)
   ═══════════════════════════════════════════════════════════════════ */
.rn-pick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block-end: 16px;
}
.rn-pick {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font: inherit;
  color: inherit;
  text-align: start;
  inline-size: 100%;
}
.rn-pick:hover { border-color: var(--accent-line); }
.rn-pick-static { cursor: default; }
.rn-pick-static:hover { border-color: var(--line); }
.rn-pick[data-state="selected"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
.rn-pick-ic {
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--r-md, 10px);
  display: grid;
  place-items: center;
}
.rn-pick-ic .ic { inline-size: 18px; block-size: 18px; }
.rn-pick-ic[data-kind="primary"] { background: var(--accent-soft); color: var(--accent); }
.rn-pick-ic[data-kind="warn"]    { background: var(--warn-soft);   color: var(--warn); }
.rn-pick-ic[data-kind="info"]    { background: var(--info-soft);   color: var(--info); }

.rn-pick-body {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rn-pick-body b { font-size: 13.5px; font-weight: 700; color: var(--txt); }
.rn-pick-body span {
  font-size: 12px;
  color: var(--txt-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rn-pick-chev {
  flex: none;
  color: var(--txt-3);
}
.rn-pick-chev .ic { inline-size: 16px; block-size: 16px; }
/* RTL: flip chevron to point left (into the forward direction) */
[dir="rtl"] .rn-pick-chev { transform: scaleX(-1); }

/* ═══════════════════════════════════════════════════════════════════
   COUNTER
   ═══════════════════════════════════════════════════════════════════ */
.rn-counter {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  padding: 3px;
}
.rn-counter-lg {
  gap: 8px;
  padding: 6px;
}
.rn-cbtn {
  inline-size: 28px;
  block-size: 28px;
  border: 0;
  background: var(--surface-2);
  color: var(--txt);
  border-radius: var(--r-sm, 8px);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.12s;
}
.rn-counter-lg .rn-cbtn {
  inline-size: 40px;
  block-size: 40px;
  font-size: 20px;
}
.rn-cbtn:hover { background: var(--accent-soft); color: var(--accent); }
.rn-cbtn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.rn-cval {
  min-inline-size: 32px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--txt);
  padding-inline: 2px;
}
.rn-counter-lg .rn-cval {
  min-inline-size: 48px;
  font-size: 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   PLAN CARDS (in plan-picker sheet)
   ═══════════════════════════════════════════════════════════════════ */
.rn-plans {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rn-plan {
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md, 12px);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font: inherit;
  color: inherit;
  text-align: start;
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rn-plan:hover {
  border-color: var(--accent-line);
  background: var(--surface-3);
}
.rn-plan[data-state="current"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.rn-plan[data-state="disabled"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.rn-plan-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.rn-plan-name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-inline-size: 0;
}
.rn-plan-name b { font-size: 14px; font-weight: 800; color: var(--txt); }
.rn-plan-badge {
  padding: 2px 7px;
  border-radius: var(--r-pill, 10px);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.rn-plan-badge[data-kind="current"] { background: var(--accent); color: var(--on-accent); }
.rn-plan-badge[data-kind="popular"] { background: var(--warn-soft); color: var(--warn); }
.rn-plan-badge[data-kind="rec"]     { background: var(--info-soft); color: var(--info); }
.rn-plan-badge[data-kind="offer"]   { background: var(--bad-soft);  color: var(--bad); }

.rn-plan-price {
  text-align: end;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: none;
}
.rn-plan-price b { font-size: 15px; font-weight: 800; color: var(--accent); }
.rn-plan-price s {
  font-size: 11px;
  color: var(--txt-3);
  text-decoration: line-through;
}
.rn-plan-info {
  font-size: 12px;
  color: var(--txt-2);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rn-plan-info span::after {
  content: '·';
  margin-inline-start: 6px;
  color: var(--txt-3);
}
.rn-plan-info span:last-child::after { content: none; }

/* ═══════════════════════════════════════════════════════════════════
   SUMMARY (used across sheets)
   ═══════════════════════════════════════════════════════════════════ */
.rn-summary {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block-start: 12px;
}
.rn-sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--txt);
}
.rn-sum-row span { color: var(--txt-2); }
.rn-sum-row b { font-size: 13.5px; font-weight: 800; }
.rn-sum-row-muted { font-size: 12px; }
.rn-sum-row-muted b { color: var(--txt-2); font-weight: 700; }
.rn-sum-row-total {
  padding-block-start: 8px;
  border-block-start: 1px solid var(--line);
  font-size: 15px;
}
.rn-sum-row-total span { color: var(--txt); font-weight: 700; }
.rn-sum-row-total b { color: var(--accent); font-size: 17px; }

/* ═══════════════════════════════════════════════════════════════════
   CONF PLAN (confirm sheet header block)
   ═══════════════════════════════════════════════════════════════════ */
.rn-conf-plan {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
}
.rn-conf-plan-ic {
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-md, 10px);
  display: grid;
  place-items: center;
}
.rn-conf-plan-ic .ic { inline-size: 22px; block-size: 22px; }
.rn-conf-plan-ic[data-kind="primary"] { background: var(--accent-soft); color: var(--accent); }
.rn-conf-plan-ic[data-kind="warn"]    { background: var(--warn-soft);   color: var(--warn); }
.rn-conf-plan-ic[data-kind="info"]    { background: var(--info-soft);   color: var(--info); }
.rn-conf-plan > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
.rn-conf-plan b { font-size: 15px; font-weight: 800; color: var(--txt); }
.rn-conf-plan span { font-size: 12px; color: var(--txt-2); }

/* ═══════════════════════════════════════════════════════════════════
   SERVERS ADJUST VIEW
   ═══════════════════════════════════════════════════════════════════ */
.rn-srv-view {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
}
.rn-srv-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.rn-srv-side-end { align-items: flex-end; text-align: end; }
.rn-srv-side span {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--txt-3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.rn-srv-side b {
  font-size: 22px;
  font-weight: 800;
  color: var(--txt);
}

/* ═══════════════════════════════════════════════════════════════════
   NOTE / WARN / DANGER BOXES
   ═══════════════════════════════════════════════════════════════════ */
.rn-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--info-soft);
  border: 1px solid var(--info-soft);
  border-radius: var(--r-md, 10px);
  color: var(--txt-2);
  font-size: 12px;
  line-height: 1.5;
  margin-block-start: 10px;
}
.rn-note .ic { inline-size: 14px; block-size: 14px; color: var(--info); flex: none; margin-block-start: 2px; }

.rn-warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--warn-soft);
  border: 1px solid var(--warn-soft);
  border-radius: var(--r-md, 10px);
  color: var(--warn);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  margin-block-start: 10px;
}
.rn-warn .ic { inline-size: 14px; block-size: 14px; color: var(--warn); flex: none; margin-block-start: 2px; }

.rn-danger-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: var(--bad-soft);
  border: 1px solid var(--bad-soft);
  border-radius: var(--r-md, 12px);
}
.rn-danger-ic { inline-size: 24px; block-size: 24px; color: var(--bad); flex: none; }
.rn-danger-box > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-inline-size: 0;
}
.rn-danger-box b { color: var(--bad); font-size: 14px; font-weight: 800; }
.rn-danger-box span { color: var(--txt-2); font-size: 12.5px; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════
   RECEIPT
   ═══════════════════════════════════════════════════════════════════ */
.rn-rcpt {
  padding: 20px 20px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.rn-rcpt-check {
  inline-size: 72px;
  block-size: 72px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  display: grid;
  place-items: center;
  margin-block-end: 4px;
  animation: rnRcptPop 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.rn-rcpt-check .ic {
  inline-size: 36px;
  block-size: 36px;
  stroke-width: 3;
}
@keyframes rnRcptPop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.rn-rcpt-title { font-size: 18px; font-weight: 800; color: var(--txt); }
.rn-rcpt-sub   { font-size: 13px; color: var(--txt-2); }

.rn-rcpt-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: var(--accent-soft);
  border-radius: var(--r-md, 12px);
  margin-block: 6px;
}
.rn-rcpt-amount-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.rn-rcpt-amount b { font-size: 22px; color: var(--accent); font-weight: 900; }

.rn-rcpt-details {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block-start: 4px;
}
.rn-rcpt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: var(--r-sm, 8px);
  font-size: 12.5px;
}
.rn-rcpt-row span { color: var(--txt-2); }
.rn-rcpt-row b { color: var(--txt); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS (fallbacks in case components.css missing pieces)
   ═══════════════════════════════════════════════════════════════════ */
.rn-content .btn,
.bsh-wrap .btn {
  padding: 12px 16px;
  border-radius: var(--r-md, 10px);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--txt);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s;
}
.rn-content .btn-primary,
.bsh-wrap .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.rn-content .btn-primary:hover,
.bsh-wrap .btn-primary:hover { filter: brightness(1.05); }
.rn-content .btn-danger,
.bsh-wrap .btn-danger {
  background: var(--bad);
  color: #fff;
  border-color: var(--bad);
}
.rn-content .btn-ghost,
.bsh-wrap .btn-ghost { background: transparent; }
.rn-content .btn:disabled,
.bsh-wrap .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   AGENT INFO SHEET — بيانات الوكيل + طرق الدفع + safety indicator
   ─────────────────────────────────────────────────────────────
   يستخدم design tokens الموحدة (--surface / --txt / --accent / …)
   عشان يتوافق تلقائى مع الـ dark/light mode.
   ═══════════════════════════════════════════════════════════════════ */

/* Large bottom sheet variant */
.bsh-box-lg { max-block-size: 88vh; }

/* Empty state */
.rn-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  color: var(--txt-2);
}
.rn-empty .ic-lg { font-size: 40px; opacity: .5; }
.rn-empty b { color: var(--txt); font-size: 15px; font-weight: 800; }
.rn-empty span { font-size: 13px; }

/* Agent card */
.rn-agent-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 12px);
  margin-block-end: 12px;
}
.rn-agent-avatar {
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.rn-agent-avatar .ic { font-size: 22px; }
.rn-agent-info { flex: 1; min-inline-size: 0; }
.rn-agent-info b {
  display: block;
  font-size: 15px;
  color: var(--txt);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rn-agent-info span {
  font-size: 12px;
  color: var(--txt-3);
}

/* Safety indicator — full (فى الـ agent sheet) */
.rn-agent-safety-full {
  padding: 14px;
  border-radius: var(--r-lg, 12px);
  margin-block-end: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.rn-agent-safety-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-pill, 999px);
  font-size: 12px;
  font-weight: 800;
  margin-block-end: 10px;
}
.rn-agent-safety-badge[data-level="safe"],
.rn-agent-safety-badge[data-level="ok"] {
  background: var(--ok-soft);
  color: var(--ok);
}
.rn-agent-safety-badge[data-level="partial"] {
  background: var(--warn-soft);
  color: var(--warn);
}
.rn-agent-safety-badge[data-level="risky"],
.rn-agent-safety-badge[data-level="blocked"] {
  background: var(--bad-soft);
  color: var(--bad);
}
.rn-agent-safety-details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  padding: 8px 12px;
  margin-block-end: 10px;
}
.rn-agent-safety-note {
  font-size: 12.5px;
  color: var(--txt-2);
  margin: 0;
  line-height: 1.55;
}

/* Safety warning strip inline (فى Simple Renew) */
.rn-agent-safety {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--warn);
  background: var(--warn-soft);
  border-radius: var(--r-md, 10px);
  margin-block-start: 10px;
}
.rn-agent-safety-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.rn-agent-safety-ic {
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--r-md, 10px);
  background: var(--warn);
  color: var(--on-accent, #fff);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  opacity: .95;
}
.rn-agent-safety-ic .ic { font-size: 16px; }
.rn-agent-safety-txt { flex: 1; }
.rn-agent-safety-txt b {
  display: block;
  font-size: 13px;
  color: var(--txt);
  font-weight: 800;
  margin-block-end: 2px;
}
.rn-agent-safety-txt span {
  font-size: 12px;
  color: var(--txt-2);
  line-height: 1.55;
}

/* WhatsApp direct link */
.rn-agent-wa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ok-soft);
  border: 1px solid var(--ok);
  border-radius: var(--r-lg, 12px);
  color: var(--txt);
  text-decoration: none;
  margin-block-end: 12px;
  transition: filter .15s ease, transform .15s ease;
}
.rn-agent-wa:hover { filter: brightness(1.05); }
.rn-agent-wa:active { transform: scale(.99); }
.rn-agent-wa-ic {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.rn-agent-wa-ic .ic { font-size: 20px; }
.rn-agent-wa-txt { flex: 1; min-inline-size: 0; }
.rn-agent-wa-txt b {
  display: block;
  font-size: 13.5px;
  color: var(--txt);
  font-weight: 800;
}
.rn-agent-wa-txt span {
  font-size: 12px;
  color: var(--txt-2);
}
.rn-agent-wa .ic-chevron {
  color: var(--txt-3);
  font-size: 16px;
}
[dir="rtl"] .rn-agent-wa .ic-chevron { transform: scaleX(-1); }

/* Payment methods section */
.rn-pm-section {
  border-top: 1px solid var(--line);
  padding-block-start: 14px;
  margin-block-start: 4px;
}
.rn-pm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 10px;
}
.rn-pm-head > .ic {
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--r-md, 10px);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  padding: 6px;
}
.rn-pm-head b {
  flex: 1;
  font-size: 14px;
  font-weight: 800;
  color: var(--txt);
}
.rn-pm-count {
  background: var(--accent);
  color: var(--on-accent);
  padding: 2px 9px;
  border-radius: var(--r-pill, 999px);
  font-size: 11px;
  font-weight: 800;
  min-inline-size: 22px;
  text-align: center;
}
.rn-pm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rn-pm-item {
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  transition: border-color .15s ease;
}
.rn-pm-item:hover { border-color: var(--accent-line, var(--accent)); }
.rn-pm-item-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-end: 8px;
}
.rn-pm-item-head b {
  flex: 1;
  font-size: 13.5px;
  color: var(--txt);
  font-weight: 800;
}
.rn-pm-warn {
  color: var(--warn);
  display: inline-flex;
  padding: 3px;
  border-radius: 50%;
  background: var(--warn-soft);
}
.rn-pm-warn .ic { font-size: 14px; }
.rn-pm-item-account {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-end: 6px;
}
.rn-pm-item-account code {
  flex: 1;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 6px);
  font-size: 12.5px;
  color: var(--txt);
  direction: ltr;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.rn-pm-copy {
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--r-sm, 6px);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s ease, transform .1s ease;
  flex: 0 0 auto;
}
.rn-pm-copy:hover { background: var(--accent-soft); }
.rn-pm-copy:active { transform: scale(.95); }
.rn-pm-copy .ic { font-size: 15px; }
.rn-pm-item-notes {
  font-size: 11.5px;
  color: var(--txt-2);
  line-height: 1.65;
  padding-block-start: 4px;
  border-block-start: 1px dashed var(--line);
  margin-block-start: 4px;
}

/* btn-outline (شفاف مع border) */
.btn-outline {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--txt) !important;
}
.btn-outline:hover { background: var(--surface-2) !important; }

/* End of renewal.css */