/* ==========================================================================
   Melting-Mindz v2 — Premium Landing Page Styles
   ========================================================================== */

.mm-premium-page {
    padding-top: var(--mm-space-8);
    padding-bottom: var(--mm-space-16);
}

/* ── Already Premium Banner ── */
.mm-premium-already {
    display: flex;
    align-items: center;
    gap: var(--mm-space-4);
    background: linear-gradient(135deg, rgba(249,217,35,0.12), rgba(232,133,61,0.08));
    border: 1px solid rgba(249,217,35,0.35);
    border-radius: var(--mm-radius-xl);
    padding: var(--mm-space-5);
    margin-bottom: var(--mm-space-8);
}
.mm-premium-already-crown { font-size: 2.5rem; flex-shrink: 0; }
.mm-premium-already strong {
    display: block;
    color: var(--mm-accent-gold, #F9D923);
    font-size: var(--mm-text-lg);
    margin-bottom: 0.25rem;
}
.mm-premium-already p {
    margin: 0;
    font-size: var(--mm-text-sm);
    color: var(--mm-text-secondary);
}

/* ── Hero ── */
.mm-pp-hero {
    text-align: center;
    padding: var(--mm-space-10) var(--mm-space-4) var(--mm-space-12);
    position: relative;
}
.mm-pp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(249,217,35,0.08) 0%, transparent 70%);
    pointer-events: none;
    border-radius: var(--mm-radius-2xl);
}
.mm-pp-hero-badge {
    display: inline-block;
    background: linear-gradient(135deg, #F9D923, #E8853D);
    color: #1a1a1a;
    font-size: var(--mm-text-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.3rem 0.9rem;
    border-radius: var(--mm-radius-full);
    margin-bottom: var(--mm-space-4);
}
.mm-pp-hero-title {
    font-family: var(--mm-font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--mm-text-heading);
    margin: 0 0 var(--mm-space-4);
    line-height: 1.15;
}
.mm-pp-hero-sub {
    font-size: var(--mm-text-lg);
    color: var(--mm-text-secondary);
    max-width: 560px;
    margin: 0 auto var(--mm-space-6);
    line-height: 1.6;
}
.mm-pp-hero-cta {
    font-size: var(--mm-text-lg);
    padding: 0.9rem 2.2rem;
    border-radius: var(--mm-radius-full);
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 20px rgba(232,133,61,0.35);
    transition: transform var(--mm-duration) var(--mm-ease), box-shadow var(--mm-duration) var(--mm-ease);
}
.mm-pp-hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(232,133,61,0.5);
}
.mm-pp-hero-note {
    margin-top: var(--mm-space-3);
    font-size: var(--mm-text-xs);
    color: var(--mm-text-muted);
}

/* ── Section Titles ── */
.mm-pp-section-title {
    font-family: var(--mm-font-heading);
    font-size: var(--mm-text-2xl);
    font-weight: 700;
    color: var(--mm-text-heading);
    text-align: center;
    margin: 0 0 var(--mm-space-8);
}

/* ── Notice banners ── */
.mm-pp-notice {
    padding: var(--mm-space-4);
    border-radius: var(--mm-radius-lg);
    margin-bottom: var(--mm-space-6);
    font-size: var(--mm-text-sm);
    text-align: center;
}
.mm-pp-notice-warn {
    background: rgba(232,133,61,0.1);
    border: 1px solid rgba(232,133,61,0.3);
    color: var(--mm-text-secondary);
}

/* ── Manage section ── */
.mm-pp-manage {
    background: var(--mm-bg-card);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-xl);
    padding: var(--mm-space-6);
    margin-bottom: var(--mm-space-10);
}
#mm-sub-status {
    font-size: var(--mm-text-sm);
    color: var(--mm-text-secondary);
}

/* ── Pricing plans ── */
.mm-pp-pricing {
    margin-bottom: var(--mm-space-16);
}
.mm-pp-plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mm-space-5);
    max-width: 600px;
    margin: 0 auto var(--mm-space-4);
}
.mm-pp-plans-4 {
    grid-template-columns: repeat(4, 1fr);
    max-width: 900px;
}
@media (max-width: 800px) {
    .mm-pp-plans-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .mm-pp-plans, .mm-pp-plans-4 { grid-template-columns: 1fr; }
}
.mm-pp-plan {
    position: relative;
    background: var(--mm-bg-card);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-xl);
    padding: var(--mm-space-6) var(--mm-space-5);
    text-align: center;
}
.mm-pp-plan-featured {
    border-color: rgba(249,217,35,0.5);
    background: linear-gradient(160deg, rgba(249,217,35,0.06), var(--mm-bg-card));
    box-shadow: 0 0 0 2px rgba(249,217,35,0.2);
}
.mm-pp-plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #F9D923, #E8853D);
    color: #1a1a1a;
    font-size: var(--mm-text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.8rem;
    border-radius: var(--mm-radius-full);
    white-space: nowrap;
}
.mm-pp-plan-label {
    font-size: var(--mm-text-sm);
    font-weight: 700;
    color: var(--mm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--mm-space-2);
}
.mm-pp-plan-price {
    font-family: var(--mm-font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: var(--mm-text-heading);
    line-height: 1;
    margin-bottom: var(--mm-space-1);
}
.mm-pp-plan-price span {
    font-size: 1.5rem;
}
.mm-pp-plan-price small {
    font-size: var(--mm-text-sm);
    color: var(--mm-text-muted);
    font-weight: 400;
    font-family: var(--mm-font-body);
}
.mm-pp-plan-note {
    font-size: var(--mm-text-xs);
    color: var(--mm-text-muted);
    margin: 0 0 var(--mm-space-4);
}
.mm-pp-plan-lifetime {
    border-color: rgba(185,242,255,0.4);
    background: linear-gradient(160deg, rgba(185,242,255,0.05), var(--mm-bg-card));
}
.mm-pp-plans-note {
    text-align: center;
    font-size: var(--mm-text-xs);
    color: var(--mm-text-muted);
}

/* ── Perks Grid ── */
.mm-pp-perks {
    margin-bottom: var(--mm-space-16);
}
.mm-pp-perks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mm-space-4);
}
@media (min-width: 768px) {
    .mm-pp-perks-grid { grid-template-columns: repeat(4, 1fr); }
}

