/* ══════ STYLE V2 — Sphere Map UI (A/B test overlay) ══════ */
/* Loaded AFTER style.css — only sphere-specific additions */

/* ══════ LIFE SPHERES MAP ══════ */
.spheres-map {
    margin-top:2.5rem;
    display:none;
    animation:fadeUp .8s forwards;
}
.spheres-map.visible { display:block; }

.spheres-header { text-align:center; margin-bottom:2rem; }
.spheres-progress { margin-bottom:1.2rem; }
.spheres-progress-bar {
    width:100%; max-width:280px; height:3px; margin:0 auto .6rem;
    background:rgba(107,63,160,.2); position:relative; overflow:hidden;
}
.spheres-progress-fill {
    width:16.7%; height:100%;
    background:linear-gradient(90deg,var(--gold),var(--gold-light));
    transition:width .6s;
}
.spheres-progress-label {
    font-size:.72rem; color:var(--text-muted); letter-spacing:.15em; text-transform:uppercase;
}
.spheres-title {
    font-family:'Cormorant Garamond',serif; font-size:1.6rem; color:var(--gold);
    margin-bottom:.4rem; font-weight:400;
}
.spheres-subtitle {
    font-size:.88rem; color:var(--text-soft); line-height:1.6; max-width:420px; margin:0 auto;
}

/* Grid */
.spheres-grid { display:flex; flex-direction:column; gap:.5rem; }

/* Card */
.sphere-card {
    background:linear-gradient(135deg,rgba(30,16,64,.35),rgba(107,63,160,.06));
    border:1px solid rgba(107,63,160,.15);
    position:relative; transition:all .3s; overflow:hidden;
}
.sphere-row {
    display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem;
}

/* Open state */
.sphere-card.sphere-open {
    border-color:rgba(212,165,74,.25);
    background:linear-gradient(135deg,rgba(212,165,74,.06),rgba(107,63,160,.08));
}

/* Locked state */
.sphere-card.sphere-locked { cursor:pointer; }
.sphere-card.sphere-locked:hover {
    border-color:rgba(212,165,74,.2);
    background:linear-gradient(135deg,rgba(212,165,74,.04),rgba(107,63,160,.1));
}

/* Icon */
.sphere-icon {
    flex-shrink:0; width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.15rem; color:var(--gold);
    background:rgba(212,165,74,.08); border:1px solid rgba(212,165,74,.15);
    border-radius:50%;
    font-variant-emoji:text; /* prevent emoji rendering */
    line-height:1;
}
.sphere-icon svg { stroke:currentColor; }
.sphere-locked .sphere-icon {
    color:var(--text-muted);
    background:rgba(107,63,160,.1); border-color:rgba(107,63,160,.2);
}
.sphere-locked.sphere-expanded .sphere-icon {
    color:var(--gold-light);
    background:rgba(212,165,74,.1); border-color:rgba(212,165,74,.2);
}

/* Body */
.sphere-body { flex:1; min-width:0; }
.sphere-name {
    font-family:'Cormorant Garamond',serif; font-size:1.15rem; color:var(--gold);
    margin-bottom:.1rem; font-weight:500; letter-spacing:.01em;
}
.sphere-open .sphere-name { color:var(--gold-light); }
.sphere-locked .sphere-name { color:var(--cream); }
.sphere-locked:hover .sphere-name { color:var(--gold); }
.sphere-teaser { font-size:.78rem; color:var(--text-muted); line-height:1.5; }

