/* FR20-REV3 */

.status-badge.status-pending {
    background-color: rgba(255, 193, 7, 0.15);
    color: var(--status-pending);
}

.status-badge.status-published {
    background-color: rgba(40, 167, 69, 0.15);
    color: var(--status-active);
}

.status-badge.status-removed {
    background-color: rgba(108, 117, 125, 0.15);
    color: var(--status-inactive);
}

.status-badge.status-expired {
    background-color: rgba(108, 117, 125, 0.15);
    color: var(--status-inactive);
}

.status-badge.status-revoked {
    background-color: rgba(220, 53, 69, 0.15);
    color: var(--status-declined);
}

.reviewer-type-badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    background-color: rgba(0, 92, 135, 0.1);
    color: var(--primary-blue);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--white);
    flex-shrink: 0;
    background-color: var(--primary-blue);
    user-select: none;
}

.review-avatar-c1 { background-color: #005c87; }
.review-avatar-c2 { background-color: #b84c30; }
.review-avatar-c3 { background-color: #2e7d32; }
.review-avatar-c4 { background-color: #6a1b9a; }
.review-avatar-c5 { background-color: #bf360c; }
.review-avatar-c6 { background-color: #00695c; }

.review-stars {
    display: flex;
    align-items: center;
    gap: 1px;
}

.review-stars i {
    font-size: 0.9375rem;
}

.review-stars .bi-star-fill {
    color: #f4a61e;
}

.review-stars .bi-star {
    color: #dee2e6;
}

.star-rating-widget {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0.25rem;
}

/* The star widget is marked up as <span> on review-submit.php and as
   <button> in the Transcribe modal on office/reviews.php. Without the
   reset below the buttons render with default browser chrome — a grey
   box and border around every star. */
.star-btn {
    cursor: pointer;
    font-size: 2.125rem;
    color: #dee2e6;
    transition: color var(--transition-fast), transform var(--transition-fast);
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    background: none;
    border: none;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
}

.star-btn:focus {
    outline: none;
}

.star-btn:focus-visible {
    outline: 2px solid var(--link-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

.star-btn:hover {
    transform: scale(1.1);
}

.star-btn.active {
    color: #f4a61e;
}

.star-btn.hovered {
    color: #f4a61e;
}

.star-rating-error {
    display: none;
    font-size: 0.875rem;
    color: #dc3545;
    margin-top: 0.25rem;
}

.star-rating-error.visible {
    display: block;
}

.star-rating-wrapper.is-invalid .star-btn {
    color: #f0bebe;
}

.star-rating-wrapper.is-invalid .star-btn.active {
    color: #f4a61e;
}

.review-card {
    background-color: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    transition: box-shadow var(--transition-normal);
    height: 100%;
}

.review-card:hover {
    box-shadow: var(--shadow-md);
}

.review-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.review-card-meta {
    flex: 1;
    min-width: 0;
}

.review-card-name {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--primary-text);
    margin: 0 0 0.3rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-card-type {
    margin-bottom: 0.4rem;
}

.review-card-text {
    font-size: 0.9375rem;
    color: var(--primary-text);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

.review-card-response {
    background-color: #f8f9fa;
    border-left: 3px solid var(--gold-accent);
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
    padding: 0.75rem var(--spacing-md);
    margin-top: var(--spacing-xs);
}

.review-card-response-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 0.3rem;
}

.review-card-response-text {
    font-size: 0.9rem;
    color: var(--primary-text);
    line-height: 1.6;
    margin: 0;
}

.reviews-page-summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

.reviews-page-rating-large {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-text);
    line-height: 1;
}

.reviews-page-stars-large {
    display: flex;
    align-items: center;
    gap: 2px;
}

.reviews-page-stars-large .bi-star-fill {
    color: #f4a61e;
    font-size: 1.5rem;
}

.reviews-page-count {
    font-size: 0.9375rem;
    color: #6c757d;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xxl);
}

.reviews-empty {
    text-align: center;
    padding: var(--spacing-xxl);
    background-color: #f8f9fa;
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-xxl);
}

.reviews-empty i {
    font-size: 4rem;
    color: #dee2e6;
    margin-bottom: var(--spacing-md);
    display: block;
}

.reviews-empty p {
    color: #6c757d;
    margin-bottom: 0;
    font-size: 1.0625rem;
}

.review-submit-section {
    padding: var(--spacing-xl) 0;
    background-color: #f8f9fa;
    min-height: calc(100vh - 160px);
}

.review-submit-card {
    background-color: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-xl);
    max-width: 640px;
    margin: 0 auto;
}

.review-submit-card h1 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-xs);
}

.review-submit-card .review-submit-intro {
    color: #6c757d;
    font-size: 1rem;
    margin-bottom: var(--spacing-lg);
}

.review-submit-property {
    background-color: #f8f9fa;
    border-radius: var(--border-radius-md);
    padding: 0.75rem var(--spacing-md);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    border: 1px solid #dee2e6;
}

.review-submit-property i {
    color: var(--primary-blue);
    font-size: 1.125rem;
    flex-shrink: 0;
}

.review-submit-property-address {
    font-size: 0.9375rem;
    color: var(--primary-text);
    font-weight: 600;
    margin: 0;
}

.review-submit-field-label {
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    margin-bottom: 0.5rem;
    display: block;
}

.review-submit-consent-block {
    background-color: #f8f9fa;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    border: 1px solid #dee2e6;
    margin-bottom: var(--spacing-md);
}

.review-submit-consent-block .form-check {
    margin: 0;
}

.review-submit-consent-block .form-check-label {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--primary-text);
}

.review-submit-btn {
    width: 100%;
    padding: 0.875rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.review-token-section {
    padding: var(--spacing-xl) 0;
    background-color: #f8f9fa;
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: center;
}

.review-token-card {
    background-color: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-xl);
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

.review-token-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
    display: block;
    line-height: 1;
}

.review-token-icon.icon-error {
    color: #dc3545;
}

.review-token-icon.icon-expired {
    color: var(--status-pending);
}

.review-token-icon.icon-done {
    color: var(--status-active);
}

.review-token-card h2 {
    font-size: 1.375rem;
    margin-bottom: var(--spacing-sm);
}

.review-token-card p {
    color: #6c757d;
    margin-bottom: 0;
}

.review-success-section {
    padding: var(--spacing-xl) 0;
    background-color: #f8f9fa;
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: center;
}

.review-success-card {
    background-color: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-xl);
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

.review-success-icon {
    font-size: 4.5rem;
    color: var(--status-active);
    display: block;
    margin-bottom: var(--spacing-md);
    line-height: 1;
}

.review-success-card h2 {
    margin-bottom: var(--spacing-sm);
}

.review-success-card p {
    color: #6c757d;
    max-width: 420px;
    margin: 0 auto;
    line-height: 1.6;
}

.reviews-order-panel {
    background-color: var(--admin-card-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.reviews-order-mode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid #dee2e6;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.reviews-order-mode-label {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--primary-text);
}

.reviews-order-mode-badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reviews-order-mode-badge.mode-manual {
    background-color: rgba(0, 92, 135, 0.1);
    color: var(--primary-blue);
}

.reviews-order-mode-badge.mode-random {
    background-color: rgba(253, 126, 20, 0.1);
    color: var(--priority-high);
}

.reviews-sortable-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.reviews-sortable-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.75rem var(--spacing-md);
    background-color: var(--white);
    border: 1px solid #dee2e6;
    border-radius: var(--border-radius-md);
    margin-bottom: 0.5rem;
    cursor: grab;
    transition: box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.reviews-sortable-item:hover {
    box-shadow: var(--shadow-sm);
    background-color: #fafafa;
}

.reviews-sortable-item:active {
    cursor: grabbing;
}

.reviews-sortable-item.sortable-ghost {
    opacity: 0.4;
    background-color: #f8f9fa;
}

.reviews-sortable-item.sortable-chosen {
    box-shadow: var(--shadow-md);
    background-color: rgba(0, 92, 135, 0.03);
    border-color: var(--primary-blue);
    cursor: grabbing;
}

.reviews-sortable-handle {
    color: #adb5bd;
    font-size: 1.125rem;
    flex-shrink: 0;
    padding: 0.125rem 0.25rem;
    cursor: grab;
    line-height: 1;
}

.reviews-sortable-preview {
    flex: 1;
    min-width: 0;
}

.reviews-sortable-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.125rem;
}

.reviews-sortable-excerpt {
    font-size: 0.8rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reviews-sortable-stars {
    flex-shrink: 0;
}

.reviews-sortable-order-input {
    width: 68px;
    text-align: center;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid #ced4da;
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
    color: var(--primary-text);
}

.reviews-sortable-order-input:focus {
    border-color: var(--link-blue);
    box-shadow: 0 0 0 0.2rem rgba(0, 174, 255, 0.25);
    outline: none;
}

/* ============================================================
   ADMIN REVIEWS PAGE — fr- CLASSES
   ============================================================
   office/reviews.php and assets/js/reviews.js both use this
   fr- prefixed set. The reviews-sortable-* block above styles
   an older markup shape that the admin page does not emit, so
   these rules are what actually apply to the Invitations table,
   the Reviews table and the Display Order panel.
   ============================================================ */

/* Star display in the Reviews table. Rendered by fr_stars() as
   literal ★ and ☆ characters rather than Bootstrap icons. */
.fr-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    line-height: 1;
    white-space: nowrap;
}

.fr-star {
    font-size: 1rem;
    line-height: 1;
}

.fr-star.filled {
    color: #f4a61e;
}

.fr-star.empty {
    color: #dee2e6;
}

/* Truncated review text in the Reviews table. Without a width
   constraint a long review pushes the Order, Status and Action
   columns off the right edge of the table. */
.fr-review-preview {
    max-width: 320px;
    color: #6c757d;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Display Order panel rows. The layout, border, padding and
   background all come from Bootstrap utility classes in the
   markup, so these rules only add the interaction states. */
.fr-order-row {
    transition: box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.fr-order-row:hover {
    box-shadow: var(--shadow-sm);
    background-color: #fafafa !important;
}

/* SortableJS applies these two classes during a drag. They must be
   scoped to .fr-order-row — the .reviews-sortable-item versions
   above never match anything the admin page renders. */
.fr-order-row.sortable-ghost {
    opacity: 0.4;
    background-color: #f8f9fa !important;
}

.fr-order-row.sortable-chosen {
    box-shadow: var(--shadow-md);
    background-color: rgba(0, 92, 135, 0.03) !important;
    border-color: var(--primary-blue) !important;
    cursor: grabbing;
}

.fr-drag-handle {
    color: #adb5bd;
    font-size: 1.125rem;
    flex-shrink: 0;
    line-height: 1;
    padding: 0.125rem 0.25rem;
    user-select: none;
}

.fr-drag-handle:hover {
    color: var(--primary-blue);
}

.fr-order-row:active .fr-drag-handle {
    cursor: grabbing;
}

.fr-order-input {
    text-align: center;
    flex-shrink: 0;
}

.fr-order-input:focus {
    border-color: var(--link-blue);
    box-shadow: 0 0 0 0.2rem rgba(0, 174, 255, 0.25);
    outline: none;
}

/* Send Invitation modal — Existing client / Past or other client
   toggle. The manual name and email block is revealed by removing
   d-none in JS; this only adds a little separation from the
   Reviewer Type row that follows it. */
#inviteExternalBlock {
    border-left: 3px solid var(--gold-accent);
    padding-left: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

.review-detail-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.review-detail-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--white);
    flex-shrink: 0;
    user-select: none;
}

.review-detail-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-text);
    margin: 0 0 0.375rem 0;
}

