/* Review extras: what a shopper attached to a review, what they rated separately, whether the
   purchase was verified, and the shop-wide feed of all of it.

   Every rule here styles markup that is printed only while its own setting is on, so a shop with
   the review extras off downloads this file and matches nothing. The file is deliberately plain:
   the review block already sits inside the theme's own card, so what is missing is spacing,
   thumbnail sizes and the small print - not a second design. */

/* ====================== What the shopper attached ====================== */

.evo-review-media {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0 0;
}

.evo-review-photo {
display: block;
/* A fixed box for every thumbnail, whatever the photo's own proportions: a row of shots taken on
   different phones must not turn the card into a staircase. */
width: 96px;
height: 96px;
overflow: hidden;
border: 1px solid #e5e5e5;
border-radius: 4px;
}

.evo-review-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}

.evo-review-embed {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border: 1px solid #e5e5e5;
border-radius: 4px;
}

/* ====================== Rated aspects ====================== */

.evo-review-criteria {
margin: 10px 0 0;
padding: 0;
list-style: none;
}

.evo-review-criteria li {
display: flex;
justify-content: space-between;
gap: 12px;
max-width: 320px;
padding: 3px 0;
border-bottom: 1px dotted #e5e5e5;
}

.evo-review-criteria-name {
color: #666;
}

.evo-review-criteria-value {
white-space: nowrap;
font-weight: 600;
}

/* The form's own star rows. The radio itself stays in the page rather than being hidden with
   display:none - a keyboard has to be able to reach it - so it is the label that carries the look. */
.evo-review-criteria-stars {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding-top: 6px;
}

.evo-review-criteria-star {
display: inline-flex;
align-items: center;
gap: 4px;
margin: 0;
padding: 4px 10px;
font-weight: 400;
border: 1px solid #e5e5e5;
border-radius: 4px;
cursor: pointer;
}

.evo-review-criteria-star input {
margin: 0;
}

/* ====================== The photo field ====================== */

.evo-review-criteria-form {
margin-bottom: 12px;
}

/* Hidden on purpose: these are the tokens of the photos already accepted, and the review carries
   them as fields rather than as anything the shopper is meant to look at. */
.evo-review-tokens {
display: none;
}

.evo-review-upload-hint {
color: #999;
font-size: 12px;
}

.evo-review-previews {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}

.evo-review-preview {
width: 72px;
height: 72px;
object-fit: cover;
border: 1px solid #e5e5e5;
border-radius: 4px;
}

/* ====================== Verified, pros, cons, votes ====================== */

.evo-review-verified {
display: inline-flex;
align-items: center;
gap: 5px;
margin: 4px 0;
color: #2e7d32;
font-size: 12px;
}

.evo-review-city {
color: #999;
}

.evo-review-pros,
.evo-review-cons {
margin: 6px 0 0;
padding-left: 10px;
border-left: 3px solid #e5e5e5;
}

.evo-review-pros {
border-left-color: #2e7d32;
}

.evo-review-cons {
border-left-color: #c62828;
}

.evo-review-helpful {
display: flex;
align-items: center;
gap: 6px;
margin-top: 10px;
color: #666;
font-size: 12px;
}

.evo-review-vote {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 10px;
}

.evo-review-vote button {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
color: #666;
background: none;
border: 1px solid #e5e5e5;
border-radius: 4px;
cursor: pointer;
}

.evo-review-vote button[disabled] {
/* The button is disabled for exactly as long as the vote is in flight, so this is the only
   feedback the shopper gets that the click was taken. */
opacity: 0.5;
cursor: default;
}

/* ====================== The shop-wide feed ====================== */

.evo-review-feed-item {
padding-bottom: 18px;
margin-bottom: 18px;
border-bottom: 1px solid #e5e5e5;
}

.evo-review-feed-item:last-child {
border-bottom: 0;
}

.evo-review-feed-product {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}

.evo-review-feed-thumb {
flex: 0 0 auto;
width: 64px;
height: 64px;
overflow: hidden;
border: 1px solid #e5e5e5;
border-radius: 4px;
}

.evo-review-feed-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}

.evo-review-feed-name {
line-height: 1.4;
}

.evo-review-feed-label {
color: #999;
font-size: 12px;
}

.evo-review-feed-empty {
padding: 24px 0;
color: #666;
}

@media (max-width: 767px) {
.evo-review-photo {
width: 76px;
height: 76px;
}

.evo-review-criteria li {
max-width: none;
}
}