/* ЯнтарьПром — Система отзывов. Все стили через переменные темы. */

/* ---- общие звёзды ---- */
.yp-rv-stars { display: inline-flex; gap: 1px; color: var(--color-border); font-size: 1.05rem; line-height: 1; letter-spacing: 1px; }
.yp-rv-stars .star { color: var(--color-border); }
.yp-rv-stars .star.is-active { color: var(--color-accent, #D6A259); }

/* ============ Карточка товара: блок отзывов ============ */
.product-reviews { margin-top: 64px; }
.product-reviews__header { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.product-reviews__title { font: 600 1.5rem/1.2 var(--font-serif); margin: 0; }
.product-reviews__summary { display: inline-flex; align-items: center; gap: 8px; }
.product-reviews__rating-num { font-weight: 600; font-size: 1.1rem; color: var(--color-text); }
.product-reviews__count { color: var(--color-text-soft); font-size: 0.95rem; }
.product-reviews__subtitle { font: 600 1.1rem/1.3 var(--font-serif); margin: 0 0 12px; }
.product-reviews__list { display: flex; flex-direction: column; gap: 16px; }
.product-reviews__empty { color: var(--color-text-soft); font-size: 0.97rem; margin: 0; }
.product-reviews__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; margin-bottom: 8px; }
/* Проблема 2: обе кнопки «Все отзывы»/«Оставить отзыв» — бренд Primary (только карточка товара) */
.product-reviews__actions .yp-rv-btn { padding: 10px 24px; font-size: 0.85rem; font-family: 'Inter', system-ui, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; border-radius: 6px; background: var(--color-accent, #D6A259); color: #FFFFFF; border-color: var(--color-accent, #D6A259); }
.product-reviews__actions .yp-rv-btn:hover { filter: brightness(0.9); opacity: 1; background: var(--color-accent, #D6A259); color: #FFFFFF; }

/* ---- элемент отзыва ---- */
.yp-review { display: flex; gap: 14px; padding: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); }
.yp-review--photo .yp-review__avatar { flex-shrink: 0; }
.yp-review__avatar { padding: 0; border: none; background: none; cursor: pointer; position: relative; line-height: 0; -webkit-tap-highlight-color: transparent; }
.yp-review__avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; }
.yp-review__photo-count { position: absolute; right: -2px; bottom: -2px; background: var(--color-accent, #C98B3B); color: #fff; font-size: 0.7rem; font-weight: 600; line-height: 1; padding: 3px 5px; border-radius: 10px; border: 2px solid var(--color-surface, #fff); }
.yp-review__body { flex: 1; min-width: 0; }
.yp-review__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.yp-review__name { font-weight: 600; color: var(--color-text); }
.yp-review__text { color: var(--color-text); font-size: 0.97rem; line-height: 1.6; word-wrap: break-word; }
.yp-review__more { background: none; border: none; padding: 0; margin-left: 4px; color: var(--color-accent, #D6A259); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.yp-review__meta { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.yp-review__date { color: var(--color-text-soft); font-size: 0.85rem; }
.yp-review__delete { background: none; border: none; padding: 0; color: var(--color-error, #B85A3E); cursor: pointer; font: inherit; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 2px; }
.yp-review__delete:hover { opacity: 0.8; }

/* ============ Кнопки ============ */
.yp-rv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: var(--radius-md, 8px); font: 600 0.95rem/1 inherit; cursor: pointer; border: 1px solid transparent; transition: opacity .2s ease, background .2s ease; }
.yp-rv-btn--primary { background: var(--color-accent, #D6A259); color: var(--color-text, #0E1A2B); border-color: var(--color-accent, #D6A259); }
.yp-rv-btn--primary:hover { opacity: .9; }
.yp-rv-btn--primary:disabled { opacity: .45; cursor: not-allowed; }
.yp-rv-btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.yp-rv-btn--ghost:hover { background: var(--color-bg); }

/* ============ Модалка отзывов ============ */
/* Проблема 4: фон модалки — бренд (Warm Ivory), поля ввода остаются на surface */
.yp-rv-modal .modal__dialog { max-width: 620px; background: var(--color-bg); }
/* Крестик закрытия: крупный видимый круг поверх содержимого (только модалки отзывов) */
.yp-rv-modal .modal__close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; z-index: 20; background: var(--color-surface, #fff); border-radius: 50%; color: var(--color-text); box-shadow: 0 1px 5px rgba(14, 26, 43, .15); -webkit-tap-highlight-color: transparent; }
.yp-rv-modal .modal__close:hover { background: var(--color-bg); color: var(--color-text); }
.yp-rv-modal .modal__close:focus { outline: none; box-shadow: 0 0 0 3px rgba(214, 162, 89, .4); }
.yp-rv-modal .modal__close svg { width: 32px; height: 32px; }
.yp-rv-modal .modal__close svg path { stroke-width: 2.5; }
.yp-rv-modal .modal__title { padding-right: 56px; }
.yp-rv-modal__list { display: flex; flex-direction: column; gap: 16px; }

/* ---- форма ---- */
.yp-rv-form { display: flex; flex-direction: column; gap: 18px; }
.yp-rv-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.yp-rv-field__label { font-weight: 600; font-size: 0.92rem; color: var(--color-text); }
.yp-rv-field__label .required, .yp-rv-consent .required { color: var(--color-error, #B85A3E); }
.yp-rv-field__input { width: 100%; padding: 11px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); font: inherit; font-size: 0.97rem; color: var(--color-text); background: var(--color-surface, #fff); }
.yp-rv-field__input:focus { outline: none; border-color: var(--color-accent, #D6A259); box-shadow: 0 0 0 3px rgba(214,162,89,.18); }
textarea.yp-rv-field__input { resize: vertical; min-height: 96px; }
.yp-rv-field__file { font: inherit; font-size: 0.9rem; }
.yp-rv-hint { margin: 0; font-size: 0.83rem; color: var(--color-text-soft); }
.yp-rv-hint.is-error { color: var(--color-error, #B85A3E); }
.yp-rv-hint.is-ok { color: #2E7D52; }

/* ---- ввод рейтинга звёздами ---- */
.yp-rv-stars-input { display: inline-flex; gap: 4px; -webkit-tap-highlight-color: transparent; }
.yp-rv-star { background: none; border: none; padding: 0 2px; font-size: 1.9rem; line-height: 1; cursor: pointer; color: var(--color-border); transition: color .12s ease; -webkit-tap-highlight-color: transparent; }
.yp-rv-star.is-active, .yp-rv-star.is-hover { color: var(--color-accent, #D6A259); }
/* Проблема 3: убрать синюю browser-обводку/подсветку на звёздах; бренд-индикатор фокуса вместо неё */
.yp-rv-star:focus, .yp-rv-star:focus-visible, .yp-rv-star:active { outline: none !important; box-shadow: none !important; border: none; background: none; }
.yp-rv-star:focus-visible { color: var(--color-accent, #C98B3B); }

/* ---- согласие ---- */
.yp-rv-consent__label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 0.9rem; line-height: 1.5; color: var(--color-text); font-weight: 400; }
.yp-rv-consent__label input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-accent, #D6A259); cursor: pointer; }
.yp-rv-consent__label a { color: var(--color-accent, #D6A259); text-decoration: underline; text-underline-offset: 2px; }

.yp-rv-form__error { margin: 0; color: var(--color-error, #B85A3E); font-size: 0.9rem; }
.yp-rv-form__success { margin: 0; color: #2E7D52; font-size: 0.95rem; font-weight: 600; }

/* ============ Главная: блок отзывов ============ */
.home-reviews { padding: 56px 0; background: var(--color-bg, #FAF4E8); }
.home-reviews__inner { max-width: var(--container, 1200px); margin: 0 auto; padding: 0 20px; }
.home-reviews__title { font: 600 1.9rem/1.2 var(--font-serif); text-align: center; margin: 0 0 36px; color: var(--color-text); }
.home-reviews__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.home-review-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 14px); }
.home-review-card__top { display: flex; align-items: center; gap: 12px; }
/* Проблема 1: фото на главной крупнее (80px), круглое, без размытия (object-fit:cover) */
.home-review-card__avatar { padding: 0; border: none; background: none; cursor: pointer; position: relative; line-height: 0; -webkit-tap-highlight-color: transparent; }
.home-review-card__avatar img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: block; }
.home-review-card__id { display: flex; flex-direction: column; gap: 3px; }
.home-review-card__name { font-weight: 600; color: var(--color-text); }
.home-review-card__text { color: var(--color-text); font-size: 0.95rem; line-height: 1.6; flex: 1; }
.home-review-card__date { color: var(--color-text-soft); font-size: 0.82rem; }

@media (max-width: 600px) {
	.product-reviews { margin-top: 48px; }
	.product-reviews__actions .yp-rv-btn { flex: 1; }
	.home-reviews { padding: 40px 0; }
	.home-reviews__title { font-size: 1.5rem; margin-bottom: 24px; }
	.home-reviews__grid { grid-template-columns: 1fr; }
}

/* Проблема 2: компактнее кнопки отзывов на мобильном (ширина по контенту, не на всю строку) */
@media (max-width: 767px) {
	.product-reviews__actions .yp-rv-btn { padding: 8px 18px; font-size: 0.75rem; letter-spacing: 0.5px; flex: 0 1 auto; }
}

/* ============ Мультизагрузка фото в форме (до 4) ============ */
.yp-rv-photos { display: flex; flex-direction: column; gap: 8px; }
.yp-rv-photo-row { display: flex; align-items: center; gap: 10px; }
.yp-rv-photo-row[hidden] { display: none; }
.yp-rv-photo-prev { line-height: 0; }
.yp-rv-photo-prev img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--color-border); }
.yp-rv-add-photo { align-self: flex-start; margin-top: 8px; padding: 7px 14px; font: 500 0.8rem/1 'Inter', system-ui, sans-serif; color: var(--color-accent, #C98B3B); background: none; border: 1px dashed var(--color-accent, #C98B3B); border-radius: 6px; cursor: pointer; }
.yp-rv-add-photo:hover { background: rgba(201, 139, 59, .08); }
.yp-rv-add-photo[hidden] { display: none; }

/* ============ Модалка-галерея фото ============ */
.yp-rv-gallery-modal { z-index: 1100; }
.yp-rv-gallery-modal .modal__dialog { max-width: 720px; background: var(--color-bg); padding: 48px 22px 22px; }
.yp-rv-gallery__main { text-align: center; }
.yp-rv-gallery__main img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; display: inline-block; }
.yp-rv-gallery__thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.yp-rv-gallery__thumb { width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: none; line-height: 0; -webkit-tap-highlight-color: transparent; }
.yp-rv-gallery__thumb.is-active { border-color: var(--color-accent, #C98B3B); }
.yp-rv-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yp-rv-gallery__thumbs:empty { display: none; }