/* =========================================
   1. БАЗОВІ ЗМІННІ ТА ТИПОГРАФІКА
   ========================================= */
:root {
    --header-height: 80px;
    --logo-font: 'Inter', sans-serif;
    --logo-size: 24px;
    --logo-color: #111;
    --logo-height: 40px;
    --font-body: 'Inter', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
    --content-width: 1200px;
    --block-radius: 4px;
    --color-accent: #3b82f6;
    --bg-page: #f8f9fa;
    --bg-block: #ffffff;
    --color-text: #1f2937;
    --color-border: #e5e7eb;
}

:root[data-heading-scale="s"] { --h1-size: 2rem; --h2-size: 1.5rem; }
:root[data-heading-scale="m"] { --h1-size: 2.5rem; --h2-size: 2rem; }
:root[data-heading-scale="l"] { --h1-size: 3.5rem; --h2-size: 2.5rem; }
:root[data-heading-scale="xl"] { --h1-size: 4.5rem; --h2-size: 3rem; }

body { font-family: var(--font-body); color: var(--color-text); background-color: var(--bg-page); margin: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }

/* =========================================
   2. СІТКА, БЛОКИ ТА РОЗМІРИ (Vertical Rhythm)
   ========================================= */
.sek-columns-grid { display: grid; gap: 20px; width: 100%; }
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) { .sek-columns-grid { grid-template-columns: 1fr !important; } }

.sek_block { position: relative; background-size: cover; background-position: center; overflow: hidden; display: block; width: 100%; margin-bottom: 20px; transition: all 0.3s ease; }
.sek-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; border-radius: inherit; }
.sek-container { position: relative; z-index: 2; max-width: var(--content-width, 1100px); margin: 0 auto; }
.sek-content-wrapper { position: relative; z-index: 5; }

/* Стандартний контейнер (слухається глобальної ширини теми) */
.sek-visual-container { 
    width: 100%; 
    max-width: var(--content-width, 1200px); 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
}

/* Захист від появи горизонтального скролу на Windows (ОБОВ'ЯЗКОВО для Full Width) */
body {
    overflow-x: hidden; 
}

/* 🚀 МАГІЯ FULL WIDTH: Метод Gutenberg (Без білих 1px смуг на Mac) */
section.sek_block.is-full-width,
div.sek-visual-container.is-full-width { 
    width: 100vw !important; 
    max-width: 100vw !important;
    
    /* Математично точне центрування без багів Safari */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    
    /* Скидаємо старі правила, якщо вони десь успадкувалися */
    position: relative;
    left: auto;
    transform: none;
    border-radius: 0 !important; 
}

/* Внутрішній контейнер з текстом всередині Full Width блоку */
.is-full-width > .sek-container,
.is-full-width .sek-container { 
    /* Текст залишається по центру в межах глобальної ширини теми */
    max-width: var(--content-width, 1200px) !important; 
    width: 100% !important;
    padding-left: 40px !important; 
    padding-right: 40px !important; 
    box-sizing: border-box !important;
    margin: 0 auto !important;
}

@media (max-width: 768px) {
    .is-full-width > .sek-container,
    .is-full-width .sek-container { 
        padding-left: 20px !important; 
        padding-right: 20px !important; 
    }
}

.sek_block img, .sek_block iframe, .sek_block video { max-width: 100%; height: auto; }

