/* ==========================================
   TRIGGER (botão na página)
========================================== */

.wdr-trigger{
display:inline-flex;
align-items:center;
gap:5px;
padding:7px 12px;
border-radius:8px;
cursor:pointer;
background:#fff;
font-family:inherit;
font-size:14px;
transition:background .2s;
}

.wdr-trigger:hover{
background:#f0f0f0;
}

.wdr-title{
font-weight:600;
}

.wdr-stars{
color:#ffb400;
}

.wdr-rating{
font-weight:700;
}

.wdr-count{
color:#777;
}

.wdr-count-empty{
color:#aaa;
font-size:13px;
}


/* ==========================================
   OVERLAY
========================================== */

.wdr-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
display:flex;
justify-content:center;
align-items:center;
opacity:0;
visibility:hidden;
transition:.25s;
z-index:99999;
}

.wdr-overlay.active{
opacity:1;
visibility:visible;
}


/* ==========================================
   POPUP
========================================== */

.wdr-popup{
position:relative;
width:100%;
max-width:520px;
height:90vh;
background:#fff;
border-radius:18px;
display:flex;
flex-direction:column;
overflow:hidden;
}

.wdr-overlay.active .wdr-popup{
transform:translateY(0);
}


/* ==========================================
   BOTÃO FECHAR
========================================== */

.wdr-close{
position:absolute;
top:14px;
right:14px;
width:32px;
height:32px;
border:none;
border-radius:50%;
background:#e8e8e8;
color:#444;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:16px;
font-weight:700;
transition:.2s;
padding:0;
z-index:5;
line-height:1;
}

.wdr-close:hover{
background:#d0d0d0;
color:#111;
}


/* ==========================================
   HEADER — compacto estilo iFood
========================================== */

.wdr-popup-header{
padding:16px 20px 12px;
flex-shrink:0;
border-bottom:1px solid #f0f0f0;
}

.wdr-popup-header h2{
margin:0;
font-size:15px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.4px;
color:#222;
text-align:center;
padding-right:30px; /* evita sobreposição com botão fechar */
}

.wdr-store-name{
text-align:center;
color:#888;
font-size:13px;
margin:2px 0 0;
}

/* Rating box: número grande + estrelas em linha única */
.wdr-rating-box{
display:flex;
flex-direction:column;
align-items:center;
margin-top:10px;
gap:2px;
}

.wdr-rating-number{
font-size:32px;
font-weight:800;
color:#222;
line-height:1;
}

.wdr-rating-stars{
color:#f5a623;
font-size:18px;
letter-spacing:2px;
}

.wdr-rating-total{
color:#888;
font-size:12px;
}

/* Distribuição de estrelas compacta */
.wdr-distribution{
margin-top:10px;
display:flex;
flex-direction:column;
gap:4px;
}

.wdr-line{
display:flex;
align-items:center;
gap:8px;
}

.wdr-line span{
width:24px;
font-size:12px;
color:#666;
flex-shrink:0;
}

.wdr-line strong{
width:20px;
text-align:right;
font-size:12px;
color:#666;
flex-shrink:0;
}

.wdr-bar{
flex:1;
height:6px;
background:#ececec;
border-radius:20px;
overflow:hidden;
}

.wdr-fill{
height:100%;
background:#f5a623;
border-radius:20px;
transition:width .4s ease;
}


/* ==========================================
   TABS — compactas, com espaçamento e hover visível
========================================== */

.wdr-tabs{
display:flex;
gap:0;
background:#f7f7f7;
border-bottom:2px solid #e0e0e0;
flex-shrink:0;
padding:0 16px;
}

.wdr-tab{
border:none;
background:none;
cursor:pointer;
padding:10px 16px;
font-size:13px;
font-weight:600;
color:#777;
transition:.2s;
border-bottom:2px solid transparent;
margin-bottom:-2px;
border-radius:0;
white-space:nowrap;
}

.wdr-tab:hover{
color:#333;
background:#ececec;
}

.wdr-tab.active{
color:#8B0000;
border-bottom:2px solid #8B0000;
background:#fff;
}


/* ==========================================
   CONTAINER DAS ABAS
========================================== */