.review-detail-meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.review-detail-text-block {
    background-color: #f8f9fa;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.review-detail-text-block p {
    color: var(--primary-text);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

.review-response-editor {
    background-color: var(--admin-card-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border-left: 4px solid var(--gold-accent);
}

.review-response-editor-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-text);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid #dee2e6;
}

.review-current-response {
    background-color: #f8f9fa;
    border-left: 3px solid var(--gold-accent);
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
    padding: 0.75rem var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.review-current-response-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 0.3rem;
}

.review-current-response p {
    font-size: 0.9375rem;
    color: var(--primary-text);
    margin: 0;
    line-height: 1.6;
}

.review-internal-fields {
    background-color: rgba(255, 193, 7, 0.05);
    border: 1px dashed rgba(204, 154, 0, 0.4);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.review-internal-fields-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #856404;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
}

.reviews-widget-counts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.reviews-widget-count-item {
    text-align: center;
    padding: var(--spacing-sm);
    border-right: 1px solid #dee2e6;
}

.reviews-widget-count-item:last-child {
    border-right: none;
}

.reviews-widget-count-item a {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--border-radius-md);
    padding: 0.5rem;
    transition: background-color var(--transition-fast);
}

.reviews-widget-count-item a:hover {
    background-color: #f8f9fa;
    text-decoration: none;
}

