/* ═══════════════════════════════════════════════════════
   Reviews Plugin — reviews-style.css
   ═══════════════════════════════════════════════════════ */

:root {
    --rvw-accent:     #FF6B35;
    --rvw-accent-h:   #e85a26;
    --rvw-star-fill:  #FFBA08;
    --rvw-star-empty: #D1D5DB;
    --rvw-bg:         #FAFAFA;
    --rvw-card-bg:    #FFFFFF;
    --rvw-border:     #E5E7EB;
    --rvw-text:       #111827;
    --rvw-muted:      #6B7280;
    --rvw-radius:     14px;
    --rvw-shadow:     0 4px 24px rgba(0,0,0,.08);
    --rvw-shadow-lg:  0 20px 60px rgba(0,0,0,.18);
    --rvw-transition: .22s cubic-bezier(.4,0,.2,1);
}

/* ─── Кнопка "Поділитись" ──────────────────────────────────────────────── */
.rvw-open-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         18px 24px !important;
    background:      white !important;
    color:           #090909 !important;
    font-family:     inherit;
    text-transform:none !important;
    font-size:       16px !important;
    font-weight:     600 !important;
    border:          none;
    border-radius:   50px !important;
    cursor:          pointer;
    border: 1.5px solid #EBEDF0 !important;
    transition:      background var(--rvw-transition),
                     transform  var(--rvw-transition),
                     box-shadow var(--rvw-transition);
    box-shadow:      0 4px 16px rgba(255,107,53,.35);
    letter-spacing:  .01em;
}
.rvw-open-btn:hover {
    background:  var(--rvw-accent-h);
    transform:   translateY(-2px);
    box-shadow:  0 8px 24px rgba(255,107,53,.45);
}
.rvw-open-btn:active { transform: translateY(0); }

/* ─── Оверлей ─────────────────────────────────────────────────────────── */
.rvw-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         99999;
    padding:         16px;
    animation:       rvwFadeIn .2s ease;
}
.rvw-overlay[hidden] { display: none !important; }

@keyframes rvwFadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}

/* ─── Модальне вікно ──────────────────────────────────────────────────── */
.rvw-modal {
    background:    var(--rvw-card-bg);
    border-radius: calc(var(--rvw-radius) + 4px);
    box-shadow:    var(--rvw-shadow-lg);
    width:         100%;
    max-width:     480px;
    max-height:    90vh;
    overflow-y:    auto;
    padding:       32px;
    position:      relative;
    animation:     rvwSlideUp .28s cubic-bezier(.22,1,.36,1);
}
@keyframes rvwSlideUp {
    from { transform: translateY(28px); opacity:0; }
    to   { transform: translateY(0);    opacity:1; }
}

/* Скролбар у модалці */
.rvw-modal::-webkit-scrollbar { width: 5px; }
.rvw-modal::-webkit-scrollbar-thumb { background: var(--rvw-border); border-radius: 8px; }

