/* ══════ CALC3 — calculator page with chart table + full nav ══════ */
/* Scoped to .page-calc3 — does NOT affect расчет/расчет2 */

/* ══ NAV — transparent by default, solid on scroll (same as homepage) ══ */
.page-calc3 nav {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    padding:.8rem 2.5rem;
    display:flex; justify-content:space-between; align-items:center;
    background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
    transition:background .3s, border-color .3s, backdrop-filter .3s;
    border-bottom:1px solid transparent;
}
.page-calc3 nav.scrolled {
    /* плотный фон: размытие на телефоне может не примениться, и тогда
       полупрозрачность оставляет текст видимым сквозь шапку (13.08.2026) */
    background:#080510; backdrop-filter:none; -webkit-backdrop-filter:none;
    border-bottom:1px solid rgba(212,165,74,.06);
}
.page-calc3 .nav-logo {
    font-family:'Cormorant Garamond',serif;
    font-size:1.15rem; color:var(--gold);
    text-decoration:none; letter-spacing:.08em; white-space:nowrap;
}
.page-calc3 .nav-links {
    display:flex; gap:1.8rem; align-items:center; list-style:none; margin:0; padding:0;
}
.page-calc3 .nav-links li { list-style:none; }
.page-calc3 .nav-links a {
    font-family:'Nunito Sans',sans-serif;
    font-size:.78rem; color:var(--text-muted);
    text-decoration:none; letter-spacing:.04em;
    transition:color .2s;
}
.page-calc3 .nav-links a:hover { color:var(--gold); }
.page-calc3 .nav-cta {
    padding:.45rem 1.1rem;
    background:linear-gradient(135deg,rgba(212,165,74,.15),rgba(212,165,74,.08));
    border:1px solid rgba(212,165,74,.3);
    border-radius:6px;
    color:var(--gold) !important; font-weight:500;
    font-size:.75rem !important; letter-spacing:.06em;
    transition:all .3s;
}
.page-calc3 .nav-cta:hover { box-shadow:0 4px 20px rgba(212,165,74,.35); }
.page-calc3 .nav-social-desktop {
    display:flex; gap:.6rem; align-items:center;
}
.page-calc3 .nav-social-icon {
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%;
    border:1px solid rgba(107,63,160,.2);
    color:var(--text-muted) !important; transition:all .3s;
}
.page-calc3 .nav-social-icon:hover { border-color:rgba(212,165,74,.4); color:var(--gold) !important; }
.page-calc3 .nav-social-icon svg { width:16px; height:16px; }
.page-calc3 .nav-social-mobile { display:none; }
.page-calc3 .mobile-toggle { display:none; }
.page-calc3 .nav-auth-icons { display:flex; align-items:center; gap:.5rem; margin-left:-.8rem; }
.page-calc3 .nav-auth-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; padding:0;
    background:none; border:none; cursor:pointer;
    color:var(--text-muted); transition:color .2s; text-decoration:none; line-height:1;
}
.page-calc3 .nav-auth-icon:hover { color:var(--gold) !important; }
.page-calc3 .nav-auth-icon svg { width:17px; height:17px; display:block; }

/* ══ PAGE — wider for table ══ */
.page-calc3 .main { max-width:880px; padding-top:4.5rem; }

/* ══ SEO content blocks (hidden after calculation) ══ */
.page-calc3 .seo-blocks { margin-top:2.5rem; }
.page-calc3 .seo-block {
    background:linear-gradient(135deg,rgba(30,16,64,.2),rgba(13,8,32,.4));
    border:1px solid rgba(107,63,160,.12);
    border-radius:16px; padding:2rem 2.2rem; margin-bottom:1.5rem;
    position:relative; overflow:hidden;
}
.page-calc3 .seo-block::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,transparent,rgba(212,165,74,.2),transparent);
}
.page-calc3 .seo-block h2 {
    font-family:'Cormorant Garamond',serif;
    font-size:1.6rem; color:var(--gold); font-weight:500;
    margin:0 0 .8rem; line-height:1.3;
}
.page-calc3 .seo-block p {
    font-size:.95rem; color:var(--text-soft); line-height:1.7; margin:0 0 .6rem;
}
.page-calc3 .seo-block p:last-child { margin-bottom:0; }

