/*
Theme Name: Ride Reviews Glass
Description: Glassmorphism theme for the Ride Reviews India plugin. Electric two-wheeler owner reviews.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Author: DigitalRM
Text Domain: ride-reviews-bento
*/
:root{--ink:#fff;--mute:rgba(255,255,255,.78);--glass:rgba(255,255,255,.14);--edge:rgba(255,255,255,.3);--dark:#14102f;--gold:#ffd36e;--mint:#7dffc8;--r:28px;--gap:16px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#1b1464;color:var(--ink);font:400 1rem/1.6 "DM Sans",system-ui,sans-serif;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
radial-gradient(520px 520px at 8% 12%,#ff6fb5 0,transparent 70%),
radial-gradient(620px 620px at 92% 18%,#36d6ff 0,transparent 68%),
radial-gradient(560px 560px at 70% 92%,#ffb347 0,transparent 70%),
radial-gradient(640px 640px at 12% 88%,#7a5cff 0,transparent 70%),
linear-gradient(160deg,#1b1464,#3a1a78 55%,#0d4a73)}
h1,h2,h3{font-family:"Bricolage Grotesque","DM Sans",sans-serif;line-height:1.08;margin:0;letter-spacing:-.02em}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:var(--gold);color:var(--dark);padding:8px 14px;border-radius:10px;z-index:9}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 0}
.logo{font:700 1.3rem "Bricolage Grotesque",sans-serif;text-decoration:none;display:flex;gap:10px;align-items:center}
.logo i{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--mint),#36d6ff);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 14px rgba(0,0,0,.3);display:block}
.bar nav{display:flex;gap:8px}
.btn{display:inline-block;border:0;cursor:pointer;font:700 1rem "DM Sans",sans-serif;padding:12px 22px;border-radius:999px;background:#fff;color:var(--dark);text-decoration:none;box-shadow:0 6px 18px rgba(10,5,50,.3)}
.btn.alt{background:var(--glass);color:#fff;box-shadow:inset 0 0 0 1px var(--edge);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn.on{background:var(--gold);color:var(--dark)}
.btn.sm{padding:7px 14px;font-size:.9rem}
.bento,.rr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.t,.rr-card{background:var(--glass);border:1px solid var(--edge);border-radius:var(--r);padding:26px;min-width:0;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 12px 36px rgba(10,5,50,.35),inset 0 1px 0 rgba(255,255,255,.45)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.t,.rr-card{background:rgba(44,30,120,.85)}}
.s-hero{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.s-hero h1{font-size:clamp(2rem,4.4vw,3.3rem)}
.s-hero p{color:var(--mute);max-width:44ch;margin:14px 0 0}
.row{display:flex;gap:10px;flex-wrap:wrap}
.s-art{grid-row:span 2;background:rgba(160,120,255,.22);display:grid;place-items:center;padding:14px}
.s-art svg{width:100%;max-width:230px;filter:drop-shadow(0 10px 18px rgba(10,5,50,.4))}
.s-num{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:150px}
.s-num strong{font:700 clamp(2.6rem,6vw,4rem)/1 "Bricolage Grotesque",sans-serif}
.lime{background:rgba(125,255,200,.2)}
.ink{background:rgba(14,10,50,.42)}
section{padding:30px 0 6px}
section>h2{font-size:2rem;margin-bottom:6px}
.sub{color:var(--mute);margin:0 0 18px}
.rr-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--gap)}
.rr-grid .rr-card:nth-child(5n+1){grid-column:span 2;background:rgba(54,214,255,.2)}
.rr-card h3{font-size:1.25rem}
.rr-stars-out{color:var(--gold);letter-spacing:2px;font-size:1.1rem}
.rr-meta{color:var(--mute);font-size:.92rem;margin:2px 0 10px}
.rr-body{max-width:62ch;margin:0}
.rr-chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.rr-chip{font-size:.82rem;font-weight:700;padding:3px 11px;border-radius:999px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px var(--edge)}
.rr-empty{text-align:center;color:var(--mute)}
.write{display:grid;grid-template-columns:3fr 1fr;gap:var(--gap)}
.rr-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rr-form label,.rr-form legend{display:grid;gap:6px;font-weight:700}
.rr-full{grid-column:1/-1}
.rr-form fieldset{border:0;padding:0;margin:0}
.rr-form input,.rr-form select,.rr-form textarea{font:inherit;color:#fff;background:rgba(255,255,255,.12);border:1px solid var(--edge);border-radius:14px;padding:11px 14px;width:100%}
.rr-form input::placeholder,.rr-form textarea::placeholder{color:rgba(255,255,255,.6)}
.rr-form option{color:var(--dark)}
.rr-form textarea{resize:vertical}
.rr-hp{position:absolute;left:-9999px}
.rr-stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;position:relative}
.rr-stars input{position:absolute;opacity:0;width:1px;height:1px}
.rr-stars label{font-size:2.1rem;line-height:1;color:rgba(255,255,255,.35);cursor:pointer;display:block}
.rr-stars input:checked~label,.rr-stars label:hover,.rr-stars label:hover~label{color:var(--gold)}
.rr-stars input:focus-visible+label{outline:3px solid #fff;border-radius:6px}
.rr-note{padding:12px 16px;border-radius:14px;font-weight:700;margin:0 0 16px}
.rr-ok{background:rgba(125,255,200,.92);color:var(--dark)}.rr-bad{background:rgba(255,185,165,.95);color:#4a1408}
.how{background:rgba(255,111,181,.22)}
.how h3{font-size:1.4rem;margin-bottom:12px}
.how ol{margin:0;padding-left:1.2rem;display:grid;gap:10px}
.prose{margin:20px 0}
footer{padding:40px 0 30px;color:var(--mute);text-align:center;font-size:.9rem}
@media (max-width:900px){
.bento,.rr-grid{grid-template-columns:repeat(2,1fr)}
.s-hero{grid-column:1/-1;grid-row:auto}.s-art{grid-row:auto}
.write{grid-template-columns:1fr}
}
@media (max-width:560px){
.bento,.rr-grid{grid-template-columns:1fr}
.rr-grid .rr-card:nth-child(5n+1){grid-column:auto}
.rr-form{grid-template-columns:1fr}
.bar nav .btn.alt{display:none}
}