/* flask_mmc/static/css/view_review_details.css */

/* Inherit root variables from main_theme.css (or re-declare if needed for overrides) */
/* For example, if main_theme.css has :root { --app-primary-color: #007bff; } */

body {
    background-color: var(--app-light-bg, #f4f7f6); /* Use variable from main_theme or a default */
}

.review-detail-container {
    background-color: var(--card-background-color, #FFFFFF); /* Use theme variable */
    padding: 2rem 2.5rem;
    border-radius: var(--app-border-radius, 0.375rem); /* Use theme variable */
    box-shadow: var(--app-card-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.10)); /* Use theme variable */
    max-width: 900px; /* Control max width for better readability */
    margin-left: auto;
    margin-right: auto;
}

.review-header h1 {
    color: var(--app-primary-color, #007bff); /* Use theme variable */
    font-weight: 700;
    font-size: 2rem; /* Slightly smaller than original for a cleaner look */
    margin-bottom: 0.25rem;
}

.review-header .coach-name-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem; /* Increased spacing */
}

.review-header .coach-name-status h2 {
    font-size: 1.35rem; /* Slightly smaller */
    color: var(--app-dark-text, #212529);
    font-weight: 600;
    margin-bottom: 0;
    margin-right: 0.75rem;
}

.review-header .coach-link-badge {
    font-size: 0.8rem;
    padding: 0.4em 0.75em; /* Adjusted padding */
    vertical-align: middle;
    font-weight: 500;
}
/* Specific badge styling using theme variables - assuming Bootstrap base classes are already doing some of this */
.coach-link-badge.bg-success-subtle { /* Example if you use these BS classes */
    background-color: rgba(var(--app-primary-color-rgb, 0, 123, 255), 0.15) !important; /* Lighter primary */
    color: var(--app-primary-color, #007bff) !important;
    border: 1px solid rgba(var(--app-primary-color-rgb, 0, 123, 255), 0.3);
}
.coach-link-badge.bg-info-subtle {
    background-color: rgba(var(--app-secondary-color-rgb, 108, 117, 125), 0.1) !important; /* Lighter secondary */
    color: var(--app-secondary-color, #6c757d) !important;
    border: 1px solid rgba(var(--app-secondary-color-rgb, 108, 117, 125), 0.25);
}


.review-meta {
    font-size: 0.9rem;
    color: var(--app-secondary-color, #6c757d);
    margin-bottom: 1.75rem; /* Increased spacing */
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--app-border-color, #dee2e6);
}

.review-meta strong {
    color: var(--app-dark-text, #212529);
    font-weight: 600;
}
.review-meta span + span::before { /* Add a separator */
    content: "|";
    margin: 0 0.5em;
    color: var(--app-border-color, #dee2e6);
}

.overall-rating-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--app-border-color, #dee2e6);
}
.overall-rating-section h4,
.review-blurb h4,
.rating-questions-section h3,
.qa-section h3 {
    font-size: 1.25rem; /* Consistent sub-heading size */
    color: var(--app-dark-text, #212529);
    font-weight: 600;
    margin-bottom: 1rem;
}

.overall-rating-section .star-rating-display span,
.rating-item .star-rating-individual span { /* Shared star style */
    color: #ffc107; /* Gold/Amber for filled stars - keep this universal for ratings */
    margin-right: 2px;
}
.overall-rating-section .star-rating-display span { font-size: 1.75rem; }
.rating-item .star-rating-individual span { font-size: 1.25rem; } /* Slightly smaller for itemized */

.overall-rating-section .star-rating-display .empty i,
.overall-rating-section .star-rating-display .far.fa-star,
.rating-item .star-rating-individual .empty i,
.rating-item .star-rating-individual .far.fa-star {
    color: #d1d5db !important; /* Lighter grey for empty stars */
}

.overall-rating-section .rating-text {
    font-size: 1.2rem; /* Adjusted size */
    font-weight: 600;
    color: var(--app-primary-color, #007bff);
    margin-left: 0.75rem;
}

.review-blurb blockquote {
    font-size: 1.05rem; /* Slightly adjusted */
    border-left: 4px solid var(--app-accent-color, #17a2b8); /* Use theme accent */
    padding: 0.75rem 1.25rem; /* Adjusted padding */
    margin: 1.5rem 0;
    font-style: italic;
    color: #454d55; /* Keep dark grey for readability */
    background-color: rgba(var(--app-accent-color-rgb, 23, 162, 184), 0.05); /* Very subtle bg */
    border-radius: 0 var(--app-border-radius, 0.375rem) var(--app-border-radius, 0.375rem) 0;
}

.rating-questions-section, .qa-section {
    margin-top: 2rem;
}

.qa-item, .rating-item {
    margin-bottom: 1.25rem; /* Increased spacing */
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed var(--app-border-color, #eee);
}

.qa-item:last-child, .rating-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.qa-item .question-text, .rating-item .question-text {
    font-weight: 600;
    color: var(--app-dark-text, #212529);
    display: block;
    margin-bottom: 0.5rem; /* Space between question and answer/rating */
    font-size: 1rem;
}

.qa-item .answer-text {
    color: #333;
    padding-left: 0; /* Remove extra indent if not desired */
    white-space: pre-wrap;
    font-size: 0.95rem;
    background-color: #f8f9fa; /* Subtle background for answer blocks */
    padding: 0.75rem;
    border-radius: var(--app-border-radius-sm, 0.25rem); /* Assuming you might have a smaller radius var */
}

.rating-item .answer-value-text {
    margin-left: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--app-secondary-color, #6c757d);
}

.actions-footer { /* Class for the div containing back/profile buttons */
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--app-border-color, #dee2e6);
}

/* Buttons will inherit from main_theme.css or Bootstrap, ensure they use your theme colors */
.actions-footer .btn {
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
}