/* Кнопка закрити */
.rvw-close {
    position:         absolute;
    top:              16px;
    right:            16px;
    width:            36px;
    height:           36px;
    border:           none;
    background:       var(--rvw-bg);
    border-radius:    50%;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            var(--rvw-muted);
    transition:       background var(--rvw-transition), color var(--rvw-transition);
}
.rvw-close:hover { background: #F3F4F6; color: var(--rvw-text); }

/* ─── Заголовок модалки ────────────────────────────────────────────────── */
.rvw-modal-header { margin-bottom: 24px; }
.rvw-modal-title  {
    font-size:   22px;
    font-weight: 700;
    color:       var(--rvw-text);
    margin:      0 0 4px;
}
.rvw-modal-sub {
    font-size: 14px;
    color:     var(--rvw-muted);
    margin:    0;
}

/* ─── Форма ────────────────────────────────────────────────────────────── */
.rvw-form { display: flex; flex-direction: column; gap: 18px; }

.rvw-field  { display: flex; flex-direction: column; gap: 6px; }
.rvw-label  {
    font-size:   13px;
    font-weight: 600;
    color:       var(--rvw-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.rvw-input {
    width:          100%;
    padding:        11px 14px;
    font-size:      15px;
    font-family:    inherit;
    color:          var(--rvw-text);
    background:     var(--rvw-bg);
    border:         1.5px solid var(--rvw-border);
    border-radius:  var(--rvw-radius);
    outline:        none;
    transition:     border-color var(--rvw-transition), box-shadow var(--rvw-transition);
    box-sizing:     border-box;
}
.rvw-input:focus {
    border-color: var(--rvw-accent);
    box-shadow:   0 0 0 3px rgba(255,107,53,.12);
}
.rvw-textarea { resize: vertical; min-height: 100px; }

/* ─── Зірки у формі ────────────────────────────────────────────────────── */
.rvw-stars {
    display:    flex;
    gap:        6px;
    flex-wrap:  wrap;
}
.rvw-star {
    width:      40px;
    height:     40px;
    background: none;
    border:     none;
    cursor:     pointer;
    padding:    4px;
    border-radius: 8px;
    color:      var(--rvw-star-empty);
    transition: color var(--rvw-transition), transform var(--rvw-transition);
    flex-shrink: 0;
}
.rvw-star svg   { width:100%; height:100%; display:block; }
.rvw-star.active,
.rvw-star.hover { color: var(--rvw-star-fill); }
.rvw-star.active svg { fill: var(--rvw-star-fill); }
.rvw-star.hover  svg { fill: var(--rvw-star-fill); opacity: .7; }
.rvw-star:hover  { transform: scale(1.2); }

/* ─── Зона завантаження фото ───────────────────────────────────────────── */
.rvw-file-area {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content:center;
    gap:            8px;
    padding:        20px;
    border:         2px dashed var(--rvw-border);
    border-radius:  var(--rvw-radius);
    color:          var(--rvw-muted);
    cursor:         pointer;
    transition:     border-color var(--rvw-transition), background var(--rvw-transition);
    text-align:     center;
}
.rvw-file-area:hover,
.rvw-file-area.drag-over {
    border-color: var(--rvw-accent);
    background:   rgba(255,107,53,.04);
    color:        var(--rvw-accent);
}
.rvw-file-text { font-size: 14px; }

/* Прев'ю сітка */
.rvw-preview-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap:                   8px;
    margin-top:            8px;
}
.rvw-preview-thumb {
    position:      relative;
    aspect-ratio:  1;
    border-radius: 10px;
    overflow:      hidden;
    border:        1.5px solid var(--rvw-border);
    animation:     rvwFadeIn .2s ease;
}
.rvw-preview-thumb img {
    width:100%; height:100%; object-fit:cover; display:block;
}
.rvw-preview-thumb .rvw-remove-photo {
    position:        absolute;
    top:             3px;
    right:           3px;
    width:           20px;
    height:          20px;
    background:      rgba(0,0,0,.6);
    color:           #fff;
    border:          none;
    border-radius:   50%;
    font-size:       14px;
    line-height:     1;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    transition:      background var(--rvw-transition);
}
.rvw-preview-thumb .rvw-remove-photo:hover { background: rgba(220,38,38,.8); }

/* ─── Кнопка відправки ─────────────────────────────────────────────────── */
.rvw-submit {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           100%;
    padding:         14px;
    background:      var(--rvw-accent);
    color:           #fff;
    font-family:     inherit;
    font-size:       16px;
    font-weight:     700;
    border:          none;
    border-radius:   var(--rvw-radius);
    cursor:          pointer;
    transition:      background var(--rvw-transition), transform var(--rvw-transition);
    letter-spacing:  .02em;
}
.rvw-submit:hover    { background: var(--rvw-accent-h); }
.rvw-submit:active   { transform: scale(.98); }
.rvw-submit:disabled { opacity: .65; cursor: not-allowed; }

/* Лоадер */
.rvw-submit-loader svg { animation: rvwSpin .8s linear infinite; }
@keyframes rvwSpin { to { transform: rotate(360deg); } }

/* ─── Повідомлення результату ──────────────────────────────────────────── */
.rvw-message {
    padding:       14px 16px;
    border-radius: var(--rvw-radius);
    font-size:     14px;
    font-weight:   500;
    text-align:    center;
}
.rvw-message.success {
    background: #D1FAE5;
    color:      #065F46;
    border:     1px solid #6EE7B7;
}
.rvw-message.error {
    background: #FEE2E2;
    color:      #991B1B;
    border:     1px solid #FCA5A5;
}

/* ═══════════════════════════════════════════════════════
   СПИСОК ВІДГУКІВ
   ═══════════════════════════════════════════════════════ */
.rvw-list {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    max-width:      700px;
    margin:         0 auto;
}

/* ─── Картка відгуку ───────────────────────────────────────────────────── */
.rvw-card {
    background:    var(--rvw-card-bg);
    border:        1.5px solid var(--rvw-border);
    border-radius: calc(var(--rvw-radius) + 2px);
    padding:       22px 24px;
    transition:    box-shadow var(--rvw-transition), transform var(--rvw-transition);
}
.rvw-card:hover {
    box-shadow: var(--rvw-shadow);
    transform:  translateY(-2px);
}

/* Шапка */
.rvw-card-head {
    display:     flex;
    align-items: flex-start;
    gap:         14px;
    margin-bottom: 14px;
}

/* Аватар */
.rvw-avatar {
    width:           0px;
    height:          0px;
    border-radius:   50%;
    background:      linear-gradient(135deg, var(--rvw-accent), #FF9F1C);
    color:           #fff;
    font-size:       18px;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.rvw-card-meta {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    flex:           1;
    min-width:      0;
}
.rvw-card-name {
    font-size:   16px;
    font-weight: 700;
    color:       var(--rvw-text);
    display:     block;
}
.rvw-card-date {
    font-size: 12px;
    color:     var(--rvw-muted);
    display:   block;
}

/* Зірки у картці */
.rvw-card-stars {
    display:    flex;
    gap:        3px;
    align-items: center;
}
.rvw-card-star {
    width:  18px;
    height: 18px;
    fill:   var(--rvw-star-empty);
    stroke: none;
    flex-shrink: 0;
}
.rvw-card-star.filled {
    fill:   var(--rvw-star-fill);
    filter: drop-shadow(0 1px 2px rgba(255,186,8,.5));
}

/* Текст */
.rvw-card-body {
    font-size:   15px;
    color:       #374151;
    line-height: 1.65;
    margin:      0 0 14px;
}
.rvw-card-body p:first-child { margin-top: 0; }
.rvw-card-body p:last-child  { margin-bottom: 0; }

/* ─── Галерея ──────────────────────────────────────────────────────────── */
.rvw-gallery {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap:                   8px;
}
/* Якщо > 4 фото — зробити компактніше */
.rvw-gallery[data-count="1"] { grid-template-columns: 200px; }
.rvw-gallery[data-count="2"] { grid-template-columns: repeat(2, 140px); }
.rvw-gallery[data-count="3"] { grid-template-columns: repeat(3, 110px); }

.rvw-gallery-item {
    display:       block;
    aspect-ratio:  1;
    border-radius: 10px;
    overflow:      hidden;
    border:        1.5px solid var(--rvw-border);
    transition:    transform var(--rvw-transition), box-shadow var(--rvw-transition);
}
.rvw-gallery-item:hover {
    transform:  scale(1.04);
    box-shadow: var(--rvw-shadow);
}
.rvw-gallery-item img {
    width:100%; height:100%; object-fit:cover; display:block;
}

/* ─── Порожній стан ────────────────────────────────────────────────────── */
.rvw-empty {
    text-align:  center;
    color:       var(--rvw-muted);
    font-size:   15px;
    padding:     40px 0;
}

/* ─── Адаптив ──────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .rvw-modal   { padding: 24px 18px; }
    .rvw-card    { padding: 16px; }
    .rvw-gallery[data-count="1"],
    .rvw-gallery[data-count="2"],
    .rvw-gallery[data-count="3"] { grid-template-columns: repeat(auto-fill, minmax(72px,1fr)); }
}

/* ═══════════════════════════════════════════════════════
   СЛАЙДЕР ВІДГУКІВ
   ═══════════════════════════════════════════════════════ */

.rvw-slider {
    position:   relative;
    max-width:  764px;
    margin:     0 auto;
    padding:    0 22px;
    outline:    none;
    box-sizing: border-box;
}

/* ─── Трек ──────────────────────────────────────────────────────────── */
.rvw-slider-track-wrap {
    overflow: hidden;
    border-radius: calc(var(--rvw-radius) + 2px);
}

.rvw-slider-track {
    display:    flex;
    min-height: 160px;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    width:      100%;
}

/* ─── Слайди ────────────────────────────────────────────────────────── */
.rvw-slide {
    flex:          0 0 100%;
    box-sizing:    border-box;
    opacity:       1;
    visibility:    visible;
    position:      relative;
    transform:     none;
    height:        auto;
}

@media (min-width: 601px) {
    .rvw-slider-track {
        margin: 0 -10px;
        width: calc(100% + 20px);
    }
    .rvw-slide {
        flex: 0 0 50%;
        padding: 0 10px;
    }
}

/* ─── Кнопки Prev / Next ────────────────────────────────────────────── */
.rvw-slider-btn {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         10;
    width:           44px;
    height:          44px;
    background:      var(--rvw-card-bg);
    border:          1.5px solid var(--rvw-border);
    border-radius:   50%;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--rvw-text);
    box-shadow:      var(--rvw-shadow);
    transition:      background var(--rvw-transition),
                     color     var(--rvw-transition),
                     box-shadow var(--rvw-transition),
                     transform  var(--rvw-transition);
    padding:         0;
}
.rvw-slider-btn svg {
    width:  20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}
.rvw-slider-btn:hover {
    background:  var(--rvw-accent);
    color:       #fff;
    border-color: var(--rvw-accent);
    box-shadow:  0 6px 20px rgba(255,107,53,.35);
    transform:   translateY(-50%) scale(1.08);
}
.rvw-slider-btn:active { transform: translateY(-50%) scale(.96); }

.rvw-slider-prev { left:  0; }
.rvw-slider-next { right: 0; }

/* ─── Адаптив ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .rvw-slider {
        padding: 0 18px;
    }
    .rvw-slider-btn {
        width:  36px;
        height: 36px;
    }
}