/* ========== Subscription / Payment / Trial Styles ========== */

/* --- Trial Banner (global, top of viewport) --- */
.trial-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, var(--orange-500), var(--orange-400));
  color: var(--white);
  padding: 0.625rem 1.25rem;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  z-index: 5000;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
}
.trial-banner .trial-label {
  font-size: 1.2rem;
}
.trial-banner .trial-info {
  opacity: 0.95;
}
.trial-upgrade-btn {
  background: var(--white) !important;
  color: var(--orange-500) !important;
  padding: 0.375rem 1rem !important;
  font-size: 1rem !important;
  border-radius: 0.5rem !important;
  font-weight: 900 !important;
}

/* --- Subscription Screen --- */
#subscription-screen {
  min-height: 100vh;
  padding: 3rem 1.25rem;
  background:
    radial-gradient(ellipse at top, rgba(47, 129, 247, 0.12), transparent 60%),
    var(--bg-primary, var(--slate-950));
  overflow-y: auto;
}

.sub-screen-wrap {
  max-width: 50rem;
  margin: 0 auto;
  position: relative;
}

.sub-back-btn {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  padding: 0.5rem 1rem;
}

.sub-hero {
  text-align: center;
  margin-bottom: 2.5rem;
}

.sub-hero-icon {
  font-size: 4.5rem;
  margin-bottom: 0.75rem;
  filter: drop-shadow(0 0 1.5rem rgba(47, 129, 247, 0.5));
}

.sub-hero-title {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--text-primary, var(--white));
  margin-bottom: 0.5rem;
}

.sub-hero-subtitle {
  font-size: 1.3rem;
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
}

.sub-plan-card {
  padding: 2.5rem;
  border-radius: 1.25rem;
  text-align: center;
  border: 0.125rem solid rgba(47, 129, 247, 0.3);
  position: relative;
}

.sub-plan-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--azure-400), var(--violet-500));
  color: var(--white);
  padding: 0.4rem 1.25rem;
  border-radius: 2rem;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* مبدّل الخطط في صفحة الدفع — لا يرسمه القالب إلا عند وجود أكثر من خطة فعّالة.
   الالتفاف مقصود: عدد الخطط يقرّره المشغّل من لوحة الأدمن، فلا يُفترض عدد بعينه. */
.plan-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.plan-switch-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1 8rem;
  padding: 0.75rem 1rem;
  background: transparent;
  border: 0.125rem solid var(--border);
  border-radius: 0.75rem;
  color: var(--fg-muted);
  font-family: inherit;
  cursor: pointer;
  transition:
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out);
}

.plan-switch-option:hover {
  border-color: var(--border-strong);
  color: var(--fg);
}

.plan-switch-option.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--fg);
}

.plan-switch-name {
  font-size: 0.95rem;
  font-weight: 700;
}

.plan-switch-price {
  font-family: var(--font-num);
  font-size: 0.9rem;
}

.sub-plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.sub-plan-price .price-amount {
  font-size: 5rem;
  font-weight: 900;
  color: var(--azure-400);
  line-height: 1;
}

.sub-plan-price .price-currency {
  font-size: 1.5rem;
  color: var(--text-secondary);
}

.sub-plan-period {
  font-size: 1.2rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.sub-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 auto 2rem;
  text-align: right;
  max-width: 24rem;
}

.sub-plan-features li {
  font-size: 1.15rem;
  padding: 0.625rem 0;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
}

.sub-plan-features li:last-child {
  border-bottom: none;
}

.sub-payment-methods {
  margin-bottom: 1.5rem;
}

.pm-label {
  display: block;
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 0.625rem;
}

.pm-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
}

