/* ==========================================================================
   BODY KIZDAR — Универсальный шаблон внутренних страниц (inner-page)
   Подключается автоматически из resources/views/front/inner-page.blade.php
   Все стили изолированы префиксом .bk-*, чтобы не конфликтовать с legacy CSS.
   Токены берутся из тёмной темы (--body-*), с фолбэками на случай отсутствия.
   ========================================================================== */

.bk-page {
    --bk-bg: var(--body-bg, #0B0F14);
    --bk-card: var(--body-card, #0B0F14);
    --bk-card-2: var(--body-card-2, #0B0F14);
    --bk-accent: var(--body-accent, #FF5C8A);
    --bk-accent-deep: var(--body-accent-deep, #B41E4C);
    --bk-accent-soft: #FF5C8A;
    --bk-gold: var(--body-gold, #A8FF3B);
    --bk-text: var(--body-text, #fff8fb);
    --bk-muted: var(--body-muted, #a79ba4);
    --bk-border: var(--body-border, rgba(143, 224, 31, .26));
    --bk-glow: var(--body-glow, 0 18px 54px rgba(255, 92, 138, .16));
    --bk-radius: 16px;
    --bk-radius-sm: 12px;
    --bk-max: 900px;

    color: var(--bk-text);
    font-family: "Manrope", sans-serif;
}

.bk-page *,
.bk-page *::before,
.bk-page *::after {
    box-sizing: border-box;
}

.bk-page img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   1. Шапка страницы (баннер с хлебными крошками)
   -------------------------------------------------------------------------- */
.bk-banner {
    position: relative;
    overflow: hidden;
    padding: 26px 0;
    border-bottom: 1px solid var(--bk-border);
    background:
        radial-gradient(ellipse at top right, rgba(255, 92, 138, .16), transparent 62%),
        linear-gradient(135deg, #0B0F14 0%, #0B0F14 100%);
}

.bk-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(245, 246, 232, .99), rgba(245, 246, 232, .93));
}

.bk-banner .container {
    position: relative;
    z-index: 1;
}

.bk-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.5;
}

.bk-crumb {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--bk-muted);
}

.bk-crumb a {
    color: var(--bk-accent-soft);
    text-decoration: none;
    transition: color .25s ease;
}

.bk-crumb a:hover,
.bk-crumb a:focus-visible {
    color: var(--bk-accent);
    text-decoration: none;
}

.bk-crumb--current {
    color: #0B0F14;
    font-weight: 600;
}

/* Разделитель между крошками */
.bk-crumb:not(:last-child)::after {
    content: '\f054';
    margin-left: 10px;
    color: rgba(255, 255, 255, .22);
    font-family: 'Font Awesome 5 Free';
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   2. Заголовок страницы (hero)
   -------------------------------------------------------------------------- */
.bk-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(240px, 34vh, 380px);
    padding: 44px 0 12px;
    text-align: center;
}

.bk-hero > .container {
    width: 100%;
}

.bk-hero-inner {
    max-width: 820px;
    margin: 0 auto;
}

.bk-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border: 1px solid rgba(143, 224, 31, .40);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 92, 138, .16), rgba(168, 255, 59, .12));
    color: var(--bk-accent-soft);
    font-size: 24px;
    box-shadow: var(--bk-glow);
}

.bk-badge {
    display: inline-block;
    margin-bottom: 16px;
    padding: 7px 15px;
    border: 1px solid rgba(168, 255, 59, .38);
    border-radius: 999px;
    background: rgba(168, 255, 59, .10);
    color: var(--bk-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.bk-title {
    margin: 0 0 16px;
    color: var(--bk-text);
    font-size: clamp(1.9rem, 3.8vw, 2.6rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.02em;
}

.bk-title em,
.bk-title i {
    color: var(--bk-accent);
    font-family: "Playfair Display", serif;
    font-style: italic;
}

.bk-subtitle {
    max-width: 720px;
    margin: 0 auto;
    color: var(--bk-muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.bk-meta {
    margin-top: 18px;
    color: rgba(167, 155, 164, .85);
    font-size: 13px;
}

.bk-meta i {
    margin-right: 6px;
    color: var(--bk-accent-soft);
}

.bk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 26px;
}

/* --------------------------------------------------------------------------
   3. Кнопки
   -------------------------------------------------------------------------- */
.bk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius-sm);
    background: rgba(245, 246, 232, .95);
    color: var(--bk-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease, color .3s ease;
}

.bk-btn:hover,
.bk-btn:focus-visible {
    transform: translateY(-2px);
    text-decoration: none;
}

.bk-btn--gold {
    border-color: var(--bk-accent-soft);
    background: linear-gradient(135deg, #FF5C8A, #B41E4C);
    color: #fff;
    box-shadow: 0 12px 38px rgba(180, 30, 76, .30);
}

.bk-btn--gold:hover,
.bk-btn--gold:focus-visible {
    background: linear-gradient(135deg, #FF5C8A, #B41E4C);
    color: #fff;
    box-shadow: 0 18px 48px rgba(180, 30, 76, .48);
}

.bk-btn--ghost:hover,
.bk-btn--ghost:focus-visible {
    border-color: rgba(255, 92, 138, .55);
    background: rgba(33, 24, 32, .9);
    color: var(--bk-text);
}

/* --------------------------------------------------------------------------
   4. Контентная зона
   -------------------------------------------------------------------------- */
.bk-content {
    padding: 48px 0 64px;
}

.bk-inner {
    max-width: var(--bk-max);
    margin: 0 auto;
}

.bk-inner--wide {
    max-width: 100%;
}

/* Раскладка «текст + оглавление» */
.bk-inner--toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 40px;
    max-width: 1080px;
    align-items: start;
}

/* --------------------------------------------------------------------------
   5. Типографика контента (.bk-body) — тёмная тема
   -------------------------------------------------------------------------- */
.bk-body {
    color: rgba(255, 248, 251, .86);
    font-size: 16px;
    line-height: 1.85;
    word-wrap: break-word;
}

.bk-body > *:first-child {
    margin-top: 0;
}

.bk-body > *:last-child {
    margin-bottom: 0;
}

.bk-body h1,
.bk-body h2,
.bk-body h3,
.bk-body h4,
.bk-body h5,
.bk-body h6 {
    color: var(--bk-text);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.bk-body h1 {
    margin: 0 0 20px;
    font-size: 1.9rem;
}

.bk-body h2 {
    margin: 44px 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bk-border);
    font-size: 1.6rem;
    position: relative;
}

.bk-body h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 64px;
    height: 2px;
    background: linear-gradient(90deg, var(--bk-accent), var(--bk-gold));
}

.bk-body h3 {
    margin: 34px 0 16px;
    color: var(--bk-gold);
    font-size: 1.3rem;
}

.bk-body h4 {
    margin: 26px 0 14px;
    font-size: 1.1rem;
}

.bk-body p {
    margin: 0 0 20px;
}

.bk-body strong,
.bk-body b {
    color: var(--bk-text);
    font-weight: 700;
}

.bk-body a {
    color: var(--bk-accent-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .25s ease;
}

.bk-body a:hover,
.bk-body a:focus-visible {
    color: var(--bk-accent);
}

.bk-body ul,
.bk-body ol {
    margin: 0 0 22px;
    padding-left: 4px;
    list-style: none;
}

.bk-body li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 26px;
}

.bk-body ul > li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: .72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bk-accent), var(--bk-accent-deep));
    box-shadow: 0 0 12px rgba(255, 92, 138, .55);
}

.bk-body ol {
    counter-reset: bk-counter;
}

.bk-body ol > li {
    counter-increment: bk-counter;
}

.bk-body ol > li::before {
    content: counter(bk-counter);
    position: absolute;
    left: 0;
    top: .15em;
    min-width: 18px;
    color: var(--bk-accent-soft);
    font-size: 13px;
    font-weight: 800;
    text-align: left;
}

.bk-body li > ul,
.bk-body li > ol {
    margin-top: 12px;
    margin-bottom: 0;
}

/* Абзацы внутри пунктов списка (контент из TinyMCE) */
.bk-body li > p {
    margin-bottom: 10px;
}

/* Первый абзац пункта в юридических документах играет роль подзаголовка */
.bk-body li > p:first-child {
    color: var(--bk-text);
    font-weight: 700;
}

.bk-body li > p:last-child {
    margin-bottom: 0;
}

.bk-body img {
    display: block;
    margin: 26px auto;
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
}

.bk-body blockquote {
    margin: 30px 0;
    padding: 20px 24px;
    border-left: 3px solid var(--bk-accent);
    border-radius: 0 var(--bk-radius) var(--bk-radius) 0;
    background: var(--bk-card);
    color: #0B0F14;
    font-style: italic;
}

.bk-body blockquote p:last-child {
    margin-bottom: 0;
}

.bk-body hr {
    margin: 36px 0;
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--bk-border), transparent);
}

