/* ============ Disable zoom on touch devices ============ */
html {
  touch-action: pan-y; /* 2026-06-06: pan-x كانت تسمح بسحب الصفحة أفقياً على iOS عند أي فيض */
  -ms-touch-action: pan-y; /* 2026-06-06: pan-x كانت تسمح بسحب الصفحة أفقياً على iOS عند أي فيض */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
* {
  -webkit-touch-callout: none;
}
input, textarea, select {
  font-size: 16px !important;
}

/* ============================================================
   CHECKOUT PAGE STYLES
   ============================================================ */

.chk-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px;
  position: relative;
  z-index: 2;
}
@media (max-width: 600px) {
  .chk-container {
    padding: 18px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

.chk-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.chk-back {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.chk-back:hover { color: var(--accent-gold); }

.chk-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  color: var(--text-primary);
}
.chk-logo svg { width: 32px; height: 32px; }

/* Header inside the unified card — replaces the old free-floating
   title that sat on the bare page background. */
.chk-header {
  text-align: center;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.chk-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.chk-subtitle {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}
@media (max-width: 600px) {
  .chk-header { padding-bottom: 14px; margin-bottom: 14px; }
  .chk-title { font-size: 19px; }
  .chk-subtitle { font-size: 12px; }
}

/* Lock horizontal axis to viewport — kills any phantom right-shift
   coming from blurred orbs, off-screen skip links, or RTL/LTR mixups. */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}

/* Single column — force-centered with multiple safeguards. The flex
   wrapper handles the case where margin: auto can't compute properly
   (e.g. inside a transformed/positioned ancestor). */
.chk-layout {
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .chk-layout { max-width: 100%; }
}

.chk-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 16px;
}

.chk-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.chk-step {
  width: 26px;
  height: 26px;
  background: var(--accent-gold);
  color: var(--bg-primary);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

/* Billing toggle */
/* Billing toggle — full-width 2-column segmented control. Each side
   is its own card, so monthly vs yearly read as a clear choice.
   The 15% save badge sits OUTSIDE the active state so it's visible
   whether yearly is selected or not — pure visual incentive. */
.chk-billing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 5px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  margin-bottom: 20px;
  width: 100%;
}
.chk-billing-opt {
  position: relative;
  padding: 12px 14px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  border: none;
  background: transparent;
  font-family: inherit;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
}
.chk-billing-opt:hover { color: var(--text-primary); }
.chk-billing-opt.active {
  background: var(--accent-gold);
  color: var(--bg-primary);
  box-shadow: 0 2px 8px rgba(255,184,0,0.25);
}
/* Save 15% badge — green pill, always visible, sits above the
   yearly button so the user sees it before even clicking. */
.chk-billing-opt .chk-discount {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: #16a34a;
  color: #fff;
  font-size: 10px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: 1.5px solid var(--bg-card);
}
.chk-billing-opt.active .chk-discount {
  background: #fff;
  color: #16a34a;
  border-color: var(--accent-gold);
}

/* Plan cards */
/* Compact radio-row plan picker — one line per plan, scannable.
   Each plan has an accent color on its leading-edge mark so the row
   reads as a distinct identity (forex=blue, gold=gold, indices=purple,
   elite=highlighted, options=green). */
.chk-plans {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.chk-plan {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-tertiary);
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  min-height: 64px;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
.chk-plan-info { min-width: 0; }
.chk-plan-name, .chk-plan-desc { min-width: 0; max-width: 100%; }
/* The colored mark — small pill bar on the leading edge that signals
   the plan's identity even before the user reads the name. */
.chk-plan-mark {
  width: 4px;
  height: 36px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--mark, #6b7280);
  transition: height 0.15s;
}
.chk-plan[data-accent="blue"]   { --mark: #3B82F6; }
.chk-plan[data-accent="gold"]   { --mark: #FFB800; }
.chk-plan[data-accent="purple"] { --mark: #A855F7; }
.chk-plan[data-accent="green"]  { --mark: #10B981; }
.chk-plan[data-accent="elite"]  { --mark: #FFB800; }

.chk-plan:hover { border-color: rgba(255, 184, 0, 0.32); transform: translateY(-1px); }
.chk-plan.selected {
  border-color: var(--accent-gold);
  background: var(--accent-gold-dim);
}
.chk-plan.selected .chk-plan-mark { height: 44px; }
/* Selected state — show a check icon on the trailing edge so the
   user has a clear "this is picked" cue. This is what distinguishes
   any selected plan from Elite's permanent gold-border styling. */
.chk-plan::after {
  content: "";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--border-subtle);
  background: transparent;
  transition: all 0.15s;
  margin-inline-start: 4px;
}
.chk-plan.selected::after {
  border-color: var(--accent-gold);
  background: var(--accent-gold)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0E1A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>") center/14px no-repeat;
}

/* Elite — the "Most Popular" pick. We DON'T use a gold border/bg here
   anymore (that conflicted with the gold "selected" state). Identity is
   carried purely by the inline "Most Popular" pill next to the name. */
.chk-plan.popular {
  /* same neutral styling as the rest — the pill does the talking */
}
/* "Most Popular" inline pill — sits next to the Elite plan name.
   No floating badge that fights the price for space. */
.chk-popular-pill {
  display: inline-block;
  background: linear-gradient(135deg, #FFB800 0%, #F59E0B 100%);
  color: #0A0E1A;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  margin-inline-start: 8px;
  vertical-align: middle;
  white-space: nowrap;
}
.chk-plan-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.chk-plan-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.chk-plan-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.2;
}
.chk-plan-desc {
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chk-plan-price-wrap {
  text-align: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.chk-plan-price {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--accent-gold);
  line-height: 1;
}
.chk-plan-period {
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1;
}
@media (max-width: 600px) {
  .chk-plan { padding: 10px 12px; gap: 10px; min-height: 48px; }
  .chk-plan-name { font-size: 14px; }
  .chk-plan-desc { font-size: 10.5px; }
  .chk-plan-price { font-size: 16px; }
  .chk-plan-period { font-size: 10px; }
}

/* Customer info */
.chk-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 600px) {
  .chk-form-row { grid-template-columns: 1fr; }
}

.chk-field { margin-bottom: 12px; }
.chk-field label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 600;
}
.chk-field input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.2s;
}
.chk-field input:focus {
  outline: none;
  border-color: var(--accent-gold);
}
.chk-field input[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.chk-field .chk-hint {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 4px;
}

/* User bar (when logged in) */
.chk-user-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  margin-bottom: 16px;
}
.chk-user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent-gold);
  color: var(--bg-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.chk-user-info { flex: 1; }
.chk-user-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}
.chk-user-email {
  font-size: 12px;
  color: var(--text-muted);
  direction: ltr;
  text-align: start;
}

/* Referral badge */
.chk-ref-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--accent-green-dim);
  border: 1px solid rgba(0, 255, 135, 0.25);
  border-radius: 8px;
  font-size: 13px;
  color: var(--accent-green);
  margin-bottom: 12px;
}

/* Summary sidebar */
.chk-summary {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  height: fit-content;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 600px) {
  .chk-summary {
    padding: 16px !important;
    border-radius: 14px !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}
/* Soft divider between the plan picker and the order summary within
   the unified flow card. */
.chk-flow-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 18px 0 14px;
}
.chk-summary-title {
  margin-bottom: 12px !important;
}

/* Empty state — when no plan is chosen yet, hide the summary, terms,
   and payment cards. Show only the picker plus a soft hint. */
.chk-empty-hint { display: none; }
.chk-no-plan .chk-flow-divider,
.chk-no-plan .chk-summary-title,
.chk-no-plan .chk-sum-row,
.chk-no-plan .chk-terms,
.chk-no-plan .pay-cards-grid,
.chk-no-plan .pay-cards-or { display: none !important; }
.chk-no-plan .chk-empty-hint {
  display: block;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 18px 12px 6px;
  border-top: 1px dashed var(--border-subtle);
  margin-top: 18px;
}

.chk-sum-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 14px;
}
.chk-sum-row.total {
  border-top: 1px solid var(--border-subtle);
  margin-top: 10px;
  padding-top: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
}
.chk-sum-row .chk-sum-label { color: var(--text-secondary); }
.chk-sum-row .chk-sum-value { color: var(--text-primary); font-weight: 600; }
.chk-sum-row.total .chk-sum-value {
  color: var(--accent-gold);
  font-size: 26px;
}
.chk-sum-row.discount .chk-sum-value { color: var(--accent-green); }