.reviews-widget-count-item a:hover .reviews-widget-count-value {
    color: var(--primary-blue);
}

.reviews-widget-count-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-text);
    line-height: 1.2;
    display: block;
}

.reviews-widget-count-label {
    font-size: 0.8rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
    display: block;
    margin-top: 0.25rem;
}

@media (max-width: 1023px) {
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .reviews-page-summary {
        gap: var(--spacing-md);
    }

    .fr-review-preview {
        max-width: 220px;
    }
}

@media (max-width: 767px) {
    .reviews-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .review-submit-card {
        padding: var(--spacing-md);
    }

    .review-token-card,
    .review-success-card {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .reviews-page-summary {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: flex-start;
        padding: var(--spacing-md);
    }

    .reviews-order-mode-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .reviews-sortable-item {
        flex-wrap: wrap;
    }

    .reviews-sortable-order-input {
        width: 60px;
    }

    .star-btn {
        font-size: 2.5rem;
    }

    .review-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .review-detail-avatar {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .reviews-widget-counts {
        grid-template-columns: 1fr;
    }

    .reviews-widget-count-item {
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }

    .reviews-widget-count-item:last-child {
        border-bottom: none;
    }

    .fr-review-preview {
        max-width: 160px;
    }

    #inviteExternalBlock {
        padding-left: var(--spacing-sm);
    }
}