/* «اشتراک و ارتقا» — tenant self-serve pricing/upgrade page. */

.billing-subtitle{color:var(--text-dim);font-size:.9rem;margin-top:.4rem;line-height:1.7}

/* Current subscription snapshot */
.billing-current{display:grid;gap:1.1rem;background:var(--surface);border-radius:var(--radius-xl);padding:1.15rem 1.25rem;margin-bottom:1.75rem;box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.055)}
.bc-top{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap}
.bc-plan{display:flex;align-items:center;gap:.9rem}
.bc-plan-icon{width:52px;height:52px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-hi);border:1px solid var(--border-accent);font-size:1.25rem}
.bc-plan-name{font-weight:800;font-size:1.05rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.bc-plan-meta{color:var(--text-dim);font-size:.82rem;margin-top:.3rem}
.bc-trial-chip{background:var(--warning-soft);color:var(--warning);border:1px solid rgba(251,191,36,.3);font-size:.68rem;font-weight:700;padding:.2rem .6rem;border-radius:999px}
.bc-meters{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.bc-meter-head{display:flex;justify-content:space-between;gap:.5rem;font-size:.78rem;color:var(--text-dim);margin-bottom:.4rem}
.bc-meter-head strong{color:var(--text);font-variant-numeric:tabular-nums;font-size:.78rem}
.bc-meter-bar{height:8px;border-radius:999px;background:var(--surface2);overflow:hidden}
.bc-meter-bar i{display:block;height:100%;border-radius:999px;background:var(--accent-grad);transition:width .4s}
.bc-meter.is-warn .bc-meter-bar i{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.bc-meter.is-full .bc-meter-bar i{background:linear-gradient(90deg,#f87171,#ef4444)}
/* At-a-glance add-on status chips (top-left of the current box) */
.bc-stats{display:flex;gap:.6rem;flex-wrap:wrap}
.bc-stat{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem .85rem;border-radius:14px;background:var(--surface2);border:1px solid var(--border)}
.bc-stat i{font-size:.95rem;color:var(--text-dim)}
.bc-stat-body{display:flex;flex-direction:column;line-height:1.35}
.bc-stat-label{font-size:.7rem;color:var(--text-dim)}
.bc-stat-value{font-size:.85rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text)}
.bc-stat--ok{background:var(--success-soft);border-color:rgba(52,211,153,.3)}
.bc-stat--ok i,.bc-stat--ok .bc-stat-value{color:var(--success)}
.bc-stat--warn{background:var(--warning-soft);border-color:rgba(251,191,36,.32)}
.bc-stat--warn i,.bc-stat--warn .bc-stat-value{color:var(--warning)}

/* Section heads + cycle toggle */
.billing-section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1rem}
.billing-section-head h2{font-size:1.1rem;margin:0}
.billing-cycle-toggle{display:inline-flex;background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:.25rem;gap:.25rem}
.cycle-btn{border:0;background:transparent;color:var(--text-dim);font-family:var(--font);font-size:.85rem;padding:.5rem 1.1rem;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;transition:all .16s}
.cycle-btn.active{background:var(--accent-grad);color:#fff;font-weight:700;box-shadow:0 8px 20px -8px rgba(139,92,246,.55)}
.cycle-hint{font-size:.66rem;background:rgba(255,255,255,.18);padding:.15rem .5rem;border-radius:999px}
.cycle-btn:not(.active) .cycle-hint{background:var(--success-soft);color:var(--success)}

/* Plan cards */
.billing-plan-cards{display:grid;grid-template-columns:repeat(3,minmax(250px,1fr));gap:1rem;align-items:stretch}
.bp-card{position:relative;display:flex;flex-direction:column;gap:1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.4rem 1.25rem;transition:transform .2s,box-shadow .2s}
.bp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.bp-card.is-featured{border-color:rgba(139,92,246,.45);box-shadow:0 0 0 1px rgba(139,92,246,.3) inset,0 20px 50px -20px rgba(139,92,246,.4)}
.bp-card.is-current{border-color:rgba(52,211,153,.4)}
.bp-badge{position:absolute;top:-12px;right:50%;transform:translateX(50%);background:var(--accent-grad);color:#fff;font-size:.7rem;font-weight:800;padding:.32rem .95rem;border-radius:999px;box-shadow:0 8px 22px -8px rgba(139,92,246,.6);white-space:nowrap}
.bp-current-badge{position:absolute;top:.9rem;left:.9rem;background:var(--success-soft);color:var(--success);border:1px solid rgba(52,211,153,.3);font-size:.66rem;font-weight:700;padding:.25rem .6rem;border-radius:999px}
.bp-head{text-align:center}
.bp-icon{width:52px;height:52px;margin:0 auto .7rem;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-hi);border:1px solid var(--border-accent);font-size:1.2rem}
.bp-card--basic .bp-icon{color:var(--success);background:var(--success-soft);border-color:rgba(52,211,153,.24)}
.bp-card--pro .bp-icon{color:var(--warning);background:var(--warning-soft);border-color:rgba(251,191,36,.24)}
.bp-name{font-weight:800;font-size:1.1rem;margin-bottom:.35rem}
.bp-desc{color:var(--text-dim);font-size:.78rem;line-height:1.8;min-height:2.6em}
.bp-price{text-align:center;padding:.85rem 0;border-block:1px dashed var(--border)}
.bp-price strong{font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums}
.bp-price span{color:var(--text-dim);font-size:.8rem;margin-inline-start:.3rem}
.bp-price small{display:block;color:var(--text-dim);font-size:.72rem;margin-top:.35rem}
.bp-limits{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;flex:1}
.bp-limits li{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--text)}
.bp-limits li i{width:20px;color:var(--accent-hi);font-size:.8rem;text-align:center}
.bp-cta{width:100%;justify-content:center}
.billing-vat-note{color:var(--text-dim);font-size:.76rem;margin:.9rem 0 0;text-align:center}

/* Comparison matrix */
.billing-compare-wrap{margin-top:1.25rem}
.billing-compare{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden}
.billing-compare summary{display:flex;align-items:center;gap:.6rem;padding:1rem 1.2rem;cursor:pointer;color:var(--text);font-weight:700;font-size:.9rem;list-style:none}
.billing-compare summary::-webkit-details-marker{display:none}
.billing-compare summary .bc-caret{margin-inline-start:auto;transition:transform .2s;color:var(--text-dim)}
.billing-compare[open] summary .bc-caret{transform:rotate(180deg)}
.billing-compare-table{width:100%;border-collapse:collapse}
.billing-compare-table th,.billing-compare-table td{padding:.7rem .9rem;text-align:center;border-top:1px solid rgba(255,255,255,.05);font-size:.82rem}
.billing-compare-table thead th{background:rgba(255,255,255,.02);color:var(--text-dim);font-size:.78rem}
.bc-feature-label{text-align:right !important;color:var(--text)}
.bp-check{color:var(--success)}
.bp-dash{color:var(--text-dim);opacity:.6}

/* Add-ons */
.billing-addons-section{margin-top:2rem}
.billing-addons-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ba-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.2rem 1.25rem;display:flex;flex-direction:column;gap:1rem}
/* Top-left corner status badge (recording balance / branding «فعال») */
.ba-badge{position:absolute;top:1rem;left:1.15rem;font-size:.72rem;font-weight:800;padding:.3rem .7rem;border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ba-badge--ok{background:var(--success-soft);color:var(--success);border:1px solid rgba(52,211,153,.3)}
.ba-badge--warn{background:var(--warning-soft);color:var(--warning);border:1px solid rgba(251,191,36,.32)}
.ba-badge--muted{background:var(--surface2);color:var(--text-dim);border:1px solid var(--border)}
/* Inline status banner (branding expiry / recording debt note) */
.ba-status{display:flex;align-items:flex-start;gap:.55rem;padding:.7rem .85rem;border-radius:12px;font-size:.8rem;line-height:1.85}
.ba-status i{margin-top:.15rem;flex-shrink:0}
.ba-status--ok{background:var(--success-soft);border:1px solid rgba(52,211,153,.28);color:var(--success)}
.ba-status--warn{background:var(--warning-soft);border:1px solid rgba(251,191,36,.3);color:var(--warning)}
/* Reassurance line: we never truncate a live recording */
.ba-promise{display:flex;align-items:flex-start;gap:.55rem;font-size:.76rem;line-height:1.95;color:var(--text-dim)}
.ba-promise i{margin-top:.2rem;flex-shrink:0;color:var(--accent-hi)}
.ba-head{display:flex;gap:.9rem;align-items:flex-start}
.ba-icon{width:46px;height:46px;flex-shrink:0;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-hi);border:1px solid var(--border-accent);font-size:1.05rem}
.ba-name{font-weight:800;font-size:.98rem;display:flex;align-items:center}
.ba-desc{color:var(--text-dim);font-size:.8rem;line-height:1.9;margin:.4rem 0 0}
.ba-options{display:grid;gap:.55rem}
.ba-option{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;background:var(--surface2);border:1px solid var(--border);border-radius:12px;color:var(--text);font-family:var(--font);font-size:.85rem;cursor:pointer;transition:all .16s}
.ba-option:hover{border-color:var(--border-accent);background:var(--accent-soft)}
.ba-option strong{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Payment history */
.billing-history-section{margin-top:2rem}
.billing-history-table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--radius-xl);overflow:hidden}
.billing-history-table th,.billing-history-table td{padding:.75rem 1rem;text-align:right;border-top:1px solid rgba(255,255,255,.05);font-size:.83rem;white-space:nowrap}
.billing-history-table thead th{background:rgba(255,255,255,.02);color:var(--text-dim);font-size:.76rem;border-top:0}
.bh-status{display:inline-flex;padding:.25rem .7rem;border-radius:999px;font-size:.72rem;font-weight:700}
.bh-status--paid{background:var(--success-soft);color:var(--success)}
.bh-status--pending{background:var(--warning-soft);color:var(--warning)}
.bh-status--failed{background:var(--danger-soft);color:var(--danger)}

/* Checkout + sales modals */
.billing-checkout-modal{max-width:480px;width:100%}
.billing-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.billing-icon-btn{width:32px;height:32px;border-radius:9px;border:1px solid var(--border);background:var(--surface2);color:var(--text-dim);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.billing-icon-btn:hover{color:var(--danger);border-color:rgba(248,113,113,.35)}
.checkout-lines{display:grid;gap:.5rem;margin-bottom:.9rem}
.checkout-line{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.7rem .9rem;background:var(--surface2);border:1px solid var(--border);border-radius:12px;font-size:.85rem}
.checkout-line-side{display:flex;align-items:center;gap:.6rem}
.checkout-line strong{font-variant-numeric:tabular-nums;white-space:nowrap}
.checkout-addon-offers{display:grid;gap:.45rem;margin-bottom:1rem}
.checkout-offer{display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;background:transparent;border:1px dashed var(--border-accent);border-radius:12px;color:var(--accent-hi);font-family:var(--font);font-size:.8rem;cursor:pointer;transition:all .16s}
.checkout-offer:hover{background:var(--accent-soft)}
.checkout-offer strong{margin-inline-start:auto;font-variant-numeric:tabular-nums;color:var(--text)}
.checkout-summary{border-top:1px dashed var(--border);padding-top:.9rem;display:grid;gap:.5rem;margin-bottom:.5rem}
.checkout-sum-row{display:flex;justify-content:space-between;font-size:.84rem;color:var(--text-dim)}
.checkout-sum-row strong{color:var(--text);font-variant-numeric:tabular-nums}
.checkout-sum-row--total{font-weight:800;font-size:.95rem;color:var(--text)}
.sales-copy{color:var(--text-dim);font-size:.86rem;line-height:1.9;margin:0 0 1rem}

@media (max-width:1023px){
  .billing-plan-cards{grid-template-columns:1fr}
  .billing-addons-grid{grid-template-columns:1fr}
  .bc-meters{grid-template-columns:1fr}
  .billing-section-head{flex-direction:column;align-items:flex-start}
}