/* 1. Головний контейнер */
.ppv-viewer-container.dark,
.dark .ppv-viewer-container {
    background-color: #0c0a09 !important;
    color: #f5f5f4 !important;
    border-color: #27272a !important;
}

.ppv-viewer-container.dark main {
    background-color: #0c0a09 !important;
}

/* 2. Панелі */
.ppv-viewer-container.dark header,
.ppv-viewer-container.dark header + div,
.ppv-viewer-container.dark div[class*="h-12"],
.ppv-viewer-container.dark div[class*="h-14"] {
    background-color: #1c1917 !important;
    border-color: #292524 !important;
    color: #e7e5e4 !important;
}

/* 3. Заголовок */
.ppv-viewer-container.dark .ppv-doc-title,
.ppv-viewer-container.dark header h1 {
    color: #ffffff !important;
}

/* 4. Кнопки та курсори */
.ppv-viewer-container button,
.ppv-viewer-container a,
.ppv-viewer-container .ppv-dropdown-item {
    cursor: pointer;
}

.ppv-viewer-container.dark button {
    background-color: #262322 !important;
    border-color: #3f3e3b !important;
    color: #d6d3d1 !important;
}

.ppv-viewer-container.dark button:hover {
    background-color: #3f3e3b !important;
    color: #f59e0b !important;
    border-color: #f59e0b !important;
}

/* 5. Стилі контейнера, інпуту та дропдауну масштабу */
.ppv-custom-select-container {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ppv-custom-select-container:focus-within {
    border-color: #f59e0b !important;
}

.ppv-zoom-input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ppv-zoom-dropdown-btn {
    border: none !important;
    background: transparent !important;
}

.ppv-zoom-dropdown-menu {
    width: 105px !important;
}

.ppv-dropdown-item {
    transition: background-color 0.15s ease;
    color: #1c1917 !important;
}

.ppv-dropdown-item:hover {
    background-color: #f5f5f4 !important;
    color: #1c1917 !important;
}

.ppv-item-fit {
    border-bottom: 1px solid #e7e5e4 !important;
    color: #1c1917 !important;
}

/* Дропдаун у темній темі */
.ppv-viewer-container.dark .ppv-custom-select-container {
    background-color: #0c0a09 !important;
    border-color: #3f3e3b !important;
}

.ppv-viewer-container.dark .ppv-zoom-dropdown-menu {
    background-color: #1c1917 !important;
    border-color: #3f3e3b !important;
}

.ppv-viewer-container.dark .ppv-dropdown-item {
    color: #e7e5e4 !important;
}

.ppv-viewer-container.dark .ppv-dropdown-item:hover {
    background-color: #262322 !important;
    color: #e7e5e4 !important;
}

.ppv-viewer-container.dark .ppv-item-fit {
    border-bottom: 1px solid #3f3e3b !important;
    color: #e7e5e4 !important;
}

/* 6. Стилізація стандартних бокових кнопок слайдера Swiper */
.ppv-viewer-container .swiper-button-next,
.ppv-viewer-container .swiper-button-prev {
    width: 40px !important;
    height: 40px !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid #e7e5e4 !important;
    border-radius: 12px !important;
    color: #292524 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(4px) !important;
    transition: all 0.2s ease !important;
}

.ppv-viewer-container .swiper-button-next:after,
.ppv-viewer-container .swiper-button-prev:after {
    font-size: 16px !important;
    font-weight: bold !important;
}

.ppv-viewer-container .swiper-button-next:hover,
.ppv-viewer-container .swiper-button-prev:hover {
    background-color: #ffffff !important;
    color: #d97706 !important;
    border-color: #f59e0b !important;
    transform: scale(1.05) !important;
}

/* Темна тема для кнопок Swiper */
.ppv-viewer-container.dark .swiper-button-next,
.ppv-viewer-container.dark .swiper-button-prev {
    background-color: rgba(28, 25, 23, 0.85) !important;
    border-color: #3f3e3b !important;
    color: #f5f5f4 !important;
}

.ppv-viewer-container.dark .swiper-button-next:hover,
.ppv-viewer-container.dark .swiper-button-prev:hover {
    background-color: #262322 !important;
    color: #f59e0b !important;
    border-color: #f59e0b !important;
}

/* 7. Інпути та поле пошуку */
.ppv-viewer-container.dark .ppv-search-input {
    background-color: #0c0a09 !important;
    color: #e7e5e4 !important;
    border-color: #3f3e3b !important;
}

.ppv-viewer-container.dark .ppv-search-input::placeholder {
    color: #78716c !important;
}

/* 8. Повзунок прокручування сторінок */
.ppv-viewer-container.dark input[type="range"].ppv-page-range {
    background-color: #292524 !important;
}

.ppv-viewer-container.dark input[type="range"].ppv-page-range::-webkit-slider-thumb {
    background-color: #d97706 !important;
    border: 2px solid #f59e0b !important;
}

/* 9. Блок лічильника та бейджі */
.ppv-viewer-container.dark .ppv-page-fraction,
.ppv-viewer-container.dark div:has(> .ppv-page-fraction) {
    background-color: #262322 !important;
    border-color: #3f3e3b !important;
    color: #f59e0b !important;
}

.ppv-viewer-container.dark .ppv-access-badge {
    background-color: #262322 !important;
    border-color: #3f3e3b !important;
    color: #fbbf24 !important;
}

.ppv-viewer-container.dark .ppv-page-input {
    background-color: #0c0a09 !important;
    color: #f59e0b !important;
    border-color: #3f3e3b !important;
}

/* Фікс іконки документа у темній темі */
.ppv-viewer-container.dark header div.bg-amber-50 {
    background-color: rgba(69, 26, 3, 0.5) !important;
    border-color: rgba(146, 64, 14, 0.6) !important;
}

/* Фікс блоку вводу сторінки (Стор. X з Y) */
.ppv-viewer-container.dark div:has(> .ppv-page-input) {
    background-color: #1c1917 !important;
    border-color: #3f3e3b !important;
    color: #e7e5e4 !important;
}

/* Запобігаємо візуальному виходу зображення за межі слайда до моменту розрахунку JS */
.ppv-viewer-container .zoom-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Коли JS вираховує точні нативні пікселі, ми знімаємо обмеження max-width/max-height через JS, 
   але початковий стан не розриває верстку */

/* Вимикаємо анімацію масштабування при першому рендерингу, щоб не було видно "стискання" */
.ppv-viewer-container .zoom-wrapper.no-transition {
    transition: none !important;
}