/* ══ Tabs — Personal / Compatibility ══ */
.page-calc3 .calc-tabs {
    display:flex; gap:0; margin-bottom:0; justify-content:center;
    background:none; border:none; padding:0;
    max-width:70%; margin-left:auto; margin-right:auto;
}
.page-calc3 .calc-tab {
    flex:1; padding:.5rem 1.5rem; font-size:.68rem; letter-spacing:.04em;
    font-family:'Nunito Sans',sans-serif; cursor:pointer;
    background:transparent;
    border:1px solid rgba(107,63,160,.35);
    border-bottom:none;
    border-radius:8px 8px 0 0;
    color:var(--text-muted); opacity:.45;
    transition:all .2s; text-align:center;
}
.page-calc3 .calc-tab.active {
    opacity:.7; color:var(--text-muted);
    background:rgba(107,63,160,.03);
    border-color:rgba(107,63,160,.35);
}
.page-calc3 .calc-tab:hover:not(.active) { opacity:.55; }

/* ══ Compatibility — number badge + gender in row ══ */
.page-calc3 .compat-num {
    display:inline-flex; align-items:center; justify-content:center;
    width:12px; height:12px; border-radius:50%;
    border:1px solid rgba(212,165,74,.3); color:var(--gold);
    font-size:.45rem; font-weight:600; margin-right:.15rem;
    position:relative; top:-.05rem;
}
.page-calc3 .form-group--gender {
    flex:0 0 auto !important; min-width:0;
}
.page-calc3 .form-group--gender .compat-gender {
    display:flex; align-items:stretch; gap:.2rem;
}

/* ══ Gender selector (inline, compact) ══ */
.page-calc3 .compat-gender {
    display:inline-flex; gap:.2rem;
}
.page-calc3 .gender-btn {
    font-size:.85rem; letter-spacing:.03em;
    font-family:'Nunito Sans',sans-serif; cursor:pointer;
    background:rgba(255,255,255,.04); border:1px solid rgba(212,165,74,.12);
    color:var(--text-muted); border-radius:6px; transition:all .2s;
    padding:0 .7rem; box-sizing:border-box;
    /* Force exact same height as adjacent .form-input */
    height:2.6rem; display:inline-flex; align-items:center;
}
.page-calc3 .gender-btn.active {
    border-color:rgba(212,165,74,.4); color:var(--gold);
    background:rgba(212,165,74,.06);
}
.page-calc3 .gender-btn:hover:not(.active) { border-color:rgba(212,165,74,.2); }

/* ══ Compact data bar ══ */
.page-calc3 .form-compact {
    text-align:center; padding:.7rem 1.2rem;
    background:linear-gradient(135deg,rgba(30,16,64,.3),rgba(8,5,16,.5));
    border:1px solid rgba(107,63,160,.12);
    margin-bottom:.8rem;
}

/* ══ Recalculate button (compact bar) ══ */
.compact-recalc {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.45rem 1.2rem;
    background:rgba(212,165,74,.06); border:1px solid rgba(212,165,74,.35);
    color:var(--gold); font-family:'Nunito Sans',sans-serif;
    font-size:.72rem; letter-spacing:.06em; cursor:pointer;
    transition:all .3s; margin-top:.5rem; border-radius:4px;
}
.compact-recalc:hover { background:rgba(212,165,74,.12); border-color:var(--gold); box-shadow:0 0 12px rgba(212,165,74,.15); }

/* ══ Inline form — astro-prognoz style card ══ */
.page-calc3 .form-card {
    padding:1.5rem 1.8rem 1.8rem;
    border-radius:12px;
    background:rgba(107,63,160,.05);
    border:1px solid rgba(107,63,160,.12);
    max-width:820px;
    margin:0 auto;
}
.page-calc3 .form-inline-row {
    display:flex; gap:.6rem; align-items:flex-end;
}
.page-calc3 .form-inline-row > .form-group {
    flex:0 0 auto; min-width:0; margin-bottom:0;
}
.page-calc3 .form-inline-row > #grp-name { flex:0 0 120px; }
.page-calc3 .form-inline-row > [id$="-name"] { flex:0 0 120px; }
.page-calc3 .form-inline-row > #grp-date,
.page-calc3 .form-inline-row > [id$="-date"] { flex:0 0 120px; }
.page-calc3 .form-inline-row > #grp-time,
.page-calc3 .form-inline-row > [id$="-time"] { flex:0 0 110px; }
.page-calc3 .form-inline-row > #grp-city,
.page-calc3 .form-inline-row > [id$="-city"] { flex:1 1 auto; min-width:140px; }

/* Labels */
.page-calc3 .form-inline-row .form-label {
    display:block; font-size:.58rem; color:var(--text-muted);
    margin-bottom:.15rem; letter-spacing:.05em; text-transform:uppercase; line-height:1;
}
.page-calc3 .form-inline-row .form-label span { font-size:.5rem; opacity:.7; text-transform:none; }

