/* ==========================================
   Листик
   preview.css
   Предпросмотр фотографии
========================================== */

.preview-screen {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100dvh;

    background: #000;

    overflow: hidden;

    z-index: 9999;
}


/* ==========================================
   ЛЕНТА ФОТОГРАФИЙ
========================================== */

.preview-track {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

    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;
}

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


/* ==========================================
   ОДНА СТРАНИЦА
========================================== */

.preview-page {
    position: relative;

    flex: 0 0 100%;

    width: 100%;
    height: 100%;

    scroll-snap-align: start;

    scroll-snap-stop: always;

    overflow: hidden;
}


/* ==========================================
   ФОТО
========================================== */

.preview-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    background: #000;

    user-select: none;
    -webkit-user-select: none;

    pointer-events: none;
}


/* ==========================================
   ИНФОРМАЦИЯ
========================================== */

.preview-info {
    position: absolute;

    top: 24px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 5;

    padding: 8px 14px;

    border-radius: 20px;

    background: rgba(0, 0, 0, .55);

    color: #fff;

    font-family: Manrope, sans-serif;

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

    white-space: nowrap;

    pointer-events: none;
}


/* ==========================================
   ПЕРЕСНЯТЬ ТЕКУЩИЙ ЛИСТИК
========================================== */

.preview-retake-button {

    position: absolute;

    top: 20px;
    right: 20px;

    z-index: 10;

    width: 58px;
    height: 58px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: rgba(0, 0, 0, .55);

    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: Arial, sans-serif;

    font-size: 34px;
    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

    transition:
        transform .15s ease,
        background .15s ease;
}


.preview-retake-button:active {
    transform: scale(.90);
}


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

.preview-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 6;

    width: 52px;
    height: 76px;

    padding: 0;

    border: none;
    border-radius: 26px;

    background: rgba(0, 0, 0, .42);

    color: #fff;

    display: none;

    align-items: center;
    justify-content: center;

    font-family: Arial, sans-serif;

    font-size: 58px;
    font-weight: 200;

    line-height: 1;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}


.preview-arrow:active {
    transform:
        translateY(-50%)
        scale(.92);
}


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


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


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

.preview-bottom-actions {

    position: absolute;

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

    width: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    padding:
        16px
        16px
        max(24px, env(safe-area-inset-bottom));

    box-sizing: border-box;

    z-index: 7;

    background: #000000;

    pointer-events: none;
}


/* ==========================================
   КНОПКИ НИЖНЕЙ ПАНЕЛИ
========================================== */

.preview-action-button {

    position: relative;

    flex: 0 0 auto;

    min-width: 64px;

    min-height: 58px;

    padding: 7px 10px;

    border: none;
    border-radius: 16px;

    background: rgba(20, 20, 20, .78);

    color: #fff;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 2px;

    font-family: Manrope, sans-serif;

    font-size: 26px;
    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    pointer-events: auto;

    -webkit-tap-highlight-color: transparent;

    transition:
        transform .15s ease,
        opacity .15s ease;
}


.preview-action-button span {

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

    line-height: 1.1;

    white-space: nowrap;

}


.preview-action-button:active {

    transform: scale(.92);

}


/* ==========================================
   КНОПКА "ДАЛЕЕ"
========================================== */

.preview-send-button {

    background: #4f9b5c;

}


/* ==========================================
   МАЛЕНЬКИЕ ТЕЛЕФОНЫ
========================================== */

@media (max-width: 480px) {

    .preview-info {

        top: 18px;

        font-size: 13px;

        padding: 7px 12px;

    }


    .preview-retake-button {

        top: 16px;
        right: 16px;

        width: 54px;
        height: 54px;

        font-size: 31px;

    }


    .preview-arrow {

        width: 46px;
        height: 68px;

        font-size: 50px;

    }


    .preview-arrow-left {
        left: 8px;
    }


    .preview-arrow-right {
        right: 8px;
    }


    .preview-bottom-actions {

        gap: 8px;

        padding:
            12px
            10px
            max(20px, env(safe-area-inset-bottom));

    }


    .preview-action-button {

        min-width: 58px;

        min-height: 54px;

        padding: 6px 7px;

        font-size: 24px;

    }


    .preview-action-button span {

        font-size: 9px;

    }

}


/* ==========================================
   ПЛАНШЕТЫ И НОУТБУКИ
========================================== */

@media (min-width: 768px) {

    .preview-retake-button {

        top: 24px;
        right: 24px;

        width: 62px;
        height: 62px;

        font-size: 36px;

    }


    .preview-arrow {

        width: 56px;
        height: 82px;

        font-size: 62px;

    }


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


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


    .preview-bottom-actions {

        gap: 14px;

        padding:
            18px
            20px
            max(24px, env(safe-area-inset-bottom));

    }

}