/* ── CSAT — ѕвездички + анкетна страница ────────────────────────────────
   Ѕвездичките се <button>, не <input type=radio>: се користат и на анонимната
   страница и во панелот на тикетот, а бараме hover-preview што radio не го дава
   без дополнителен JS. Секое копче носи aria-label со бројот, па screen reader
   и тестовите ја читаат оценката без да зависат од глифот „★". */

.csat-stars {
    display: inline-flex;
    gap: 0.15rem;
}

.csat-star {
    background: none;
    border: none;
    padding: 0 0.1rem;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    color: #d4d4d8;
    transition: color 0.12s ease, transform 0.12s ease;
}

.csat-star:hover:not(:disabled) { transform: scale(1.12); }
.csat-star.filled { color: #f59e0b; }
.csat-star:disabled { cursor: default; }
.csat-star:focus-visible { outline: 2px solid var(--rz-primary, #4f46e5); outline-offset: 2px; border-radius: 4px; }

.csat-stars--readonly .csat-star { cursor: default; font-size: 1.35rem; }

/* Единствената текстуална легенда — „1 = многу лошо, 5 = одлично“ не смее да
   биде само боја/облик. */
.csat-scale-hint {
    font-size: 0.78rem;
    color: #71717a;
    margin-top: 0.2rem;
}

/* ── Анонимна страница ── */
.csat-page {
    max-width: 560px;
    margin: 3rem auto;
    padding: 0 1rem;
}

.csat-card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.csat-ticket-line {
    font-size: 0.9rem;
    color: #52525b;
}

.csat-ticket-line strong { color: #18181b; }

.csat-comment {
    width: 100%;
    min-height: 96px;
    padding: 0.6rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.92rem;
    resize: vertical;
}

.csat-comment:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 2px #e0e7ff; }

.csat-neutral {
    text-align: center;
    color: #52525b;
}

/* ── In-app панел на TicketDetail ── */
.csat-panel {
    border: 1px solid #e4e4e7;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    background: #fffbeb;
    padding: 0.9rem 1rem;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.csat-panel-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #92400e;
}

.csat-panel--done {
    border-left-color: #10b981;
    background: #ecfdf5;
}

.csat-panel--done .csat-panel-title { color: #065f46; }