/* Woodmart Rating Comments — v1.0.0 */
:root{--wrc-primary:#4f46e5;--wrc-star:#f5a623;--wrc-radius:12px;--wrc-border:#e3e7ee;--wrc-text:#1f2937;--wrc-muted:#8b94a5;--wrc-empty:#d6dbe4}

/* ---------- Card ---------- */
.wrc-active .comment-respond{background:#fff;border:1px solid var(--wrc-border);border-radius:calc(var(--wrc-radius) + 4px);padding:28px;box-shadow:0 10px 30px -18px rgba(15,23,42,.25)}
.wrc-active .comment-respond .wrc-title{font-size:20px;font-weight:700;margin:0 0 18px;color:var(--wrc-text)}
@media(max-width:575px){.wrc-active .comment-respond{padding:18px}}

/* ---------- Form grid ---------- */
.wrc-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0}
.wrc-form>*{grid-column:1/-1;margin:0}
.wrc-form>.wrc-half{grid-column:span 1}
@media(max-width:575px){.wrc-form>.wrc-half{grid-column:1/-1}}
.wrc-form [hidden]{display:none!important}

/* ---------- Floating-label fields ---------- */
.wrc-form .wrc-field{position:relative}
.wrc-form .wrc-field input[type=text],
.wrc-form .wrc-field input[type=email],
.wrc-form .wrc-field input[type=url],
.wrc-form .wrc-field textarea{width:100%;box-sizing:border-box;min-height:56px;padding:23px 16px 8px;border:1.5px solid var(--wrc-border);border-radius:var(--wrc-radius);background:#fff;color:var(--wrc-text);font:inherit;font-size:15px;line-height:1.6;box-shadow:none;outline:0;transition:border-color .2s,box-shadow .2s}
.wrc-form .wrc-field textarea{min-height:140px;resize:vertical}
.wrc-form .wrc-field input:hover,.wrc-form .wrc-field textarea:hover{border-color:#cbd2de}
.wrc-form .wrc-field input:focus,.wrc-form .wrc-field textarea:focus{border-color:var(--wrc-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--wrc-primary) 14%,transparent)}
.wrc-form .wrc-field label{position:absolute;inset-inline-start:17px;top:18px;margin:0;padding:0;font-size:14px;line-height:1;font-weight:400;color:var(--wrc-muted);pointer-events:none;transition:top .18s,font-size .18s,color .18s}
.wrc-form .wrc-field :is(input,textarea):focus+label,
.wrc-form .wrc-field :is(input,textarea):not(:placeholder-shown)+label{top:8px;font-size:11.5px;color:var(--wrc-primary)}
.wrc-form .wrc-counter{position:absolute;inset-inline-end:14px;bottom:10px;font-size:11px;color:var(--wrc-muted)}

/* ---------- Star input ---------- */
.wrc-rating-wrap{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:14px 18px;border:1.5px dashed var(--wrc-border);border-radius:var(--wrc-radius);background:color-mix(in srgb,var(--wrc-star) 7%,#fff)}
.wrc-rating-title{font-size:14px;font-weight:600;color:var(--wrc-text)}
.wrc-rating-title em{color:#e11d48;font-style:normal}
.wrc-stars-input{display:inline-flex;flex-direction:row-reverse;gap:2px}
.wrc-stars-input input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.wrc-form .wrc-stars-input label{display:block;margin:0;padding:0 1px;cursor:pointer;font-size:34px;line-height:1;font-weight:400;color:var(--wrc-empty);transition:color .15s,transform .15s}
.wrc-stars-input label::before{content:"\2605"}
.wrc-form .wrc-stars-input input:checked~label{color:var(--wrc-star)}
.wrc-stars-input input:focus-visible+label{outline:2px solid var(--wrc-primary);outline-offset:2px;border-radius:6px}
@media(hover:hover){
	.wrc-form .wrc-stars-input:hover input~label{color:var(--wrc-empty)}
	.wrc-form .wrc-stars-input input~label:hover,
	.wrc-form .wrc-stars-input input~label:hover~label{color:var(--wrc-star)}
	.wrc-stars-input label:hover{transform:scale(1.15)}
}
.wrc-rating-text{min-width:72px;font-size:13px;font-weight:700;color:color-mix(in srgb,var(--wrc-star) 70%,#000)}
.wrc-error{flex-basis:100%;font-size:13px;color:#e11d48}
.wrc-rating-wrap.wrc-shake{animation:wrc-shake .4s;border-color:#e11d48}
.wrc-form.wrc-replying .wrc-rating-wrap{display:none}
@keyframes wrc-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ---------- Static stars (lists / summary / admin) ---------- */
.wrc-static{--wrc-d:90deg;display:inline-block;margin-bottom:6px;font-size:17px;line-height:1.2;letter-spacing:1px;background:linear-gradient(var(--wrc-d),var(--wrc-star) calc(var(--r,0)/5*100%),var(--wrc-empty) 0);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
[dir=rtl] .wrc-static,.rtl .wrc-static{--wrc-d:270deg}

/* ---------- Summary ---------- */
.wrc-summary{display:flex;flex-wrap:wrap;align-items:center;gap:24px 32px;margin:0 0 24px;padding:20px 24px;border:1px solid var(--wrc-border);border-radius:calc(var(--wrc-radius) + 4px);background:#fff}
.wrc-sum-score{min-width:110px;text-align:center}
.wrc-sum-num{font-size:44px;font-weight:800;line-height:1;color:var(--wrc-text)}
.wrc-sum-score .wrc-static{font-size:22px;margin:6px 0 2px}
.wrc-sum-count{font-size:12px;color:var(--wrc-muted)}
.wrc-bars{flex:1;min-width:200px;display:grid;gap:7px}
.wrc-bar{display:grid;grid-template-columns:34px 1fr 30px;align-items:center;gap:10px;font-size:12.5px;color:var(--wrc-muted)}
.wrc-bar i{display:block;height:8px;border-radius:99px;background:#eceff4;overflow:hidden}
.wrc-bar b{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--wrc-star)}

/* ---------- Checkbox ---------- */
.wrc-form .wrc-check{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--wrc-muted)}
.wrc-form .wrc-check input{margin:0;accent-color:var(--wrc-primary)}
.wrc-form .wrc-check label{margin:0;font-weight:400}

/* ---------- Button ---------- */
.wrc-form .wrc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 36px;border:0;border-radius:var(--wrc-radius);background:var(--wrc-primary);color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 10px 22px -10px color-mix(in srgb,var(--wrc-primary) 80%,transparent);transition:transform .15s,filter .2s}
.wrc-form .wrc-btn:hover{transform:translateY(-1px);filter:brightness(1.07)}
.wrc-form .wrc-btn:active{transform:translateY(0)}
.wrc-form .wrc-btn.is-loading{opacity:.75;pointer-events:none}
.wrc-form .wrc-btn.is-loading::after{content:"";width:16px;height:16px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;animation:wrc-spin .7s linear infinite}
@keyframes wrc-spin{to{transform:rotate(360deg)}}
@media(max-width:575px){.wrc-form .wrc-btn{width:100%}}

@media(prefers-reduced-motion:reduce){.wrc-form *,.wrc-rating-wrap{animation:none!important;transition:none!important}}