.chk-cycle-small {
  font-size: 14px;
  color: var(--text-muted);
  margin-inline-start: 4px;
}

/* Terms check */
.chk-terms {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 16px 0;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.chk-terms input { margin-top: 2px; flex-shrink: 0; }
.chk-terms a { color: var(--accent-gold); text-decoration: none; }
.chk-terms a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════
   Gift-card-style payment options.
   Two cards side by side, each with a brand-color top (logo + small
   discount % in corner) and a clean white body (title, available pill,
   prices, "Buy" CTA). Cards collapse to a single column on mobile.
   ═══════════════════════════════════════════════════════════════════ */
/* Stacked vertically (one column, full width). */
.pay-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 22px;
}
/* Thin "Or" separator between the two payment cards. */
.pay-cards-or {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 4px 0;
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.pay-cards-or::before,
.pay-cards-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,184,0,0.18);
}
/* Entire card IS the pay button — clickable anywhere (top art, gold
   body, the BUY word). Reset native <button> styling so the article
   look is preserved. */
.pay-card {
  background: #0F1320;
  border: 1px solid rgba(255,184,0,0.16);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0,0,0,0.40);
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease;
}
/* Hover effects only on devices that truly support hover (desktop).
   On touch devices iOS Safari treats the first tap as "show hover
   state" and only fires the click on the second tap — exactly the
   double-tap-to-pay bug the user reported. */