/* Inputs — astro-prognoz style */
.page-calc3 .form-inline-row .form-input {
    width:100%; padding:.65rem .8rem; font-size:.85rem;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(212,165,74,.12);
    border-radius:6px; color:var(--cream); outline:none;
    font-family:'Nunito Sans',sans-serif;
    transition:border-color .3s;
}
.page-calc3 .form-inline-row .form-input:focus {
    border-color:var(--gold);
}
.page-calc3 .form-inline-row .form-input::placeholder {
    color:var(--text-muted); opacity:.5;
}
/* Kill browser autofill yellow background */
.page-calc3 .form-inline-row .form-input:-webkit-autofill,
.page-calc3 .form-inline-row .form-input:-webkit-autofill:hover,
.page-calc3 .form-inline-row .form-input:-webkit-autofill:focus {
    -webkit-box-shadow:0 0 0 50px rgba(8,5,16,1) inset !important;
    -webkit-text-fill-color:var(--cream) !important;
    border-color:rgba(212,165,74,.2) !important;
    transition:background-color 5000s ease-in-out 0s;
}

/* Input icons (date/time pickers) */
.page-calc3 .form-inline-row .input-with-icon { position:relative; }
.page-calc3 .form-inline-row .input-icon {
    position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
    opacity:.3; cursor:pointer; transition:opacity .2s;
}
.page-calc3 .form-inline-row .input-icon:hover { opacity:.6; }
.page-calc3 .form-inline-row .input-icon svg { width:14px; height:14px; stroke:var(--gold); fill:none; stroke-width:1.5; }

/* Unknown time checkbox — hidden on calc3, kept in DOM for JS compatibility */

/* City dropdown — ALL city suggestions on calc3, including compat */
.page-calc3 .city-wrapper { position:relative; }
.page-calc3 .city-suggestions {
    z-index:9999 !important;
    background:rgb(13,8,32) !important;
    border:1px solid rgba(212,165,74,.15) !important;
    border-radius:0 0 6px 6px !important;
    box-shadow:0 8px 24px rgba(0,0,0,.8) !important;
    position:absolute !important; top:100% !important; left:0 !important; right:0 !important;
    max-height:220px !important; overflow-y:auto !important;
}
/* Ensure city group with open dropdown sits above everything */
.page-calc3 .form-group:has(.city-suggestions[style*="block"]) {
    z-index:9000 !important; position:relative;
}
/* Fallback: all city groups above other form rows */
.page-calc3 [id$="-city"],
.page-calc3 #grp-city { z-index:100; position:relative; }
/* First compat row above second */
.page-calc3 .form-inline-row { position:relative; z-index:1; }
.page-calc3 .form-inline-row:first-of-type { z-index:3; }
.page-calc3 .form-inline-row:nth-of-type(2) { z-index:2; }

/* Error messages */
.page-calc3 .form-inline-row .form-error { font-size:.62rem; }

/* Button — gold gradient like astro-prognoz */
.page-calc3 .btn-calculate {
    width:100%; padding:.85rem 2rem; margin-top:.8rem;
    background:linear-gradient(135deg,var(--gold-dark),var(--gold));
    color:var(--deep); font-weight:600; font-size:.92rem;
    border:none; border-radius:6px; cursor:pointer;
    font-family:'Nunito Sans',sans-serif;
    transition:all .3s; letter-spacing:.03em;
}
.page-calc3 .btn-calculate:hover {
    box-shadow:0 4px 20px rgba(212,165,74,.3);
}
.page-calc3 .btn-calculate .btn-spinner {
    border-color:rgba(8,5,16,.2); border-top-color:var(--deep);
}

/* ══ NAV BREAKPOINT ══ */
/* Nav уходит в бургер на 960px — на Galaxy Z Fold (unfolded) 906px
   элементы меню наслаивались на логотип/кнопку. */
/* Навигация уходит в бургер на 1260px. Замер 13.08.2026: десктопное меню
   переносится на вторую строку уже на 1220px, а с 1250px упирается в логотип.
   Прежние 960/768px оставляли полосу в 250-300px, где шапка была сломана. */
