/*
Plugin Name: Chroma-Shift Ratings & Reviews
Description: Styles for the Ratings & Reviews plugin.
*/

/* --- General Review Section Styles --- */
#crr-reviews-section-app {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
}

.crr-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.crr-section-title {
    font-size: 1.8em;
    margin: 0;
    color: var(--primary-text-color);
}

.crr-total-votes {
    font-size: 0.7em;
    color: var(--secondary-text-color);
    margin-left: 10px;
    font-weight: normal;
}

.crr-add-review-btn {
    background-color: var(--accent-color);
    color: #fff;
    padding: 8px 15px;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.crr-add-review-btn:hover {
    background-color: var(--accent-hover-color);
    text-decoration: none;
}

.crr-add-review-btn .dashicons {
    font-size: 1.2em;
}

/* --- Overall Rating Display & Horizontal Breakdown Container --- */
/* This is the new container that holds both the average score and the breakdown chart */
.crr-overall-rating-and-breakdown-wrapper {
    display: flex;
    align-items: flex-end; /* Align items to the bottom */
    gap: 20px; /* Space between the score and the chart */
    margin-bottom: 20px;
}

.crr-overall-rating {
    display: flex;
    align-items: center; /* Center star and score */
    font-size: 3.5em; /* Larger score */
    font-weight: bold;
    color: var(--primary-text-color);
    line-height: 1; /* Prevent extra space */
    flex-direction: column; /* Stack score and vote count vertically */
    text-align: center;
    flex-shrink: 0; /* Prevent shrinking */
}

.crr-average-score {
    display: flex;
    align-items: center;
    line-height: 1;
}

.crr-average-score .crr-star-icon {
    font-size: 1.5em; /* Larger star */
    color: #FFD700; /* Gold star */
    margin-right: 5px; /* Space between star and score */
}

.crr-overall-rating .crr-vote-count { /* Specific style for overall vote count */
    font-size: 0.4em; /* Smaller font for count */
    color: var(--secondary-text-color);
    margin-top: 5px;
    font-weight: normal;
}

/* --- Rating Breakdown Chart (Horizontal) --- */
.crr-rating-breakdown {
    display: flex; /* Use flexbox for horizontal layout */
    align-items: flex-end; /* Align bars to the bottom */
    gap: 5px; /* Space between columns */
    flex-grow: 1; /* Allow it to take available space */
    height: 100px; /* Fixed height for the chart area */
    padding-bottom: 15px; /* Space for labels */
    border-bottom: 1px solid var(--border-color); /* Line below the chart */
}

.crr-bar-column {
    display: flex;
    flex-direction: column-reverse; /* Stack elements from bottom up */
    align-items: center;
    flex-grow: 1; /* Each column takes equal width */
    height: 100%; /* Fill the height of the breakdown container */
    position: relative;
}

.crr-bar-fill {
    width: 80%; /* Width of the actual bar */
    background-color: var(--accent-color); /* Bar color */
    border-radius: 2px;
    transition: height 0.5s ease-out; /* Animate height changes */
    height: 0%; /* Initial height, controlled by JS */
    flex-shrink: 0; /* Prevent bar from shrinking */
}

.crr-bar-label {
    font-size: 0.8em;
    color: var(--secondary-text-color);
    margin-top: 5px; /* Space between bar and label */
    position: absolute; /* Position labels below bars */
    bottom: -15px;
}

.crr-bar-count { /* This will be the number above the bar */
    font-size: 0.7em;
    color: var(--secondary-text-color);
    position: absolute;
    top: -15px; /* Position above the bar */
    font-weight: 600;
}


/* --- Your Review Section --- */
.crr-your-review-section,
.crr-other-reviews-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.crr-your-review-section h3,
.crr-other-reviews-section h3 {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--primary-text-color);
}

.crr-your-review-content .loading-message,
.crr-your-review-content .no-review-message,
.crr-other-reviews-section .loading-message,
.crr-other-reviews-section .no-review-message {
    text-align: center;
    color: var(--secondary-text-color);
    font-style: italic;
    padding: 20px 0;
}

/* --- Review Card (Common for Your Review and Other Reviews) --- */
.crr-review-card {
    background-color: var(--input-bg-color); /* Slightly different background for cards */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 15px; /* For stacked cards */
    display: flex;
    flex-direction: column;
}

.crr-review-card .crr-review-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.crr-review-card .crr-author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.crr-review-card .crr-author-info {
    flex-grow: 1;
}