@media (hover: hover) {
  .pay-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,184,0,0.40);
    box-shadow: 0 8px 24px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,184,0,0.10);
  }
  .pay-card:hover .pay-card-body { filter: brightness(1.06); }
}
.pay-card:active { transform: translateY(0); }
.pay-card:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.pay-card-top {
  position: relative;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  pointer-events: none;
}
/* Split top for the card-payment option: left half blue (VISA),
   right half black (Apple Pay). The discount % sits on top of both. */
.pay-card-top-split {
  padding: 0;
}
.pay-card-top-split .pay-card-top-half {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  pointer-events: none;
}
.pay-card-top svg,
.pay-card-discount,
.pay-card-body,
.pay-card-buy-big { pointer-events: none; }
.pay-card-top-blue {
  background: linear-gradient(135deg, #122C82 0%, #0A1F66 100%);
}
.pay-card-top-black {
  background: #000;
}
.pay-card-usdt .pay-card-top {
  background: linear-gradient(135deg, #1F8868 0%, #136B51 100%);
}
.pay-card-logo-apple {
  max-width: 80px;
}
.pay-card-logo {
  width: 100%;
  max-width: 110px;
  height: auto;
  display: block;
}
.pay-card-discount {
  position: absolute;
  inset-inline-end: 14px;
  bottom: 10px;
  color: rgba(255,255,255,0.85);
  font-size: 11px;
  font-weight: 700;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Bottom gold strip — purely visual now; click is on the parent .pay-card. */
.pay-card-body {
  background: linear-gradient(135deg, #FFB800 0%, #F59E0B 50%, #d97706 100%);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, 'Tajawal', sans-serif;
  text-align: center;
  min-height: 48px;
  transition: filter 0.15s ease;
}
/* hover brightness is handled in the @media (hover: hover) block earlier */
.pay-card-buy-big {
  font-size: 18px;
  font-weight: 800;
  color: #0A0E1A;
  letter-spacing: -0.2px;
  line-height: 1;
}
/* New price on top (large + bold), old price strikethrough below it. */
.pay-card-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.pay-card-new-price {
  font-size: 22px;
  font-weight: 900;
  color: #FFFFFF;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  line-height: 1;
}
.pay-card-old-price {
  font-size: 13px;
  color: #64748b;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1;
}
.pay-card-old-price[hidden] { display: none; }
.pay-card-buy {
  background: #FFB800;
  color: #0A0E1A;
  border: none;
  border-radius: 12px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  transition: background-color 0.15s ease, transform 0.15s ease;
  box-shadow: 0 2px 6px rgba(255,184,0,0.30);
}
.pay-card-buy:hover { background: #FFC833; transform: translateY(-1px); }
.pay-card-buy:active { transform: translateY(0); }
.pay-card-buy:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

@media (max-width: 480px) {
  .pay-cards-grid { grid-template-columns: 1fr; gap: 12px; }
  .pay-card-top { height: 88px; }
  .pay-card-body { padding: 12px 14px 14px; }
  .pay-card-title { font-size: 14px; }
  .pay-card-new-price { font-size: 18px; }
  .pay-card-buy { padding: 9px 18px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Legacy Shopify/Stripe-style pay buttons (kept for backward compat).
   Layout: [lock icon] [action $59 / providers chips]      [→]
   Amount is THE focal point; brand chips reinforce trust.
   ═══════════════════════════════════════════════════════════════════ */
.chk-whop, .chk-usdt {
  width: 100% !important;
  padding: 14px 44px !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-height: 72px !important;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.15s ease !important;
  position: relative !important;
}
.chk-whop {
  background: #FFB800 !important;
  color: #0A0E1A !important;
  margin-top: 20px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 1px 2px rgba(0,0,0,0.10),
    0 4px 14px rgba(255,184,0,0.20) !important;
}
.chk-whop:hover {
  background: #FFC833 !important;
  transform: translateY(-1px) !important;
}
.chk-usdt {
  background: #26A17B !important;
  color: #fff !important;
  margin-top: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 1px 2px rgba(0,0,0,0.10),
    0 4px 14px rgba(38,161,123,0.20) !important;
}
.chk-usdt:hover {
  background: #2BB088 !important;
  transform: translateY(-1px) !important;
}
.chk-whop:active, .chk-usdt:active { transform: translateY(0) !important; }
.chk-whop:disabled, .chk-usdt:disabled { opacity: 0.6 !important; cursor: not-allowed !important; transform: none !important; }

/* Centered cluster: lock icon + stacked label.
   The arrow is absolute-positioned to the right so it doesn't push the
   group off-center. */
.pay-btn-left {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.pay-btn-lock {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.85;
}
.pay-btn-lock-usdt { opacity: 1; }
.pay-btn-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.pay-btn-action {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.1px;
  line-height: 1;
}
.pay-btn-amount {
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pay-btn-with {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.85;
}
.pay-btn-arrow {
  position: absolute;
  inset-inline-end: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.6;
  pointer-events: none;
}
[dir="rtl"] .pay-btn-arrow { transform: translateY(-50%) scaleX(-1); }
.pay-btn-stack { align-items: center; }

/* Provider chips row inside the button */
.pay-btn-providers {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.pay-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 18px;
  padding: 0 6px;
  border-radius: 3px;
  background: #fff;
  color: #1A1F71;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-style: italic;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2px;
  border: 1px solid rgba(0,0,0,0.08);
}
.pay-pill-visa { color: #1A1F71; }
.pay-pill-mc {
  background: #fff;
  padding: 0 5px;
  gap: 0;
  font-style: normal;
  position: relative;
  min-width: 26px;
}
.pay-pill-mc .mc-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.pay-pill-mc .mc-r { background: #EB001B; margin-inline-end: -5px; }
.pay-pill-mc .mc-y { background: #F79E1B; }
.pay-pill-apple {
  background: #000;
  color: #fff;
  font-style: normal;
  font-family: -apple-system, "SF Pro Display", Helvetica, Arial, sans-serif;
  font-weight: 600;
  padding: 0 7px;
  border-color: rgba(255,255,255,0.10);
}
.pay-pill-apple svg { width: 9px; height: 11px; }
.pay-pill-apple span { font-size: 11px; }

/* USDT-style provider pills (text labels for chain names) */
.pay-btn-providers-usdt .pay-pill-text {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 3px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border: 1px solid rgba(255,255,255,0.10);
}

/* Mobile: stack the providers row below the action on narrow screens */
@media (max-width: 380px) {
  .pay-btn-amount { font-size: 17px; }
  .pay-btn-action { font-size: 14px; }
  .pay-btn-providers { gap: 4px; }
  .pay-pill { height: 16px; padding: 0 5px; font-size: 10px; }
}
#whop-checkout-container { width: 100%; }
#whop-checkout-container > div,
#whop-embedded-checkout { width: 100%; max-width: 100%; }

.chk-unavailable {
  padding: 20px;
  background: var(--bg-tertiary);
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.chk-unavailable strong {
  color: var(--accent-gold);
  display: block;
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════════
   USDT secondary CTA — flat Tether green, clean typography. */
.chk-usdt {
  width: 100%;
  padding: 14px 22px;
  color: #fff;
  border-radius: 10px;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  min-height: 64px;
  background: #26A17B;
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 1px 2px rgba(0,0,0,0.10),
    0 4px 12px rgba(38,161,123,0.20);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.15s ease;
  letter-spacing: -0.1px;
}
.chk-usdt:hover {
  background: #2BB088;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 2px 4px rgba(0,0,0,0.12),
    0 8px 20px rgba(38,161,123,0.30);
}
.chk-usdt:active { transform: translateY(0); }
.chk-usdt:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.chk-usdt svg {
  background: #fff;
  border-radius: 999px;
  padding: 2px;
}

/* OR divider — minimal hairline + lowercase "or", no pill, no border. */
.chk-divider {
  text-align: center;
  color: rgba(255,255,255,0.40);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.chk-divider::before,
.chk-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}
.chk-divider > * {
  padding: 0;
  background: transparent;
  border: none;
}

/* Trust block — globally secured payments */
/* ═══════════════════════════════════════════════════════════════════
   Trust Strip v2 — flat, minimal, Stripe-style.
   One panel, three rows: head (shield + headline), payment logos,
   tiny partners line. No nested grids, no bubbles, nothing overflows.
   ═══════════════════════════════════════════════════════════════════ */
.trust-strip {
  margin-top: 22px;
  padding: 20px 18px;
  border-radius: 12px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,184,0,0.14);
  text-align: center;
}
.trust-strip-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FFB800;
  margin-bottom: 6px;
}
.trust-strip-shield {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.trust-strip-headline {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.trust-strip-line {
  font-size: 11.5px;
  font-weight: 600;
  color: #9ca3af;
  letter-spacing: 0.3px;
  margin: 0 auto;
  max-width: 100%;
}
.trust-strip-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,184,0,0.20), transparent);
  margin: 16px auto;
  max-width: 220px;
}
.trust-pay-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
/* Payment-method chip. Sizes are content-driven so logos never clip. */
.pm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 6px;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 1;
}
.pm .pm-text { font-weight: 700; }
.pm-visa {
  background: #fff;
  color: #1A1F71;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.5px;
  padding: 0 16px;
}
.pm-mc { background: #fff; color: #1f2937; padding: 0 12px 0 8px; }
.pm-mc .pm-mc-mark { width: 30px; height: 19px; flex-shrink: 0; }
.pm-mc .pm-text { font-weight: 800; font-size: 12px; }
.pm-apple { background: #000; color: #fff; padding: 0 14px 0 10px; gap: 4px; }
/* Apple logo: 384x512 viewBox keeps the leaf/bite proportions correct.
   Height 14px (slightly under the text cap-height so it sits visually
   on the baseline, not hanging below it). */
.pm-apple .pm-apple-mark { width: 11px; height: 14px; flex-shrink: 0; display: block; }
.pm-apple .pm-text { font-weight: 600; font-size: 14px; font-family: -apple-system, "SF Pro Display", Helvetica, Arial, sans-serif; }
.pm-google {
  background: #fff;
  color: #5F6368;
  padding: 0 14px;
  gap: 5px;
  font-family: "Product Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
}
.pm-google .g-mark { display: inline-flex; }
.pm-google .g-mark > span { font-family: inherit; font-weight: 500; }
.pm-google .g-pay { color: #5F6368; font-weight: 700; }
/* USDT: text-only chip on a Tether-green background — no fake logo. */
.pm-usdt {
  background: #26A17B;
  color: #fff;
  padding: 0 16px;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.5px;
}
.trust-strip-foot {
  font-size: 10.5px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.4px;
  line-height: 1.6;
}
.chk-cert-grid-primary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
  align-items: stretch;
}
.chk-cert-grid-secondary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 14px;
  align-items: stretch;
}
/* Flat card surface — no glow, no radial gradient. Just a clean dark
   tile with a subtle gold border. The text NEVER overflows: nowrap is
   gone, so long labels wrap onto a second line instead of escaping. */
.chk-cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 10px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,184,0,0.18);
  border-radius: 12px;
  min-width: 0;
  min-height: 96px;
  box-sizing: border-box;
  overflow: hidden;
  word-break: break-word;
}
.chk-cert > svg {
  flex-shrink: 0;
  color: #FFB800;
}
.chk-cert.is-primary > svg { width: 22px; height: 22px; }
.chk-cert.is-secondary > svg { width: 20px; height: 20px; }
.chk-cert.is-primary {
  padding: 16px 10px;
  min-height: 110px;
}
.chk-cert-text {
  line-height: 1.3;
  text-align: center;
  max-width: 100%;
}
.chk-cert-text .cert-main {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.1px;
  /* No nowrap — let it wrap if a card is narrower than the title.
     Hyphenation prevents an isolated long word breaking the layout. */
  overflow-wrap: anywhere;
}
.chk-cert-text .cert-sub {
  font-size: 10px;
  font-weight: 700;
  margin-top: 3px;
  color: #FFB800;
  letter-spacing: 0.2px;
  overflow-wrap: anywhere;
}
.chk-cert.is-secondary {
  padding: 14px 6px;
  min-height: 90px;
}
.chk-cert.is-secondary .cert-label {
  font-size: 11px;
  font-weight: 700;
  color: #e5e7eb;
  text-align: center;
  letter-spacing: 0.2px;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.chk-pay-methods {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.chk-pay-methods-title {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 10px;
  color: #9ca3af;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}
.chk-pay-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #fff;
}
.chk-pay-badge.is-visa       { background: #fff; color: #1A1F71; font-style: italic; }
.chk-pay-badge.is-mastercard { background: linear-gradient(135deg,#EB001B,#F79E1B); }
.chk-pay-badge.is-applepay   { background: #000; gap: 4px; }
.chk-pay-badge.is-applepay svg { flex-shrink: 0; }
.chk-pay-badge.is-googlepay  { background: #fff; color: #1a73e8; }
.chk-pay-badge.is-usdt       { background: #26A17B; }

@media (max-width: 520px) {
  .chk-cert-grid-secondary { grid-template-columns: repeat(3, 1fr); }
  .chk-pay-methods { grid-template-columns: repeat(3, 1fr); }
}

/* Included list */
.chk-included {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.chk-included h4 {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.chk-included li {
  list-style: none;
  padding: 6px 0;
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-secondary);
}
.chk-included li::before {
  content: "✓";
  color: var(--accent-green);
  font-weight: 700;
  flex-shrink: 0;
}

/* Secure badges */
.chk-secure {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 11px;
  flex-wrap: wrap;
}

/* Loading spinner */
.chk-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 14px;
}
.chk-loading::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-medium);
  border-top-color: var(--accent-gold);
  border-radius: 50%;
  animation: chkSpin 0.8s linear infinite;
  margin-inline-end: 10px;
}
@keyframes chkSpin { to { transform: rotate(360deg); } }

/* Error box */
.chk-error {
  padding: 12px 14px;
  background: var(--accent-red-dim);
  border: 1px solid rgba(255, 59, 92, 0.3);
  border-radius: 8px;
  color: var(--accent-red);
  font-size: 13px;
  margin: 12px 0;
}

/* Success page */
.chk-success-wrap {
  max-width: 560px;
  margin: 60px auto;
  padding: 40px 28px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.chk-success-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: var(--accent-green-dim);
  border: 2px solid var(--accent-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--accent-green);
}
.chk-success-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 10px;
}
.chk-success-msg {
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.7;
}
.chk-sub-id-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 24px;
}
.chk-sub-id-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.chk-sub-id {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-green);
  word-break: break-all;
  direction: ltr;
  text-align: center;
}