.bk-body table {
    width: 100%;
    margin: 26px 0;
    border-collapse: collapse;
    font-size: 15px;
}

.bk-body th,
.bk-body td {
    padding: 12px 14px;
    border: 1px solid var(--bk-border);
    text-align: left;
    vertical-align: top;
}

.bk-body th {
    background: var(--bk-card-2);
    color: var(--bk-text);
    font-weight: 700;
}

.bk-body tr:nth-child(even) td {
    background: rgba(245, 246, 232, .75);
}

.bk-body code,
.bk-body pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.bk-body code {
    padding: 2px 7px;
    border: 1px solid var(--bk-border);
    border-radius: 6px;
    background: var(--bk-card);
    color: var(--bk-gold);
    font-size: .92em;
}

.bk-body pre {
    margin: 24px 0;
    padding: 18px 20px;
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius-sm);
    background: #F8FAFC;
    color: #3F7A00;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.7;
}

.bk-body iframe,
.bk-body video {
    max-width: 100%;
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
}

/* Вводный абзац */
.bk-lead {
    margin-bottom: 26px;
    color: #0B0F14;
    font-size: 1.12rem;
    line-height: 1.75;
}

/* --------------------------------------------------------------------------
   6. Инфо-блок / предупреждение
   -------------------------------------------------------------------------- */
