/* =============================================
   Paywall — Full-screen subscription overlay
   ============================================= */

.paywall-active {
  overflow: hidden !important;
}

.paywall-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 22, 16, 0.65);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  padding: var(--space-md);
  overflow-y: auto;
}

.paywall-overlay.paywall-visible {
  opacity: 1;
}

.paywall-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--color-surface-solid);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25),
              0 0 0 1px rgba(255, 255, 255, 0.1);
  text-align: center;
  transform: translateY(20px);
  animation: paywall-slide-up 0.5s var(--ease-spring) 0.15s forwards;
  overflow: hidden;
}

.paywall-glow {
  position: absolute;
  top: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(160, 120, 80, 0.15), transparent 70%);
  pointer-events: none;
}

/* ── Icon ── */

.paywall-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 8px 24px rgba(160, 120, 80, 0.35);
  animation: paywall-icon-pulse 2.5s ease-in-out infinite;
}

/* ── Title / subtitle ── */

.paywall-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
}

.paywall-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-xl);
  line-height: var(--line-height-relaxed);
}

/* ── Features ── */

.paywall-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  text-align: left;
}

.paywall-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.paywall-feature-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.paywall-feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}

.paywall-feature-text strong {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.paywall-feature-text span {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

/* ── Price ── */

.paywall-price {
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-xs);
}

.paywall-price-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
}

.paywall-price-period {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-regular);
}

/* ── Button ── */

.paywall-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 14px var(--space-lg);
  border: none;
  border-radius: var(--radius-md);
  background: var(--gradient-primary);
  color: #fff;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family);
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: box-shadow var(--transition-base), transform var(--transition-fast);
}

.paywall-btn:hover:not(:disabled) {
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-1px);
}

.paywall-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.paywall-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ── Skip button ── */

.paywall-skip-btn {
  display: block;
  width: 100%;
  padding: 12px var(--space-lg);
  margin-top: var(--space-sm);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface-secondary, rgba(0, 0, 0, 0.05));
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  font-family: var(--font-family);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}

.paywall-skip-btn:hover {
  background: var(--color-surface-tertiary, rgba(0, 0, 0, 0.08));
  color: var(--color-text-secondary);
}

.paywall-skip-btn:active {
  background: var(--color-surface-tertiary, rgba(0, 0, 0, 0.1));
}

/* ── Hint ── */

.paywall-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin: var(--space-md) 0 0;
}

/* ── Animations ── */

@keyframes paywall-slide-up {
  from {
    transform: translateY(20px);
    opacity: 0.5;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes paywall-icon-pulse {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(160, 120, 80, 0.35);
  }
  50% {
    box-shadow: 0 8px 32px rgba(160, 120, 80, 0.55),
                0 0 0 8px rgba(160, 120, 80, 0.08);
  }
}

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