.wdr-content{
height:0;
flex:1;
overflow:hidden;
display:flex;
flex-direction:column;
}


/* ==========================================
   CONTEÚDO DAS ABAS
========================================== */

.wdr-tab-content{
display:none;
padding:16px 20px;
overflow-y:auto;
min-height:0;
flex:1;
}

.wdr-tab-content.active{
display:flex;
flex-direction:column;
overflow-y:auto;
min-height:0;
}


/* ==========================================
   REVIEW CARD
========================================== */

.wdr-review-card{
padding:14px 0;
border-bottom:1px solid #f0f0f0;
}

.wdr-review-card:last-child{
border-bottom:none;
}

.wdr-review-top{
display:flex;
align-items:flex-start;
gap:10px;
}

/* avatar wrapper — mantém o tamanho independente do conteúdo interno */
.wdr-avatar{
width:38px;
height:38px;
border-radius:50%;
background:#8B0000;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
font-weight:bold;
font-size:15px;
flex-shrink:0;
overflow:hidden;
}

.wdr-avatar-img{
width:38px;
height:38px;
border-radius:50%;
object-fit:cover;
display:block;
}

.wdr-avatar-initial{
width:38px;
height:38px;
border-radius:50%;
background:#8B0000;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
font-weight:bold;
font-size:15px;
flex-shrink:0;
}

.wdr-review-user{
flex:1;
min-width:0;
}

.wdr-review-user strong{
display:block;
font-size:14px;
color:#222;
}

.wdr-review-meta{
display:flex;
align-items:center;
gap:8px;
margin-top:2px;
font-size:12px;
flex-wrap:wrap;
}

.wdr-review-stars{
color:#F5A623;
font-size:13px;
}

.wdr-review-date{
color:#aaa;
}

.wdr-verified-badge{
font-size:11px;
color:#1a7f37;
font-weight:600;
}

.wdr-pending-badge{
font-size:11px;
color:#a15c00;
background:#fff3e0;
padding:1px 7px;
border-radius:10px;
}

.wdr-review-product{
margin-top:6px;
color:#888;
font-size:12px;
font-style:italic;
}

.wdr-review-comment{
margin-top:6px;
line-height:1.55;
color:#444;
font-size:14px;
}

.wdr-review-images{
display:flex;
gap:8px;
margin-top:10px;
flex-wrap:wrap;
}

.wdr-review-images img,
.wdr-review-image{
width:72px;
height:72px;
border-radius:8px;
object-fit:cover;
cursor:pointer;
}

.wdr-review-reply{
margin-top:10px;
padding:10px 12px;
background:#fafafa;
border-left:3px solid #8B0000;
border-radius:0 8px 8px 0;
}

.wdr-review-reply strong{
display:block;
margin-bottom:4px;
color:#8B0000;
font-size:13px;
}

.wdr-review-reply p{
margin:0;
color:#555;
line-height:1.5;
font-size:13px;
}


/* ==========================================
   EMPTY / LOAD MORE
========================================== */

/* h3 dentro das abas — título discreto */
.wdr-tab-content h3{
font-size:13px;
font-weight:600;
color:#999;
margin:0 0 12px;
text-transform:uppercase;
letter-spacing:.4px;
}

.wdr-empty{
padding:30px 10px;
text-align:center;
color:#aaa;
font-size:14px;
}

.wdr-load-more{
display:block;
width:100%;
margin-top:12px;
padding:10px;
background:#f5f5f5;
border:none;
border-radius:8px;
cursor:pointer;
font-weight:600;
color:#8B0000;
font-size:13px;
transition:background .2s;
}

.wdr-load-more:hover{
background:#ebebeb;
}

.wdr-login-link{
display:inline-block;
margin-top:10px;
color:#8B0000;
font-weight:700;
font-size:14px;
text-decoration:none;
border:2px solid #8B0000;
padding:8px 20px;
border-radius:8px;
transition:.2s;
}

.wdr-login-link:hover{
background:#8B0000;
color:#fff;
}


/* ==========================================
   GALERIA
========================================== */

.wdr-gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:6px;
}

