/* EA Subscription Engine v2 — Frontend CSS */
:root {
  --sp-blue:    #2271b1;
  --sp-green:   #16a34a;
  --sp-red:     #dc2626;
  --sp-gold:    #d97706;
  --sp-border:  #e5e7eb;
  --sp-text:    #1d2327;
  --sp-muted:   #6b7280;
  --sp-bg:      #f8fafc;
  --sp-r:       12px;
  --plan-color: var(--sp-blue);
}
.ea-sp-wrap *,.ea-sub-wrap *,.ea-sp-portal *{box-sizing:border-box}

/* ── Pricing Table ────────────────────────────────────────────────────────── */
.ea-sp-wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* Billing toggle */
.ea-sp-toggle-wrap { text-align: center; margin-bottom: 32px; display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--sp-bg); border: 1px solid var(--sp-border); border-radius: 50px; display: inline-flex; padding: 4px; margin: 0 auto 32px; }
.ea-sp-toggle { padding: 8px 22px; border: none; border-radius: 50px; font-size: 14px; font-weight: 600; cursor: pointer; background: transparent; color: var(--sp-muted); transition: all .2s; }
.ea-sp-toggle.active { background: var(--sp-blue); color: #fff; }
.ea-sp-toggle-save { font-size: 11px; background: #d1fae5; color: #065f46; padding: 2px 7px; border-radius: 20px; margin-left: 5px; font-weight: 700; }

/* Grid */
.ea-sp-grid { display: grid; gap: 24px; }
.ea-sp-grid-1 { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
.ea-sp-grid-2 { grid-template-columns: repeat(2,1fr); }
.ea-sp-grid-3 { grid-template-columns: repeat(3,1fr); }
.ea-sp-grid-4 { grid-template-columns: repeat(4,1fr); }

/* Card */
.ea-sp-card { background: #fff; border: 2px solid var(--sp-border); border-radius: var(--sp-r); padding: 28px 24px; position: relative; display: flex; flex-direction: column; transition: box-shadow .2s, border-color .2s; }
.ea-sp-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.08); border-color: var(--plan-color); }
.ea-sp-card--featured { border-color: var(--plan-color); box-shadow: 0 8px 32px rgba(0,0,0,.1); }
.ea-sp-card--featured::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--plan-color); border-radius: var(--sp-r) var(--sp-r) 0 0; }

/* Badge */
.ea-sp-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--plan-color); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 14px; border-radius: 20px; white-space: nowrap; text-transform: uppercase; letter-spacing: .06em; }

/* Card header */
.ea-sp-card-hdr { text-align: center; margin-bottom: 20px; }
.ea-sp-icon { font-size: 36px; margin-bottom: 10px; }
.ea-sp-name { font-size: 18px; font-weight: 800; color: var(--sp-text); }
.ea-sp-tagline { font-size: 13px; color: var(--sp-muted); margin-top: 4px; }

/* Price */
.ea-sp-price-block { text-align: center; margin-bottom: 24px; padding: 16px 0; border-top: 1px solid var(--sp-border); border-bottom: 1px solid var(--sp-border); }
.ea-sp-price { display: flex; align-items: baseline; justify-content: center; gap: 2px; }
.ea-sp-currency { font-size: 20px; font-weight: 700; color: var(--sp-muted); margin-top: 6px; }
.ea-sp-amount { font-size: 48px; font-weight: 900; color: var(--plan-color); line-height: 1; }
.ea-sp-period { font-size: 13px; color: var(--sp-muted); margin-top: 4px; }
.ea-sp-yearly-note { font-size: 11px; color: var(--sp-muted); margin-top: 4px; }

/* Features */
.ea-sp-features { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.ea-sp-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--sp-text); padding: 6px 0; border-bottom: 1px solid #f9fafb; }
.ea-sp-features li:last-child { border-bottom: none; }
.ea-sp-check { color: var(--plan-color); font-weight: 700; flex-shrink: 0; margin-top: 1px; }