.bk-note {
    display: flex;
    gap: 14px;
    margin: 28px 0;
    padding: 18px 20px;
    border: 1px solid var(--bk-border);
    border-left: 3px solid var(--bk-gold);
    border-radius: var(--bk-radius-sm);
    background: linear-gradient(135deg, rgba(168, 255, 59, .10), rgba(245, 246, 232, .95));
    color: #3F7A00;
    font-size: 15px;
    line-height: 1.7;
}

.bk-note i {
    margin-top: 3px;
    color: var(--bk-gold);
}

.bk-note--accent {
    border-left-color: var(--bk-accent);
    background: linear-gradient(135deg, rgba(255, 92, 138, .10), rgba(245, 246, 232, .95));
}

.bk-note--accent i {
    color: var(--bk-accent-soft);
}

.bk-note p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. Секции и сетки (преимущества, карточки)
   -------------------------------------------------------------------------- */
.bk-section {
    margin-top: 56px;
}

.bk-section-head {
    margin-bottom: 28px;
}

.bk-section-head--center {
    text-align: center;
}

.bk-section-title {
    margin: 0 0 12px;
    color: var(--bk-text);
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    font-weight: 700;
}

.bk-section-sub {
    max-width: 720px;
    margin: 0;
    color: var(--bk-muted);
    font-size: 15px;
    line-height: 1.7;
}

.bk-section-head--center .bk-section-sub {
    margin: 0 auto;
}

.bk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.bk-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 24px;
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    background: linear-gradient(160deg, #F8FAFC, #F8FAFC);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.bk-card:hover {
    transform: translateY(-4px);
    border-color: rgba(143, 224, 31, .40);
    box-shadow: var(--bk-glow);
}

.bk-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 92, 138, .3);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(255, 92, 138, .20), rgba(168, 255, 59, .10));
    color: var(--bk-accent-soft);
    font-size: 20px;
}

.bk-card-title {
    margin: 0;
    color: var(--bk-text);
    font-size: 1.08rem;
    font-weight: 700;
}

.bk-card-text {
    margin: 0;
    color: var(--bk-muted);
    font-size: 14.5px;
    line-height: 1.7;
}

.bk-card-text a {
    color: var(--bk-accent-soft);
}

/* --------------------------------------------------------------------------
   8. FAQ-аккордеон на <details> (без зависимости от JS)
   -------------------------------------------------------------------------- */
.bk-accordion {
    display: grid;
    gap: 12px;
}

.bk-faq-item {
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius-sm);
    background: #F8FAFC;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.bk-faq-item[open] {
    border-color: rgba(143, 224, 31, .45);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .38);
}

.bk-faq-q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    color: var(--bk-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    list-style: none;
}

.bk-faq-q::-webkit-details-marker {
    display: none;
}

.bk-faq-q:hover {
    color: var(--bk-accent-soft);
}

.bk-faq-q:focus-visible {
    outline: 2px solid var(--bk-accent);
    outline-offset: -2px;
}

.bk-faq-q i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--bk-accent-soft);
    font-size: 13px;
    transition: transform .3s ease;
}

.bk-faq-item[open] .bk-faq-q i {
    transform: rotate(180deg);
}

