/* ============================================
   Testimonial Selector Component
   Admin tool for managing category testimonials
   ============================================ */

/* Secondary / muted text on light backgrounds */
.rd-testimonial-selector__meta,
.rd-testimonial-selector__course,
.rd-testimonial-selector__badge,
.rd-testimonial-selector__empty,
.rd-testimonial-selector__count,
.rd-testimonial-selector__modal-length,
.rd-testimonial-selector__modal-loading,
.rd-testimonial-selector__modal-hint {
    font-size: var(--rd-fontsize-3);
    color: var(--rd-gray-500);
}

/* Vertical lists (saved cards + modal candidates) */
.rd-testimonial-selector__list,
.rd-testimonial-selector__modal-list {
    display: flex;
    flex-direction: column;
    gap: var(--rd-spacing-sm);
}

/* Stack the cards inside each accordion section with the same spacing */
.rd-testimonial-selector__modal-list .rd-details-content {
    display: flex;
    flex-direction: column;
    gap: var(--rd-spacing-sm);
}

.rd-testimonial-selector__list {
    margin-top: var(--rd-spacing-sm);
}

/* Selectable cards reuse the public .rd-testimonial-card look (always loaded);
   these add only the selector-specific interaction states on top. */
.rd-testimonial-card.rd-testimonial-selector__pick {
    cursor: pointer;
    outline: 2px solid transparent;
    transition: outline-color 0.15s ease;
}

.rd-testimonial-card.rd-testimonial-selector__pick.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Selector-specific metadata row (Standard badge / course name) under a card */
.rd-testimonial-selector__meta {
    display: flex;
    align-items: center;
    gap: var(--rd-spacing-x-sm);
    margin-top: var(--rd-spacing-x-sm);
}

/* Course title shown above (outside) the review card */
.rd-testimonial-selector__course {
    font-weight: 600;
    margin-bottom: var(--rd-spacing-x-sm);
    padding-left: var(--rd-spacing-x-sm);
}

/* Card + right-side action buttons row (course title sits above this) */
.rd-testimonial-selector__entry-body {
    display: flex;
    align-items: stretch;
    gap: var(--rd-spacing-sm);
}

/* Create/replace + delete buttons, stacked to the right of the card */
.rd-testimonial-selector__actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--rd-spacing-x-sm);
    flex: 0 0 auto;
}


/* Avatar container so a loading spinner can overlay the avatar during generation */
.rd-testimonial-selector__avatar-wrap {
    position: relative;
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
}

.rd-testimonial-selector__avatar-wrap.is-generating .rd-testimonial-avatar {
    opacity: 0.35;
}

.rd-testimonial-selector__avatar-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid var(--rd-gray-200);
    border-top-color: var(--rd-primary-active);
    border-radius: 50%;
    animation: rd-testimonial-spin 0.6s linear infinite;
}

.rd-testimonial-selector__badge {
    display: inline-block;
    padding: 2px 6px;
    background: var(--rd-gray-200);
    border-radius: 4px;
}

.rd-testimonial-selector__empty {
    margin-top: var(--rd-spacing-x-sm);
}

/* Selection count shown above the "Testimonials auswählen" button */
.rd-testimonial-selector__count {
    margin: 0 0 var(--rd-spacing-x-sm) 0;
}

/* Controls bar (length filters + AI + count) — lives in the modal header */
.rd-testimonial-selector__modal-controls {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--rd-spacing-sm);
    margin-top: var(--rd-spacing-sm);
}

.rd-testimonial-selector__modal-length {
    display: flex;
    flex-direction: column;
    gap: var(--rd-spacing-x-sm);
}

.rd-testimonial-selector__modal-length input {
    width: 80px;
}

/* "Alle neu auswählen" toggle next to the AI button */
.rd-testimonial-selector__modal-reset {
    display: flex;
    align-items: center;
    gap: var(--rd-spacing-x-sm);
    height: 36px;
}

/* Loading indicator */
.rd-testimonial-selector__modal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rd-spacing-x-sm);
    padding: var(--rd-spacing-sm);
}

.rd-testimonial-selector__modal-loading .rd-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--rd-gray-200);
    border-top-color: var(--rd-primary-active);
    border-radius: 50%;
    animation: rd-testimonial-spin 0.6s linear infinite;
}

@keyframes rd-testimonial-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Empty-state hint (e.g. nothing selected yet) */
.rd-testimonial-selector__modal-hint {
    margin: 0;
    padding: var(--rd-spacing-sm);
    font-style: italic;
}

/* Section divider (Ausgewählt / Verfügbare / Standard) */
.rd-testimonial-selector__modal-section {
    margin-top: var(--rd-spacing-sm);
    padding-top: var(--rd-spacing-sm);
    border-top: 1px solid var(--rd-gray-200);
    font-size: var(--rd-fontsize-3);
    font-weight: 600;
}

/* Toolbar above the selected group (shuffle button) */
.rd-testimonial-selector__selected-toolbar {
    display: flex;
    justify-content: flex-end;
}

/* Drag handle + drop indicator use the shared .rd-drag-* classes (see DragSort.css).
   Only the card-specific box behaviour lives here. */
pc-testimonial-card.rd-testimonial-selector__sortable {
    display: block;
    cursor: grab;
}