/**
 * Reviews System Styles
 */

/* Review Form */
.review-form-container {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: var(--bs-dark, #121212);
    border-radius: 0.5rem;
}

.review-form-container h4 {
    color: var(--bs-light, #f8f9fa);
    margin-bottom: 1.5rem;
}

.review-form-container .form-label {
    color: var(--bs-light, #f8f9fa);
}

.review-form-container .form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--bs-light, #f8f9fa);
}

.review-form-container .form-control:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--bs-primary, #29F0A0);
    color: var(--bs-light, #f8f9fa);
    box-shadow: 0 0 0 0.25rem rgba(41, 240, 160, 0.25);
}

.review-form-container .form-text {
    color: rgba(255, 255, 255, 0.6);
}

.review-form-container .btn-primary {
    background-color: var(--bs-primary, #29F0A0);
    border-color: var(--bs-primary, #29F0A0);
    color: var(--bs-dark, #121212);
}

.review-form-container .btn-primary:hover {
    background-color: rgba(41, 240, 160, 0.8);
    border-color: rgba(41, 240, 160, 0.8);
    color: var(--bs-dark, #121212);
}

.review-form-container .btn-outline-success,
.review-form-container .btn-outline-danger {
    color: var(--bs-light, #f8f9fa);
}

/* Reviews Container */
.reviews-container {
    margin-top: 3rem;
    padding: 1.5rem;
    background-color: var(--bs-dark, #121212);
    border-radius: 0.5rem;
}

.reviews-container h3 {
    color: var(--bs-light, #f8f9fa);
    margin-bottom: 1.5rem;
}

/* Review Card */
.reviews-list .review {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    transition: background-color 0.3s ease;
}

.reviews-list .review .card-body {
    padding: 1.5rem;
}

.reviews-list .review h4,
.reviews-list .review h5 {
    color: var(--bs-light, #f8f9fa);
}

.reviews-list .review .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

.reviews-list .review .review-content p {
    color: var(--bs-light, #f8f9fa);
}

/* Pros and Cons */
.reviews-list .review .pros-list,
.reviews-list .review .cons-list {
    padding-left: 0;
    list-style: none;
}

.reviews-list .review .pros-list li,
.reviews-list .review .cons-list li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
    color: var(--bs-light, #f8f9fa);
}

.reviews-list .review .pros-list li:before {
    content: '✓';
    color: var(--bs-success, #198754);
    position: absolute;
    left: 0;
}

.reviews-list .review .cons-list li:before {
    content: '✗';
    color: var(--bs-danger, #dc3545);
    position: absolute;
    left: 0;
}

/* Review Voting */
.reviews-list .review .review-votes .btn {
    margin-right: 0.5rem;
}

.reviews-list .review .btn-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

.reviews-list .review .btn-link:hover {
    color: var(--bs-light, #f8f9fa);
}

/* Alert Styles */
.reviews-container .alert-info,
.review-form-container .alert-info {
    background-color: rgba(13, 202, 240, 0.1);
    border-color: rgba(13, 202, 240, 0.2);
    color: var(--bs-light, #f8f9fa);
}

.review-form-container .alert-success {
    background-color: rgba(25, 135, 84, 0.1);
    border-color: rgba(25, 135, 84, 0.2);
    color: var(--bs-light, #f8f9fa);
}

.review-form-container .alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.2);
    color: var(--bs-light, #f8f9fa);
}

.review-form-container .alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.2);
    color: var(--bs-light, #f8f9fa);
}

/* Highlight effect for user's review */
.reviews-list .review.highlight-review {
    background-color: rgba(41, 240, 160, 0.1);
    box-shadow: 0 0 15px rgba(41, 240, 160, 0.3);
    animation: pulse-highlight 1.5s ease-in-out;
}

@keyframes pulse-highlight {
    0% {
        background-color: rgba(41, 240, 160, 0.1);
        box-shadow: 0 0 15px rgba(41, 240, 160, 0.3);
    }
    50% {
        background-color: rgba(41, 240, 160, 0.2);
        box-shadow: 0 0 20px rgba(41, 240, 160, 0.5);
    }
    100% {
        background-color: rgba(41, 240, 160, 0.1);
        box-shadow: 0 0 15px rgba(41, 240, 160, 0.3);
    }
}