/* =====================================================
   COMPASS-31 Tool Styles
   ===================================================== */

/* ── Domain Color Variables ── */
:root {
    --cp31-c1: #1C9E75;  --cp31-b1: #E1F6EF;  /* Ортостатическая   */
    --cp31-c2: #378ADD;  --cp31-b2: #E6F1FB;  /* Вазомоторная      */
    --cp31-c3: #BA7518;  --cp31-b3: #FAEFDA;  /* Секреторная       */
    --cp31-c4: #554DB8;  --cp31-b4: #EEEDFE;  /* ЖКТ               */
    --cp31-c5: #D4547E;  --cp31-b5: #FBEAF0;  /* Мочевыделительная */
    --cp31-c6: #639922;  --cp31-b6: #EAF3DE;  /* Зрительная        */
}

/* Assign local --dc / --db per domain */
.cp31-domain-1 { --dc: var(--cp31-c1); --db: var(--cp31-b1); }
.cp31-domain-2 { --dc: var(--cp31-c2); --db: var(--cp31-b2); }
.cp31-domain-3 { --dc: var(--cp31-c3); --db: var(--cp31-b3); }
.cp31-domain-4 { --dc: var(--cp31-c4); --db: var(--cp31-b4); }
.cp31-domain-5 { --dc: var(--cp31-c5); --db: var(--cp31-b5); }
.cp31-domain-6 { --dc: var(--cp31-c6); --db: var(--cp31-b6); }


/* ── Wrapper ── */
.cp31 {
    margin-top: 32px;
    margin-bottom: 40px;
}


/* ── Domain Accordions ── */
.cp31-domain {
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
    background: #FFFFFF;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.cp31-domain-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.cp31-domain-head:hover {
    background: var(--db);
}

.cp31-domain-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cp31-domain-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: var(--db);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp31-domain-title {
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--dc);
}

.cp31-chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #888;
    transition: transform 0.2s ease;
}

.cp31-domain.open .cp31-chevron {
    transform: rotate(180deg);
}

.cp31-domain-body {
    display: none;
    padding: 8px 24px 24px;
    border-top: 1px solid #F0F0F0;
}

.cp31-domain.open .cp31-domain-body {
    display: block;
}


/* ── Questions ── */
.cp31-question {
    padding: 16px 0;
    border-bottom: 1px solid #F3F3F3;
}

.cp31-question:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cp31-question:first-child {
    padding-top: 16px;
}

.cp31-question.cp31-skipped {
    display: none;
}

.cp31-question-text {
    font-size: 0.93rem;
    margin: 0 0 11px;
    line-height: 1.55;
    color: #333;
}

.cp31-question-hint {
    font-size: 0.8rem;
    color: #888;
    margin: -6px 0 10px;
    font-style: italic;
}


/* ── Answer Buttons ── */
.cp31-answers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cp31-answer-btn {
    padding: 7px 15px;
    border: 1px solid #D0D0D0;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-family: Montserrat, sans-serif;
    font-size: 0.88rem;
    font-weight: 400;
    color: #333;
    line-height: 1.4;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    text-align: left;
}

.cp31-answer-btn:hover:not(.selected) {
    border-color: var(--dc);
    background: var(--db);
}

.cp31-answer-btn.selected {
    background: var(--dc);
    border-color: var(--dc);
    color: #fff;
}

/* Multi-select indicator */
.cp31-answer-btn.cp31-multi {
    border-style: dashed;
}

.cp31-answer-btn.cp31-multi.selected {
    border-style: solid;
}