.pm-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid rgba(0, 0, 0, 0.08);
  background: var(--white);
  height: 2.25rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.pm-logo:hover {
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.sub-cta-btn {
  width: 100%;
  font-size: 1.4rem !important;
  padding: 1rem !important;
  background: linear-gradient(135deg, var(--azure-400), var(--azure-700)) !important;
  color: var(--white) !important;
  border-radius: 0.75rem !important;
  font-weight: 900 !important;
  margin-bottom: 1rem;
}

.sub-security-note {
  font-size: 0.9rem;
  color: var(--text-secondary);
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
}

.sub-security-note svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

/* --- Profile Modal (tabs) --- */
.profile-modal-content {
  max-width: 54rem;
  width: 95%;
  padding: 2.5rem;
  position: relative;
  height: 42rem;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.profile-close-btn {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: none;
  border: none;
  font-size: 2.2rem;
  cursor: pointer;
  color: var(--danger-color, var(--rose-600));
  font-weight: bold;
  line-height: 1;
}

.profile-title {
  margin-bottom: 1.25rem;
  text-align: center;
  font-size: 2.1rem;
  flex-shrink: 0;
}

.profile-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

.profile-tab {
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: 0.0625rem solid transparent;
  color: var(--text-secondary);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: all 0.15s;
  font-family: inherit;
}

.profile-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.profile-tab.active {
  background: rgba(47, 129, 247, 0.15);
  color: var(--azure-400);
  border-color: rgba(47, 129, 247, 0.4);
}

.profile-tabs-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  position: relative;
  padding-inline-end: 0.25rem;
}

.profile-tab-panel {
  display: none;
}
.profile-tab-panel.active {
  display: block;
}

.profile-form-group {
  text-align: right;
  margin-bottom: 1.1rem;
}
.profile-form-group label {
  display: block;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.profile-input {
  width: 100%;
  padding: 0.75rem 0.875rem;
  font-size: 1.25rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-family: inherit;
}

.profile-input.readonly {
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-secondary);
  cursor: not-allowed;
}

.profile-section-divider {
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.08);
  margin: 1.5rem 0 1.1rem;
  padding-top: 1.1rem;
}

.profile-section-divider h3 {
  font-size: 1.25rem;
  color: var(--azure-400);
  margin: 0;
}

.profile-msg {
  text-align: center;
  margin-bottom: 0.75rem;
  font-weight: bold;
  display: none;
  font-size: 1.05rem;
}

.profile-submit-btn {
  width: 100%;
  font-size: 1.3rem !important;
  padding: 0.875rem !important;
}

/* --- Subscription details panel --- */
.subscription-details {
  padding: 1rem 0;
}

.sub-status-card {
  padding: 1.25rem;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
}

.sub-status-card.active {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.4);
}

.sub-status-card.expired {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.4);
}

.sub-status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.sub-status-badge.active {
  background: var(--emerald-400);
  color: var(--white);
}
.sub-status-badge.canceled {
  background: var(--amber-600);
  color: var(--white);
}
.sub-status-badge.expired {
  background: var(--rose-600);
  color: var(--white);
}

.sub-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 1rem;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.05);
}

.sub-detail-row:last-child {
  border-bottom: none;
}
.sub-detail-label {
  color: var(--text-secondary);
}
.sub-detail-value {
  font-weight: 700;
}

.sub-countdown {
  font-size: 1.5rem;
  color: var(--azure-400);
  font-weight: 900;
  text-align: center;
  padding: 0.75rem;
  background: rgba(47, 129, 247, 0.1);
  border-radius: 0.5rem;
  margin: 0.75rem 0;
}

.sub-actions {
  display: flex;
  gap: 0.625rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.sub-actions .btn {
  flex: 1;
  min-width: 10rem;
  font-size: 1rem;
  padding: 0.625rem;
}

.sub-empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-secondary);
}

.sub-empty-state .big-icon {
  font-size: 3.5rem;
  margin-bottom: 0.75rem;
  opacity: 0.6;
}

/* --- Cards list --- */
.cards-list {
  margin-bottom: 1rem;
}

.card-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  margin-bottom: 0.625rem;
  background: rgba(255, 255, 255, 0.03);
}

.card-item.default {
  border-color: rgba(47, 129, 247, 0.5);
  background: rgba(47, 129, 247, 0.08);
}

