/* ===== Display stars (lists, headers, etc.) ===== */
.stars .star,
.ys-stars .star {
    fill: #f59e0b;
}

/* amber-500 */
.stars .grey,
.ys-stars .grey {
    fill: #d1d5db;
}

/* gray-300 */
.stars .notratedyet {
    fill: #e5e7eb;
}


/* gray-200 */

/* Average block: align stars + number neatly */
.ys-stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* spacing between stars and number */
    line-height: 1;
    vertical-align: middle;
}

.ys-stars .ys-num {
    display: inline-block;
    margin-left: 6px;
    margin-top: 2px;
    /* little left spacing before average */
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

/* ===== Interactive stars (comment form + modal) ===== */
.rating {
    display: flex;
    gap: 4px;
}

.rating-container {
    position: relative;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.rating-container input {
    position: absolute;
    inset: 0;
    margin: 0 !important;
    opacity: 0;
    cursor: pointer;
}

.rating-container svg {
    display: block;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* smooth color change on hover/click */
.comments-rating .rating-icon svg,
.comments-rating .rating-icon svg path {
    transition: fill 0.15s ease;
}

/* class-driven fill — works whether class is on <svg> or <path> */
svg.star,
path.star {
    fill: #f59e0b !important;
}

/* selected */
svg.grey,
path.grey {
    fill: #d1d5db !important;
}

/* unselected */
svg.notratedyet,
path.notratedyet {
    fill: #e5e7eb !important;
}

/* Optional: subtle hover hint */
.comments-rating .rating-icon:hover svg path,
.comments-rating .rating-icon:hover svg {
    fill: #f59e0b !important;
}

/* ===== Minimal modal UI ===== */
.ys-modal[hidden] {
    display: none;
}

.ys-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9998;
}

.ys-dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 520px;
    width: 92%;
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    z-index: 9999;
}

.ys-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: 0;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.ys-title {
    margin: 0.25rem 0 0.75rem;
    font-size: 18px;
}

.ys-dialog textarea,
.ys-dialog input[type="text"],
.ys-dialog input[type="email"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.ys-submit {
    background: #111;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
}

/* (Optional) if you jump to #respond elsewhere and have a sticky header */
#comments-rating,
#respond,
#comment {
    scroll-margin-top: 80px;
}

.ys-dialog fieldset.comments-rating,
#respond fieldset.comments-rating {
  display:block;
  margin: 6px 0 12px;
  padding: 0;
  border: 0;
}