/* ENGKANTO reviews - dark rounded cards + review modal (ENGKANTO cyan theme; uses vars from style.css) */

/* ---------- review cards ---------- */
.rv-track { display: flex; gap: 22px; overflow-x: auto; padding: 8px 4px 24px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(57,240,250,.35) transparent; }
.rv-card { flex: 0 0 min(340px, 84vw); scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 24px; background: rgba(4,16,21,.82); border: 1px solid rgba(57,240,250,.18); transition: transform .25s, border-color .25s, box-shadow .25s; }
.rv-card:hover { transform: translateY(-4px); border-color: rgba(57,240,250,.55); box-shadow: 0 14px 40px -20px rgba(57,240,250,.5); }
.rv-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rv-stars i { font-size: .8rem; margin-right: 2px; color: rgba(255,255,255,.14); }
.rv-stars i.on { color: #facc15; }
.rv-prod { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--primary); }
.rv-text { flex: 1; color: #e6f4f6; font-size: .95rem; line-height: 1.55; word-break: break-word; }
.rv-line { height: 1px; background: rgba(57,240,250,.14); }
.rv-who { display: flex; align-items: center; gap: 12px; }
.rv-av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(57,240,250,.45); background: #0a1418; flex: none; }
.rv-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rv-meta b { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-meta small { color: var(--text-gray); font-size: .78rem; }
.rv-del { background: none; border: 0; width: 32px; height: 32px; border-radius: 8px; color: #7a9298; transition: .2s; }
.rv-del:hover { color: #ff7b7b; background: rgba(255,123,123,.1); }
.rv-empty { margin: 0 auto; padding: 40px 0; color: var(--text-gray); text-align: center; }
.rv-cta { display: flex; justify-content: center; margin-top: 18px; }

/* ---------- modal ---------- */
body.rv-lock { overflow: hidden; }
.rv-modal { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; background: rgba(1,8,11,.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow-y: auto; }
.rv-modal[hidden] { display: none; }
.rv-box { position: relative; width: min(480px, 100%); padding: 30px 30px 22px; border-radius: 28px; overflow: hidden; background: #05141a; border: 1px solid rgba(57,240,250,.2); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), 0 0 70px -30px rgba(57,240,250,.6); animation: rvPop .35s cubic-bezier(.2,.9,.25,1.1) both; }
@keyframes rvPop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
/* accent strip on the left edge */
.rv-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #8ef7fd, #23dae4 55%, rgba(35,218,228,.2)); }

.rv-x { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 11px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: #cfe; transition: .2s; }
.rv-x:hover { border-color: var(--primary); color: var(--primary); background: rgba(57,240,250,.1); }
.rv-head { display: flex; align-items: center; gap: 14px; padding-right: 44px; }
.rv-head-ic { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 15px; font-size: 1.3rem; color: var(--primary); background: linear-gradient(145deg, rgba(57,240,250,.22), rgba(57,240,250,.05)); border: 1px solid rgba(57,240,250,.4); }
.rv-head h3 { font-size: 1.45rem; font-weight: 800; line-height: 1.15; }
.rv-head p { margin-top: 3px; font-size: .82rem; line-height: 1.35; color: var(--text-gray); }

.rv-lbl { display: block; margin: 22px 0 9px; font-size: .86rem; font-weight: 700; color: #cdeff2; }
.rv-as { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.rv-as img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; background: #0a1418; }
.rv-as b { display: block; font-size: .95rem; }
.rv-as small { font: .76rem ui-monospace, Consolas, monospace; color: #7f9aa0; }

.rv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-chip { padding: 8px 16px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: #cfe; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); transition: .2s; }
.rv-chip:hover { border-color: var(--primary); }
.rv-chip.on { color: #04191c; border-color: transparent; background: linear-gradient(135deg, #39f0fa, #23dae4); box-shadow: 0 0 22px -4px rgba(57,240,250,.7); }

.rv-rate { display: flex; align-items: center; gap: 16px; }
.rv-starpick { display: flex; gap: 2px; }
.rv-star { background: none; border: 0; padding: 4px; font-size: 1.45rem; color: rgba(255,255,255,.14); transition: .15s; }
.rv-star.on { color: #facc15; filter: drop-shadow(0 0 8px rgba(250,204,21,.55)); transform: scale(1.08); }
#rvRateHint { font-size: .84rem; color: #9db4b9; }

.rv-box textarea { width: 100%; min-height: 112px; resize: vertical; padding: 14px 16px; color: #fff; font: inherit; font-size: .92rem; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); outline: 0; transition: .2s; }
.rv-box textarea::placeholder { color: #5b7a80; }
.rv-box textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(57,240,250,.1); }
.rv-count { display: flex; align-items: center; gap: 14px; margin-top: 10px; font: .72rem ui-monospace, Consolas, monospace; color: #7f9aa0; }
.rv-count i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; display: block; }
.rv-count u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #23dae4, #8ef7fd); transition: width .15s; }

.rv-msg { min-height: 22px; margin-top: 14px; font-size: .85rem; font-weight: 600; text-align: center; }
.rv-msg.err { color: #ff7b7b; } .rv-msg.ok { color: #4ade80; }
.rv-submit { width: 100%; padding: 15px; border-radius: 14px; border: 1px solid rgba(142,247,253,.5); font: inherit; font-weight: 800; font-size: .98rem; color: #04191c; background: linear-gradient(135deg, #39f0fa, #23dae4); box-shadow: 0 12px 34px -10px rgba(57,240,250,.7); transition: .25s; }
.rv-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(57,240,250,.85); }
.rv-submit:disabled { opacity: .6; pointer-events: none; }
.rv-foot { margin-top: 12px; text-align: center; font-size: .75rem; color: #6f8a90; }

/* ================= FIX: stars pahalang + umiikot na reviews ================= */
.rv-stars { display: inline-flex; align-items: center; gap: 3px; }

.rv-track {
    display: block; overflow: hidden; scroll-snap-type: none;
    padding: 8px 0 24px;
}
.rv-inner { display: flex; justify-content: center; width: 100%; }
.rv-group { display: flex; gap: 22px; flex: none; }
.rv-empty { text-align: center; }

/* marquee mode (2+ reviews) */
.rv-track.rv-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.rv-marquee .rv-inner {
    justify-content: flex-start; width: max-content;
    animation: rvScroll var(--rv-dur, 40s) linear infinite;
    will-change: transform;
}
.rv-marquee .rv-group { padding-right: 22px; }
.rv-marquee:hover .rv-inner { animation-play-state: paused; }
.rv-dup .rv-del, .rv-group[aria-hidden="true"] .rv-del { display: none; }
@keyframes rvScroll { to { transform: translate3d(-50%, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
    .rv-track.rv-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .rv-marquee .rv-inner { animation: none; }
}