.sek-visual-container.size-s, section.sek_block.size-s { padding: 40px 20px; }
.sek-visual-container.size-m, section.sek_block.size-m { padding: 80px 20px; }
.sek-visual-container.size-l, section.sek_block.size-l { padding: 120px 20px; }
.sek-visual-container.size-xl, section.sek_block.size-xl { padding: 180px 20px; }
.sek-visual-container.size-full, section.sek_block.size-full { padding: 40px 20px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.sek-visual-container.size-full > .sek-content-wrapper, section.sek_block.size-full > .sek-container { width: 100%; margin: 0 auto; }

/* =========================================
   3. HEADER ТА НАВІГАЦІЯ
   ========================================= */
.sek-menu-list { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; align-items: center; }
.sek-menu-item { margin: 0; padding: 0; line-height: 1.4; }
.sek-menu-link { text-decoration: none; color: inherit; font-weight: 500; font-size: 15px; transition: opacity 0.2s ease; cursor: pointer; }
.sek-menu-link:hover { opacity: 0.7; }
body .sek-page-anchor { display: block; height: 0; width: 0; margin: 0; padding: 0; border: none; line-height: 0; pointer-events: none; visibility: hidden; position: relative; top: -80px; }

/* =========================================
   4. КОМПОНЕНТИ (Кнопки, Форми, Іконки)
   ========================================= */

/* --- 4.1 СЛОВНИК КОЛЬОРІВ (Змінні для кнопок) --- */
.ql-inline-btn, .ql-custom-btn {
    --btn-bg: var(--color-accent, #3b82f6);
    --btn-text: #ffffff;
}

/* Наші 5 базових кольорів */
.ql-btn-global    { --btn-bg: var(--color-accent, #3b82f6); --btn-text: #ffffff; }
.ql-btn-primary   { --btn-bg: #3b82f6; --btn-text: #ffffff; }
.ql-btn-secondary { --btn-bg: #94a3b8; --btn-text: #ffffff; }
.ql-btn-success   { --btn-bg: #16a34a; --btn-text: #ffffff; }
.ql-btn-danger    { --btn-bg: #dc2626; --btn-text: #ffffff; }

/* --- 4.2 БАЗОВІ СТИЛІ КНОПКИ (Solid) --- */
.ql-inline-btn, .ql-custom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6em 1.2em;
    border-radius: 6px; /* Дефолтна форма */
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    line-height: 1.2;
    white-space: nowrap;
    word-break: keep-all;

    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    box-shadow: none;
}

.ql-inline-btn span, .ql-custom-btn span {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 8px; /* Відступ для іконки */
}

.ql-inline-btn i, .ql-custom-btn i {
    display: inline-block;
}

/* --- 4.3 МОДИФІКАТОР СТИЛЮ: OUTLINE --- */
.ql-inline-btn.ql-btn-outline, 
.ql-custom-btn.ql-btn-outline {
    background-color: transparent !important;
    color: var(--btn-bg) !important;
    box-shadow: inset 0 0 0 2px var(--btn-bg) !important;
}

/* --- 4.4 ГЛОБАЛЬНА ГЕОМЕТРІЯ (Форма з панелі налаштувань) --- */
.buttons-sharp .ql-inline-btn, .buttons-sharp .ql-custom-btn { border-radius: 0px !important; }
.buttons-pill .ql-inline-btn, .buttons-pill .ql-custom-btn { border-radius: 999px !important; }
.buttons-soft .ql-inline-btn, .buttons-soft .ql-custom-btn { border-radius: 6px !important; }

/* Глобальний стиль 3D */
.buttons-3d .ql-inline-btn, .buttons-3d .ql-custom-btn {
    border-radius: 8px !important;
    border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important;
    transform: translateY(0);
    transition: transform 0.1s, border-bottom-width 0.1s !important;
}
.buttons-3d .ql-inline-btn:active, .buttons-3d .ql-custom-btn:active {
    border-bottom-width: 0px !important;
    transform: translateY(4px);
}

/* ==========================================
   СПЕЦІАЛЬНІ ФОРМАТИ КНОПОК
   ========================================== */

/* 1. Іконка 1:1 (Квадрат або Коло в залежності від теми) */
.ql-inline-btn.ql-btn-icon-only,
.ql-custom-btn.ql-btn-icon-only {
    padding: 0 !important; 
    width: 2.8em !important; 
    height: 2.8em !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 2. Посилання (Без фону і відступів, лише колір тексту) */
.ql-inline-btn.ql-btn-link,
.ql-custom-btn.ql-btn-link {
    background-color: transparent !important;
    color: var(--btn-bg) !important; /* Беремо колір кнопки для тексту */
    padding: 0 !important;
    box-shadow: none !important;
    border-bottom: none !important; /* Вимикаємо 3D ефект, якщо він є */
}
.ql-inline-btn.ql-btn-link:hover,
.ql-custom-btn.ql-btn-link:hover {
    text-decoration: underline !important;
    opacity: 0.8;
}

/* 3. На всю ширину (Fullwidth) */
.ql-inline-btn.ql-btn-fullwidth,
.ql-custom-btn.ql-btn-fullwidth {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
}

/* --- ПРАВИЛА СПЕЦІАЛЬНО ДЛЯ РЕДАКТОРА (Span-фікс) --- */
.ql-editor .ql-inline-btn.ql-btn-icon-only span {
    padding: 0 !important;
    width: 2.8em !important;
    height: 2.8em !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.ql-editor .ql-inline-btn.ql-btn-link span {
    background-color: transparent !important;
    color: var(--btn-bg) !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-bottom: none !important;
}
.ql-editor .ql-inline-btn.ql-btn-fullwidth {
    display: flex !important;
    width: 100% !important;
}
.ql-editor .ql-inline-btn.ql-btn-fullwidth span {
    width: 100% !important;
    justify-content: center !important;
}

/* --- 4.5 ІНШІ КОМПОНЕНТИ (Форми та Іконки) --- */
.frontend-contact-form { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.frontend-contact-form input, .frontend-contact-form textarea { width: 100%; padding: 10px; border: 1px solid #ccc; }
.fa-icon-embed { display: inline-flex; align-items: center; justify-content: center; line-height: 1 !important; margin: 0 0.15em; user-select: none; cursor: default; border: 1px solid transparent; border-radius: 3px; vertical-align: baseline; }
.fa-icon-embed i { font-size: inherit !important; line-height: 1 !important; display: block; }
.fa-icon-embed.icon-selected, .fa-icon-embed::selection { background-color: #b4d5fe; border-color: #b4d5fe; }

/* =========================================
   5. МЕДІА ТА ГАЛЕРЕЇ (ОНОВЛЕНО ДЛЯ JSON)
   ========================================= */
.ql-media-embed { display: block; margin: 15px 0; }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; background: #000; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* --- ОСНОВА ГАЛЕРЕЇ --- */
.sek-gallery-wrapper { 
    width: 100%; 
    box-sizing: border-box; 
    --sek-cols: 3; 
    --sek-gap: 10px; 
    --sek-round: 0px; 
    margin: 20px 0; /* Щоб галерея не прилипала до тексту зверху/знизу */
}

.sek-gallery-link { 
    display: block; 
    position: relative; 
    overflow: hidden; 
    text-decoration: none; 
    border-radius: var(--sek-round); 
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; 
    cursor: pointer; 
}

.sek-gallery-link:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); 
    z-index: 2;
}

.sek-gallery-wrapper img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
    border-radius: inherit; 
    transition: transform 0.5s ease;
}

.sek-gallery-link:hover img {
    transform: scale(1.05); /* Легкий зум фотографії при наведенні */
}

/* --- СТИЛІ (GRID, MASONRY, CAROUSEL) --- */
/* Зверни увагу: тепер ми шукаємо по класу .sek-gallery-grid, а не по data-атрибуту */

/* 1. Grid */
.sek-gallery-grid { 
    display: grid; 
    grid-template-columns: repeat(var(--sek-cols), 1fr); 
    gap: var(--sek-gap); 
}
.sek-gallery-grid .sek-gallery-link { 
    aspect-ratio: 1 / 1; 
}

/* 2. Masonry (Цеглинки) */
.sek-gallery-masonry { 
    display: block; 
    column-count: var(--sek-cols); 
    column-gap: var(--sek-gap); 
    line-height: 0; 
}
.sek-gallery-masonry .sek-gallery-link { 
    display: inline-block; 
    width: 100%; 
    margin-bottom: var(--sek-gap); 
    break-inside: avoid; 
}
.sek-gallery-masonry img { 
    height: auto !important; /* В Masonry зберігаємо оригінальні пропорції висоти */
}

/* 3. Justified (Google Pixel Style) */
.sek-gallery-justified { 
    display: flex; 
    flex-wrap: wrap; 
    gap: var(--sek-gap); 
    border-radius: var(--sek-round); /* Заокруглюємо весь блок */
    overflow: hidden; /* МАГІЯ: обрізаємо кути крайніх фотографій */
    
    /* Щоб контейнер мав ідеальні межі навіть при gap > 0 */
    transform: translateZ(0); 
}
.sek-gallery-justified .sek-gallery-link { 
    flex-grow: 1; /* Змушуємо фото розтягуватися, щоб заповнити дірки */
    flex-basis: 220px; /* Мінімальна ширина фото */
    height: 250px; /* Фіксована висота рядка (як у Google Photos) */
    border-radius: 0 !important; /* Внутрішні фотки ЗАВЖДИ гострі */
}
@media (max-width: 768px) {
    .sek-gallery-justified .sek-gallery-link { 
        height: 180px; 
        flex-basis: 150px; 
    }
}
@media (max-width: 480px) {
    .sek-gallery-justified .sek-gallery-link { 
        height: 150px; 
        flex-basis: 100px; 
    }
}

/* ==========================================
   ПРЕМІУМ-СТИЛІ ГАЛЕРЕЙ (Justified & Bento)
   ========================================== */

/* Спільний клас для "монолітних" мозаїк (Justified та Bento) */
.sek-gallery-justified, .sek-gallery-bento {
    position: relative; /* Важливо для рамки поверх фото */
    border-radius: var(--sek-round); 
    overflow: hidden; 
    transform: translateZ(0); /* Апаратне прискорення для ідеального зрізу кутів */
}

/* 💎 ТА САМА ПРЕМІУМ-РАМКА (Glass Border) ПОВЕРХ ФОТОГРАФІЙ */
.sek-gallery-justified::after, 
.sek-gallery-bento::after {
    content: '';
    position: absolute;
    inset: 0; /* Розтягуємо на весь розмір контейнера */
    border: 1px solid rgba(0, 0, 0, 0.08); /* Ледь-ледь темна лінія */
    border-radius: inherit; /* Повторює заокруглення головного контейнера */
    pointer-events: none; /* Щоб ти міг клікати на фото під рамкою */
    z-index: 5;
}
/* Якщо блок на темному фоні - робимо рамку світлою */
.is-dark-context .sek-gallery-justified::after,
.is-dark-context .sek-gallery-bento::after {
    border-color: rgba(255, 255, 255, 0.15);
}

/* --- 1. JUSTIFIED (Pixel Style) --- */
.sek-gallery-justified { 
    display: flex; 
    flex-wrap: wrap; 
    gap: var(--sek-gap); 
}
.sek-gallery-justified .sek-gallery-link { 
    flex-grow: 1; 
    flex-basis: 220px; 
    height: 250px; 
    border-radius: 0 !important; /* Внутрішні кути завжди гострі */
}

/* --- 2. BENTO BOX (Apple Dashboard Style) --- */
.sek-gallery-bento {
    display: grid;
    grid-template-columns: repeat(var(--sek-cols, 3), 1fr);
    grid-auto-rows: 200px; /* Базова висота маленького квадратика */
    gap: var(--sek-gap);
}
.sek-gallery-bento .sek-gallery-link {
    border-radius: 0 !important;
}
/* Головна магія Bento: Перше фото вдвічі більше за інші */
.sek-gallery-bento .sek-gallery-link:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

/* АДАПТИВНІСТЬ ДЛЯ BENTO ТА JUSTIFIED */
@media (max-width: 768px) {
    .sek-gallery-justified .sek-gallery-link { height: 180px; flex-basis: 150px; }
    
    .sek-gallery-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
    .sek-gallery-bento .sek-gallery-link:first-child { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 480px) {
    .sek-gallery-justified .sek-gallery-link { height: 150px; flex-basis: 100px; }
    
    /* На телефонах Bento перетворюється на звичайну колонку, але перше фото все ще більше */
    .sek-gallery-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .sek-gallery-bento .sek-gallery-link:first-child { grid-column: span 1; grid-row: span 1; aspect-ratio: 4/3; }
    .sek-gallery-bento .sek-gallery-link:not(:first-child) { aspect-ratio: 16/9; }
}

/* 4. Carousel (Слайдер) */
.sek-gallery-carousel { 
    display: flex; 
    flex-wrap: nowrap; 
    overflow-x: auto; 
    gap: var(--sek-gap); 
    padding-bottom: 15px; 
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; 
}
.sek-gallery-carousel .sek-gallery-link { 
    flex: 0 0 300px; 
    height: 300px; 
    scroll-snap-align: center; 
}
/* Кастомний скролбар для каруселі */
.sek-gallery-carousel::-webkit-scrollbar { height: 6px; }
.sek-gallery-carousel::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 4px; }
.sek-gallery-carousel::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 4px; }

/* --- АДАПТИВНІСТЬ --- */
@media (max-width: 768px) {
    .sek-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .sek-gallery-masonry { column-count: 2 !important; }
}
@media (max-width: 480px) {
    .sek-gallery-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
    .sek-gallery-masonry { column-count: 1 !important; }
    .sek-gallery-carousel .sek-gallery-link { flex: 0 0 85%; height: 250px; }
}

/* =========================================
   6. ПРЕСЕТИ БЛОКІВ ТА ЕФЕКТИ
   ========================================= */
/* Захист тексту на темних фонах */
.has-custom-bg, .has-custom-bg p, .has-custom-bg h1, .has-custom-bg h2, .has-custom-bg h3, .has-custom-bg span,
.is-dark-context, .is-dark-context p, .is-dark-context h1, .is-dark-context h2, .is-dark-context h3, .is-dark-context a { 
    color: #ffffff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.3); 
}

/* Паралакс та Анімації */
.is-parallax-section { position: relative; overflow: hidden; }
.sek-parallax-layer { position: absolute; top: -20%; left: 0; width: 100%; height: 140%; background-size: cover; background-position: center; z-index: 0; pointer-events: none; will-change: transform; transform: translateY(0); }

html.anim-fade .sek_block { opacity: 0; transition: opacity 0.8s ease-out; }
html.anim-fade .sek_block.is-visible { opacity: 1; }
html.anim-slide .sek_block { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
html.anim-slide .sek_block.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { html.anim-fade .sek_block, html.anim-slide .sek_block { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* =========================================
   7. QUILL SYNC (Відповідність шрифтів у редакторі)
   ========================================= */
.ql-editor { font-family: var(--font-body, 'Inter', sans-serif); transition: font-family 0.3s ease; }
.ql-editor h1, .ql-editor h2, .ql-editor h3 { font-family: var(--font-heading, 'Montserrat', sans-serif); color: #1a1a1a; }

/* Фікс прозорої обгортки в режимі редагування */
#sec_editor .sek_block, #sec_preview_inner .sek_block, .text_block {
    background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; border: none !important; padding: 0 !important; position: relative; transition: margin 0.3s ease;
}
/* =========================================
   QUILL CORE FORMATTING (Для фронтенду)
   ========================================= */
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }
iframe.ql-video { width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* =========================================
   ФОРМИ БЛОКІВ (BLOCK DESIGNS)
   ========================================= */

/* Clean - скидаємо все */
.sek-visual-container.design-clean {
    border: none !important;
    box-shadow: none !important;
}

/* Border - акуратна рамка */
.sek-visual-container.design-border {
    border: 2px solid var(--theme-palette-color-5, #e5e7eb) !important;
    box-shadow: none !important;
}

/* Soft Shadow - Еппл стайл */
.sek-visual-container.design-shadow-soft {
    border: 1px solid rgba(0,0,0,0.05) !important;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.1) !important;
}

/* Hard Shadow - Чітка тінь */
.sek-visual-container.design-shadow-hard {
    border: 2px solid #111 !important;
    box-shadow: 8px 8px 0px rgba(0,0,0,0.15) !important;
}

/* Brutalism - Тренд 2024 (Товста рамка + кольорова тінь) */
.sek-visual-container.design-brutalism {
    border: 3px solid #111 !important;
    box-shadow: 6px 6px 0px var(--color-accent, #3b82f6) !important;
    border-radius: 0px !important;
}

/* Glassmorphism - Матове скло */
.sek-visual-container.design-glass {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05) !important;
}
.theme-dark .sek-visual-container.design-glass {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* =========================================
   ВІРТУАЛЬНІ СТОРІНКИ (MULTI-PAGE SPA)
   ========================================= */
.sek-site-wrapper { position: relative; width: 100%; overflow: hidden; }

/* --- ЕФЕКТ 1: SCALE & BLUR (3D Глибина) --- */
.spa-trans-scale-blur body .sek-virtual-page {
    opacity: 0; transform: scale(0.95); filter: blur(8px);
    transition: opacity 0.35s ease-out, transform 0.35s ease-out, filter 0.35s ease-out;
}
.spa-trans-scale-blur body .sek-virtual-page.is-active {
    opacity: 1; transform: scale(1); filter: blur(0);
}
.spa-trans-scale-blur body .sek-virtual-page.is-exiting {
    opacity: 0; transform: scale(1.05); filter: blur(4px);
}

/* --- ЕФЕКТ 2: SOFT FADE (Класичне м'яке розчинення) --- */
.spa-trans-fade body .sek-virtual-page {
    opacity: 0; 
    transition: opacity 0.4s ease-in-out;
}
.spa-trans-fade body .sek-virtual-page.is-active {
    opacity: 1; 
}
.spa-trans-fade body .sek-virtual-page.is-exiting {
    opacity: 0; 
}

/* --- ЕФЕКТ 3: APP SLIDE (Зсув вбік, як у смартфонах) --- */
.spa-trans-slide body .sek-virtual-page {
    opacity: 0; transform: translateX(50px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.spa-trans-slide body .sek-virtual-page.is-active {
    opacity: 1; transform: translateX(0);
}
.spa-trans-slide body .sek-virtual-page.is-exiting {
    opacity: 0; transform: translateX(-50px);
}
.spa-trans-slide body .sek-virtual-page.is-active {
    opacity: 1; transform: translateX(0);
}
.spa-trans-slide body .sek-virtual-page.is-exiting {
    opacity: 0; transform: translateX(-50px);
}

@keyframes sek-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Пішла нова архітектура */
/* 1. ФІКСАЦІЯ (Працює тільки на фронті) */
html.hdr-solid .sek-frontend-header, 
html.hdr-smart .sek-frontend-header, 
html.hdr-glass .sek-frontend-header, 
html.hdr-trans .sek-frontend-header { 
    position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; transition: all 0.4s ease; 
}

/* 2. ВІЗУАЛЬНІ ЕФЕКТИ (Спрацьовують І на фронті, І в редакторі) */
html.hdr-solid .sek-frontend-header, html.hdr-solid .sek-header-preview { 
    background-color: var(--bg-color, #ffffff); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); 
}
html.hdr-trans .sek-frontend-header, html.hdr-trans .sek-header-preview { 
    background-color: transparent; box-shadow: none; 
}
html.hdr-glass .sek-frontend-header, html.hdr-glass .sek-header-preview { 
    background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); 
}
html.hdr-smart .sek-frontend-header, html.hdr-smart .sek-header-preview { 
    background-color: transparent; box-shadow: none; padding-top: 10px; padding-bottom: 10px; 
}
/* Smart Header: Коли сторінка проскролена */
html.hdr-smart.is-header-scrolled .sek-frontend-header { 
    background-color: var(--bg-color, #ffffff); box-shadow: 0 4px 20px rgba(0,0,0,0.05); padding-top: 0; padding-bottom: 0; 
}

/* Кастомний дизайн-тест для Glass (Пігулка) */
html.hdr-glass body .sek-frontend-header, html.hdr-glass .sek_header_block .sek-header-preview {
    width: calc(100% - 20px);
    max-width: var(--content-width, 1200px);
    margin: 10px auto;
    border-radius: 99px;
}

/* ==========================================
   СТИЛІ ФОРМИ (Classic & Minimal)
   ========================================== */
.sek-form-input {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 15px;
    outline: none;
    transition: all 0.2s ease;
}

/* 1. Класична форма (з рамкою) */
.sek-contact-form-blot.style-classic .sek-form-input,
.sek-contact-form-blot.simple .sek-form-input {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    padding: 10px;
}
.sek-contact-form-blot.style-classic .sek-form-input:focus,
.sek-contact-form-blot.simple .sek-form-input:focus {
    border-color: var(--color-accent, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 2. Мінімалістична форма (тільки лінія знизу) */
.sek-contact-form-blot.style-minimal .sek-form-input {
    border: none;
    border-bottom: 2px solid #cbd5e1;
    border-radius: 0;
    background: transparent;
    padding: 10px 0;
}
.sek-contact-form-blot.style-minimal .sek-form-input:focus {
    border-bottom-color: var(--color-accent, #3b82f6);
}

/* ==========================================
   КОМБАЙН: ТАБЛИЦІ ТА ЧЕК-ЛІСТИ
   ========================================== */

/* 1. Таблиці */
.sek-rich-text table.sek-text-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 14px;
    background: #ffffff;
}
.sek-rich-text table.sek-text-table th, 
.sek-rich-text table.sek-text-table td {
    border: 1px solid #cbd5e1;
    padding: 10px 15px;
    min-width: 50px;
    vertical-align: top;
}
.sek-rich-text table.sek-text-table th {
    background: #f8fafc;
    font-weight: 600;
    color: #334155;
    text-align: left;
}

/* 2. Чек-лісти (To-Do) - Магія без <input> */
ul.sek-task-list {
    list-style: none;
    padding-left: 0;
    margin: 10px 0;
}
ul.sek-task-list li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 8px;
    cursor: text;
    min-height: 24px;
    display: flex;
    align-items: center;
}
/* Це наш "віртуальний" чекбокс */
ul.sek-task-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
/* Стан: Виконано */
ul.sek-task-list li.checked {
    text-decoration: line-through;
    opacity: 0.5;
}
ul.sek-task-list li.checked::before {
    background: #10b981;
    border-color: #10b981;
    /* Галочка (SVG) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 10 8 14 16 6'/%3E%3C/svg%3E");
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
}

/* ==========================================
   КОМБАЙН: ЦИТАТИ, КОД, РОЗДІЛЮВАЧІ
   ========================================== */

/* 1. Цитата (Blockquote) */
.sek-rich-text blockquote {
    border-left: 4px solid var(--color-accent, #3b82f6);
    margin: 15px 0;
    padding: 10px 20px;
    background: #f8fafc;
    color: #475569;
    font-style: italic;
    border-radius: 0 8px 8px 0;
    font-size: 16px;
    line-height: 1.6;
}

/* 2. Код (Code Block & Inline Code) */
.sek-rich-text pre {
    background: #0f172a; /* Темний фон для коду */
    color: #e2e8f0;
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;
    font-family: 'Fira Code', 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    margin: 15px 0;
}
.sek-rich-text code {
    background: #f1f5f9;
    color: #ef4444; /* Червоний акцент для інлайн-коду */
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', 'Courier New', Courier, monospace;
    font-size: 13px;
}
/* Щоб інлайн-код всередині темного блоку pre не був білим/червоним */
.sek-rich-text pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

/* 3. Розділювач (Divider) */
.sek-rich-text hr.sek-divider {
    border: none;
    border-top: 3px dotted #cbd5e1; /* Стильні крапочки */
    margin: 30px auto;
    width: 60%;
}

/* Tiptap Task Lists */
ul[data-type="taskList"] {
    list-style: none;
    padding: 0;
    margin: 0 0 1em 0;
}
ul[data-type="taskList"] li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.5em;
}
ul[data-type="taskList"] li label {
    flex: 0 0 auto;
    margin-right: 0.5em;
    user-select: none;
    cursor: pointer;
    margin-top: 0.2em; /* Вирівнюємо галочку по центру тексту */
}
ul[data-type="taskList"] li label input[type="checkbox"] {
    cursor: pointer;
    width: 1.1em;
    height: 1.1em;
    accent-color: #3b82f6; /* Колір активної галочки */
}
ul[data-type="taskList"] li div {
    flex: 1;
}
/* Закреслюємо текст, якщо галочка стоїть */
ul[data-type="taskList"] li[data-checked="true"] div {
    text-decoration: line-through;
    color: #94a3b8;
}

/* ==========================================
   TIPTAP НОВІ БЛОКИ: КОД, АКОРДЕОН, ВІДЕО
   ========================================== */

/* ⌨️ Блок коду (Dark Mode) */
.sek-rich-text pre {
    background: #0f172a;
    color: #f8fafc;
    font-family: 'Fira Code', 'Courier New', Courier, monospace;
    padding: 16px 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 16px 0;
    font-size: 14px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.sek-rich-text pre code {
    color: inherit;
    background: none;
    padding: 0;
    font-size: inherit;
}

/* 🔽 Акордеон (Details) */
.sek-rich-text details.sek-details-accordion {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 16px 0;
    background: #f8fafc;
    transition: background 0.2s ease;
}
.sek-rich-text details.sek-details-accordion:hover {
    background: #f1f5f9;
}
/* Заголовок Акордеону */
.sek-rich-text details.sek-details-accordion summary {
    font-weight: 600;
    cursor: pointer;
    padding: 14px 16px;
    outline: none;
    list-style: none; /* Ховаємо стандартний трикутник */
    display: flex;
    align-items: center;
    color: #0f172a;
}
/* Кастомна анімована стрілочка */
.sek-rich-text details.sek-details-accordion summary::before {
    content: '▶';
    display: inline-block;
    margin-right: 12px;
    font-size: 12px;
    color: #64748b;
    transition: transform 0.2s ease;
}
.sek-rich-text details.sek-details-accordion[open] summary::before {
    transform: rotate(90deg); /* Повертаємо вниз при відкритті */
}
/* Ховаємо рідний маркер Webkit */
.sek-rich-text details.sek-details-accordion summary::-webkit-details-marker {
    display: none;
}
/* Внутрішній контент акордеону */
.sek-rich-text details.sek-details-accordion > div[data-type="detailsContent"] {
    padding: 0 16px 16px 38px; /* Зсуваємо контент під текст заголовка */
    color: #334155;
}

/* ▶️ YouTube Video Responsive */
.sek-rich-text div[data-youtube-video] {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    margin: 16px 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.sek-rich-text div[data-youtube-video] iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ==========================================
   ФІКС: УТРИМАННЯ ВІЗУАЛЬНОГО КОНТЕЙНЕРА В МЕЖАХ ОБОЛОНКИ
   ========================================== */

/* 1. Налаштовуємо батьківську оболонку */
.sek-visual-inner {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* 2. Жорстко обмежуємо сам блок з градієнтом */
.sek-visual-container {
    width: 100% !important; /* Забороняємо бути ширшим за 100% */
    max-width: 100% !important;
    box-sizing: border-box !important; /* Падінги і рамки йдуть всередину */
    overflow-wrap: break-word; /* Якщо всередині довге слово або посилання - воно перенесеться, а не розтягне блок */
    word-break: break-word;
}

/* 3. Опціонально: якщо у вас є заокруглені кути на оболонці, 
   цей фікс не дасть фону (градієнту) "витікати" за ці кути */
.sek-visual-container {
    border-radius: inherit; /* Успадкувати кути від батька */
    overflow: hidden; /* Зрізати все, що виходить за межі кутів */
}

/* 4. Запобігаємо розриву від Flex/Grid дітей всередині контейнера */
.sek-content-wrapper,
.sek-columns-grid,
.sek-editor-column {
    min-width: 0 !important; /* Магія CSS Grid/Flex: не дає дітям розпирати батька */
    max-width: 100%;
    box-sizing: border-box;
}

/* Вчимо хедер поважати батьківські кордони */
.sek-header-preview {
    box-sizing: border-box !important;
    max-width: 100% !important;
}