/* assets/css/pro.css — Nebulingo Pro upgrade page + nav Pro entry (Phase 25). */
.pro-page{
    max-width:760px;
    margin:0 auto;
    padding:20px 16px 60px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.pro-hero{text-align:center;padding:36px 28px;}
.pro-hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:800;
    font-size:0.8rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--primary);
    background:rgba(111,95,228,0.1);
    padding:6px 14px;
    border-radius:999px;
    margin-bottom:16px;
}
.pro-hero-badge i{color:var(--accent);}
.pro-title{font-family:'Baloo 2',sans-serif;font-size:2.2rem;margin:0 0 10px;color:var(--text-color);}
.pro-sub{color:var(--text-muted);font-size:1rem;line-height:1.6;max-width:520px;margin:0 auto;}

.pro-status{display:flex;align-items:center;gap:16px;padding:22px 24px;flex-wrap:wrap;}
.pro-status-icon{font-size:2rem;color:#22c55e;flex-shrink:0;}
.pro-status-text{flex:1;min-width:180px;}
.pro-status-text h2{margin:0 0 4px;font-size:1.25rem;color:var(--text-color);}
.pro-status-text p{margin:0;color:var(--text-muted);font-size:0.9rem;}

.pro-pricing{text-align:center;padding:30px 24px;}
.pro-plan-toggle{
    display:inline-flex;
    background:var(--bg-color);
    border:1px solid var(--card-border);
    border-radius:999px;
    padding:4px;
    margin-bottom:22px;
    gap:4px;
}
.pro-plan-opt{
    border:none;
    background:transparent;
    color:var(--text-muted);
    font-weight:700;
    font-size:0.9rem;
    padding:9px 20px;
    border-radius:999px;
    cursor:pointer;
    transition:all 0.2s;
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.pro-plan-opt.active{background:var(--primary);color:#fff;box-shadow:0 4px 12px var(--primary-glow);}
.pro-save{
    font-size:0.7rem;
    font-weight:800;
    background:var(--accent);
    color:#fff;
    padding:2px 7px;
    border-radius:999px;
}
.pro-plan-opt.active .pro-save{background:rgba(255,255,255,0.25);}
.pro-price{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-bottom:6px;}
.pro-price-amount{font-family:'Baloo 2',sans-serif;font-size:3rem;font-weight:800;color:var(--text-color);line-height:1;}
.pro-price-period{color:var(--text-muted);font-size:1rem;font-weight:600;}
.pro-price-note{color:var(--text-muted);font-size:0.85rem;margin:0 0 22px;}
.pro-cta{width:100%;max-width:320px;justify-content:center;font-size:1.05rem;padding:15px;}
.pro-secure{
    color:var(--text-muted);
    font-size:0.8rem;
    margin:14px 0 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}

.pro-perks{padding:26px 26px 22px;}
.pro-perks-title{font-family:'Baloo 2',sans-serif;font-size:1.3rem;margin:0 0 18px;color:var(--text-color);}
.pro-perk-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:16px;
}
.pro-perk-list li{display:flex;align-items:flex-start;gap:14px;}
.pro-perk-icon{
    font-size:1.4rem;
    color:var(--primary);
    width:34px;
    text-align:center;
    flex-shrink:0;
    margin-top:2px;
}
.pro-perk-body{display:flex;flex-direction:column;gap:2px;}
.pro-perk-body strong{color:var(--text-color);font-size:1rem;}
.pro-perk-body span{color:var(--text-muted);font-size:0.88rem;line-height:1.5;}
.pro-soon{
    font-style:normal;
    font-size:0.7rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--accent);
    background:var(--accent-glow);
    padding:1px 7px;
    border-radius:999px;
    margin-left:4px;
}
.pro-refer-hint{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--card-border);color:var(--text-muted);font-size:0.88rem;}
.pro-refer-hint i{color:var(--accent);margin-right:6px;}
.pro-refer-hint a{color:var(--primary);font-weight:700;text-decoration:none;}

.nav-go-pro{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-weight:800;
    font-size:0.85rem;
    color:#fff!important;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    padding:8px 16px;
    border-radius:999px;
    box-shadow:0 4px 12px var(--primary-glow);
    transition:transform 0.2s,box-shadow 0.2s;
}
.nav-go-pro:hover{transform:translateY(-1px);box-shadow:0 6px 16px var(--primary-glow);}
.nav-go-pro i{color:#fff!important;}
/* Pro members: a crown sits on the user avatar (replaces the old nav "Pro" pill — see main.js). */
.nav-user-avatar.is-pro{box-shadow:0 0 0 2px var(--accent),0 0 18px rgba(244,162,60,0.22),inset 0 1px rgba(255,255,255,0.22);}
.nav-user-crown{position:absolute;top:-5px;right:-5px;font-size:0.68rem;color:var(--accent);background:var(--card-bg);border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(42,39,64,0.25);}
/* Nav overflow "More" dropdown (main.js applyNavOverflow moves items that don't fit into here). */
.nav-more{position:relative;}
.nav-more-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:none;font-family:inherit;font-size:inherit;font-weight:inherit;color:var(--text-color);cursor:pointer;padding:0;}
.nav-more-btn:hover{color:var(--primary);}
.nav-more-menu{width:210px;left:auto;right:0;}
.nav-more-menu a.dropdown-item{display:flex;align-items:center;gap:10px;}

/* Referral card (Profile → Overview) */
.po-refer{margin-top:18px;padding:18px 20px;background:linear-gradient(135deg,rgba(111,95,228,0.06),rgba(244,162,60,0.06));border:1px solid var(--card-border);border-radius:16px;}
.po-refer-head{font-weight:800;font-size:1.02rem;color:var(--text-color);margin-bottom:4px;}
.po-refer-head i{color:var(--accent);margin-right:7px;}
.po-refer-sub{color:var(--text-muted);font-size:0.88rem;margin:0 0 14px;}
.po-refer-linkrow{display:flex;gap:8px;margin-bottom:12px;}
.po-refer-link{
    flex:1;
    min-width:0;
    padding:10px 12px;
    border:1px solid var(--card-border);
    border-radius:10px;
    background:var(--card-bg);
    color:var(--text-color);
    font-size:0.85rem;
}
.po-refer-copy{flex-shrink:0;padding:10px 16px;}
.po-refer-stats{display:flex;gap:20px;flex-wrap:wrap;color:var(--text-muted);font-size:0.85rem;}
.po-refer-stats strong{color:var(--primary);font-size:1.05rem;}

/* Plan-a-freeze modal (reuses .modal-overlay / .modal-card / .modal-actions) */
.freeze-modal-dates{display:flex;gap:14px;margin:16px 0;flex-wrap:wrap;}
.freeze-modal-dates label{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:0.82rem;
    font-weight:700;
    color:var(--text-muted);
    flex:1;
    min-width:120px;
}
.freeze-modal-dates input{
    padding:9px 11px;
    border:1px solid var(--card-border);
    border-radius:10px;
    background:var(--card-bg);
    color:var(--text-color);
    font-size:0.9rem;
}
.freeze-modal-err{color:#ef4444;font-size:0.82rem;min-height:1em;margin:0;}

@media(max-width:640px){
    .pro-title{font-size:1.8rem;}
    .pro-price-amount{font-size:2.4rem;}
    .pro-status{flex-direction:column;text-align:center;}
    .nav-go-pro{padding:7px 12px;font-size:0.8rem;}
    .po-refer-linkrow{flex-direction:column;}
}