.mm-pp-perk {
    background: var(--mm-bg-card);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-radius-xl);
    padding: var(--mm-space-5) var(--mm-space-4);
    text-align: center;
    transition: border-color var(--mm-duration) var(--mm-ease), transform var(--mm-duration) var(--mm-ease), box-shadow var(--mm-duration) var(--mm-ease);
}
.mm-pp-perk:hover {
    border-color: rgba(249,217,35,0.4);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.mm-pp-perk-icon {
    font-size: 2.25rem;
    margin-bottom: var(--mm-space-3);
    display: block;
}
.mm-pp-perk h3 {
    font-family: var(--mm-font-heading);
    font-size: var(--mm-text-base);
    font-weight: 700;
    color: var(--mm-text-heading);
    margin: 0 0 var(--mm-space-2);
}
.mm-pp-perk p {
    font-size: var(--mm-text-sm);
    color: var(--mm-text-secondary);
    margin: 0;
    line-height: 1.55;
}

/* ── Comparison Table ── */
.mm-pp-compare {
    margin-bottom: var(--mm-space-16);
}
.mm-pp-compare-wrap {
    overflow-x: auto;
    border-radius: var(--mm-radius-xl);
    border: 1px solid var(--mm-border);
}
.mm-pp-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--mm-bg-card);
    font-size: var(--mm-text-sm);
}
.mm-pp-table th,
.mm-pp-table td {
    padding: 0.75rem 1.2rem;
    text-align: center;
    border-bottom: 1px solid var(--mm-border);
}
.mm-pp-table th:first-child,
.mm-pp-table td:first-child {
    text-align: left;
    color: var(--mm-text-primary);
}
.mm-pp-table tr:last-child td { border-bottom: none; }
.mm-pp-table thead th {
    font-family: var(--mm-font-heading);
    font-weight: 700;
    font-size: var(--mm-text-base);
    background: var(--mm-bg-elevated);
    color: var(--mm-text-heading);
}
.mm-pp-col-premium {
    background: linear-gradient(135deg, rgba(249,217,35,0.1), rgba(232,133,61,0.07)) !important;
    color: var(--mm-accent-gold, #F9D923) !important;
}
.mm-pp-yes { color: var(--mm-accent-success, #48BB78); font-weight: 700; }
.mm-pp-no  { color: var(--mm-text-muted); }
.mm-pp-table tbody tr:hover td {
    background: var(--mm-bg-hover);
}

/* ── Bottom CTA Section ── */
.mm-pp-cta-section {
    margin-bottom: var(--mm-space-16);
}
.mm-pp-cta-box {
    text-align: center;
    background: linear-gradient(135deg, rgba(249,217,35,0.09), rgba(232,133,61,0.07));
    border: 1px solid rgba(249,217,35,0.25);
    border-radius: var(--mm-radius-2xl);
    padding: var(--mm-space-12) var(--mm-space-6);
}
.mm-pp-cta-crown {
    font-size: 3.5rem;
    display: block;
    margin-bottom: var(--mm-space-4);
}
.mm-pp-cta-box h2 {
    font-family: var(--mm-font-heading);
    font-size: var(--mm-text-2xl);
    font-weight: 700;
    color: var(--mm-text-heading);
    margin: 0 0 var(--mm-space-3);
}
.mm-pp-cta-box > p {
    font-size: var(--mm-text-base);
    color: var(--mm-text-secondary);
    max-width: 500px;
    margin: 0 auto var(--mm-space-6);
    line-height: 1.6;
}
.mm-pp-cta-note {
    margin-top: var(--mm-space-4);
    font-size: var(--mm-text-xs);
    color: var(--mm-text-muted);
}
.mm-pp-cta-note a {
    color: var(--mm-accent);
    text-decoration: underline;
}

/* ── Quote ── */
.mm-pp-quote {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
    padding: var(--mm-space-6) var(--mm-space-4);
}
.mm-pp-quote blockquote {
    font-size: var(--mm-text-lg);
    color: var(--mm-text-secondary);
    font-style: italic;
    line-height: 1.7;
    margin: 0 0 var(--mm-space-3);
    position: relative;
}
.mm-pp-quote blockquote::before {
    content: '\201C';
    font-size: 4rem;
    color: rgba(249,217,35,0.25);
    line-height: 0;
    vertical-align: -1.5rem;
    margin-right: 0.15em;
    font-family: Georgia, serif;
}
.mm-pp-quote cite {
    font-size: var(--mm-text-sm);
    color: var(--mm-text-muted);
    font-style: normal;
    font-weight: 600;
}

/* ── Mobile tweaks ── */
@media (max-width: 640px) {
    .mm-pp-hero { padding: var(--mm-space-8) var(--mm-space-2) var(--mm-space-8); }
    .mm-pp-perks-grid { grid-template-columns: 1fr 1fr; }
    .mm-pp-cta-box { padding: var(--mm-space-8) var(--mm-space-4); }
}