/* ── PAYMENT MODAL ── */
#pay-modal {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: 24px;
}
#pay-modal.open { display: flex; }

.pay-modal-box {
  background: #151923; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px; padding: 40px 32px; width: 100%; max-width: 420px;
  position: relative; animation: modalIn 0.25s ease;
}
@keyframes modalIn { from { opacity:0; transform:scale(0.95) translateY(10px); } to { opacity:1; transform:none; } }

.pay-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
  font-size: 18px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: 0.2s;
}
.pay-modal-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

.pay-modal-icon { font-size: 48px; text-align: center; margin-bottom: 16px; }

.pay-login-prompt, .pay-success, .pay-error, .pay-cancelled,
.pay-loading, .pay-account {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 12px;
}

.pay-login-prompt h3, .pay-success h3, .pay-account h3 {
  font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700;
}
.pay-login-prompt p, .pay-success p, .pay-error p, .pay-account p {
  color: rgba(240,244,255,0.6); font-size: 15px; line-height: 1.6;
}

.pay-pack-preview {
  display: flex; align-items: center; gap: 16px;
  background: rgba(0,200,150,0.08); border: 1px solid rgba(0,200,150,0.2);
  border-radius: 12px; padding: 12px 24px;
  font-weight: 700; font-size: 16px;
}
.pay-pack-price { color: #00C896; font-size: 20px; }

.pay-google-btn { width: 100%; justify-content: center; gap: 10px; margin-top: 4px; }

.pay-success-sub { font-size: 13px !important; color: rgba(0,200,150,0.8) !important; }

.pay-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(0,200,150,0.2); border-top-color: #00C896;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.pay-account-email { font-size: 13px !important; color: rgba(240,244,255,0.4) !important; }
.pay-account-note { font-size: 13px !important; }
.pay-signout-btn { margin-top: 8px; }

/* ── NAV AUTH BUTTON ── */
#nav-auth-btn {
  background: rgba(0,200,150,0.1); border: 1px solid rgba(0,200,150,0.25);
  color: #00C896; padding: 8px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: 0.2s; white-space: nowrap;
}
#nav-auth-btn:hover { background: rgba(0,200,150,0.2); }

/* ── PRICING BUTTON UPDATE ── */
.pricing-card .btn-buy {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px; border-radius: 12px;
  font-weight: 600; font-size: 14px; cursor: pointer;
  transition: 0.2s; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: #F0F4FF;
}
.pricing-card .btn-buy:hover { border-color: #00C896; color: #00C896; }
.pricing-card-popular .btn-buy {
  background: #00C896; color: #000; border-color: transparent;
  box-shadow: 0 0 24px rgba(0,200,150,0.3);
}
.pricing-card-popular .btn-buy:hover { background: #00e0a8; }