/*
 * ===== Кнопка-якорь "к видео" на фото товара =====
 * Небольшой полупрозрачный кружок в левом нижнем углу галереи — просто
 * ссылка-переход на секцию #video-review ниже по странице (см.
 * show.blade.php), без подписи. Показывается только если у товара есть
 * видеообзор — иначе вести некуда, и кнопки в разметке вообще нет.
 */
.product-video-anchor {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.product-video-anchor:active {
    background: rgba(0, 0, 0, 0.55);
}

.product-video-anchor svg {
    width: 18px;
    height: 18px;
    color: #fff;
}

/* ===== Переключатель цветов + доп. опции товара =====
   Единый визуальный язык для ОБОИХ рядов ("Цвет" и любые доп. опции вроде
   "Цвет чехла"/"Размер") — пилюля: цветной кружок слева (если задан) +
   название справа. Раньше цвет был голым кружком без подписи, а доп.
   опции — визуально другим, менее аккуратным стилем; теперь оба используют
   общий .variant-chip, см. show.blade.php. */
.product-option-group-label {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

/*
 * Отступ МЕЖДУ группами (напр. "Цвет" и следующая доп. опция) — такой же,
 * как между ценой и "Цвет" выше (price margin-bottom: 4px в show.blade.php).
 * Не трогает отступ ПЕРЕД первой группой — та просто идёт вплотную к цене
 * (после того, как .product-option-group лишился собственного padding-top).
 */
.product-option-group + .product-option-group {
    margin-top: 4px;
}

/*
 * Цвет товара и доп. опции — один и тот же ряд-в-один-строку со скроллом
 * (как галерея фото товара), а не перенос на новую строку: отрицательный
 * margin + компенсирующий padding "выпускают" ряд за пределы паддинга
 * .page-container (12px), так что первый/последний элемент можно докрутить
 * свайпом до самого края экрана.
 */
.color-swatches,
.product-option-values {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    margin: 0 -12px;
    padding: 0 12px;
}

.color-swatches::-webkit-scrollbar,
.product-option-values::-webkit-scrollbar {
    display: none;
}

.color-swatches .variant-chip,
.product-option-values .variant-chip {
    flex-shrink: 0;
}

.variant-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--bg-block);
    background-color: var(--bg-block);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--color-text);
    font-family: inherit;
}

.variant-chip.active {
    border-color: var(--color-accent);
    background-color: #fff;
}

.variant-chip-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
    flex-shrink: 0;
}

/* Подсветка цветов красным, когда покупатель нажал "Оформить заказ", не
   выбрав цвет (07.09.2026) — see JS ниже в show.blade.php. Снимается сразу
   при выборе любого цвета. */
.color-swatch.is-invalid {
    border-color: #c0392b;
}

/* Отступ над надписью "Выберите цвет" такой же, как под ней (10px) — по
   умолчанию у .field-error-text отрицательный margin-top (-4px), рассчитанный
   на другие поля формы (там надпись сразу под инпутом); здесь между рядом
   цветов и текстом ошибки нужен обычный отступ, а не "подтягивание" вверх. */
#colorRequiredError {
    margin-top: 10px;
}

/* ===== Аккордеоны (характеристики / комплектация) ===== */
.accordion-section {
    background-color: var(--bg-block);
    border-radius: var(--radius-block);
    margin-bottom: 10px;
    overflow: hidden;
}

.accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Отступ снова симметричный сверху/снизу — асимметричный (14px/6px)
       ломал вертикальное центрирование заголовка внутри закрытого блока
       (текст съезжал ближе к низу). Зазор к содержимому теперь убирается
       не отступом самого заголовка, а отрицательным margin-top у
       .accordion-body ниже — так заголовок остаётся ровно по центру
       независимо от того, насколько плотно к нему подведён текст. */
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.accordion-summary::-webkit-details-marker {
    display: none;
}