.card-brand-logo {
  width: 3rem;
  height: 2rem;
  border-radius: 0.25rem;
  background: var(--white);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.card-brand-logo.mada {
  background: var(--brand-mada);
  color: var(--white);
}
.card-brand-logo.visa {
  background: var(--brand-visa);
  color: var(--brand-visa-fg);
}
.card-brand-logo.mastercard {
  background: var(--brand-mastercard);
  color: var(--white);
}

.card-info {
  flex: 1;
}
.card-number {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
}
.card-expiry {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.card-default-badge {
  background: var(--azure-400);
  color: var(--white);
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.card-actions {
  display: flex;
  gap: 0.375rem;
}
.card-actions button {
  font-size: 0.85rem !important;
  padding: 0.375rem 0.625rem !important;
}

.cards-hint {
  margin: 0;
  padding: 0.75rem 1rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* --- Invoices --- */
.invoices-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.invoices-table th,
.invoices-table td {
  padding: 0.625rem 0.5rem;
  text-align: center;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
}

.invoices-table th {
  background: rgba(255, 255, 255, 0.04);
  font-weight: 700;
  color: var(--text-secondary);
}

.invoice-status {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.invoice-status.paid {
  background: var(--emerald-400);
  color: var(--white);
}
.invoice-status.failed {
  background: var(--rose-600);
  color: var(--white);
}
.invoice-status.pending {
  background: var(--amber-600);
  color: var(--white);
}
.invoice-status.refunded {
  background: var(--slate-400);
  color: var(--white);
}

/* حالات لم تكتمل فيها العملية (إلغاء/تراجُع/انتهاء مهلة): محايدة لا حمراء —
   لم يُخصم فيها شيء، فتلوينها كفشل يُقلق العميل بلا سبب. */
.invoice-status.canceled,
.invoice-status.expired,
.invoice-status.initiated {
  background: var(--surface-2);
  color: var(--fg-muted);
  border: 0.0625rem solid var(--border);
}

/* خُصم المبلغ فعلاً ولم يُفعَّل الاشتراك: ليست محايدة كـ«لم تكتمل» ولا حمراء
   كـ«فاشلة» — تنبيه بلا فزع، فالمال قائم والمراجعة جارية. */
.invoice-status.rejected {
  background: var(--gold-soft);
  color: var(--warn);
  border: 0.0625rem solid var(--warn);
}

.invoice-status.granted {
  background: var(--primary-soft);
  color: var(--primary);
  border: 0.0625rem solid var(--primary);
}

.sub-loading {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
  font-size: 1.1rem;
}

/* أيقونة الانتظار الدوّارة — بديل SVG للساعة الرملية، مصدرها CSS وحده */
.sub-loading::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background-color: currentColor;
  -webkit-mask: url("../assets/icons/loader.svg") no-repeat center;
  mask: url("../assets/icons/loader.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: -0.15em;
  margin-inline-end: 0.4em;
  animation: spinner-ic-rotate 0.9s linear infinite;
}

/* --- Payment modal (Moyasar form) --- */
.payment-modal-content {
  max-width: 32rem;
  width: 95%;
  padding: 1.75rem;
  position: relative;
}

.payment-title {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.payment-summary {
  display: flex;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  background: rgba(47, 129, 247, 0.1);
  border-radius: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.payment-status {
  text-align: center;
  margin-top: 1rem;
  font-weight: 700;
}
.payment-status.success {
  color: var(--emerald-400);
}
.payment-status.error {
  color: var(--rose-600);
}

/* Moyasar widget overrides */
.mysr-form {
  min-height: 25rem;
  background-color: var(--slate-50) !important; /* خلفية فاتحة لنموذج ميسر ليكون النص مقروءاً */
  padding: 1.5rem !important;
  border-radius: 0.75rem !important;
  color: var(--slate-700) !important;
}

/* Toggle switch for auto-renew */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 1.5rem;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.2);
  transition: 0.3s;
  border-radius: 1.5rem;
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 1.125rem;
  width: 1.125rem;
  left: 0.1875rem;
  bottom: 0.1875rem;
  background-color: var(--white);
  transition: 0.3s;
  border-radius: 50%;
}
.toggle-switch input:checked + .toggle-slider {
  background-color: var(--emerald-400);
}
.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(1.5rem);
}

/* --- Subscription-required lock overlay for setup button --- */
.sub-locked {
  opacity: 0.5;
  cursor: not-allowed !important;
  position: relative;
}
.sub-locked::after {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background-color: currentColor;
  -webkit-mask: url("../assets/icons/lock.svg") no-repeat center;
  mask: url("../assets/icons/lock.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: -0.15em;
  margin-right: 0.5rem;
}

/* When trial banner is showing, shift content down slightly */
body.trial-active #app {
  padding-top: 3rem;
}

/* Light Theme for Subscription Screen */
[data-theme="light"] #subscription-screen,
body.light-theme #subscription-screen {
  background:
    radial-gradient(ellipse at top, rgba(0, 154, 88, 0.08), transparent 60%),
    var(--bg) !important;
}
[data-theme="light"] .sub-hero-title,
body.light-theme .sub-hero-title {
  color: var(--fg) !important;
}
[data-theme="light"] .sub-hero-subtitle,
body.light-theme .sub-hero-subtitle {
  color: var(--fg-muted) !important;
}
[data-theme="light"] .sub-plan-card,
body.light-theme .sub-plan-card {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-md) !important;
}
[data-theme="light"] .sub-plan-features li,
body.light-theme .sub-plan-features li {
  border-bottom-color: var(--border) !important;
  color: var(--fg) !important;
}
[data-theme="light"] .pm-logo,
body.light-theme .pm-logo {
  border-color: var(--border) !important;
}
[data-theme="light"] .sub-security-note,
body.light-theme .sub-security-note {
  color: var(--fg-muted) !important;
}

/* ============================================================================
   NEW CUSTOM PAYMENT GRID & FORM STYLES
   ============================================================================ */

.sub-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 2rem;
  align-items: start;
  text-align: right;
  margin-top: 1.5rem;
}

@media (max-width: 56.25rem) {
  .sub-plan-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.sub-plan-info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Custom Payment Form Layout */
.custom-payment-form {
  background: rgba(255, 255, 255, 0.02);
  border: 0.0625rem solid var(--border);
  padding: 1.5rem;
  border-radius: 1rem;
  backdrop-filter: blur(1rem);
  box-shadow: var(--shadow-md);
  width: 100%;
}

.form-group-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: flex-end; /* This aligns inputs to the bottom when labels take 2 lines */
}

.input-with-brand {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-brand .input {
  padding-left: 3.5rem !important; /* Space for brand logo */
}

.input-brand-indicator {
  position: absolute;
  left: 0.875rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  pointer-events: none;
  transition: opacity 0.2s;
}

.input-brand-indicator img {
  height: 1.8rem;
  width: auto;
  display: block;
  background: var(--white);
  padding: 0.2rem 0.5rem;
  border-radius: 0.375rem;
  border: 0.0625rem solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.05);
}

.card-brand-logo-img {
  width: 3.5rem;
  height: 2.25rem;
  border-radius: 0.375rem;
  background: var(--white);
  border: 0.0625rem solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  flex-shrink: 0;
  box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.05);
}

