/* Pricing page — extends landing.css tokens (--night, --paper, --accent, --teal, etc.) */

/* pricing.php cuma nge-load bootstrap-icons (font ikon), bukan bootstrap.css penuh -
   jadi utility class d-none yang dipakai buat toggle harga Bulanan/Tahunan perlu
   didefinisikan manual di sini, kalau tidak dua-duanya bakal kelihatan numpuk sekaligus. */
.d-none { display: none !important; }


.pr-hero { background: var(--night); color: #fff; padding: 70px 0 46px; text-align: center; }
.pr-h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 700; margin: 0 0 14px; letter-spacing: -0.01em; }
.pr-sub { color: var(--night-text); max-width: 560px; margin: 0 auto 30px; font-size: 1.02rem; line-height: 1.6; }

.pr-toggle { display: inline-flex; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 40px; padding: 4px; gap: 4px; }
.pr-toggle button {
    border: none; background: transparent; color: var(--night-text); font-weight: 600; font-size: 0.88rem;
    padding: 9px 18px; border-radius: 30px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.pr-toggle button.active { background: var(--accent); color: #fff; }
.pr-save { font-size: 0.72rem; opacity: 0.85; margin-left: 4px; }

.pr-locked-banner {
    margin-top: 24px; background: var(--accent-soft); color: var(--accent-dark); border: 1px solid var(--accent);
    border-radius: 12px; padding: 14px 18px; font-size: 0.92rem;
}

.pr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.pr-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 30px 26px;
    display: flex; flex-direction: column; position: relative;
}
.pr-card.pr-highlight { border: 2px solid var(--accent); box-shadow: 0 20px 45px -25px rgba(255,90,54,0.35); }
.pr-card.pr-current { border-color: var(--teal); }
.pr-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 5px 14px; border-radius: 20px;
    white-space: nowrap;
}
.pr-badge-current { background: var(--teal); }

.pr-plan-name { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 700; margin: 6px 0 4px; }
.pr-plan-tagline { color: var(--muted); font-size: 0.86rem; margin: 0 0 20px; }

.pr-price { margin-bottom: 22px; }
.pr-amount { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700; }
.pr-period { color: var(--muted); font-size: 0.84rem; margin-left: 3px; }

.pr-features { list-style: none; padding: 0; margin: 0 0 26px; flex-grow: 1; }
.pr-features li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.9rem; padding: 7px 0; color: var(--ink); }
.pr-features li i { margin-top: 3px; color: var(--teal); flex-shrink: 0; }
.pr-features li.pr-off { color: var(--muted); }
.pr-features li.pr-off i { color: #c9beb2; }

.pr-cta { width: 100%; text-align: center; justify-content: center; }
.pr-downgrade-note { display: block; text-align: center; color: var(--muted); font-size: 0.82rem; padding: 12px 0; }

.pr-note { text-align: center; color: var(--muted); font-size: 0.86rem; margin-top: 34px; }
.pr-note a { color: var(--accent-dark); font-weight: 600; }

@media (max-width: 900px) {
    .pr-grid { grid-template-columns: 1fr; }
}