/* ============================================================
   CUSTOM REVIEWS SECTION — style.css (Judge.me style)
   Plugin: Custom Reviews Section for WooCommerce
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Syne:wght@400;500;600;700;800&display=swap');

/* ============================================================
   1. HIDE WooCommerce DEFAULT TABS
   ============================================================ */
.woocommerce-tabs ul.tabs.wc-tabs {
    display: none !important;
}

.woocommerce-tabs .woocommerce-Tabs-panel>h2 {
    display: none !important;
}

.woocommerce-tabs #tab-description,
.woocommerce-tabs #tab-additional_information {
    display: none !important;
}

.woocommerce-tabs #tab-reviews {
    display: block !important;
}

.woocommerce-tabs .panel {
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* ============================================================
   2. REVIEWS CONTAINER
   ============================================================ */
.crs-reviews-container {
    max-width: 860px;
    margin: 32px auto 0;
    font-family: 'Syne', sans-serif;
    color: #333;
    font-size: 14px;
}

/* ============================================================
   3. HEADER ROW  (title + overall stars + write-review btn)
   ============================================================ */
.crs-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}

.crs-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.crs-main-title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #111;
    margin: 0 0 6px;
    padding: 0;
    border: none !important;
}

.crs-header-stars-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.crs-header-based-on {
    font-size: 13px;
    color: #444;
    margin: 0;
}

/* Write a Review button — teal outlined, Syne font */
.crs-btn-write-review {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 22px;
    border: 1px solid #1e7744;
    border-radius: 10rem;
    background: #fff;
    color: #1e7744 !important;
    font-size: 1rem;
    font-weight: 400;
    font-family: 'Syne', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
}

.crs-btn-write-review:hover {
    background: #1e7744;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(7, 162, 156, 0.3);
}

/* Cancel review — teal filled, Syne font */
.crs-btn-cancel-review {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 22px;
    border: 1px solid #1e7744;
    border-radius: 10rem;
    background: #1e7744;
    color: #fff !important;
    font-size: 1rem;
    font-weight: 400;
    font-family: 'Syne', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
}

.crs-btn-cancel-review:hover {
    background: #069a94;
    box-shadow: 0 4px 14px rgba(7, 162, 156, 0.3);
}

/* ============================================================
   4. RATING DISTRIBUTION BARS
   ============================================================ */
.crs-dist-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.crs-dist-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

/* Star icons in dist row */
.crs-dist-stars {
    display: flex;
    gap: 1px;
    flex-shrink: 0;
}

.crs-dist-stars span {
    font-size: 1rem;
    line-height: 1;
}

.crs-dist-stars span.filled {
    color: #f5a623;
}

.crs-dist-stars span.empty {
    color: #ccc;
}

/* Progress bar */
.crs-dist-bar-track {
    flex: 1;
    height: 8px;
    background: #e8e8e8;
    border-radius: 99px;
    overflow: hidden;
    min-width: 60px;
}

.crs-dist-bar-fill {
    height: 100%;
    background: #1e7744;
    border-radius: 99px;
    transition: width 0.5s ease;
}

.crs-dist-percent {
    font-size: 13px;
    color: #555;
    width: 32px;
    text-align: right;
    flex-shrink: 0;
}

.crs-dist-count {
    font-size: 13px;
    color: #555;
    width: 28px;
    flex-shrink: 0;
}

/* ============================================================
   5. SORT DROPDOWN
   ============================================================ */
.crs-sort-row {
    display: flex;
    align-items: center;
    margin: 16px 0 20px;
}

.crs-sort-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 7px 32px 7px 12px;
    border: 1.5px solid #ccc;
    border-radius: 3px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 8px;
    font-family: 'syne', sans-serif;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

.crs-sort-select:focus {
    border-color: #3d7a35;
}

/* ============================================================
   6. STAR DISPLAY  (read-only, CSS gradient)
   ============================================================ */
.crs-stars-display {
    display: inline-flex;
    gap: 1px;
    line-height: 1;
}

.crs-stars-display span {
    font-size: 1rem;
    line-height: 1;
}

.crs-stars-display span.filled {
    color: #f5a623;
}

.crs-stars-display span.half {
    color: #f5a623;
    opacity: 0.55;
}

.crs-stars-display span.empty {
    color: #d0d0d0;
}

/* Header summary stars */
.crs-stars-display.sm span {
    font-size: 1rem;
}



/* ============================================================
   7. REVIEW LIST
   ============================================================ */
.crs-commentlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.crs-noreviews {
    font-size: 13px;
    color: #888;
    padding: 20px 0;
    border-top: 1px solid #e8e8e8;
    margin: 0;
}

/* ============================================================
   8. INDIVIDUAL REVIEW CARD
   ============================================================ */
.crs-review-item {
    border-top: 1px solid #e8e8e8;
    padding: 22px 0;
    margin: 0;
    list-style: none;
}

/* Top row: stars + date */
.crs-review-top-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.crs-review-date {
    font-size: 13px;
    color: #555;
    font-weight: 400;
}

/* Author row: avatar circle + verified + name */
.crs-review-author-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

/* Avatar circle with initial letter */
.crs-avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #d0d0d0;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    flex-shrink: 0;
    position: relative;
    text-transform: uppercase;
}

/* Green check badge on avatar */
.crs-avatar-check {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: #3d7a35;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #fff;
}

.crs-avatar-check svg {
    width: 8px;
    height: 8px;
}

/* Verified badge pill */
.crs-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #3d7a35;
    color: #fff !important;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.crs-verified-badge svg {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
}

