
.kss-wrap{max-width:720px;margin:24px 0}
.kss-heading{margin:0 0 12px}
.kss-form{display:block;border:1px solid rgba(0,0,0,.08);padding:16px;border-radius:10px;background:#fff}
.kss-label{display:block;margin:0 0 12px;font-weight:600}
.kss-input,.kss-textarea{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid rgba(0,0,0,.18);border-radius:10px;font-weight:400}
.kss-textarea{resize:vertical}
.kss-button{display:inline-block;padding:10px 14px;border-radius:12px;border:0;cursor:pointer;font-weight:700}
.kss-help{margin:10px 0 0;opacity:.8}
.kss-required{color:#b00020}
.kss-notice{border-radius:10px;padding:12px 14px;margin:0 0 12px}
.kss-success{background:rgba(0,128,0,.10);border:1px solid rgba(0,128,0,.25)}
.kss-error{background:rgba(176,0,32,.08);border:1px solid rgba(176,0,32,.25)}
.kss-list{display:grid;gap:12px}
.kss-item{border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:14px;background:#fff}
.kss-item-meta{display:flex;gap:10px;margin-top:10px;opacity:.8;font-size:inherit;flex-wrap:wrap}
.kss-rating{font-size:inherit;line-height:1;margin-bottom:8px}
.kss-star{opacity:.25}
.kss-star.is-filled{opacity:1}
.kss-empty{opacity:.8}
.kss-fieldset{border:0;padding:0;margin:0 0 12px}
.kss-legend{font-weight:700;margin-bottom:6px}
.kss-stars{display:inline-flex;flex-direction:row-reverse;gap:6px}
.kss-stars input{display:none}
.kss-stars label{font-size:inherit;cursor:pointer;opacity:.35;line-height:1}
.kss-stars input:checked ~ label{opacity:1}
.kss-stars label:hover,
.kss-stars label:hover ~ label{opacity:1}
.kss-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.kss-legal{border:1px solid rgba(0,0,0,.08);padding:12px 14px;border-radius:10px;background:#fff;opacity:.9}
.kss-legal p{margin:0}

/* Average summary */
.kss-summary{border:1px solid rgba(0,0,0,.08);background:#fff;border-radius:12px;padding:10px 12px;margin:0 0 12px}
.kss-summary-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kss-summary-stars{position:relative;display:inline-block;font-size:inherit;line-height:1}
.kss-summary-stars-base{opacity:.25}
.kss-summary-stars-fill{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap}
.kss-summary-text{opacity:.9;font-weight:600}

.kss-summary-text-only{font-weight:700;opacity:.9}

.kss-consent{display:block;margin:12px 0 10px;font-weight:600;opacity:.9}
.kss-consent input{margin-right:8px}
.kss-consent a{text-decoration:underline}

.kss-auth-notice{border:1px dashed rgba(0,0,0,.25);padding:10px 12px;border-radius:12px;background:#fff;margin:0 0 12px;opacity:.9}


/* Display stars: color each star (1..5) */
.kss-rating .kss-star:nth-child(1){color:var(--kss-g-blue)}
.kss-rating .kss-star:nth-child(2){color:var(--kss-g-red)}
.kss-rating .kss-star:nth-child(3){color:var(--kss-g-yellow)}
.kss-rating .kss-star:nth-child(4){color:var(--kss-g-green)}
.kss-rating .kss-star:nth-child(5){color:var(--kss-g-blue)}

/* Form stars: color by selected value */
.kss-stars label[for="kss_star_1"]{color:var(--kss-g-blue)}
.kss-stars label[for="kss_star_2"]{color:var(--kss-g-red)}
.kss-stars label[for="kss_star_3"]{color:var(--kss-g-yellow)}
.kss-stars label[for="kss_star_4"]{color:var(--kss-g-green)}
.kss-stars label[for="kss_star_5"]{color:var(--kss-g-blue)}

/* Average summary: apply a Google-like gradient across the star string */
.kss-summary-stars-base,
.kss-summary-stars-fill{
  background-image:linear-gradient(90deg,
    var(--kss-g-blue) 0%,
    var(--kss-g-blue) 25%,
    var(--kss-g-red) 25%,
    var(--kss-g-red) 50%,
    var(--kss-g-yellow) 50%,
    var(--kss-g-yellow) 75%,
    var(--kss-g-green) 75%,
    var(--kss-g-green) 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Google gold for stars */
:root{
  --kss-gold:#fbbc04; /* Google gold */
}

/* Display stars */
.kss-rating .kss-star{color:var(--kss-gold)}

/* Form stars */
.kss-stars label{color:var(--kss-gold)}

/* Average summary stars */
.kss-summary-stars-base,
.kss-summary-stars-fill{
  color:var(--kss-gold);
}

/* System fonts only (no Google Fonts) */
:root{
  --kss-font: Arial, Helvetica, sans-serif;
}
.kss-wrap{
  font-family: var(--kss-font);
}
.kss-wrap *{
  font-family: inherit;
}

/* Font size: inherit from theme (no fixed sizes) */
.kss-wrap,
.kss-wrap input,
.kss-wrap textarea,
.kss-wrap select,
.kss-wrap button{
  font-size: inherit;
  line-height: inherit;
}