@media(max-width:1260px) {
    .page-calc3 .nav-links {
        display:none; position:fixed; top:0; left:0; right:0;
        flex-direction:column; gap:0;
        background:rgba(8,5,16,.98); backdrop-filter:blur(30px);
        padding:3.5rem 1.5rem 1.5rem;
        border-bottom:1px solid rgba(212,165,74,.1); z-index:999;
    }
    .page-calc3 .nav-links.open { display:flex; }
    .page-calc3 .nav-links li {
        padding:.7rem 0;
        border-bottom:1px solid rgba(107,63,160,.08);
    }
    .page-calc3 .nav-links li:last-child { border-bottom:none; }
    .page-calc3 .nav-links a { font-size:.9rem; color:var(--cream-muted); }
    .page-calc3 .nav-cta { display:block; text-align:center; margin-top:.3rem; }
    .page-calc3 .nav-social-desktop { display:none; }
    .page-calc3 .nav-social-mobile {
        display:flex; gap:.8rem; justify-content:center;
        padding-top:.5rem; border-top:1px solid rgba(107,63,160,.15); margin-top:.5rem;
    }
    .page-calc3 .mobile-toggle {
        display:flex; flex-direction:column; gap:4px;
        background:none; border:none; cursor:pointer; padding:6px; z-index:1001;
    }
    .page-calc3 .mobile-toggle span {
        display:block; width:20px; height:2px; background:var(--cream-muted); transition:all .3s;
    }
    /* Иконка личного кабинета в бургере: без черты снизу, по центру, крупнее */
    .page-calc3 .nav-links li.nav-auth-icons {
        border-bottom:none;
        display:flex;
        justify-content:center;
        margin-left:0;
        padding:.7rem 0 .2rem;
    }
    .page-calc3 .nav-auth-icons .nav-auth-icon { width:auto; height:auto; }
    .page-calc3 .nav-auth-icons .nav-auth-icon svg { width:26px; height:26px; }
    /* Убираем сепаратор между "Рассчитать Накшатры" (CTA-кнопка) и иконкой кабинета */
    .page-calc3 .nav-links li:has(.nav-cta) { border-bottom:none; }
    /* Сжимаем отступ между иконкой и соц. сетями — сепаратор (border-top) остаётся */
    .page-calc3 .nav-social-mobile { margin-top:.2rem; padding-top:.4rem; }
}

