/* ==========================================================
   ЛИСТИК
   pages.css
   Экран просмотра и редактирования страниц
========================================================== */

.pages-screen {

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;
    height: 100dvh;

    background: #111;

    color: #fff;

    overflow: hidden;

    z-index: 1000;

}

.pages-view {

    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

}

.pages-view::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: calc(78px + env(safe-area-inset-top));

    background: #000000;

    z-index: 10;

    pointer-events: none;

}

.pages-view::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: calc(104px + env(safe-area-inset-bottom));

    background: #000000;

    z-index: 10;

    pointer-events: none;

}

.pages-track {

    position: absolute;

    inset: 0;

    display: flex;

    width: 100%;
    height: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;

    scroll-behavior: smooth;

    scrollbar-width: none;

    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;

}

.pages-track::-webkit-scrollbar {
    display: none;
}

.page {

    position: relative;

    overflow: hidden;

    flex: 0 0 100%;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    scroll-snap-align: start;

    scroll-snap-stop: always;

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}

.page-image {

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;

    object-fit: contain;

    border-radius: 0;

    box-shadow: none;

    user-select: none;

    -webkit-user-select: none;

    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;

}

/* ==========================================================
   ВЕРХНИЙ СЧЁТЧИК
========================================================== */

.pages-overlay-info {

    position: absolute;

    top: 18px;
    left: 50%;

    transform: translateX(-50%);

    width: max-content;
    max-width: calc(100vw - 200px);

    z-index: 20;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2px;

    pointer-events: none;

    text-align: center;

}

.pages-overlay-subject {

    font-size: 13px;
    font-weight: 600;

    color: rgba(255, 255, 255, 0.82);

    text-transform: uppercase;
    letter-spacing: 0.03em;

    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);

}

/*
 * Никакого стекла.
 * Никакого blur.
 * Никакого фона.
 * Просто белый текст поверх фотографии.
 */

.pages-overlay-counter {

    position: static;

    display: inline-block;

    padding: 0 !important;

    margin: 0 !important;

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

    color: rgba(255, 255, 255, 0.96);

    font-size: 17px;

    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.65);

}

/* ==========================================================
   СТРЕЛКИ
========================================================== */

.pages-arrow {

    position: absolute;

    top: 50%;

    z-index: 30;

    width: 64px;
    height: 64px;

    margin-top: -32px;

    border: 0;

    border-radius: 50%;

    background: rgba(20, 20, 20, 0.72);

    color: #fff;

    font-size: 48px;

    font-weight: 300;

    line-height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        background 0.15s ease;

}

.pages-arrow:hover {
    background: rgba(40, 40, 40, 0.9);
}

.pages-arrow:active {
    transform: scale(0.92);
}

.pages-arrow-left {
    left: 18px;
}

.pages-arrow-right {
    right: 18px;
}

.pages-arrow.hidden {
    display: none;
}

/* ==========================================================
   НИЖНЯЯ ПАНЕЛЬ
========================================================== */

.pages-overlay-actions {

    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 24px;

    z-index: 40;

    display: flex;

    align-items: center;

    gap: 14px;

}

/* ==========================================================
   КРУГЛЫЕ КНОПКИ
========================================================== */

.pages-overlay-button {

    flex: 0 0 58px;

    width: 58px;
    height: 58px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(30, 30, 30, 0.88);

    color: #fff;

    font-size: 29px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.28);

    transition:
        transform 0.15s ease,
        background 0.15s ease;

}

.pages-overlay-button:hover {
    background: rgba(50, 50, 50, 0.95);
}

.pages-overlay-button:active {
    transform: scale(0.91);
}

/* ==========================================================
   ДАЛЕЕ
========================================================== */

.pages-overlay-send {

    flex: 1;

    min-width: 0;

    height: 58px;

    border: 0;

    border-radius: 30px;

    background: #fff;

    color: #171717;

    font-size: 18px;

    font-weight: 650;

    cursor: pointer;

    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.15s ease,
        background 0.15s ease;

}

.pages-overlay-send:hover {
    background: #f4f4f4;
}

.pages-overlay-send:active {
    transform: scale(0.98);
}

/* ==========================================================
   УДАЛЕНИЕ
========================================================== */

.pages-back-button {

    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 50;

    width: 50px;
    height: 50px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(35, 35, 35, 0.88);

    color: rgba(255, 255, 255, 0.96);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.28);

    transition:
        transform 0.15s ease,
        background 0.15s ease;

}

.pages-back-button svg {
    width: 22px;
    height: 22px;
    display: block;
}

.pages-back-button:hover {
    background: rgba(55, 55, 55, 0.96);
}

.pages-back-button:active {
    transform: scale(0.9);
}

.pages-delete-current {

    position: absolute;

    top: 18px;
    right: 18px;

    z-index: 50;

    width: 58px;
    height: 58px;

    padding: 0;

    border: none !important;

    border-radius: 0 !important;

    background: none !important;
    box-shadow: none !important;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));

    transition: transform 0.15s ease;

}

.pages-delete-current svg {
    width: 36px;
    height: 36px;
}

.pages-delete-current:hover {
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.7));
}

.pages-delete-current:active {
    transform: scale(0.9);
}

/* ==========================================================
   МОБИЛЬНЫЕ
========================================================== */

@media (max-width: 600px) {

    .pages-screen {

        width: 100vw;

        height: 100vh;

        height: 100dvh;

    }

    .pages-overlay-counter {

        font-size: 16px;

    }

    .pages-delete-current {

        top: 18px;
        right: 18px;

        width: 56px;
        height: 56px;

    }

    .pages-arrow {

        width: 58px;
        height: 58px;

        margin-top: -29px;

        font-size: 43px;

    }

    .pages-arrow-left {
        left: 12px;
    }

    .pages-arrow-right {
        right: 12px;
    }

    .page {

        padding: 0;

        margin: 0;

    }

    .page-image {

        max-width: 100%;
        max-height: 100%;

        border-radius: 0;

        box-shadow: none;

    }

    .pages-overlay-actions {

        left: 16px;
        right: 16px;
        bottom: 18px;

        gap: 10px;

    }

    .pages-overlay-button {

        flex-basis: 54px;

        width: 54px;
        height: 54px;

        font-size: 27px;

    }

    .pages-overlay-send {

        height: 54px;

        font-size: 17px;

    }

}

/* ==========================================================
   ОЧЕНЬ УЗКИЕ ЭКРАНЫ
========================================================== */

@media (max-width: 380px) {

    .pages-overlay-actions {

        gap: 8px;

    }

    .pages-overlay-button {

        flex-basis: 50px;

        width: 50px;
        height: 50px;

    }

    .pages-overlay-send {

        height: 50px;

    }

    .pages-arrow {

        width: 52px;
        height: 52px;

        margin-top: -26px;

    }

}

.pages-track { touch-action: pan-x; }
.page-image { touch-action: pan-x; }