:root {
--primary-review: #53b966;
--primary-light-review: #e8f7eb;
--primary-mid-review: #2d9e42;
--secondary-review: #004238;
--secondary-light-review: #e6efed;
--secondary-mid-review: #005a4d;
--text-primary-review: #0e1c1a;
--text-secondary-review: #4a6560;
--text-muted-review: #8aa39e;
--border-review: #dce8e5;
--border-strong-review: #b5cfc9;
--surface: #ffffff;
--surface-alt: #f4f9f7;
--star: #f5a623;
--star-empty: #d9e8e4;
--radius-sm-review: 6px;
--radius-md-review: 10px;
--radius-lg-review: 16px;
--radius-xl-review: 24px;
--shadow-sm-review: 0 1px 3px rgba(0,66,56,.06), 0 1px 2px rgba(0,66,56,.04);
--shadow-md-review: 0 4px 12px rgba(0,66,56,.08), 0 2px 4px rgba(0,66,56,.05);
}

.wrap-review {
margin: 30px auto;
display: flex;
flex-direction: column;
gap: 16px;
}
/* ── Summary card ── */
.summary-card-rv {
background: var(--secondary-review);
border-radius: var(--radius-lg-review);
padding: 28px;
color: #fff;
display: grid;
grid-template-columns: auto 1fr;
gap: 24px;
align-items: center;
position: relative;
overflow: hidden;
}
.summary-card-rv::before {
content: '';
position: absolute;
top: -40px; right: -40px;
width: 180px; height: 180px;
border-radius: 50%;
background: rgba(83,185,102,.12);
}
.summary-card-rv::after {
content: '';
position: absolute;
bottom: -30px; right: 60px;
width: 100px; height: 100px;
border-radius: 50%;
background: rgba(83,185,102,.07);
}
.big-score {
font-family: 'Lexend', sans-serif;
font-size: 64px;
font-weight: 600;
line-height: 1;
color: var(--primary-review);
letter-spacing: -2px;
}
.score-label {
font-size: 13px;
color: rgba(255,255,255,.5);
margin-top: 4px;
letter-spacing: .5px;
text-transform: uppercase;
}
.stars-row {
display: flex;
gap: 3px;
margin: 8px 0 6px;
}
.stars-row i {
font-size: 18px;
}
.summary-right { position: relative; z-index: 1; }
.project-name-rv {
font-family: 'Lexend', sans-serif;
font-size: 17px;
font-weight: 600;
color: #fff;
margin-bottom: 12px;
}
.bar-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 5px;
}
.bar-lbl {
font-size: 12px;
color: rgba(255,255,255,.45);
width: 8px;
text-align: center;
}
.bar-track {
flex: 1;
height: 4px;
background: rgba(255,255,255,.12);
border-radius: 2px;
overflow: hidden;
}
.bar-fill {
height: 100%;
background: var(--primary-review);
border-radius: 2px;
transition: width .6s ease;
}
.bar-count {
font-size: 12px;
color: rgba(255,255,255,.35);
width: 20px;
text-align: right;
}
.tag-summary-rv {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 14px;
}
.tag-chip-rv {
background: rgba(83,185,102,.18);
color: #7ddba0;
font-size: 12px;
padding: 3px 10px;
border-radius: 20px;
white-space: nowrap;
}
/* ── Write review card ── */
.write-card-rv {
background: var(--surface);
border-radius: var(--radius-lg-review);
padding: 24px;
border: 1px solid var(--border-review);
box-shadow: var(--shadow-sm-review);
}
.section-title-rv {
font-family: 'Lexend', sans-serif;
font-size: 16px;
font-weight: 600;
color: var(--secondary-review);
margin-bottom: 4px;
}
.section-sub-rv {
font-size: 13px;
color: var(--text-muted-review);
margin-bottom: 18px;
}
.field-label-rv {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary-review);
margin-bottom: 7px;
display: block;
}
.field-label-rv span {
font-weight: 400;
color: var(--text-muted-review);
}
.star-input {
display: flex;
gap: 4px;
align-items: center;
margin-bottom: 16px;
}
.star-input button {
background: none;
border: none;
cursor: pointer;
padding: 2px;
font-size: 26px;
color: var(--star-empty);
transition: color .12s, transform .1s;
line-height: 1;
}
.star-input button.on { color: var(--star); }
.star-input button:hover { transform: scale(1.15); }
.star-verdict {
font-size: 13px;
color: var(--primary-mid-review);
margin-left: 6px;
font-weight: 500;
}
.tags-wrap-rv {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.tag-toggle-rv {
background: var(--surface-alt);
border: 1px solid var(--border-review);
border-radius: 20px;
padding: 5px 14px;
font-size: 13px;
cursor: pointer;
color: var(--text-secondary-review);
font-family: 'Be Vietnam Pro', sans-serif;
transition: all .15s;
}
.tag-toggle-rv.on {
background: var(--primary-light-review);
border-color: var(--primary-review);
color: var(--secondary-review);
font-weight: 500;
}
.wrap-review textarea {
width: 100%;
min-height: 84px;
resize: vertical;
font-family: 'Be Vietnam Pro', sans-serif;
font-size: 13px;
color: var(--text-primary-review);
background: var(--surface-alt);
border: 1px solid var(--border-review);
border-radius: var(--radius-md-review);
padding: 10px 12px;
outline: none;
transition: border-color .15s, box-shadow .15s;
margin-bottom: 14px;
}
.wrap-review textarea:focus {
border-color: var(--primary-review);
box-shadow: 0 0 0 3px rgba(83,185,102,.12);
background: #fff;
}
.field-row-rv {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 10px;
}
.wrap-review input[type="text"], .wrap-review input[type="email"] {
width: 100%;
font-family: 'Be Vietnam Pro', sans-serif;
font-size: 13px;
color: var(--text-primary-review);
background: var(--surface-alt);
border: 1px solid var(--border-review);
border-radius: var(--radius-md-review);
padding: 9px 12px;
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.wrap-review input:focus {
border-color: var(--primary-review);
box-shadow: 0 0 0 3px rgba(83,185,102,.12);
background: #fff;
}
.privacy-note {
font-size: 12px;
color: var(--text-muted-review);
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 16px;
}
.privacy-note svg {
flex-shrink: 0;
color: var(--primary-mid-review);
}
.form-footer-rv {
display: flex;
align-items: center;
justify-content: space-between;
}
.pending-note-rv {
font-size: 12px;
color: var(--text-muted-review);
}
.btn-submit-rv {
background: var(--primary-review);
color: #fff;
border: none;
border-radius: var(--radius-md-review);
padding: 10px 24px;
font-family: 'Lexend', sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background .15s, transform .1s;
letter-spacing: .2px;
flex-shrink: 0;
}
.btn-submit-rv:hover { background: var(--primary-mid-review); }
.btn-submit-rv:active { transform: scale(.98); }
/* ── Review list ── */
.reviews-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.reviews-count {
font-family: 'Lexend', sans-serif;
font-size: 14px;
font-weight: 500;
color: var(--text-secondary-review);
}
.sort-select-rv {
font-family: 'Be Vietnam Pro', sans-serif;
font-size: 13px;
color: var(--text-secondary-review);
background: var(--surface);
border: 1px solid var(--border-review);
border-radius: var(--radius-sm-review);
padding: 5px 10px;
outline: none;
cursor: pointer;
}
.review-card {
background: var(--surface);
border-radius: var(--radius-lg-review);
border: 1px solid var(--border-review);
padding: 18px;
margin-bottom: 10px;
box-shadow: var(--shadow-sm-review);
transition: box-shadow .2s;
}
.review-card:hover { box-shadow: var(--shadow-md-review); }
.rev-header {
display: flex;
gap: 12px;
align-items: flex-start;
margin-bottom: 10px;
}
.avatar-rv {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
flex-shrink: 0;
}
.av-green { background: var(--primary-light-review); color: var(--secondary-review); }
.av-purple { background: #edeeff; color: #3b35a8; }
.av-amber { background: #fff4e0; color: #7a4800; }
.rev-meta { flex: 1; min-width: 0; }
.rev-name-row {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
margin-bottom: 3px;
}
.rev-name {
font-size: 14px;
font-weight: 600;
color: var(--secondary-review);
}
.verified-badge {
display: inline-flex;
align-items: center;
gap: 3px;
background: var(--primary-light-review);
color: var(--secondary-review);
font-size: 11px;
font-weight: 500;
padding: 2px 8px;
border-radius: 10px;
}
.rev-date {
font-size: 12px;
color: var(--text-muted-review);
margin-left: auto;
}
.rev-stars {
display: flex;
gap: 2px;
}
.rev-stars i { font-size: 13px; }
.rev-text {
font-size: 14px;
color: var(--text-primary-review);
line-height: 1.65;
margin-bottom: 10px;
}
.rev-tags {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.rev-tag {
background: var(--secondary-light-review);
color: var(--secondary-review);
font-size: 12px;
padding: 2px 9px;
border-radius: 10px;
}
.btn-more-rv {
width: 100%;
padding: 11px;
border-radius: var(--radius-md-review);
background: none;
border: 1px solid var(--border-strong-review);
color: var(--text-secondary-review);
font-family: 'Be Vietnam Pro', sans-serif;
font-size: 14px;
cursor: pointer;
transition: background .15s, color .15s;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.btn-more-rv:hover { background: var(--secondary-light-review); color: var(--secondary-review); }
.btn-more-rv svg { width: 14px; height: 14px; }
/* star icons via SVG */
.star-icon { display: inline-block; width: 17px; height: 17px; }

/* ── Upload & Preview Photos ── */
.upload-photos-rv {
    margin-bottom: 14px;
}
.photo-upload-grid {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.photo-upload-btn {
    width: 76px;
    height: 76px;
    border: 1.5px dashed var(--border-strong-review);
    border-radius: var(--radius-md-review);
    background: var(--surface-alt);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted-review);
    font-size: 11px;
    gap: 4px;
    transition: all 0.2s ease;
    margin: 0;
}
.photo-upload-btn:hover {
    border-color: var(--primary-review);
    color: var(--primary-mid-review);
    background: var(--primary-light-review);
}
.photo-upload-btn svg {
    width: 20px;
    height: 20px;
}
.preview-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.preview-item {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: var(--radius-md-review);
    overflow: hidden;
    border: 1px solid var(--border-review);
}
.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.btn-remove-img {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    transition: background 0.15s;
}
.btn-remove-img:hover {
    background: #e74c3c;
}

/* ── Display Gallery in Review Card ── */
.rev-gallery {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.rev-photo-item {
    width: 76px;
    height: 76px;
    border-radius: var(--radius-md-review);
    overflow: hidden;
    border: 1px solid var(--border-review);
    cursor: pointer;
}
.rev-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}
.rev-photo-item img:hover {
    transform: scale(1.06);
}
.d-none {
    display: none !important;
}