/**
* Product Reviews System CSS
* Contains all styles for the review system components
* 
* Components:
* - Product Reviews Section (product-reviews-section.php)
* - Write Review Page (write-review.php)
* - All Reviews Page (product-reviews.php)
* 
* @author SalesVu Team
* @version 1.0
*/

/* ==========================================================================
PRODUCT REVIEWS SECTION STYLES
========================================================================== */

/* Product Reviews Section Styles */
.product-reviews-section {margin: 0px 0; padding: 20px; }
.reviews-container {display: grid; grid-template-columns: 26% 72%; gap: 20px; max-width: 1800px; margin: 0 auto; padding:0px; border-top: 1px solid #eee;}
.reviews-left, .reviews-right {background: #fff; padding: 25px 0px; border-radius: 8px;}
.reviews-left{width:280px;}
.reviews-left h2, .reviews-right h2 {margin: 0 0 2px 0; font-size: 22px; font-weight: 700;}
.reviews-right h2 {margin-bottom:15px;}

/* Average Rating Styles */
.average-rating {margin-bottom: 25px;}
.rating-summary {display: flex; align-items: center; gap: 10px; margin-bottom: 5px;}
.rating-summary .star-rating .fa{color: #ff6200;}
.rating-summary .star-rating .fa-regular.fa-star{color: #ff6200;}
.star-rating {display: flex; gap: 2px; font-size: 18px;}
.rating-summary .star-rating .fa-regular.fa-star{color:#ff6200; font-size:14px;}
.rating-summary .star-rating .fa-solid.fa-star{color:#ff6200; font-size:14px;}
.rating-summary .star-rating .fa-regular.fa-star{color:#ff6200; font-size:14px;}
.rating-summary .star-rating .fa-solid.fa-star-half-stroke{color:#ff6200; font-size:14px;}


.star-rating.large i {font-size: 24px; color: #ffc107;}
.star-rating.small i {font-size: 14px; color: #ffc107;}
.rating-text {font-size: 15px; color: #333;}
.rating-count {font-size: 14px; color: #000;}
.rating-percentage {font-size: 14px; color: #666; opacity: 1; width:35px;}

/* Rating Distribution Bars */
.rating-distribution {margin-bottom: 25px;}
.rating-bar-row {display: flex; align-items: center; gap: 10px; margin-bottom: 14px;}
.star-label {width: 40px; font-size: 14px; color: #666;}
.rating-bar {flex: 1; height: 20px; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px #888c8c;}
.rating-bar-fill {height: 100%; background: #ff6200; transition: width 0.3s ease;}
.rating-count {width: 100%; font-size: 14px; color: #666; margin-bottom: 20px;}

/* Separator */
.reviews-separator {height: 1px; background: #eee; margin: 25px 0;}

/* Write Review Section */
.write-review-section h3 {margin: 0 0 10px 0; font-size: 18px; font-weight: 600; color: #000;}
.write-review-text {margin: 0 0 20px 0; font-size: 14px; color: #000;}
.write-review-btn {border: solid 1px #888c8c; border-radius: 30px; font-size: 13px; color: #000; text-decoration: none; padding: 0px 12px; line-height: 30px; display: table; background: #fff; width:100%; text-align:center;}
.write-review-btn:hover{border-color: #1c89e3; background: #edf8ff;}

/* Top Reviews Styles */
.top-reviews {margin-bottom: 20px;}
.review-item {border-bottom: 0px solid #f0f0f0; padding: 20px 0;}
.review-item:last-child {border-bottom: none;}
.review-header {display: flex; align-items: center; margin-bottom: 10px;}
.reviewer-avatar {width: 34px; height: 34px; border-radius: 50%; background: #f8f9fa; border: 1px solid #dee2e6; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0;}
.reviewer-avatar i {color: #6c757d; font-size: 18px;}
.reviewer-info {flex: 1;}
.reviewer-name {color: #000; font-size: 14px;}
.review-title-section {display: flex; align-items: center; gap: 12px; margin-bottom: 4px;}
.review-title-section .star-rating.star-small .fa{color:#ff6200; font-size:14px;}
.review-title-section .star-rating.star-small .fa-regular.fa-star{color:#ff6200; font-size:14px;}
.review-title-section .star-rating.star-small .fa-solid.fa-star{color:#ff6200; font-size:14px;}
.review-title-section .star-rating.star-small .fa-regular.fa-star{color:#ff6200; font-size:14px;}
.review-title-section .star-rating.star-small .fa-solid.fa-star-half-stroke{color:#ff6200; font-size:14px;}


.review-title {font-weight: 600; color: #000; font-size: 16px; flex: 1;}
.review-rating-section {margin-bottom: 8px;}
.review-rating {display: flex; align-items: center; gap: 5px; flex-shrink: 0;}
.review-date {font-size: 14px; color: #565959; margin-bottom: 1px; line-height: 20px;}
.verified-purchase-badge {display: inline-flex; align-items: center; gap: 4px; color: #28a745; font-size: 12px; font-weight: 500; margin-top: 2px; margin-bottom: 4px;}
.verified-purchase-badge i {color: #28a745; font-size: 12px;}
.review-text {font-size: 14px; color: #565959; margin-bottom: 1px; line-height: 20px;}
.review-images {display: flex; gap: 8px; margin-bottom: 10px;}
.review-image {width: 60px; height: 60px; object-fit: cover; border-radius: 4px; cursor: pointer;}
.review-helpful {display: flex; align-items: center; gap: 15px; font-size: 12px; color: #565959;     margin-top: 5px;}
.helpful-btn {border: solid 1px #888c8c;border-radius: 30px;font-size: 13px;color: #000;text-decoration: none;padding: 0px 12px;line-height: 30px;display: table; background:#fff;}
.helpful-btn:hover{border-color: #1c89e3; background: #edf8ff;}
.helpful-btn:disabled {opacity: 0.6; cursor: not-allowed;}
.helpful-btn i {margin-right: 4px;}
.action-separator {color: #ccc; margin: 0px;}
.report-btn {background: none; border: none; color: #595959; cursor: pointer; font-size: 14px; padding: 4px 8px; border-radius: 4px; transition: all 0.2s ease; text-decoration: none;}

/* Report Modal Styles */
.report-modal {display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);}
.report-modal-content {background-color: #fff; margin: 5% auto; padding: 0; border-radius: 8px; width: 90%; max-width: 500px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);}
.report-modal-header {padding: 20px 20px 0 20px; border-bottom: 1px solid #eee; position: relative; display: flex; justify-content: space-between; align-items: flex-start;}
.report-modal-title {font-size: 18px; font-weight: 600; color: #333; margin: 0 0 15px 0; flex: 1;}
.report-modal-close {background: none; border: none; font-size: 20px; color: #666; cursor: pointer; padding: 5px; margin: -5px -5px 0 0; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease;}
.report-modal-close:hover {background-color: #f5f5f5; color: #333;}
.report-modal-close:focus {outline: 2px solid #007bff; outline-offset: 2px;}
.report-modal-body {padding: 20px; padding-bottom:0px;}
.report-question {font-size: 16px; color: #000; margin-bottom: 15px; font-weight: 600;}
.report-options {margin-bottom: 20px;}
.report-option {display: flex; align-items: start; margin-bottom: 10px; padding: 10px; border-radius: 4px; transition: background-color 0.2s ease;     background: #f8f9fa; gap:10px}
.report-option:hover {background-color: #f8f9fa;}
.report-option input[type="checkbox"] {margin-right: 0px; margin-top: 3px; width: 15px; height: 15px;}
.report-option-label {flex: 1;}
.report-option-text {font-weight: 500; color: #333; margin-bottom: 2px;}
.report-option-subtext {font-size: 12px; color: #666;}
.report-guidelines {font-size: 12px; color: #666; margin-bottom: 20px; padding: 5px 12px; border-top: solid 1px #e1e1e1; border-bottom: solid 1px #e1e1e1;}
.report-modal-footer {padding: 0 20px 20px 20px; display: flex; gap: 10px; justify-content: flex-end;}
.report-btn-cancel, .report-btn-submit {padding: 8px 25px; border-radius: 40px; font-size: 14px; cursor: pointer; transition: all 0.2s ease;}
.report-btn-cancel {background: #fff; border: solid 1px #888c8c; color: #000;}
.report-btn-cancel:hover{border-color: #1c89e3; background: #edf8ff;}
.report-btn-submit {background: #000; border: 1px solid #000; color: #fff;}
.report-btn-submit:hover{background:#4a4a4a !important; border-color:#4a4a4a}
.report-btn-submit:disabled {background: #6c757d; border-color: #6c757d; cursor: not-allowed;}
.report-success {text-align: center; padding: 20px;}
.report-success-title {font-size: 18px; font-weight: 600; color: #28a745; margin-bottom: 10px;}
.report-success-message {font-size: 14px; color: #666;}
.see-more-reviews {text-align: left; margin-top: 20px; border-top: 1px solid #f0f0f0; padding: 10px 0px;}
.see-more-link {color: #0066C0; text-decoration: none; font-weight: 600; font-size: 14px;}
.see-more-link .fa-solid.fa-chevron-right{font-size:10px;}

/* ==========================================================================
WRITE REVIEW PAGE STYLES
========================================================================== */

/* Write Review Page Styles */
.write-review-page {min-height: 100vh; background: #fff; padding: 40px 0;}
.write-review-page .container {max-width: 1100px; margin: 0 auto; padding: 0 20px;}
.write-review-page .page-header {margin-bottom: 15px; display: grid; justify-content: space-between; align-items: center;}
.write-review-page .back-link {border: solid 0px #888c8c; border-radius: 0px; font-size: 13px; color: #000; text-decoration: none; padding: 12px 0px; line-height: 30px; display: table; background: #fff; text-align: center; width: 120px;}
.write-review-page .page-header h1 {font-weight: 400; font-size: 28px; line-height: 36px; color: #333; margin-bottom: 16px;}
.write-review-page .product-info-section {background: white; padding: 20px; border-radius: 8px; margin-bottom: 30px; display: flex; gap: 20px; align-items: center; border: 1px solid #e3e3e3;}
.write-review-page .product-image {width: 80px; height: 80px; flex-shrink: 0; margin: unset;}
.write-review-page .product-image img {width: 100%; height: 100%; object-fit: cover; border-radius: 4px;}
.write-review-page .no-image {width: 100%; height: 100%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 12px; text-align: center; color: #666;}
.write-review-page .product-details h2 {margin: 0 0 5px 0; font-size: 20px; color: #333; border:0px; font-weight: 400;}
.write-review-page .product-price {font-size: 18px; font-weight: 600; color: #000; border: 0px; margin: 0px; padding: 0px;}
.write-review-page .submission-message {padding: 15px; border-radius: 6px; margin-bottom: 20px; font-weight: 500;}
.write-review-page .submission-message.success {background: #d4edda; color: #155724; border: 1px solid #c3e6cb;}
.write-review-page .submission-message.error {background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;}
.write-review-page .existing-review-warning {background: #fff3cd; color: #856404; padding: 15px; border-radius: 6px; margin-bottom: 20px; border: 1px solid #ffeaa7;}
.write-review-page .review-form {background: white; padding: 20px; border-radius: 8px; margin-bottom: 30px; align-items: center; border: 1px solid #e3e3e3;}
.write-review-page .form-section {margin-bottom: 25px;}
.write-review-page .form-label {display: block; margin-bottom: 8px; font-weight: 600; color: #333;}
.write-review-page .form-label.required::after {content: ' *'; color: #dc3545;}
.write-review-page .rating-input {display: flex; gap: 20px; align-items: center;}
.write-review-page .star-rating-input {display: inline-flex; gap: 5px; margin-bottom: 10px;}
.write-review-page .star-rating-input i {font-size: 32px; color: #ddd; cursor: pointer; transition: color 0.2s ease;}
.write-review-page .star-rating-input i:hover, .write-review-page .star-rating-input i.active {color: #ffc107;}
.write-review-page .rating-text {font-size: 14px; color: #666;}
.write-review-page input[type="text"], .write-review-page textarea {width: 100%; padding: 7px 10px; border: 1px solid #888c8c; border-radius: 4px; font-size: 1rem; transition: border-color 0.3s;}
.write-review-page input[type="text"]:focus, .write-review-page textarea:focus {outline: none; border-color: #007bff; box-shadow: 0 0 0 2px rgba(0,123,255,0.25);}
.write-review-page textarea {resize: vertical; font-family: inherit; padding: 7px 10px; border: 1px solid #888c8c; border-radius: 4px; font-size: 1rem; transition: border-color 0.3s;}
.write-review-page .field-help {font-size: 12px; color: #666; margin-top: 5px;}
.write-review-page .char-count {text-align: right; font-size: 12px; color: #666; margin-top: 5px;}
.write-review-page .submit-btn {background: #000; color: #fff; border: none; padding: 8px; border-radius: 100px; font-weight: 400; cursor: pointer; width: 100%;}
.write-review-page .submit-btn:hover {background: #0056b3;}
.write-review-page .submit-btn:disabled {background: #6c757d; cursor: not-allowed;}

/* ==========================================================================
PRODUCT REVIEWS PAGE STYLES
========================================================================== */

/* Product Reviews Page Styles */
.product-reviews-page {min-height: 100vh; background: #fff; padding: 40px 0;}
.product-reviews-page .container {max-width: 1100px; margin: 0 auto; padding: 0 20px;}
.product-reviews-page .page-header {margin-bottom: 15px; display: grid; justify-content: space-between; align-items: center;}
.product-reviews-page .back-link {border: solid 0px #888c8c; border-radius: 0px; font-size: 13px; color: #000; text-decoration: none; padding: 12px 0px; line-height: 30px; display: table; background: #fff; text-align: center; width: 120px;}

.product-reviews-page .page-header h1 {font-weight: 400; font-size: 28px; line-height: 36px; color: #333; margin-bottom: 16px;}
.product-reviews-page .product-info-section {background: white; padding: 20px; border-radius: 8px; margin-bottom: 30px; display: flex; gap: 20px; align-items: center; border: 1px solid #e3e3e3;}
.product-reviews-page .product-image {width: 80px; height: 80px; flex-shrink: 0; margin:unset;}
.product-reviews-page .product-image img {width: 100%; height: 100%; object-fit: cover; border-radius: 4px;}
.product-reviews-page .no-image {width: 100%; height: 100%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 12px; text-align: center; color: #666;}
.product-reviews-page .product-details h2 {margin: 0 0 5px 0; font-size: 20px; color: #333; border:0px; font-weight: 400;}
.product-reviews-page .product-price {font-size: 18px; font-weight: 600; color: #000; border: 0px; margin: 0px; padding: 0px;}
.product-reviews-page .review-stats-section {background: white; padding: 20px; border-radius: 8px; margin-bottom: 30px; gap: 20px; align-items: center; border: 1px solid #e3e3e3; margin-bottom: 30px; display: grid; grid-template-columns: 20% 54% 20%; gap: 30px; align-items: center; }
.product-reviews-page .stats-left {text-align: center;}
.product-reviews-page .average-rating {margin-bottom: 15px;}
.product-reviews-page .rating-number {font-size: 48px; font-weight: 700; color: #333; margin-bottom: 0px; line-height: 48px;}
.product-reviews-page .rating-stars {margin-bottom: 8px; justify-content: center;}
.product-reviews-page .rating-stars i {font-size: 24px; color: #ffc107;}
.product-reviews-page .rating-text {font-size: 16px; color: #666;}
.product-reviews-page .total-reviews {font-size: 13px; color: #666; background: #f7f7f7; display: table; margin: 0 auto; padding: 2px 8px; border-radius: 5px;}
.product-reviews-page .rating-distribution {width: 100%; margin:0px;}
.product-reviews-page .reviews-controls {background: white; padding: 20px; border-radius: 8px 8px 0px 0px; margin-bottom: 0px; display: flex; gap: 20px; align-items: center; border: 1px solid #e3e3e3;}
.product-reviews-page .sort-controls {display: flex; align-items: center; gap: 10px;}
.product-reviews-page .sort-controls label {font-weight: 600; color: #333;}
.product-reviews-page .sort-controls select {padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;}
.product-reviews-page .filter-controls {display: flex; align-items: center; gap: 10px;}
.product-reviews-page .filter-controls label {font-weight: 600; color: #333;}
.product-reviews-page .filter-controls select {padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;}

/* Owner Reply Styles */
.owner-reply-section {margin-top: 15px; padding: 15px; background: #f7f7f7; border-radius: 10px; margin-bottom: 15px;}
.owner-reply-header {display: flex;align-items: center;margin-bottom: 8px; gap:10px}
.owner-reply-header .ownner-icon{width: 34px; height: 34px; border-radius: 50%; border: 1px solid #dee2e6; text-align: center; display: flex; align-items: center; justify-content: center; background: #fff;}
.owner-reply-header i {color: #000;}
.owner-reply-label {color: #000;font-size: 14px;font-weight: 600;}
.owner-reply-date {font-size: 12px;color: #666;}
.owner-reply-content {color: #333;line-height: 1.4;font-size: 14px;}
.product-reviews-page .write-review-btn {border: solid 1px #888c8c; border-radius: 30px; font-size: 13px; color: #000; text-decoration: none; padding: 0px 12px; line-height: 30px; display: table; background: #fff; width:100%; text-align:center;}
.product-reviews-page .write-review-btn:hover{border-color: #1c89e3; background: #edf8ff;}
.product-reviews-page .reviews-list {background: white; padding: 20px; border-radius: 0px 0px 8px 8px; margin-bottom: 0px; gap: 20px; align-items: center; border: 1px solid #e3e3e3; border-top:0px;}
.product-reviews-page .review-item {padding: 25px; border-bottom: 1px solid #f0f0f0;}
.product-reviews-page .review-item:last-child {border-bottom: none;}
.product-reviews-page .review-header {display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px;}
.product-reviews-page .reviewer-info {display: flex; align-items: center; gap: 10px;}
.product-reviews-page .reviewer-name {font-weight: 600; color: #333; font-size: 16px;}
.product-reviews-page .review-date {font-size: 14px; color: #666;}
.product-reviews-page .verified-purchase-badge {display: inline-flex; align-items: center; gap: 4px; color: #28a745; font-size: 12px; font-weight: 500; margin-top: 2px; margin-bottom: 4px;}
.product-reviews-page .verified-purchase-badge i {color: #28a745; font-size: 12px;}
.product-reviews-page .review-rating i {font-size: 16px; color: #ffc107;}
.product-reviews-page .review-title {font-weight: 600; color: #333; font-size: 16px;}
.product-reviews-page .review-text {color: #666; line-height: 1.6; margin-bottom: 15px; font-size: 15px;}
.product-reviews-page .review-images {display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap;}
.product-reviews-page .review-image {width: 80px; height: 80px; object-fit: cover; border-radius: 4px; cursor: pointer; transition: transform 0.2s ease;}
.product-reviews-page .review-image:hover {transform: scale(1.05);}
.product-reviews-page .review-helpful {display: flex; align-items: center; gap: 20px; font-size: 14px; color: #666;}
.product-reviews-page .no-reviews {text-align: center; padding: 60px 20px; color: #666;}
.product-reviews-page .write-first-review-btn {background: #007bff; color: white; text-decoration: none; padding: 12px 24px; border-radius: 6px; font-weight: 600; margin-top: 20px; display: inline-block;}
.product-reviews-page .write-first-review-btn:hover {background: #0056b3; color: white; text-decoration: none;}
.product-reviews-page .pagination {display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 30px;}
.product-reviews-page .page-link {color: #007bff; text-decoration: none; padding: 8px 16px; border-radius: 4px; transition: background 0.3s ease;}
.product-reviews-page .page-link:hover {background: #f8f9fa; text-decoration: none;}
.product-reviews-page .page-numbers {display: flex; gap: 5px;}
.product-reviews-page .page-number {color: #007bff; text-decoration: none; padding: 8px 12px; border-radius: 4px; transition: background 0.3s ease;}
.product-reviews-page .page-number:hover {background: #f8f9fa; text-decoration: none;}
.product-reviews-page .page-number.active {background: #007bff; color: white;}

/* ==========================================================================
IMAGE MODAL STYLES (Shared across all components)
========================================================================== */

.image-modal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: none;}
.modal-backdrop {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); }
.modal-content {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%;}
.modal-content img {max-width: 100%; max-height: 100%; border-radius: 8px;}
.modal-close {position: absolute; top: -40px; right: 0; background: none; border: none; color: white; font-size: 30px; cursor: pointer;}

/* ==========================================================================
MOBILE RESPONSIVE STYLES
========================================================================== */

/* Mobile Responsive for Product Reviews Section */
@media (max-width: 768px) {
	.reviews-container {grid-template-columns: 1fr; gap: 20px; padding: 0 15px;}
	.reviews-left, .reviews-right {padding: 20px;}
	.reviews-left h2, .reviews-right h2 {font-size: 20px;}
	.rating-summary {flex-direction: column; align-items: flex-start; gap: 5px;}
	.star-rating.large i {font-size: 20px;}
	.rating-text {font-size: 16px;}
	.rating-bar-row {gap: 8px;}
	.review-header {align-items: center; gap: 8px; margin-bottom: 14px;}
	.reviewer-info {flex-direction: column; align-items: flex-start; gap: 5px;}
	.review-images {flex-wrap: wrap;}
	.review-image {width: 50px;height: 50px;}
	.review-title-section{flex-direction: column; align-items: unset; gap: 5px; margin-bottom: 7px;}
	.review-date{margin-bottom:5px;}
	.review-helpful{gap: 7px; }
	.helpful-count{width:60%}
	.action-separator{display: none;}
}

@media (max-width: 480px) {
	.reviews-container {padding: 0px; gap:10px;}
	.reviews-left, .reviews-right {padding: 10px 0px 0px 0px; width:100%;}
	.reviews-left h2, .reviews-right h2 {font-size: 18px; margin-bottom: 10px;}
	.star-rating.large i {font-size: 18px;}
	.write-review-btn {font-size: 14px; padding: 4px 36px; width: auto;}
	.reviews-separator{margin: 10px 0;}
	.reviews-right .no-reviews p{margin:0px;}
}

/* Mobile Responsive for Write Review Page */
@media (max-width: 768px) {
	.write-review-page .container {padding: 0 15px;}
	.write-review-page .page-header h1 {font-size: 24px;}
	.write-review-page .product-info-section {flex-direction: column; text-align: center; gap: 15px;}
	.write-review-page .product-image {width: 100px; height: 100px;}
	.write-review-page .review-form {padding: 20px;}
	.write-review-page .star-rating-input i {font-size: 28px;}
	.write-review-page input[type="text"], .write-review-page textarea {font-size: 16px;}
}

@media (max-width: 480px) {
	.write-review-page .container {padding: 0 10px;}
	.write-review-page .page-header h1 {font-size: 20px;}
	.write-review-page .review-form {padding: 15px;}
	.write-review-page .star-rating-input i {font-size: 24px;}
}

/* Mobile Responsive for Product Reviews Page */
@media (max-width: 768px) {
	.product-reviews-page .container {padding: 0 15px;}
	.product-reviews-page .page-header h1 {font-size: 24px;}
	.product-reviews-page .product-info-section {flex-direction: column; text-align: center; gap: 15px;}
	.product-reviews-page .product-image {width: 100px; height: 100px;}
	.product-reviews-page .review-stats-section {grid-template-columns: 1fr; gap: 20px; text-align: center;}
	.product-reviews-page .rating-number {font-size: 36px;}
	.product-reviews-page .rating-stars i {font-size: 20px;}
	.product-reviews-page .reviews-controls {flex-direction: column; gap: 15px; align-items: stretch;}
	.product-reviews-page .write-review-btn {text-align: center;}
	.product-reviews-page .review-header {align-items: center; gap: 10px;}
	.product-reviews-page .reviewer-info {align-items: left; gap: 5px;}
	.product-reviews-page .review-images {justify-content: center;}
	.product-reviews-page .review-image {width: 60px; height: 60px;}
	.product-reviews-page .pagination {flex-wrap: wrap;}
}

@media (max-width: 480px) {
	.product-reviews-section{padding:10px; padding-bottom:0px;}
	.product-reviews-page .container {padding: 0 10px;}
	.product-reviews-page .page-header h1 {font-size: 20px;}
	.product-reviews-page .review-item {padding: 20px;}
	.product-reviews-page .reviews-list{padding:0px;}
	.product-reviews-page .rating-number {font-size: 32px;}
	.product-reviews-page .rating-stars i {font-size: 18px;}
	.product-reviews-page .review-image {width: 50px;height: 50px;}
	.product-reviews-page .review-helpful{gap: 10px; font-size: 11px;}\

}

/* Error Modal Styles */
.error-modal {display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); animation: fadeIn 0.3s ease;}
.error-modal-content {background-color: #fff; margin: 15% auto; padding: 0; border-radius: 8px; width: 90%; max-width: 400px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); animation: slideIn 0.3s ease; }
.error-modal-header {padding: 20px 20px 0 20px; border-bottom: 1px solid #eee; position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.error-modal-title {font-size: 18px; font-weight: 600; color: #d32f2f; margin: 0 0 15px 0; flex: 1;}
.error-modal-close {background: none; border: none; font-size: 20px; color: #666; cursor: pointer; padding: 5px; margin: -5px -5px 0 0; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease;}
.error-modal-close:hover {background-color: #f5f5f5; color: #333;}
.error-modal-close:focus {outline: 2px solid #007bff; outline-offset: 2px;}
.error-modal-body {padding: 20px; text-align: center;}
.error-icon {font-size: 48px; color: #d32f2f; margin-bottom: 15px;}
.error-message {font-size: 16px; color: #333; line-height: 1.5; margin-bottom: 10px;}
.error-modal-footer {padding: 0 20px 20px 20px; display: flex; justify-content: center;}
.error-btn-ok {background-color: #d32f2f; color: white; border: none; padding: 10px 30px; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background-color 0.2s ease; min-width: 80px;}
.error-btn-ok:hover {background-color: #b71c1c;}
.error-btn-ok:focus {outline: 2px solid #007bff; outline-offset: 2px;}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes slideIn {
	from {opacity: 0; transform: translateY(-50px);}
	to {opacity: 1; transform: translateY(0);}
}

/* ==========================================================================
REVIEW SUMMARY STYLES
========================================================================== */

/* Review Summary Section Styles */
.review-summary-section {margin-bottom: 30px; padding: 15px; border-radius: 8px; border: 1px solid #dee2e6; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); background:#fcfcfc}
.review-summary-section h2 {margin: 0 0 10px 0; font-size: 22px; font-weight: 700; color: #333; display: flex; align-items: center;}
.review-summary-section h2:before {content: "💬"; margin-right: 8px; font-size: 20px;}
.summary-content {position: relative;}
.summary-text {font-size: 14px; color: #343a40; margin: 0 0 12px 0; padding: 0px 15px 10px 35px; border-radius: 6px; line-height: 20px;}
.ai-disclaimer {margin: 0; color: #6c757d; font-size: 12px; display: flex; align-items: center; justify-content: flex-end;}
.ai-disclaimer i {margin-right: 5px; color: #17a2b8;}
.summary-reviews-separator {height: 1px; background: linear-gradient(to right, transparent, #dee2e6, transparent); margin: 25px 0;}

/* Enhanced Summary Display Styles */
.sentiment-indicator {margin: 15px 0; padding: 10px 15px; border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; font-size: 14px;}
.sentiment-label {font-weight: 600; color: #495057; margin-right: 8px;}
.sentiment-value {font-weight: 700; padding: 4px 8px; border-radius: 4px; font-size: 14px;}
.sentiment-positive {background: #d4edda; color: #155724; border: 1px solid #c3e6cb;}
.sentiment-mixed {background: #fff3cd; color: #856404; border: 1px solid #ffeaa7;}
.sentiment-negative {background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;}
.pros-cons-section {margin: 20px 0;}
.pros-section, .cons-section {margin: 15px 0; padding: 15px; border-radius: 8px;}
.pros-section {padding:0px;}
.cons-section {padding:0px;}
.pros-title, .cons-title {margin: 0 0 10px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;}
.pros-title {color: #28a745;}
.cons-title {color: #dc3545;}
.pros-title i, .cons-title i {margin-right: 8px; font-size: 18px;}
.pros-list, .cons-list {margin: 0; padding-left: 30px; list-style: none;}
.pros-list li, .cons-list li {position: relative; margin: 3px; padding-left: 20px; line-height: 1.5; color: #495057; display: inline-block; font-size: 12px; background: rgba(255, 255, 255, 0.7); padding: 5px 10px 5px 25px; border-radius: 5px;}
.pros-list li::before {content: "✓"; position: absolute; left: 7px; color: #28a745; font-weight: bold; font-size: 16px; top:2px;}
.cons-list li::before {content: "⚠"; position: absolute; left: 7px; color: #dc3545; font-weight: bold; font-size: 16px; top:2px;}
.verified-purchase-mention {margin: 15px 0; padding: 10px 15px; background: #e7f3ff; border-radius: 8px; border-left: 4px solid #007bff; color: #004085; font-size: 14px; display: flex; align-items: center;}
.verified-purchase-mention i {margin-right: 8px; color: #007bff; font-size: 16px;}

/* Responsive adjustments for review summary */
@media (max-width: 768px) {
    .review-summary-section {padding: 15px; margin-bottom: 20px;}
    .review-summary-section h2 {font-size: 16px;}
    .summary-text {font-size: 13px; padding: 0px 0px 12px 0px;}
    .ai-disclaimer {font-size: 11px;}
	.sentiment-indicator {padding: 8px 12px; margin: 12px 0;}
	.sentiment-label {font-size: 14px;}
	.sentiment-value {font-size: 13px; padding: 3px 6px;}
	.pros-section, .cons-section {padding: 12px 0px; margin: 12px 0; padding-left:0px;}
	.pros-title, .cons-title {font-size: 15px;}
	.pros-list li, .cons-list li {font-size: 14px; margin: 6px 0;}
	.verified-purchase-mention {padding: 8px 12px; font-size: 13px;}
}

/* ==========================================================================
RECAPTCHA STYLES
========================================================================== */

/* Hide reCAPTCHA badge on write review page */
.grecaptcha-badge {
    visibility: hidden;
}