/* Payment Status and Spinner */
.btn-spinner {
  display: inline-block;
  animation: spin 1s linear infinite;
}

.btn-spinner svg {
  width: 1.1em;
  height: 1.1em;
  display: block;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.payment-error-message {
  color: var(--down);
  background: var(--down-soft);
  border: 0.0625rem solid color-mix(in srgb, var(--down) 25%, transparent);
  padding: 0.6rem 0.8rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;
  display: none;
}

/* أيقونة الخطأ عبر ::before — الرسالة نفسها تُكتب بـ textContent (لا حقن HTML) */
.payment-error-message::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background-color: currentColor;
  -webkit-mask: url("../assets/icons/alert-circle.svg") no-repeat center;
  mask: url("../assets/icons/alert-circle.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: -0.15em;
  margin-inline-end: 0.4em;
}

[data-theme="light"] .custom-payment-form,
body.light-theme .custom-payment-form {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .brand-logo-mada,
body.light-theme .brand-logo-mada {
  background: var(--surface-raised);
  border-color: var(--border-strong);
}

/* ============================================================================
   Express Checkout — زر المحفظة الأصلي (Apple Pay) أعلى صفحة الدفع
   يبقى بسمة hidden حتى ينجح تركيبه في checkout.js، فلا يومض فارغاً على
   الأجهزة التي لا تدعمه. الزر نفسه يرسمه SDK جيديا داخل .express-checkout-mount
   بهوية Apple الإلزامية — لا نلوّنه ولا نغيّر نصّه.
   ========================================================================== */

.express-checkout {
  margin-bottom: 1.5rem;
}

.express-checkout[hidden] {
  display: none;
}

.express-checkout-mount {
  min-height: 3rem;
  max-width: 25rem;
  margin-inline: auto;
}

/* ==========================================================================
   شريحة «كوبون مطبَّق» — تعرض الرمز ومقدار الخصم مع زر إلغاء صريح.
   قبلها لم تكن هناك طريقة لإلغاء كوبون بعد تطبيقه إلا بإعادة تحميل الصفحة،
   فيبقى العميل حبيس خصم لم يعد يريده (أو يظنّ الرمز عالقاً).
   ========================================================================== */

.coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 0.0625rem solid var(--up);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--up) 10%, transparent);
}

