/* ==========================================================================
   ШОНЕР — фото и видео в отзывах о магазине (страница /otzyv).
   Файл: catalog/view/theme/oct_showcase/stylesheet/shoner-reviews.css
   Подключение: template/common/header.twig (и копия в storage/modification).
   Источник — раздел 5 oct-custom.css с shoner-otval.ru, перенесён 02.10.2026.
   Отдельным файлом, а не всем oct-custom.css: остальные его разделы на
   shoner.ru не подключались, и включать их заодно — менять вид сайта.
   ========================================================================== */

:root {
    --sc-accent:      #f0bf64; /* фирменный жёлтый темы */
    --sc-accent-dark: #c9922c; /* тот же жёлтый, контрастный для текста */
    --sc-ink:         #1c1c28; /* основной текст темы */
}

/* --- Форма: выбор файлов -------------------------------------------------- */

.sc-review-media-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sc-review-media-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .55rem 1rem;
    border: 1px dashed rgba(28, 28, 40, .35);
    background: rgba(255, 255, 255, .45);
    color: var(--sc-ink);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.sc-review-media-btn:hover,
.sc-review-media-input:focus + .sc-review-media-btn {
    border-color: var(--sc-accent-dark);
    background: rgba(255, 255, 255, .75);
}

.sc-review-media-btn-plus {
    font-size: 1.125rem;
    line-height: 1;
    color: var(--sc-accent-dark);
}

/* --- Форма: список выбранных файлов --------------------------------------- */

.sc-review-media-list:not(:empty) {
    margin-top: .75rem;
}

.sc-review-media-file {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    overflow: hidden;
    margin-bottom: .375rem;
    padding: .45rem .5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, .5);
    font-size: .8125rem;
}

.sc-review-media-file-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sc-review-media-file-meta {
    flex: 0 0 auto;
    color: #6b6b78;
    font-size: .75rem;
}

.sc-review-media-file-remove {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(28, 28, 40, .1);
    color: var(--sc-ink);
    font-size: 15px;
    line-height: 18px;
    cursor: pointer;
}

.sc-review-media-file-remove:hover {
    background: rgba(28, 28, 40, .2);
}

/* Полоса прогресса — тонкая линия по низу строки */
.sc-review-media-file-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--sc-accent);
    transition: width .2s ease;
}

.sc-review-media-file-loading .sc-review-media-file-remove {
    visibility: hidden;
}

.sc-review-media-file-error {
    background: rgba(220, 53, 69, .1);
}

.sc-review-media-file-error .sc-review-media-file-meta {
    color: #b02a37;
}

/* --- Галерея внутри отзыва ------------------------------------------------ */

.sc-review-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.sc-review-gallery-item {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
}

.sc-review-gallery-photo {
    width: 96px;
    height: 96px;
    cursor: zoom-in;
}

.sc-review-gallery-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}

.sc-review-gallery-photo:hover img {
    transform: scale(1.06);
}

.sc-review-gallery-video {
    width: 240px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* --- Просмотр фото во весь экран ------------------------------------------ */

.sc-review-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2147483000; /* выше липкой шапки темы и кнопки чата */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(12, 12, 16, .88);
}

.sc-review-lightbox.is-open {
    display: flex;
}

.sc-review-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    object-fit: contain;
}

.sc-review-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 26px;
    line-height: 38px;
    cursor: pointer;
}

.sc-review-lightbox-close:hover {
    background: rgba(255, 255, 255, .3);
}

@media (max-width: 575.98px) {
    .sc-review-gallery-photo { width: 72px; height: 72px; }
    .sc-review-gallery-video { width: 100%; }
}