/* --------------------------------------------------------------------------
   17. PREMIUM
   -------------------------------------------------------------------------- */
.premium-body { background-color: var(--bg-dark); color: var(--text-white); }

.premium-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--sp-11) var(--sp-8) 80px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
}

.premium-hero { text-align: center; max-width: 600px; margin: 0 auto; }

.premium-badge {
    color: var(--brand-accent);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .15em;
    background-color: rgba(129, 140, 248, .1);
    padding: var(--sp-2) var(--sp-7);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(129, 140, 248, .2);
}

.premium-title { font-size: var(--fs-6xl); font-weight: var(--fw-extrabold); margin-top: var(--sp-8); letter-spacing: -.02em; }
.premium-title span { color: var(--brand-accent); }
.premium-subtitle { color: var(--text-gray); font-size: var(--fs-xl); line-height: 1.6; margin-top: var(--sp-5); }
.single-plan-wrapper { width: 100%; }

.premium-single-card {
    background-color: var(--bg-card);
    border: 2px solid var(--brand-accent);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 40px -15px rgba(129, 140, 248, .15);
    position: relative;
}

@media (min-width: 768px) {
    .premium-single-card { flex-direction: row; }
}

.card-left-info {
    flex: 1.2;
    padding: var(--sp-11);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
    .card-left-info {
        border-bottom: none;
        border-right: 1px solid var(--border);
        padding: var(--sp-12);
    }
}

.tier-label    { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--brand-accent); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--sp-3); }
.plan-name     { font-size: var(--fs-4xl); font-weight: var(--fw-bold); margin-bottom: var(--sp-5); }
.plan-description { color: var(--text-gray); font-size: var(--fs-lg); line-height: 1.5; margin-bottom: var(--sp-9); }

.price-display { margin-bottom: var(--sp-9); display: flex; align-items: baseline; gap: var(--sp-2); }
.currency-amount { font-size: var(--fs-7xl); font-weight: var(--fw-black); color: var(--text-white); }
.currency-period { font-size: var(--fs-xl); color: var(--text-gray); }

.btn-subscribe-now {
    background-color: var(--brand-accent);
    color: var(--text-white);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    border: none;
    padding: var(--sp-7);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color var(--t-normal), transform .1s;
    box-shadow: 0 4px 12px rgba(129, 140, 248, .3);
    font-family: inherit;
}

.btn-subscribe-now:hover  { background-color: var(--brand-accent-hover); }
.btn-subscribe-now:active { transform: scale(.98); }

.cancel-anytime-text { font-size: var(--fs-sm); color: var(--text-gray); text-align: center; margin-top: var(--sp-7); }

.card-right-features {
    flex: 1;
    background-color: rgba(22, 32, 50, .2);
    padding: var(--sp-11);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 768px) {
    .card-right-features { padding: var(--sp-12); }
}

.card-right-features h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin-bottom: var(--sp-8); }

.features-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-7); }

.features-list li { display: flex; align-items: flex-start; gap: var(--sp-5); font-size: var(--fs-lg); line-height: 1.4; }

.check-icon   { color: var(--green); display: inline-flex; align-items: center; }
.feature-text { color: var(--text-white); }

.premium-footer-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-10);
    border-top: 1px solid var(--border);
    padding-top: var(--sp-10);
}

.info-box      { display: flex; flex-direction: column; gap: var(--sp-3); }
.info-icon     { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(61,219,217,.1); color: var(--brand-accent, #3ddbd9); margin-bottom: var(--sp-1); }
.info-box h4   { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.info-box p    { font-size: var(--fs-md); color: var(--text-gray); line-height: 1.5; }