/* لازمة: display:flex أعلاه يتغلّب على إخفاء المتصفح الافتراضي لـ [hidden] */
.coupon-applied[hidden] {
  display: none;
}

.coupon-applied-text {
  color: var(--up);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.coupon-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0.0625rem solid var(--down);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--down);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.coupon-remove-btn svg {
  width: 1rem;
  height: 1rem;
}

.coupon-remove-btn:hover,
.coupon-remove-btn:focus-visible {
  background: var(--down);
  color: var(--surface);
}

/* فاصل «أو الدفع بالبطاقة» — خطّان يحيطان النص بلا حرف زائد في الترجمة */
.express-checkout-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  color: var(--fg-subtle);
  font-size: var(--fs-sm);
}

.express-checkout-divider::before,
.express-checkout-divider::after {
  content: "";
  flex: 1;
  height: 0.0625rem;
  background: var(--border);
}

/* ============================================================================
   Checkout — عرض تدفّق الدفع الانتقالي (بوابة جيديا المستضافة)
   الصفحة لا تجمع أي بيانات بطاقة؛ دورها مراجعة الطلب وشرح الانتقال للبوابة.
   ========================================================================== */

.checkout-flow {
  background: var(--surface-2);
  border: 0.0625rem solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.checkout-flow-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--fg);
  margin: 0 0 1rem;
}

.checkout-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.875rem;
}

.checkout-step {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  align-items: start;
  gap: 0.75rem;
  color: var(--fg-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}

/* الخطوة الحالية تُبرز بالأساسي حتى يعرف العميل أين هو من العملية */
.checkout-step.is-current {
  color: var(--fg);
  font-weight: var(--fw-semibold);
}

.checkout-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: var(--r-pill);
  border: 0.0625rem solid var(--border-strong);
  background: var(--surface);
  color: var(--fg-subtle);
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.checkout-step.is-current .checkout-step-num {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--fg-on-accent);
}

