/* PAR24 V145 - opinie/komentarze produktu (produkt.php), dodawanie i lista. */
.comment-summary{display:flex;align-items:center;gap:8px;font-weight:750;color:var(--muted);margin-top:6px}
.comment-summary-stars{color:#d69e2e;font-size:18px;letter-spacing:1px}
.comment-empty{color:var(--muted);font-weight:650}

/* Grid 2-kolumnowy: pierwsza komórka to zawsze formularz/prompt logowania (patrz produkt.php), dalej
   opinie w naturalnym porządku DOM - auto-flow: row ustawia formularz|opinia 1, opinia 2|opinia 3... */
.comment-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.comment-grid-cell{min-width:0}
@media (max-width: 760px){
    .comment-grid{grid-template-columns:1fr}
}

.comment-form{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px;display:grid;gap:14px;height:100%}
.comment-form-label{display:block;font-weight:850;margin-bottom:6px;font-size:14px}
.comment-form-content{display:block;font-weight:850;font-size:14px}
.comment-form textarea{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;resize:vertical;background:#fff}
.comment-form-consent{display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:500;line-height:1.4;color:var(--muted)}
.comment-form-consent input{margin-top:3px;flex-shrink:0}
.comment-form-consent a{color:var(--cyan-dark);font-weight:750;text-decoration:underline}
.comment-login-prompt{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 22px;font-weight:650;height:100%}
.comment-login-prompt a{color:var(--cyan-dark);font-weight:850;text-decoration:underline}

.comment-item{border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 22px}
.comment-item-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.comment-item-head strong{font-size:15px}
.comment-item-stars{color:#d69e2e;letter-spacing:1px}
.comment-item-head time{color:var(--muted);font-size:13px;margin-left:auto}
.comment-item-content{margin:8px 0 0;line-height:1.5}

/* Gwiazdki jako radio-inputy - kolejność 5..1 w HTML + row-reverse, tak żeby zaznaczenie/hover
   podświetlało gwiazdki "od lewej do wybranej", mimo naturalnego kierunku czytania w DOM. Ten sam
   trik co w panelu admina (assets/css/admin-v176.css), ten sam znak ★ co odznaka Bestseller. */
.star-input{display:inline-flex;flex-direction:row-reverse;gap:3px;font-size:30px}
.star-input input{position:absolute;opacity:0;width:1px;height:1px}
.star-input label{color:#d1d5db;cursor:pointer;transition:color .12s ease}
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label{color:#d69e2e}
.star-input input:focus-visible + label{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}