.crr-review-card .crr-author-name {
    font-weight: bold;
    color: var(--primary-text-color);
    display: block;
}

.crr-review-card .crr-review-date {
    font-size: 0.8em;
    color: var(--secondary-text-color);
}

.crr-review-card .crr-rating-display {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--primary-text-color);
}

.crr-review-card .crr-rating-display .crr-star-icon {
    color: #FFD700; /* Gold star */
    font-size: 1.2em;
}

.crr-review-card .crr-review-headline {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--primary-text-color);
    margin-bottom: 10px;
}

.crr-review-card .crr-review-content {
    font-size: 0.95em;
    color: var(--primary-text-color);
    line-height: 1.6;
    margin-bottom: 15px;
    word-wrap: break-word;
    white-space: pre-wrap; /* Preserve whitespace and line breaks from textarea */
}

/* Removed .crr-read-more as it's no longer needed for carousel cards */
/*
.crr-review-card .crr-read-more {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
    align-self: flex-start;
    margin-top: auto;
}
.crr-review-card .crr-read-more:hover {
    text-decoration: underline;
}
*/

/* --- Helpfulness Actions --- */
/* This section is removed for carousel cards in JS, only applies to full display */
.crr-helpfulness-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    font-size: 0.9em;
    color: var(--secondary-text-color);
}

.crr-vote-btn {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--secondary-text-color);
    padding: 5px 10px;
    border-radius: 20px; /* Pill shape */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.2s ease;
}

.crr-vote-btn:hover:not(:disabled) {
    background-color: var(--hover-bg-color);
    color: var(--primary-text-color);
    border-color: var(--primary-color);
}

.crr-vote-btn.active {
    background-color: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.crr-vote-btn.active:hover {
    background-color: var(--accent-hover-color);
    border-color: var(--accent-hover-color);
}

.crr-vote-btn .dashicons {
    font-size: 1em;
}

.crr-vote-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Other Reviews Carousel --- */
.crr-other-reviews-carousel {
    /* Uses .paginated-carousel-container from theme's style.css */
}

/* New style for the link wrapping the carousel card */
.crr-review-card-link {
    display: block; /* Make the link fill the carousel item */
    height: 100%; /* Ensure the link takes full height */
    text-decoration: none; /* Remove underline */
}

.crr-review-card-link .crr-review-card {
    height: 100%; /* Ensure the card fills the link height */
    margin-bottom: 0; /* No bottom margin in carousel */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Add hover effects */
}

.crr-review-card-link .crr-review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Carousel item width adjustments */
.crr-other-reviews-carousel .carousel-item {
    padding: 0 10px; /* Adjust padding to match theme's carousel */
    width: 50%; /* Default for desktop: 2 cards */
}

/* Mobile: 1 card */
@media (max-width: 767px) {
    .crr-other-reviews-carousel .carousel-item {
        width: 100%;
    }
}


.crr-view-all-reviews-link {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    padding: 12px;
    background-color: var(--input-bg-color);
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    color: var(--primary-text-color);
    transition: background-color 0.2s;
}

.crr-view-all-reviews-link:hover {
    background-color: var(--hover-bg-color);
    text-decoration: none;
}

/* --- Add/Edit Review Page Styles --- */
#crr-add-edit-review-app,
#crr-single-review-app {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    max-width: 800px;
    margin: 20px auto;
}

.crr-form-header {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.crr-form-header .crr-back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
    color: var(--secondary-text-color);
    text-decoration: none;
    margin-bottom: 10px;
}

.crr-form-header .crr-back-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.crr-form-title {
    font-size: 2em;
    margin: 0;
    color: var(--primary-text-color);
}

/* New single-page form layout */
.crr-single-page-form {
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--input-bg-color);
}

.crr-single-page-form h2 {
    font-size: 1.6em;
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--primary-text-color);
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.crr-form-group {
    margin-bottom: 20px;
}

.crr-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--primary-text-color);
}

.crr-form-group input[type="text"],
.crr-form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--surface-color); /* Input background */
    color: var(--primary-text-color);
    font-size: 1em;
}

.crr-form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.crr-content-actions {
    margin-top: 10px;
    text-align: right; /* Align spoiler button to the right */
}

#crr-hide-spoiler-btn {
    background-color: var(--secondary-text-color);
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s;
}
#crr-hide-spoiler-btn:hover:not(:disabled) {
    background-color: #555;
}
#crr-hide-spoiler-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.crr-form-messages {
    text-align: center;
    margin: 15px 0;
    font-weight: 600;
    min-height: 1.2em;
}