/*
 * Раньше здесь был текстовый символ "⌄" — при повороте на 180deg он
 * визуально "переворачивался" некрасиво (шрифтовой глиф, а не векторная
 * фигура) и был узким (маленький угол между "усами"). Теперь обычная SVG
 * стрелка (см. show.blade.php) — вращается как единая фигура без скачков,
 * а сам угол между линиями сделан шире через пропорции viewBox/path.
 */
.accordion-chevron {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: transform 0.15s ease;
}

.accordion-section[open] .accordion-chevron {
    transform: rotate(180deg);
}

/*
 * Отрицательный margin-top подтягивает содержимое ближе к заголовку, не
 * трогая собственные (симметричные) отступы .accordion-summary — так
 * заголовок остаётся по центру и в закрытых блоках ("Характеристики"/
 * "Комплектация" до раскрытия), и в статичных ("Описание"/"Видеообзор"/
 * "Отзывы", где контент виден всегда). Действует одинаково на все типы
 * блоков, т.к. это общий класс .accordion-body.
 */
.accordion-body {
    padding: 0 18px 16px 18px;
    margin-top: -8px;
}

/*
 * Раньше строка была display:flex с justify-content:space-between без
 * зафиксированной ширины колонок — на длинном значении ("до 5 часов работы
 * от одного заряда...") это переносилось на вторую строку без выделенной
 * колонки под текст и визуально "разъезжалось" относительно короткой метки
 * слева. Теперь — грид с двумя колонками фиксированных пропорций: метка
 * слева, значение справа, перенос длинного значения остаётся аккуратно
 * внутри своей колонки (выровнено по правому краю, как и короткие значения).
 */
.accordion-spec-row {
    display: grid;
    grid-template-columns: minmax(0, 42%) 1fr;
    column-gap: 14px;
    /* Было baseline — название характеристики выравнивалось по первой
       строке значения, и при многострочном значении (> 2 строк) визуально
       "прилипало" к верху. center держит название по вертикальному центру
       всего значения, сколько бы строк оно ни занимало. */
    align-items: center;
    font-size: 14px;
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
}

.accordion-spec-row:first-child {
    padding-top: 0;
}

.accordion-spec-row:last-child {
    border-bottom: none;
}

.accordion-spec-label {
    color: var(--color-text-muted);
}

.accordion-spec-value {
    color: var(--color-text);
    text-align: right;
    line-height: 1.4;
    /* 08.09.2026 - поле "Значение" в админке теперь textarea (можно
       вводить текст в несколько строк через Enter) - без pre-line
       переносы строк из textarea схлопывались бы в один пробел, как и
       любой обычный HTML-текст. */
    white-space: pre-line;
}

/*
 * <video> по умолчанию inline (не block) — как inline-замещаемый элемент,
 * он может тянуть за собой пару лишних "фантомных" пикселей от line-height
 * родителя, из-за которых отступ под заголовком "Видеообзор" визуально
 * выглядит не таким плотным, как у текстовых блоков (где первый элемент —
 * обычный блочный <p>/<div>). display: block убирает эту зависимость.
 */
.accordion-body video {
    display: block;
}

/* ===== Отзывы (фото) ===== */
/*
 * Блок "Отзывы" — фиксированная высота (07.09.2026, задаётся JS в
 * show.blade.php: ровно в 5 раз выше нераскрытого блока "Комплектация"),
 * а не "сколько влезет" от размера фото. #reviewsSection — это сам
 * .accordion-section, растянут в колонку: заголовок обычной высоты сверху,
 * ряд фото занимает всё оставшееся место и сам масштабирует фото под него.
 */
#reviewsSection {
    display: flex;
    flex-direction: column;
}

#reviewsSection .accordion-body {
    flex: 1;
    min-height: 0;
}