/* Card footer */
.ea-sp-card-footer { margin-top: auto; }
.ea-sp-current-badge { background: #f0fdf4; color: var(--sp-green); font-size: 13px; font-weight: 700; padding: 10px; border-radius: 8px; text-align: center; margin-bottom: 10px; }

/* Buttons */
.ea-sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 13px 20px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; border: none; font-family: inherit; transition: all .15s; text-decoration: none; }
.ea-sp-btn--primary { background: var(--plan-color); color: #fff; }
.ea-sp-btn--primary:hover { filter: brightness(1.1); }
.ea-sp-btn--outline { background: #fff; color: var(--plan-color); border: 2px solid var(--plan-color); }
.ea-sp-btn--outline:hover { background: var(--plan-color); color: #fff; }
.ea-sp-btn--cancel { background: #fee2e2; color: var(--sp-red); font-size: 13px; margin-top: 8px; }
.ea-sp-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }

/* ── Single Subscribe Widget ──────────────────────────────────────────────── */
.ea-sp-subscribe-single { background: #fff; border: 2px solid var(--plan-color); border-radius: var(--sp-r); padding: 24px; max-width: 440px; }
.ea-sp-single-hdr { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ea-sp-single-hdr .ea-sp-icon { font-size: 28px; margin: 0; }
.ea-sp-single-price { font-size: 22px; font-weight: 800; color: var(--plan-color); margin-top: 2px; }
.ea-sp-active-notice { background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px; padding: 12px 16px; font-size: 14px; color: var(--sp-green); }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.ea-sp-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9998; }
.ea-sp-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ea-sp-modal-inner { background: #fff; border-radius: var(--sp-r); padding: 32px; max-width: 520px; width: 100%; position: relative; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.ea-sp-modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--sp-muted); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.ea-sp-modal-close:hover { background: var(--sp-bg); }

/* Checkout form inside modal */
.ea-sp-checkout-title { font-size: 18px; font-weight: 800; margin: 0 0 20px; }
.ea-sp-checkout-plan { background: var(--sp-bg); border-radius: 8px; padding: 14px 18px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.ea-sp-checkout-plan-name { font-weight: 700; font-size: 15px; }
.ea-sp-checkout-plan-price { font-weight: 800; color: var(--plan-color); font-size: 18px; }
.ea-sp-checkout-form { display: flex; flex-direction: column; gap: 14px; }
.ea-sp-checkout-form label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sp-muted); display: block; margin-bottom: 4px; }
.ea-sp-checkout-form input, .ea-sp-checkout-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 14px; font-family: inherit; }
.ea-sp-checkout-form input:focus { border-color: var(--plan-color); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--plan-color) 15%, transparent); }
.ea-sp-checkout-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ea-sp-checkout-note { font-size: 12px; color: var(--sp-muted); text-align: center; margin-top: 6px; }
.ea-sp-checkout-msg { padding: 10px 14px; border-radius: 7px; font-size: 13px; font-weight: 600; margin-top: 10px; }
.ea-sp-checkout-msg.ok { background: #f0fdf4; color: var(--sp-green); }
.ea-sp-checkout-msg.err { background: #fef2f2; color: var(--sp-red); }

/* ── Customer Portal ──────────────────────────────────────────────────────── */
.ea-sp-portal { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.ea-sp-portal-title { font-size: 20px; font-weight: 800; margin: 0 0 20px; }
.ea-sp-portal-empty { text-align: center; padding: 48px 20px; color: var(--sp-muted); }

.ea-sp-portal-card { background: #fff; border: 2px solid var(--sp-border); border-radius: var(--sp-r); margin-bottom: 16px; overflow: hidden; }
.ea-sp-portal-card-hdr { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--plan-color) 8%, white), white); border-bottom: 1px solid var(--sp-border); }
.ea-sp-portal-plan-name { font-size: 16px; font-weight: 800; color: var(--sp-text); }
.ea-sp-portal-since { font-size: 12px; color: var(--sp-muted); margin-top: 2px; }
.ea-sp-portal-status { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; color: #fff; white-space: nowrap; }

.ea-sp-portal-details { padding: 14px 20px; border-bottom: 1px solid var(--sp-border); }
.ea-sp-portal-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; border-bottom: 1px solid #f9fafb; }
.ea-sp-portal-row:last-child { border-bottom: none; }
.ea-sp-portal-label { color: var(--sp-muted); }

.ea-sp-portal-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 20px; }
.ea-sp-portal-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--sp-blue); text-decoration: none; padding: 7px 14px; border: 1px solid var(--sp-border); border-radius: 7px; transition: all .15s; }
.ea-sp-portal-link:hover { border-color: var(--sp-blue); background: #f0f6fc; }
.ea-sp-portal-cancel { background: none; border: none; color: #9ca3af; font-size: 12px; cursor: pointer; font-family: inherit; padding: 0; margin-left: auto; }
.ea-sp-portal-cancel:hover { color: var(--sp-red); }

/* ── Original Membership Styles (preserved) ───────────────────────────────── */
.ea-sub-wrap { padding: 16px; border: 1px solid var(--sp-border); border-radius: 8px; margin: 12px 0; max-width: 480px; }
.ea-sub-guest p, .ea-sub-active p, .ea-sub-status p { margin: 8px 0; font-size: 14px; }
.ea-sub-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.ea-sub-badge--active { background: #d1fae5; color: #065f46; }
.ea-sub-badge--pending { background: #fef9c3; color: #713f12; }
.ea-sub-badge--free { background: #f3f4f6; color: var(--sp-muted); }
.ea-sub-price { font-size: 22px; font-weight: 800; color: var(--sp-text); margin-bottom: 12px; }
.ea-sub-btn { display: inline-block; padding: 10px 20px; border-radius: 7px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; font-family: inherit; margin: 4px 0; width: 100%; text-align: center; }
.ea-sub-btn--stripe { background: #635bff; color: #fff; }
.ea-sub-btn--paypal { background: #003087; color: #fff; margin-top: 8px; }
.ea-sub-btn--portal { background: var(--sp-blue); color: #fff; }
.ea-sub-renews { font-size: 12px; color: var(--sp-muted); }
.ea-sub-manage-card { background: var(--sp-bg); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.ea-sub-manage-card h3 { margin: 0 0 10px; font-size: 15px; }
.ea-sub-manage-card p { margin: 6px 0; font-size: 14px; }
.ea-sub-upgrade { margin-top: 16px; }
.ea-sub-upgrade h4 { font-size: 13px; margin-bottom: 10px; }
.ea-sub-upgrade-option { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--sp-border); font-size: 13px; }

/* Responsive */
@media (max-width: 768px) {
  .ea-sp-grid-2, .ea-sp-grid-3, .ea-sp-grid-4 { grid-template-columns: 1fr; }
  .ea-sp-modal-inner { padding: 24px 18px; }
  .ea-sp-checkout-row { grid-template-columns: 1fr; }
  .ea-sp-portal-card-hdr { flex-direction: column; gap: 10px; }
}
@media (max-width: 480px) {
  .ea-sp-amount { font-size: 36px; }
  .ea-sp-card { padding: 20px 16px; }
}

/* Spinner */
@keyframes ea-sp-spin { to { transform: rotate(360deg); } }
.ea-sp-spinning::after { content:''; display:inline-block; width:14px; height:14px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:ea-sp-spin .7s linear infinite; margin-left:8px; vertical-align:middle; }