/* ============================================================
   goodapp.pro — assets/css/reviews.css
   หน้า "ติชม Goodapp" (reviews.php) + Popup เขียนรีวิว — ใช้ตัวแปรธีม (มืด/สว่าง)
   ============================================================ */
.rv-page{padding:26px 20px 50px; max-width:1000px;}
.rv-head h1{font-size:clamp(24px,3.4vw,34px); margin:0 0 6px; color:var(--heading); font-weight:800;}
.rv-head p{margin:0 0 18px; color:var(--muted); font-size:14.5px; line-height:1.65;}

.rv-stars{color:#fbbf24; letter-spacing:1px; white-space:nowrap;}
.rv-stars i{font-style:normal; color:rgba(127,127,127,.35);}

/* ปุ่ม 3D (แบบเดียวกับปุ่มหน้าเว็บ) */
.rv-btn{ white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:14px; line-height:1.2; color:#020617; padding:9px 18px; border-radius:12px;
  background:linear-gradient(135deg,var(--accent-grad-1),var(--accent-grad-2));
  border:1px solid rgba(0,0,0,.28); box-shadow:0 3px 0 rgba(0,0,0,.35); position:relative; top:0;
  transition:top .06s, box-shadow .06s, filter .12s;
}
.rv-btn:hover{filter:brightness(1.07);}
.rv-btn:active{top:2px; box-shadow:0 1px 0 rgba(0,0,0,.35); filter:brightness(.88);}
.rv-btn:disabled{opacity:.6; cursor:default;}
.rv-btn:focus-visible{outline:3px solid rgba(var(--nav-hover-rgb),.55); outline-offset:2px;}
.rv-btn-or{color:#fff; background:linear-gradient(135deg,#fb923c,#ea580c);}
.rv-btn-gh{color:var(--ink); background:var(--card-solid); border-color:var(--line); box-shadow:0 2px 0 rgba(0,0,0,.25);}
.rv-btn-sm{font-size:13px; padding:6px 13px; border-radius:10px;}

/* สรุปคะแนน */
.rv-sum{display:grid; grid-template-columns:200px 1fr auto; gap:22px; align-items:center; background:var(--card); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:var(--r-content,14px); padding:18px 22px; margin-bottom:16px;}
.rv-big{font-size:46px; font-weight:800; color:var(--heading); line-height:1;}
.rv-big small{font-size:15px; color:var(--muted); font-weight:500;}
.rv-sum .rv-stars{font-size:18px; margin-top:4px;}
.rv-cnt{color:var(--muted); font-size:12.5px; margin-top:3px;}
.rv-bars{display:grid; gap:5px; min-width:0;}
.rv-bar{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted);}
.rv-bar > span:first-child{width:28px; white-space:nowrap;}
.rv-bar > div{flex:1; height:7px; border-radius:5px; background:rgba(127,127,127,.22); overflow:hidden;}
.rv-bar > div i{display:block; height:100%; background:linear-gradient(90deg,#fbbf24,#f59e0b);}
.rv-bar > span:last-child{width:28px; text-align:right;}

.rv-filter{display:flex; gap:10px; align-items:center; margin:0 0 14px; flex-wrap:wrap; color:var(--muted); font-size:14px;}
.rv-filter select, .rv-md select, .rv-md input[type=text], .rv-md textarea{
  font:inherit; font-size:14px; color:var(--ink); background:var(--bg-2,var(--card-solid)); border:1px solid var(--line); border-radius:10px; padding:9px 12px; width:100%;
}
.rv-filter select{width:auto; min-width:220px; max-width:100%;}
.rv-md select:focus, .rv-md input:focus, .rv-md textarea:focus, .rv-filter select:focus{outline:2px solid rgba(var(--nav-hover-rgb),.5); border-color:var(--nav-hover);}

/* การ์ดรีวิว */
.rv-card{background:var(--card); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:var(--r-content,14px); padding:14px 16px; margin-bottom:10px;}
.rv-card-h{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:7px;}
.rv-av{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; font-size:14px; flex:none;}
.rv-nm{font-weight:700; color:var(--heading);}
.rv-tp{font-size:11.5px; font-weight:700; border-radius:5px; padding:1px 8px; border:1px solid rgba(56,189,248,.5); color:#7dd3fc; background:rgba(56,189,248,.08);}
.rv-tp.rv-fr{border-color:rgba(249,115,22,.5); color:#fdba74; background:rgba(249,115,22,.08);}
.rv-tp.rv-sv{border-color:rgba(167,139,250,.5); color:#c4b5fd; background:rgba(167,139,250,.08);}
body:has(#darkmode-toggle:checked) .rv-tp{color:#0369a1;}
body:has(#darkmode-toggle:checked) .rv-tp.rv-fr{color:#c2410c;}
body:has(#darkmode-toggle:checked) .rv-tp.rv-sv{color:#6d28d9;}
.rv-dt{margin-left:auto; color:var(--muted); font-size:12px;}
.rv-card p{margin:0; color:var(--ink); line-height:1.65; overflow-wrap:anywhere;}
.rv-empty{border:1px dashed var(--line); border-radius:var(--r-content,14px); padding:22px; text-align:center; color:var(--muted);}
.rv-more{text-align:center; margin-top:10px;}

/* Popup */
.rv-chk{display:flex !important; align-items:center; gap:8px; margin:8px 0 0; font-weight:500 !important; cursor:pointer;}
.rv-chk input{width:auto; accent-color:#f97316;}
.rv-ov{position:fixed; inset:0; z-index:1000; background:rgba(2,6,23,.7); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:16px;}
.rv-ov[hidden]{display:none;}
.rv-md{width:100%; max-width:480px; background:var(--card-solid); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.5); max-height:92vh; overflow:auto; animation:rvpop .18s ease-out;}
@keyframes rvpop{from{transform:translateY(10px) scale(.97); opacity:0;}}
.rv-md h3{margin:0 0 14px; color:var(--heading); font-size:18px; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.rv-x{background:none; border:0; color:var(--muted); font-size:20px; cursor:pointer; line-height:1;}
.rv-fl{margin-bottom:13px;}
.rv-fl label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:5px;}
.rv-md textarea{resize:vertical; min-height:110px;}
.rv-ct{text-align:right; font-size:11.5px; color:var(--muted); margin-top:3px;}
.rv-pick{display:flex; gap:4px; align-items:center;}
.rv-pick button{background:none; border:0; padding:0; font-size:32px; line-height:1; color:rgba(127,127,127,.4); cursor:pointer; transition:transform .1s;}
.rv-pick button.on{color:#fbbf24;}
.rv-pick button:hover{transform:scale(1.15);}
.rv-pick button:focus-visible{outline:2px solid var(--nav-hover); border-radius:6px;}
.rv-pick em{font-style:normal; margin-left:8px; font-size:13px; color:var(--muted);}
.rv-hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
.rv-err{color:#f87171; font-size:12.5px; margin:-4px 0 10px;}
body:has(#darkmode-toggle:checked) .rv-err{color:#dc2626;}
.rv-act{display:flex; gap:8px; justify-content:flex-end; align-items:center;}
.rv-act > span{font-size:11.5px; color:var(--muted); margin-right:auto;}
.rv-ok{text-align:center; padding:14px 0;}
.rv-ok[hidden]{display:none;}
.rv-tick{font-size:44px;}
.rv-ok h3{justify-content:center; margin:6px 0;}
.rv-ok p{color:var(--muted); margin:0 0 14px;}
@media (max-width:760px){.rv-sum{grid-template-columns:1fr;} .rv-sum .rv-btn{justify-self:start;}}
@media (prefers-reduced-motion:reduce){.rv-md{animation:none;}}