.crr-form-messages.error {
    color: var(--error-color);
}

.crr-form-messages.success {
    color: var(--success-color);
}

.crr-form-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.crr-form-actions .button {
    padding: 10px 20px;
    font-size: 1.1em;
    font-weight: 600;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s;
}

#crr-submit-review-btn {
    background-color: var(--accent-color);
    color: #fff;
    border: none;
}
#crr-submit-review-btn:hover:not(:disabled) {
    background-color: var(--accent-hover-color);
}
#crr-submit-review-btn:disabled {
    background-color: var(--secondary-text-color);
    cursor: not-allowed;
}

#crr-delete-review-btn {
    background: none;
    border: 1px solid var(--error-color);
    color: var(--error-color);
}
#crr-delete-review-btn:hover:not(:disabled) {
    background-color: var(--error-color);
    color: #fff;
}
#crr-delete-review-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.crr-guidelines {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.crr-guidelines h3 {
    font-size: 1.4em;
    text-align: center;
    margin-bottom: 15px;
}

.crr-guidelines ul {
    list-style: none;
    padding: 0;
}

.crr-guidelines ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.95em;
    color: var(--secondary-text-color);
}

.crr-guidelines ul li .dashicons-yes {
    color: var(--success-color);
    font-size: 1.1em;
    flex-shrink: 0;
    margin-top: 2px;
}


/* --- Inline Spoiler Styles --- */
.crr-spoiler-hidden {
    background-color: #333; /* Dark block for hidden spoiler */
    color: #333; /* Same color to hide text */
    padding: 0 5px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none; /* Prevent text selection from revealing */
    -webkit-user-select: none;
    -moz-user-select: none;
    display: inline-block; /* Ensure padding works */
}

.crr-spoiler-hidden:hover {
    background-color: #555; /* Slightly lighter on hover */
    color: #555;
}

.crr-spoiler-revealed {
    background-color: transparent;
    color: inherit; /* Reveal text color */
    cursor: text;
}

/* --- Single Review Page Styles --- */
.crr-single-review-header {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.crr-single-review-title {
    font-size: 2em;
    margin: 0;
    color: var(--primary-text-color);
}

.crr-single-review-header .crr-back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
    color: var(--secondary-text-color);
    text-decoration: none;
    margin-bottom: 10px;
}

.crr-single-review-header .crr-back-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* Full display review card on single page */
.crr-review-full-display {
    margin-bottom: 30px;
}

/* Comments section (reusing The Feed styles) */
#crr-single-review-app #feed-comments-section {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
}

#crr-single-review-app #feed-comments-section h2 {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

/* --- All Reviews Page Styles --- */
.crr-all-reviews-page {
    /* Uses container from theme */
}

.crr-all-reviews-header {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.crr-all-reviews-header .crr-back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
    color: var(--secondary-text-color);
    text-decoration: none;
    margin-bottom: 10px;
}

.crr-all-reviews-header .crr-back-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.crr-parent-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.crr-parent-poster {
    width: 80px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.crr-all-reviews-title {
    font-size: 2.2em;
    margin: 0;
    color: var(--primary-text-color);
}

.crr-all-reviews-header .crr-add-review-btn {
    margin-top: 15px;
}

/* New styles for review controls */
.crr-reviews-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
    background-color: var(--surface-color);
    padding: 15px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.crr-reviews-controls .control-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 180px; /* Responsive flexbox sizing */
}

.crr-reviews-controls .control-group label {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--secondary-text-color);
}

.crr-reviews-controls .control-group select {
    background-color: var(--input-bg-color);
    border-color: var(--border-color);
    color: var(--primary-text-color);
    padding: 8px;
    border-radius: var(--border-radius);
}


.crr-all-reviews-list {
    /* Changed from grid to list display */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between list items */
    margin-top: 30px;
}

.crr-all-reviews-list .crr-review-card {
    margin-bottom: 0; /* No bottom margin when in list */
    width: 100%; /* Take full width in list */
}

#crr-load-more-reviews {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 30px;
    background-color: var(--input-bg-color);
    border: 1px solid var(--border-color);
    color: var(--primary-text-color);
    padding: 12px;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

#crr-load-more-reviews:hover:not(:disabled) {
    background-color: var(--hover-bg-color);
}

#crr-load-more-reviews:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}