/* Author name */
.crs-author-name {
    font-size: 1rem;
    font-weight: 500;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Review title */
.crs-review-title {
    font-size: 1rem;
    font-weight: 500;
    color: #111;
    margin: 0 0 6px;
    padding: 0;
    border: none;
}

/* Review body */
.crs-review-text {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
}

.crs-review-text p {
    margin: 0;
}

/* Uploaded photo thumbnail */
.crs-review-uploaded-image {
    margin-top: 12px;
}

.crs-review-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    display: block;
    transition: opacity 0.2s;
}

.crs-review-img:hover {
    opacity: 0.85;
}

/* ============================================================
   9. REVIEW FORM WRAPPER
   ============================================================ */
.crs-review-form-wrapper {
    border-top: 1px solid #e8e8e8;
    padding-top: 28px;
    margin-top: 4px;
}

.crs-review-form-inner {
    max-width: 100%;
}

/* Form group */
.crs-form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
    width: 100%;
}

.crs-form-group>label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
}

/* Display name label with "displayed publicly like John Smith" note */
.crs-label-with-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.crs-label-hint {
    font-weight: 400;
    color: #555;
    font-size: 13px;
}

.crs-label-hint a,
.crs-label-hint span.name-example {
    color: #3d7a35;
    text-decoration: none;
    font-weight: 400;
}

/* Text / email inputs */
.crs-form-group input[type="text"],
.crs-form-group input[type="email"] {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #d0d0d0;
    border-radius: 3px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #111;
    background: #fff;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.crs-form-group input[type="text"]:focus,
.crs-form-group input[type="email"]:focus {
    border-color: #3d7a35;
    box-shadow: 0 0 0 2px rgba(61, 122, 53, 0.12);
}

.crs-form-group input[type="text"]::placeholder,
.crs-form-group input[type="email"]::placeholder {
    color: #aaa;
}

/* Textarea */
.crs-form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #d0d0d0;
    border-radius: 3px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #111;
    background: #fff;
    outline: none;
    min-height: 110px;
    resize: vertical;
    line-height: 1.6;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.crs-form-group textarea:focus {
    border-color: #3d7a35;
    box-shadow: 0 0 0 2px rgba(61, 122, 53, 0.12);
}

.crs-form-group textarea::placeholder {
    color: #aaa;
}

/* ============================================================
   10. INTERACTIVE STAR RATING (in form)
   ============================================================ */
.crs-interactive-stars {
    display: flex;
    gap: 4px;
    cursor: pointer;
}

/* Hide WooCommerce native stars */
.stars {
    display: none !important;
}

.crs-star-label {
    font-size: 1rem;
    color: #d0d0d0;
    cursor: pointer;
    transition: color 0.12s ease, transform 0.1s ease;
    margin: 0 !important;
    line-height: 1;
    display: inline-block;
    user-select: none;
}

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

.crs-star-label.active {
    color: #f5a623;
}

/* ============================================================
   11. PHOTO UPLOAD BOX
   ============================================================ */
.crs-upload-box {
    width: 80px;
    height: 80px;
    border: 2px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #f9f9f9;
    border-radius: 6px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.crs-upload-box:hover {
    border-color: #3d7a35;
    background: #f0f7ef;
}

/* ============================================================
   12. IMAGE PREVIEW (in form)
   ============================================================ */
.crs-image-preview {
    position: relative;
    display: inline-block;
    margin-top: 10px;
}

#crs-preview-img {
    max-width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #ddd;
    display: block;
}

#crs-remove-img {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #fff;
    border: 1.5px solid #ddd;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    font-size: 11px;
    font-weight: 700;
    color: #555;
    line-height: 1;
    transition: background 0.2s, color 0.2s;
}

#crs-remove-img:hover {
    background: #e53935;
    color: #fff;
    border-color: #e53935;
}

/* ============================================================
   13. FORM DISCLAIMER
   ============================================================ */
.crs-form-disclaimer {
    font-size: 12px;
    color: #888;
    line-height: 1.7;
    margin: 0 0 20px;
}

.crs-form-disclaimer a {
    color: #1e7744;
    text-decoration: none;
}

.crs-form-disclaimer a:hover {
    text-decoration: underline;
}

/* ============================================================
   14. SUBMIT BUTTON  (teal, Syne font)
   ============================================================ */
.crs-btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 32px;
    background: #1e7744;
    color: #fff !important;
    border: 2px solid #1e7744;
    border-radius: 4px;
    font-family: 'Syne', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    box-shadow: 0 4px 14px rgba(7, 162, 156, 0.3);
}

.crs-btn-submit:hover {
    background: #069a94;
    border-color: #069a94;
    box-shadow: 0 6px 20px rgba(7, 162, 156, 0.4);
    transform: translateY(-1px);
}

.crs-btn-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(7, 162, 156, 0.25);
}

/* ============================================================
   15. PAGINATION
   ============================================================ */
.woocommerce-pagination {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid #e8e8e8;
}

/* ============================================================
   16. RESPONSIVE — TABLET (max-width: 640px)
   ============================================================ */
@media (max-width: 640px) {

    .crs-reviews-container {
        margin-top: 24px;
    }

    .crs-header-row {
        flex-direction: column;
        gap: 14px;
    }

    .crs-btn-write-review,
    .crs-btn-cancel-review {
        width: 100%;
        text-align: center;
    }

    .crs-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .crs-form-actions .crs-btn-submit {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .crs-review-form-inner {
        max-width: 100%;
        padding: 0;
    }

    .crs-form-group input[type="text"],
    .crs-form-group input[type="email"],
    .crs-form-group textarea {
        font-size: 15px;
    }

    .crs-review-item {
        padding: 18px 0;
    }
}