.bk-faq-a {
    padding: 0 20px 20px;
    color: rgba(255, 248, 251, .82);
    font-size: 15px;
    line-height: 1.8;
}

.bk-faq-a > *:last-child {
    margin-bottom: 0;
}

.bk-faq-a ul,
.bk-faq-a ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.bk-faq-a ul {
    list-style: disc;
}

.bk-faq-a ol {
    list-style: decimal;
}

.bk-faq-a li {
    margin-bottom: 8px;
}

.bk-faq-a a {
    color: var(--bk-accent-soft);
}

/* --------------------------------------------------------------------------
   9. Контакты
   -------------------------------------------------------------------------- */
.bk-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}

.bk-contact {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius-sm);
    background: #F8FAFC;
}

.bk-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 92, 138, .2), rgba(168, 255, 59, .1));
    color: var(--bk-accent-soft);
}

.bk-contact-label {
    display: block;
    margin-bottom: 4px;
    color: var(--bk-muted);
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.bk-contact-value {
    color: var(--bk-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    word-break: break-word;
}

a.bk-contact-value:hover {
    color: var(--bk-accent-soft);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   10. CTA-блок
   -------------------------------------------------------------------------- */
.bk-cta {
    position: relative;
    overflow: hidden;
    margin-top: 56px;
    padding: 40px 32px;
    border: 1px solid rgba(255, 92, 138, .28);
    border-radius: 20px;
    background:
        radial-gradient(ellipse at top right, rgba(255, 92, 138, .16), transparent 60%),
        linear-gradient(150deg, #0B0F14, #0B0F14);
    text-align: center;
    box-shadow: var(--bk-glow);
}

.bk-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at bottom left, rgba(143, 224, 31, .12), transparent 58%);
}

.bk-cta > * {
    position: relative;
    z-index: 1;
}

.bk-cta-title {
    margin: 0 0 12px;
    color: var(--bk-text);
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    font-weight: 800;
}

.bk-cta-text {
    max-width: 620px;
    margin: 0 auto;
    color: var(--bk-muted);
    font-size: 15.5px;
    line-height: 1.7;
}

.bk-cta .bk-actions {
    margin-top: 24px;
}

/* --------------------------------------------------------------------------
   11. Оглавление (опционально, $pageToc)
   -------------------------------------------------------------------------- */
.bk-toc {
    position: sticky;
    top: 24px;
    padding: 22px 20px;
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    background: #F8FAFC;
}

.bk-toc-title {
    margin: 0 0 14px;
    color: var(--bk-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.bk-toc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: bk-toc;
}

.bk-toc-list li {
    counter-increment: bk-toc;
    margin-bottom: 10px;
}

.bk-toc-list a {
    display: block;
    padding-left: 24px;
    color: var(--bk-muted);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    position: relative;
    transition: color .25s ease;
}

.bk-toc-list a::before {
    content: counter(bk-toc, decimal-leading-zero);
    position: absolute;
    left: 0;
    color: rgba(255, 92, 138, .75);
    font-size: 12px;
    font-weight: 700;
}

.bk-toc-list a:hover,
.bk-toc-list a:focus-visible {
    color: var(--bk-text);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   12. Адаптивность
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .bk-inner--toc {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .bk-toc {
        position: static;
    }
}

@media (max-width: 768px) {
    .bk-banner {
        padding: 20px 0;
    }

    .bk-hero {
        padding: 32px 0 4px;
    }

    .bk-content {
        padding: 34px 0 48px;
    }

    .bk-section {
        margin-top: 44px;
    }

    .bk-body {
        font-size: 15.5px;
    }

    .bk-body h2 {
        margin-top: 34px;
        font-size: 1.4rem;
    }

    .bk-cta {
        margin-top: 44px;
        padding: 30px 22px;
    }

    .bk-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .bk-body th,
    .bk-body td {
        white-space: normal;
    }
}

@media (max-width: 576px) {
    .bk-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .bk-btn {
        width: 100%;
    }

    .bk-hero-icon {
        width: 56px;
        height: 56px;
        font-size: 21px;
    }

    .bk-crumbs {
        font-size: 12.5px;
    }
}

/* Печать: юридические страницы должны читаться на бумаге */
@media print {
    .bk-banner,
    .bk-cta,
    .bk-toc {
        display: none !important;
    }

    .bk-page,
    .bk-body,
    .bk-body h1,
    .bk-body h2,
    .bk-body h3,
    .bk-body h4 {
        color: #0B0F14 !important;
    }

    .bk-body a {
        color: #0B0F14 !important;
        text-decoration: underline;
    }
}