/* ── Frequency Number Input ── */
.cp31-freq-option {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cp31-freq-input-row {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #555;
}

.cp31-freq-number {
    width: 58px;
    padding: 6px 8px;
    border: 1px solid #D0D0D0;
    border-radius: 6px;
    font-family: Montserrat, sans-serif;
    font-size: 0.88rem;
    text-align: center;
    color: #333;
    -moz-appearance: textfield;
    outline: none;
    transition: border-color 0.15s;
}

.cp31-freq-number:focus {
    border-color: var(--dc, #4CAF50);
}

.cp31-freq-number::-webkit-inner-spin-button,
.cp31-freq-number::-webkit-outer-spin-button {
    opacity: 1;
}


/* ── Result Block ── */
.cp31-result {
    margin-top: 20px;
    background: #fff;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.05);
}

.cp31-result-head {
    background: #ECF2FF;
    padding: 24px;
}

.cp31-result-body {
    background: #fff;
    padding: 20px 24px 24px;
}

.cp31-result-header {
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #333;
    margin-bottom: 16px;
}

.cp31-badge {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
    border: 1.5px solid transparent;
}

.cp31-badge.remission   { background: #E8F5E9; color: #2E7D32; border-color: #A5D6A7; }
.cp31-badge.mild        { background: var(--cp31-b1); color: var(--cp31-c1); border-color: var(--cp31-c1); }
.cp31-badge.moderate    { background: #FFF8E1; color: #E65100; border-color: #FFCC80; }
.cp31-badge.severe      { background: var(--cp31-b5); color: var(--cp31-c5); border-color: var(--cp31-c5); }
.cp31-badge.very-severe { background: #FCE4EC; color: #880E4F; border-color: #F48FB1; }

.cp31-info {
    font-size: 0.88rem;
    color: #555;
    margin: 0 0 18px;
    line-height: 1.6;
}

.cp31-breakdown-title {
    font-weight: 600;
    font-size: 0.92rem;
    margin: 0 0 12px;
    color: #444;
}

.cp31-breakdown-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}

.cp31-breakdown-label {
    width: 360px;
    flex-shrink: 0;
    font-size: 1rem;
    color: #333;
    line-height: 1.3;
}

.cp31-bar-container {
    flex: 1;
    height: 6px;
    background: #E0E0E0;
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}

.cp31-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.35s ease;
    width: 0%;
}

/* Bar colors via :root variables */
.cp31-breakdown-row[data-domain="orthostatic"]  .cp31-bar-fill { background: var(--cp31-c1); }
.cp31-breakdown-row[data-domain="vasomotor"]    .cp31-bar-fill { background: var(--cp31-c2); }
.cp31-breakdown-row[data-domain="secretomotor"] .cp31-bar-fill { background: var(--cp31-c3); }
.cp31-breakdown-row[data-domain="gi"]           .cp31-bar-fill { background: var(--cp31-c4); }
.cp31-breakdown-row[data-domain="bladder"]      .cp31-bar-fill { background: var(--cp31-c5); }
.cp31-breakdown-row[data-domain="pupillomotor"] .cp31-bar-fill { background: var(--cp31-c6); }

.cp31-breakdown-score {
    width: 42px;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
    flex-shrink: 0;
}


/* ── Action Buttons ── */
.cp31-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    align-items: center;
    justify-content: space-between;
}

.cp31-btn-print {
    padding: 11px 26px;
    background: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 100px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.2s;
    text-transform: uppercase;
}

.cp31-btn-print:hover { background: #388E3C; }

.cp31-btn-reset {
    padding: 10px 24px;
    background: transparent;
    color: #555;
    border: 1px solid #C0C0C0;
    border-radius: 100px;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    text-transform: uppercase;
}

.cp31-btn-reset:hover {
    border-color: #888;
    color: #222;
}


/* ── References ── */
.cp31-refs {
    margin-top: 16px;
    font-size: 0.78rem;
    color: #999;
    border-top: 1px solid #E4E4E4;
    padding-top: 14px;
}

.cp31-refs p {
    margin: 0 0 5px;
    font-weight: 600;
    color: #777;
}

.cp31-refs ol {
    margin: 0;
    padding-left: 1.2em;
}

.cp31-refs li {
    margin-bottom: 3px;
    line-height: 1.45;
}


/* ── Responsive ── */
@media (max-width: 767.98px) {
    .cp31-domain-body {
        padding: 8px 16px 20px;
    }

    .cp31-domain-head {
        padding: 12px 16px;
    }

    .cp31-breakdown-label {
        width: 150px;
        font-size: 0.8rem;
    }

    .cp31-breakdown-score {
        font-size: 0.8rem;
    }

    .cp31-answer-btn {
        font-size: 0.83rem;
        padding: 6px 12px;
    }

    .cp31-result {
        padding: 16px;
    }

    .cp31-actions {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .cp31-btn-print,
    .cp31-btn-reset {
        text-align: center;
        width: 100%;
    }
}


/* ── Print ── */
@media print {
    /* Убираем шапку, подвал, hero и навигацию */
    header,
    footer,
    .hero,
    .breadcrumbs-container,
    .articles-single-bottom,
    .col-12 > .row.mt-3 { display: none !important; }

    /* Скрываем всё в articles-single-info кроме заголовка h1 */
    .articles-single-info > *:not(h1),
    .articles-single-info .row { display: none !important; }
    .articles-single-info h1.title {
        display: block !important;
        font-size: 1.2rem;
        margin: 0 0 16px;
        padding: 0;
    }

    /* Убираем WP-контент перед калькулятором */
    .main-content > *:not(.cp31) { display: none !important; }

    /* Убираем домены, кнопки и ссылки — всё внутри .cp31 кроме результата */
    .cp31 > *:not(.cp31-result) { display: none !important; }

    /* Убираем лишние отступы у обёрток */
    section.articles-page,
    .cp31 { padding: 0 !important; margin: 0 !important; }

    /* Оформление блока результатов */
    .cp31-result {
        margin: 0;
        box-shadow: none;
        border-radius: 0;
        break-inside: avoid;
    }

    /* Сохраняем цвета при печати */
    .cp31-result-head,
    .cp31-badge,
    .cp31-bar-fill,
    .cp31-bar-container {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}