/* تطمين صريح: أين تُدخَل بيانات البطاقة ومن يحفظها */
.checkout-gateway-note {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0 0 1.25rem;
  padding: 0.875rem 1rem;
  background: var(--sky-soft);
  border: 0.0625rem solid var(--sky);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.checkout-gateway-note::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  background-color: var(--sky);
  -webkit-mask: url("../assets/icons/lock.svg") no-repeat center;
  mask: url("../assets/icons/lock.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* تنبيه تأكيد البريد — يُعرض داخل الصفحة بدل طرد العميل إلى الرئيسية */
.checkout-verify-notice {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.875rem 1rem;
  background: var(--gold-soft);
  border: 0.0625rem solid var(--gold);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: var(--fs-sm);
}

.checkout-verify-notice.is-visible {
  display: flex;
}

.checkout-verify-notice-text {
  flex: 1 1 12rem;
  line-height: var(--lh-snug);
}

.checkout-verify-notice .btn {
  flex: none;
}

/* ---- Checkout: إشعار الحالة (خطأ/نجاح) ----
   fixed عمداً: كان في تدفّق الصفحة فيزيح البطاقة ~5rem عند الظهور ثم يعيدها
   عند الاختفاء التلقائي — قفزة تخطيط مزعجة، وأوضح ما تكون على شاشات 4K. */
.alert-box {
  display: none;
  position: fixed;
  inset-block-start: 1.5rem;
  inset-inline: 0;
  z-index: 4000;
  width: max-content;
  max-width: min(40rem, 90vw);
  margin-inline: auto;
  padding: 0.875rem 1.5rem;
  border-radius: var(--r-md);
  border: 0.0625rem solid transparent;
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-align: center;
}

.alert-box.alert-error {
  background: var(--surface-raised);
  border-color: var(--down);
  color: var(--down);
}

.alert-box.alert-success {
  background: var(--surface-raised);
  border-color: var(--up);
  color: var(--up);
}

/* ---- Checkout: زر الدفع ورمز التحميل ----
   المؤشّر كان عنصراً inline داخل الزر: إظهاره يزحزح النص ~2rem أفقياً ويزيد
   ارتفاع البطاقة ~1.1rem، وإخفاؤه يعيدها — توسّع وانكماش واضح على شاشات 4K.
   الحل: إخراجه من تدفّق الزر (absolute) فلا يؤثّر على الأبعاد ظهر أم اختفى،
   ويبقى النص في المنتصف تماماً في الحالتين. */
.payment-submit-btn {
  position: relative;
}

.payment-submit-btn .btn-spinner {
  position: absolute;
  inset-inline-start: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  /* الدوران ينتقل إلى الـ svg: animation على الحاوية يلغي transform الإزاحة */
  animation: none;
}

.payment-submit-btn .btn-spinner svg {
  animation: spin 1s linear infinite;
}

/* ---- Checkout: عرض الصفحة ----
   أوسع من .sub-screen-wrap العامة (50rem) لأن صفحة الدفع تعرض عمودين
   (ملخّص الخطة + خطوات العملية) على شاشات عريضة. مقصورة على /checkout
   حتى لا تتأثر شاشة الاشتراك داخل اللعبة. */
.sub-screen-wrap.checkout-wrap {
  max-width: 62rem;
}

/* =========================================================
   MOBILE — نوافذ الحساب والدفع وشاشة الاشتراك
   يُحمَّل هذا الملف بعد style.css، لذلك تُكتب تصغيرات هذه
   النوافذ هنا وإلا تغلّبت قيم السطح المكتبي أعلاه عليها.
========================================================= */
@media (max-width: 48rem) {
  /* --- نافذة الحساب (تبويبات) --- */
  .profile-modal-content {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    padding: 1.5rem 1.25rem 1.25rem;
  }

  .profile-close-btn {
    top: 0.5rem;
    left: 0.5rem;
    font-size: 1.75rem;
  }

  .profile-title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    padding-inline-start: 2rem;
  }

  .profile-tabs {
    gap: 0.25rem;
    margin-bottom: 1rem;
  }

  .profile-tab {
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
  }

  .profile-form-group label,
  .profile-section-divider h3 {
    font-size: 1rem;
  }

  .profile-input {
    font-size: 1rem;
    padding: 0.625rem 0.75rem;
  }

  .profile-submit-btn {
    font-size: 1.05rem !important;
    padding: 0.75rem !important;
  }

  /* --- نافذة الدفع --- */
  .payment-modal-content {
    width: 100%;
    max-width: 100%;
    padding: 1.25rem;
  }

  .payment-title {
    font-size: 1.2rem;
  }

  /* --- شاشة الاشتراك --- */
  .sub-hero {
    margin-bottom: 1.5rem;
  }

  .sub-hero-icon {
    font-size: 2.5rem;
  }

  .sub-hero-title {
    font-size: 1.4rem;
  }

  .sub-hero-subtitle {
    font-size: 1rem;
  }

  .sub-plan-card {
    padding: 1.5rem 1.25rem;
  }

  .sub-plan-price .price-amount {
    font-size: 2.75rem;
  }

  .sub-plan-price .price-currency {
    font-size: 1.1rem;
  }

  .sub-empty-state .big-icon {
    font-size: 2.25rem;
  }
}