/* Lock badge */
.sphere-lock-badge {
    flex-shrink:0; display:flex; align-items:center; gap:.35rem;
    font-size:.65rem; letter-spacing:.08em; text-transform:uppercase;
    color:#e07090; opacity:1;
    padding:.25rem .6rem;
    background:rgba(224,112,144,.06); border:1px solid rgba(224,112,144,.25);
    white-space:nowrap;
}
.sphere-lock-badge svg { opacity:.8; stroke:#e07090; }
.sphere-locked:hover .sphere-lock-badge {
    color:var(--gold); opacity:1;
    background:rgba(212,165,74,.06); border-color:rgba(212,165,74,.2);
}
.sphere-locked:hover .sphere-lock-badge svg { opacity:1; stroke:var(--gold); }

/* Expandable content */
.sphere-expand {
    max-height:0; overflow:hidden; transition:max-height .4s ease; position:relative;
}
.sphere-expand-visible,
.sphere-expanded .sphere-expand { max-height:280px; }
.sphere-expand-text {
    padding:0 1.2rem 3.5rem 4.2rem;
    font-size:.84rem; color:var(--text-soft); line-height:1.7; position:relative;
}

/* Blur wall */
.sphere-blur-wall {
    position:absolute; bottom:0; left:0; right:0;
    height:100%; min-height:70px;
    background:linear-gradient(transparent 0%, rgba(13,8,32,.4) 30%, rgba(13,8,32,.85) 60%, rgba(13,8,32,.97) 100%);
    display:flex; align-items:flex-end; justify-content:center; padding-bottom:.8rem;
}
.sphere-open .sphere-blur-wall {
    height:2.5em;
    background:linear-gradient(transparent, rgba(13,8,32,.92));
}
.sphere-open .sphere-blur-wall .btn-sphere-unlock { display:none; }

/* Unlock button */
.btn-sphere-unlock {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.5rem 1.2rem;
    background:linear-gradient(135deg,rgba(212,165,74,.15),rgba(212,165,74,.08));
    border:1px solid rgba(212,165,74,.35);
    color:var(--gold); font-family:'Nunito Sans',sans-serif;
    font-size:.75rem; font-weight:500; letter-spacing:.08em;
    cursor:pointer; transition:all .3s; text-transform:uppercase;
}
.btn-sphere-unlock:hover {
    background:linear-gradient(135deg,rgba(212,165,74,.25),rgba(212,165,74,.15));
    border-color:var(--gold); box-shadow:0 4px 20px rgba(212,165,74,.2);
}
.btn-sphere-unlock svg { stroke:var(--gold); }

/* Badge */
.sphere-badge {
    flex-shrink:0; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; padding:.2rem .5rem;
}
.sphere-badge-preview {
    color:var(--teal); background:rgba(64,176,160,.08); border:1px solid rgba(64,176,160,.25);
}

/* CTA block */
.spheres-cta {
    margin-top:1.5rem; padding:1.5rem;
    background:linear-gradient(135deg,rgba(212,165,74,.06),rgba(107,63,160,.08));
    border:1px solid rgba(212,165,74,.15);
    text-align:center; position:relative;
}
.spheres-cta::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(212,165,74,.4),transparent);
}
.spheres-cta-note {
    font-size:.82rem; color:var(--text-soft); margin-bottom:1rem; line-height:1.5; font-style:italic;
}
.spheres-cta-price {
    display:flex; align-items:baseline; justify-content:center; gap:.4rem; margin-bottom:1rem;
}
.spheres-cta-price-num {
    font-family:'Cormorant Garamond',serif; font-size:2.4rem; color:var(--gold); font-weight:300;
}
.spheres-cta-price-cur { font-size:.9rem; color:var(--text-muted); }
.spheres-cta-price-desc { font-size:.82rem; color:var(--text-muted); }

/* Modal spheres list */
.modal-spheres-list {
    display:grid; grid-template-columns:1fr 1fr; gap:.35rem .8rem;
    margin-bottom:1rem; padding:.8rem;
    background:rgba(107,63,160,.06); border:1px solid rgba(107,63,160,.12);
}
.modal-sphere-item {
    font-size:.76rem; color:var(--cream-muted); padding:.2rem 0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ══════ MOBILE ══════ */
@media(max-width:600px){
    .spheres-map { margin-top:1.5rem; }
    .spheres-title { font-size:1.3rem; }
    .spheres-subtitle { font-size:.82rem; }
    .sphere-row { padding:.8rem 1rem; gap:.7rem; }
    .sphere-icon { width:32px; height:32px; font-size:.95rem; }
    .sphere-name { font-size:1rem; }
    .sphere-teaser { font-size:.7rem; }
    .sphere-lock-badge { font-size:.58rem; padding:.2rem .45rem; gap:.25rem; }
    .sphere-lock-badge svg { width:11px; height:11px; }
    .sphere-badge { font-size:.52rem; }
    .sphere-expand-text { padding:0 1rem .8rem 3.2rem; font-size:.8rem; }
    .btn-sphere-unlock { font-size:.68rem; padding:.45rem 1rem; }
    .spheres-cta { padding:1.2rem 1rem; }
    .spheres-cta-price-num { font-size:2rem; }
    .spheres-cta-note { font-size:.76rem; }
    .modal-spheres-list { grid-template-columns:1fr; gap:.25rem; padding:.6rem; }
    .modal-sphere-item { font-size:.72rem; }
}