/* ══ MOBILE ══ */
@media(max-width:768px){
    .page-calc3 nav { padding:.7rem 1rem; background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
    .page-calc3 nav.scrolled { background:#080510 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

    .page-calc3 .seo-block { padding:1.4rem 1.2rem; }
    .page-calc3 .seo-block h2 { font-size:1.3rem; }
    .page-calc3 .seo-block p { font-size:.88rem; line-height:1.6; }

    /* Inline form → stack on mobile, full width fields */
    .page-calc3 .form-card { padding:1.2rem 1rem 1.4rem; }
    .page-calc3 .form-inline-row { flex-direction:row; flex-wrap:wrap; gap:0 .5rem; }
    .page-calc3 .form-inline-row > .form-group { flex:1 1 100% !important; min-width:0; margin-bottom:.1rem; }
    .page-calc3 .form-inline-row > [id$="-name"] { flex:1 1 50% !important; }
    .page-calc3 .form-inline-row > .form-group--gender { flex:1 1 40% !important; }
    .page-calc3 .form-inline-row .form-label { font-size:.7rem; margin-top:.8rem; margin-bottom:.2rem; }
    .page-calc3 .form-inline-row > .form-group:first-child .form-label { margin-top:0; }
    /* Date + Time side by side on mobile */
    .page-calc3 .form-inline-row > #grp-date,
    .page-calc3 .form-inline-row > [id$="-date"] { flex:1 1 50% !important; }
    .page-calc3 .form-inline-row > #grp-time,
    .page-calc3 .form-inline-row > [id$="-time"] { flex:1 1 40% !important; }
    .page-calc3 .form-inline-row .form-input { padding:.7rem .9rem; font-size:.9rem; }
    .page-calc3 .btn-calculate { padding:1rem 2rem; font-size:.95rem; }

    .page-calc3 .compat-slider-dots { flex-wrap:wrap; }
    .page-calc3 .compat-dot-label { display:none; }
    .page-calc3 .compat-slider-text { font-size:.88rem; padding:0 .5rem; }
}

/* ══════════════════════════════════════════════════════════════
   COMPATIBILITY SLIDER
   ══════════════════════════════════════════════════════════════ */

.page-calc3 .compat-result { margin-top:1rem; }

.page-calc3 .compat-slider-card {
    background:rgba(107,63,160,.04); border:1px solid rgba(107,63,160,.1);
    border-radius:12px; padding:1.5rem 2rem 1.5rem; margin-top:1rem;
}

/* Header: icon + pair names */
.page-calc3 .compat-slider-header {
    display:flex; align-items:center; gap:.8rem; margin-bottom:1.2rem;
}
.page-calc3 .compat-slider-icon {
    font-size:1.8rem; color:var(--gold); opacity:.6;
}
.page-calc3 .compat-slider-eyebrow {
    font-size:.65rem; color:var(--text-muted); letter-spacing:.08em; text-transform:uppercase;
}
.page-calc3 .compat-slider-pair {
    font-family:'Cormorant Garamond',serif; font-size:1.3rem; color:var(--cream);
}

/* Dots / slide navigation */
.page-calc3 .compat-slider-dots {
    display:flex; gap:.4rem; margin-bottom:1rem; justify-content:center;
}
.page-calc3 .compat-dot {
    display:flex; align-items:center; gap:.3rem;
    padding:.3rem .7rem; border-radius:20px; cursor:pointer;
    border:1px solid rgba(107,63,160,.12);
    background:transparent; transition:all .3s;
    opacity:.4;
}
.page-calc3 .compat-dot.done { opacity:.6; border-color:rgba(212,165,74,.15); }
.page-calc3 .compat-dot.active {
    opacity:1; border-color:rgba(212,165,74,.35);
    background:rgba(212,165,74,.06);
}
.page-calc3 .compat-dot.loading {
    animation:compatPulse 1.5s ease-in-out infinite;
}
@keyframes compatPulse { 0%,100%{opacity:.3} 50%{opacity:.6} }

.page-calc3 .compat-dot-num {
    font-size:.55rem; font-weight:600; color:var(--gold);
    width:14px; height:14px; border-radius:50%;
    border:1px solid rgba(212,165,74,.3);
    display:inline-flex; align-items:center; justify-content:center;
}
.page-calc3 .compat-dot-label {
    font-size:.58rem; color:var(--text-muted); letter-spacing:.02em;
}

/* Slide title */
.page-calc3 .compat-slide-title {
    font-family:'Cormorant Garamond',serif;
    font-size:1.1rem; color:var(--gold); text-align:center;
    margin-bottom:.8rem; opacity:.8;
}

/* Slide text */
.page-calc3 .compat-slider-text {
    font-size:.92rem; color:var(--text-soft); line-height:1.8;
    min-height:200px;
}
.page-calc3 .compat-slider-text h3,
.page-calc3 .compat-slider-text h2 {
    font-family:'Cormorant Garamond',serif; color:var(--gold);
    font-size:1.05rem; margin:1.2rem 0 .5rem; font-weight:500;
}
.page-calc3 .compat-slider-text p { margin:0 0 .8rem; }

/* Prev/Next nav */
.page-calc3 .compat-slider-nav {
    display:flex; justify-content:space-between; margin-top:1.2rem;
    padding-top:.8rem; border-top:1px solid rgba(107,63,160,.08);
}
.page-calc3 .compat-nav-btn {
    background:none; border:none; cursor:pointer;
    font-family:'Nunito Sans',sans-serif; font-size:.72rem;
    color:var(--text-muted); letter-spacing:.04em;
    transition:color .2s; padding:.3rem .5rem;
}
.page-calc3 .compat-nav-btn:hover { color:var(--gold); }

/* Compat compact data grid (for /разбор-совместимость/) */
.page-calc3 .compat-compact-grid {
    display:flex; flex-direction:column; gap:.4rem; margin:.5rem 0 .8rem;
}
.page-calc3 .compat-compact-row {
    display:flex; align-items:center; gap:.5rem; justify-content:center;
    flex-wrap:wrap;
}
.page-calc3 .compat-compact-num {
    display:inline-flex; align-items:center; justify-content:center;
    width:14px; height:14px; border-radius:50%;
    border:1px solid rgba(212,165,74,.3); color:var(--gold);
    font-size:.5rem; font-weight:600; flex-shrink:0;
}

/* Compat payment modal — mirrors #paymentModal styles from style.css */
#compatPayModal {
    display:flex; position:fixed; inset:0; z-index:9000;
    align-items:center; justify-content:center;
    background:rgba(8,5,16,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    opacity:0; pointer-events:none; transition:opacity .3s;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
}
#compatPayModal.visible { opacity:1 !important; pointer-events:all !important; }

/* Loading dots (reuse existing animation from style.css) */
.page-calc3 .compat-loading {
    display:flex; justify-content:center; align-items:center;
    padding:2rem 0; color:var(--text-muted); font-size:.82rem;
}