.wdr-gallery-image{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
border-radius:6px;
cursor:pointer;
transition:opacity .2s;
}

.wdr-gallery-image:hover{
opacity:.85;
}


/* ==========================================
   LIGHTBOX
========================================== */

.wdr-lightbox{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.88);
z-index:999999;
justify-content:center;
align-items:center;
}

.wdr-lightbox.active{
display:flex;
}

.wdr-lightbox img{
max-width:90vw;
max-height:85vh;
border-radius:8px;
box-shadow:0 4px 30px rgba(0,0,0,.4);
}

.wdr-lightbox-close{
position:absolute;
top:18px;
right:24px;
color:#fff;
font-size:30px;
cursor:pointer;
line-height:1;
opacity:.8;
}

.wdr-lightbox-close:hover{
opacity:1;
}


/* ==========================================
   FORMULÁRIO DE AVALIAÇÃO
========================================== */

.wdr-review-form{
display:flex;
flex-direction:column;
gap:10px;
padding:4px 0 30px;
}

.wdr-field-label{
font-weight:600;
font-size:13px;
color:#333;
}

.wdr-field-hint{
font-size:12px;
color:#aaa;
margin:0;
}

.wdr-review-form select,
.wdr-review-form input[type="text"],
.wdr-review-form textarea{
width:100%;
padding:10px 12px;
border:1px solid #ddd;
border-radius:8px;
font-family:inherit;
font-size:14px;
outline:none;
transition:border-color .2s;
box-sizing:border-box;
}

.wdr-review-form select:focus,
.wdr-review-form input[type="text"]:focus,
.wdr-review-form textarea:focus{
border-color:#8B0000;
}

.wdr-star-input{
display:flex;
gap:4px;
font-size:28px;
color:#ddd;
cursor:pointer;
}

.wdr-star{
transition:transform .1s ease, color .1s ease;
}

.wdr-star:hover{
transform:scale(1.15);
}

.wdr-star.active{
color:#f5a623;
}

.wdr-photo-preview{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.wdr-preview-thumb{
width:56px;
height:56px;
object-fit:cover;
border-radius:6px;
border:2px solid #f0f0f0;
}

.wdr-form-message{
font-size:13px;
padding:6px 0;
}

.wdr-form-message-success{
color:#1a7f37;
}

.wdr-form-message-error{
color:#c0392b;
}

.wdr-submit-review{
background:#8B0000;
color:#fff;
border:none;
padding:12px;
border-radius:8px;
font-weight:700;
font-size:14px;
cursor:pointer;
transition:background .2s;
}

.wdr-submit-review:hover{
background:#700000;
}

.wdr-submit-review:disabled{
opacity:.65;
cursor:default;
}


/* ==========================================
   SKELETON LOADING
========================================== */

.wdr-skeleton-card{
padding:14px 0;
border-bottom:1px solid #f0f0f0;
display:flex;
gap:10px;
align-items:flex-start;
}

.wdr-skeleton-avatar{
width:38px;
height:38px;
border-radius:50%;
flex-shrink:0;
background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
background-size:400% 100%;
animation:wdr-skeleton 1.4s ease infinite;
}

.wdr-skeleton-lines{
flex:1;
display:flex;
flex-direction:column;
gap:7px;
padding-top:4px;
}

.wdr-skeleton-line{
height:9px;
border-radius:4px;
background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
background-size:400% 100%;
animation:wdr-skeleton 1.4s ease infinite;
}

@keyframes wdr-skeleton{
0%{background-position:100% 50%;}
100%{background-position:0 50%;}
}


/* ==========================================
   SCROLL
========================================== */

.wdr-tab-content::-webkit-scrollbar{
width:5px;
}

.wdr-tab-content::-webkit-scrollbar-thumb{
background:#ddd;
border-radius:10px;
}


/* ==========================================
   MOBILE
========================================== */

@media(max-width:520px){

.wdr-popup{
height:95vh;
max-height:95vh;
border-radius:18px 18px 0 0;
align-self:flex-end;
}

.wdr-overlay{
align-items:flex-end;
}

.wdr-gallery-grid{
grid-template-columns:repeat(2,1fr);
}

}