.review-photos-row {
    display: flex;
    gap: 8px;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.review-photos-row::-webkit-scrollbar {
    display: none;
}

.review-photo {
    /* Высота = высота ряда (то есть 1/5 всего фиксированного блока),
       ширина считается браузером САМА по реальным пропорциям фото -
       никаких "раздутых" квадратов/каточек. */
    height: 100%;
    width: auto;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: var(--radius-block);
    cursor: zoom-in;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    scroll-snap-align: start;
}

/* ===== Увеличение фото-отзыва по клику (не fullscreen — просто крупный
   вид по центру экрана поверх остального контента, как в обычных
   приложениях) ===== */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.75);
    align-items: center;
    justify-content: center;
    padding: 32px;
    cursor: zoom-out;
    /* Управление только свайпом (07.09.2026) - запрещаем браузеру самому
       скроллить/масштабировать по жесту здесь, JS сам решает, что делать
       с touchmove (см. show.blade.php). */
    touch-action: none;
}

.lightbox-overlay.is-open {
    display: flex;
}

.lightbox-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--radius-block);
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    /* Плавный переход между отзывами при свайпе (07.09.2026) - JS гасит
       (.is-fading), подменяет src, затем убирает класс обратно. */
    transition: opacity 0.15s ease;
}

.lightbox-img.is-fading {
    opacity: 0;
}

/* ===== Липкая кнопка "В корзину" над нижним меню ===== */
.sticky-add-to-cart {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 88px; /* выше .bottom-nav (bottom: 14px + собственная высота) */
    width: calc(100% - 24px);
    max-width: 576px;
    z-index: 20;
}

/* Кнопка "Добавить в корзину" -> "В корзине" (07.09.2026, по обратной связи
   от Васи) - зелёный, тот же цвет, что уже используется в палитре магазина
   для метки "New" (--mark-new в app.css), а не новый случайный цвет.
   Селектор по #id, а не по .checkout-submit-btn - этот класс общий с кнопкой
   "Оформить заказ" в корзине, красить её тоже не нужно. */
#addToCartBtn.is-in-cart {
    background-color: var(--mark-new);
}

/* Ряд "кнопка + степпер количества" (08.09.2026, по обратной связи от Васи) -
   кнопка "В корзине" сужается (flex: 1, а не 100%, как раньше), справа
   появляется степпер "-/кол-во/+" того же вида, что уже используется в самой
   корзине (см. .cart-item-qty в cart.css) - для единообразия. Плавность
   (доп. правка по той же обратной связи - "не хватает плавности") даёт
   переход у САМОГО степпера (max-width/padding/opacity/margin-left) -
   кнопка рядом сама плавно "досужается" бесплатно, т.к. занимает
   оставшееся место (flex: 1 1 auto) в том же ряду. */
.sticky-add-to-cart-row {
    display: flex;
    align-items: stretch;
}

#addToCartBtn {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    /* .checkout-submit-btn (общий класс с кнопкой "Оформить заказ" в
       корзине) даёт margin-top: 16px - там это нужно, чтобы отделить кнопку
       от блока согласий выше; здесь кнопка одна в строке степпера, лишний
       отступ просто сдвигал бы её вниз относительно степпера. */
    margin-top: 0;
    /* Плавная смена цвета на зелёный при переходе в "В корзине", а не
       мгновенный скачок (08.09.2026, по обратной связи от Васи). */
    transition: background-color 0.2s ease, opacity 0.15s ease;
}

.cart-qty-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex: 0 0 auto;
    max-width: 0;
    padding: 0;
    margin-left: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    background-color: var(--bg-block);
    border-radius: var(--radius-block);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    transition: max-width 0.28s ease, padding 0.28s ease, margin-left 0.28s ease, opacity 0.2s ease 0.05s;
}

.cart-qty-stepper[hidden] {
    display: none;
}

/* Класс добавляется/убирается JS-ом (см. activateInCart/deactivateInCart в
   show.blade.php) - именно переключение класса, а не hidden напрямую,
   запускает CSS-transition выше. */
.cart-qty-stepper--visible {
    max-width: 160px;
    padding: 0 18px;
    margin-left: 10px;
    opacity: 1;
}

.cart-qty-stepper-btn {
    background: none;
    border: none;
    padding: 0;
    width: 20px;
    line-height: 1;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
}

#cartQtyValue {
    min-width: 16px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}