/* JG Avaliação de Produto - CSS base (independente de tema) */

.jg-rating-wrap{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	line-height: 1;
	margin-top: 6px;
}

/* LOOP: centralizado abaixo do nome */
.woocommerce ul.products li.product .jg-rating-wrap--loop{
	justify-content: center;
	text-align: center;
}

/* SINGLE: alinhado à esquerda abaixo do nome */
.single-product .summary .jg-rating-wrap--single{
	
	text-align: left;

	justify-content: flex-start !important;
	text-align: left;
}

/* Ajuste fino do star-rating do Woo dentro do nosso bloco */
.jg-rating-wrap .star-rating{
	float: none;
	margin: 0;
	display: inline-block;
	vertical-align: middle;
}

/* Contagem */
.jg-rating-count{
	font-size: 12px;
	opacity: .85;
	white-space: nowrap;
}

/* Em alguns temas a avaliação do loop vira overlay/hover; garantimos que o nosso bloco não seja absoluto */
.woocommerce ul.products li.product .jg-rating-wrap{
	position: relative;
	z-index: 2;
}

/* JG Avaliação de Produto - FIX Enfold hover rating + alinhamento */

/* 1) Enfold (e alguns temas) mostram uma avaliação em hover via .rating_container.
   Escondemos para não duplicar com o bloco do plugin. */
.woocommerce ul.products li.product .thumbnail_container .rating_container{
	display: none !important;
}

/* 2) Loop: garante que o "conjunto" (estrelas + contagem) fique centralizado e sem deslocar no hover */
.woocommerce ul.products li.product .jg-rating-wrap--loop{
	width: 100%;
	justify-content: center;
}

/* Remove qualquer animação/efeito de hover herdado do tema no nosso bloco */
.woocommerce ul.products li.product:hover .jg-rating-wrap,
.woocommerce ul.products li.product:hover .jg-rating-wrap *{
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
}

/* Alinhamento fino (evita a sensação de 'desnível' entre estrelas e contagem) */
.jg-rating-wrap .star-rating,
.jg-rating-count{
	line-height: 1 !important;
}

/* Alguns temas aplicam margens no star-rating */
.jg-rating-wrap .star-rating{
	margin: 0 !important;
}

/* JG Avaliação de Produto - FIX centralização real no loop */

/* Alguns temas (ex: Enfold) aplicam regras que "puxam" o rating para a esquerda.
   Aqui forçamos o conjunto a ter largura do conteúdo e centralizar por margem automática. */
.woocommerce ul.products li.product .jg-rating-wrap--loop{
	width: fit-content !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	justify-content: center !important;
}

/* fallback para navegadores antigos: se fit-content não for respeitado, mantém central pelo justify */
@supports not (width: fit-content){
	.woocommerce ul.products li.product .jg-rating-wrap--loop{
		width: 100% !important;
	}
}

/* JG Avaliação de Produto - Centralização forte (sobrescreve tema) */

/* LOOP: garante centralização mesmo se o tema aplicar display/float/margens com !important */
.woocommerce ul.products li.product .jg-rating-wrap--loop,
.woocommerce-page ul.products li.product .jg-rating-wrap--loop,
#top .woocommerce ul.products li.product .jg-rating-wrap--loop,
#top .woocommerce-page ul.products li.product .jg-rating-wrap--loop{
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: center !important;

	/* força o bloco a ocupar toda a linha disponível (muitos temas tentam "shrink") */
	width: 100% !important;
	min-width: 100% !important;
	flex: 0 0 100% !important;
	box-sizing: border-box !important;

	margin: 6px 0 0 0 !important;
	padding: 0 !important;
	text-align: center !important;
}

/* Se o pai for flex e estiver alinhando à esquerda, isso ajuda o item a ficar central na linha */
.woocommerce ul.products li.product .jg-rating-wrap--loop{
	align-self: center !important;
}

/* Zera qualquer regra do tema que faça o star-rating "sair" do fluxo */
.woocommerce ul.products li.product .jg-rating-wrap--loop .star-rating,
.woocommerce-page ul.products li.product .jg-rating-wrap--loop .star-rating,
#top .woocommerce ul.products li.product .jg-rating-wrap--loop .star-rating{
	float: none !important;
	display: inline-block !important;
	margin: 0 !important;
}

/* Zera efeitos/hover herdados */
.woocommerce ul.products li.product:hover .jg-rating-wrap--loop,
.woocommerce ul.products li.product:hover .jg-rating-wrap--loop *{
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
}


/* Avaliações com imagens */
.jg-review-images{
	margin-top: 10px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.jg-review-images img{max-width:72px;height:auto;}
.jg-review-image__thumb{
	display:block;
	width:72px;
	height:72px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0,0.08);
}

.jg-review-images-admin img{max-width:54px;height:auto;}


/* Aviso inline (antes de enviar) */
span.wpcf7-not-valid-tip.jg-review-images-tip{
  background-color: #f7ffb5 !important;
  width: 100% !important;
  padding: 5px !important;
  border-radius: 5px !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Overlay de carregamento/compressão */
#commentform{
  position: relative;
}
.jg-review-upload-overlay{
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .92);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
}
.jg-review-upload-overlay__inner{
  max-width: 520px;
}
.jg-review-upload-overlay__text{
  font-weight: 700;
    margin-bottom: 4px;
}
.jg-review-upload-overlay__sub{
  opacity: .8;
  font-size: 14px;
  line-height: 1.3;
}

.jg-review-upload-overlay__progress{
	margin-top: 12px;
	width: 100%;
	height: 10px;
	background: rgba(0,0,0,.10);
	border-radius: 999px;
	overflow: hidden;
}

.jg-review-upload-overlay__percent{
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	opacity: .85;
}

/* =========================
   Refinos de aparência (Reviews)
   ========================= */

/* Some com o título padrão "Avaliações" (vamos usar nosso título dentro do form) */
h2.woocommerce-Reviews-title{display:none !important;}

/* Remove respiro extra no topo da lista */
#top .woocommerce-tabs .commentlist{padding-top:0 !important;}

/* Caixa do texto da avaliação */
div #reviews #comments ol.commentlist li .comment-text{
	margin: 0 !important;
	padding: 11px 11px !important;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
}

/* Enfold: remove padding lateral que "quebra" a caixa */
.sidebar_right .comment_container{padding-right:0 !important;}

/* Caixa do formulário */
div#review_form{
	background-color:#fff;
	border:1px solid #ececec;
	border-radius:5px;
	padding: 6px 15px;
}

/* Labels mais claras */
#commentform label{
	left: 5px;
	font-size: 13px;
	top: 0;
	font-weight: bold;
	width: 100%;
}

/* Microtexto da área de imagens */
.comment-form-jg-review-images small{
	font-size: 10px;
	line-height: 11px;
}

/* Título do nosso form */
.jg-review-form-title{
	margin: 12px 0 6px;
	font-size: 16px;
	font-weight: 700;
}


/* Review media (imagens + vídeo) */
.jg-review-media-label{display:block;margin:10px 0 6px;font-size:14px;}
.jg-review-media-label__hint{font-weight:400;opacity:.75;margin-left:6px;}
.jg-review-media-help{display:block;margin-top:6px;opacity:.8;font-size:12px;line-height:1.35;}
.jg-review-media-error{margin-top:10px;padding:10px 12px;border:1px solid #e3b1b1;background:#fff3f3;color:#7a1d1d;border-radius:8px;font-size:13px;}
.jg-review-images.jg-review-media{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.jg-review-image{position:relative;display:inline-block;overflow:hidden;border-radius:6px;}
.jg-review-image__thumb,.jg-review-video__thumb{width:70px;height:70px;object-fit:cover;display:block;}
.jg-review-image--video .jg-review-video__thumb{background:#000;}
.jg-review-video__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);pointer-events:none;}
.jg-review-video__play:before{content:'';position:absolute;left:10px;top:7px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid #fff;}


/* Form de avaliação (Woo/Enfold) — evita sobreposição e "truncamento" */
.comment-form-jg-review-media{
	margin: 0 0 14px !important;
	clear: both !important;
	overflow: visible !important;
}

.comment-form-jg-review-media .jg-review-media{
	display: block !important;
	clear: both !important;
}

.comment-form-jg-review-media .jg-review-media__field{
	display: block !important;
	clear: both !important;
	margin: 10px 0 0 !important;
}

.comment-form-jg-review-media .jg-review-media__label{
	display: block !important;
	float: none !important;
	width: auto !important;
	margin: 0 0 6px !important;
	clear: both !important;
}

.comment-form-jg-review-media .jg-review-media__hint{
	opacity: .75;
	font-size: 12px;
	margin-left: 6px;
}

.comment-form-jg-review-media input[type="file"]{
	display: block !important;
	float: none !important;
	clear: both !important;
	width: 100% !important;
	max-width: 520px;
	box-sizing: border-box;
}

.comment-form-jg-review-media .jg-review-media__help{
	display: block !important;
	float: none !important;
	clear: both !important;
	margin: 6px 0 0 !important;
	opacity: .85;
	font-size: 12px;
	line-height: 1.35;
}

/* --------------------------------------------------------------------------
 * FIX Enfold/Avia: tema aplica #commentform label { position:absolute; ... }
 * Isso sobrepõe os labels de upload. Aqui anulamos APENAS dentro do bloco do plugin.
 * -------------------------------------------------------------------------- */
#top #respond #commentform .jg-review-media label,
#top #respond #commentform .jg-review-media .jg-review-media__label,
#top #respond #commentform label.jg-review-media-label{
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;

	display: block !important;
	width: 100% !important;

	  margin: 15px 0 6px 0 !important;
	padding: 0 !important;

	float: none !important;
	clear: both !important;

	font-weight: 800 !important; /* sem negrito */
}

/* garante que os campos fiquem em blocos separados e não “grudem” */
#top #respond #commentform .jg-review-media .jg-review-media__field,
#top #respond #commentform .comment-form-jg-review-media{
	position: static !important;
	display: block !important;
	width: 100% !important;
	float: none !important;
	clear: both !important;
}

/* inputs e textos de ajuda em linha própria */
#top #respond #commentform .jg-review-media input[type="file"],
#top #respond #commentform .jg-review-media small{
	position: static !important;
	display: block !important;
	width: 100% !important;
	float: none !important;
	clear: both !important;
}


/* Lightbox simples para vídeo nas avaliações -------------------------------- */
.jg-review-video-lightbox{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:18px;}
.jg-review-video-lightbox.is-open{display:flex;}
.jg-review-video-lightbox__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);}
.jg-review-video-lightbox__panel{position:relative;z-index:2;max-width:900px;width:100%;background:#111;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5);overflow:hidden;}
.jg-review-video-lightbox__close{position:absolute;top:8px;right:10px;z-index:3;border:0;background:transparent;color:#fff;font-size:28px;line-height:1;padding:6px 10px;cursor:pointer;}
.jg-review-video-lightbox__body{padding:0;}
.jg-review-video-lightbox__video{display:block;width:100%;height:auto;max-height:75vh;background:#000;}
html.jg-review-video-lightbox-open{overflow:hidden;}


/* Lightbox próprio do plugin (não depende de prettyPhoto/tema) */
.jg-review-lightbox{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.72);} 
.jg-review-lightbox.jg-open{display:flex;} 
.jg-review-lightbox__inner{position:relative;max-width:min(920px,100%);max-height:min(80vh,100%);width:100%;} 
.jg-review-lightbox__img{max-width:100%;max-height:80vh;display:block;margin:0 auto;border-radius:12px;background:#000;} 
.jg-review-lightbox__video{max-width:100%;max-height:80vh;display:block;margin:0 auto;border-radius:12px;background:#000;} 
.jg-review-lightbox__close{position:absolute;top:-10px;right:-10px;width:40px;height:40px;border-radius:999px;background:#fff;color:#111;border:none;cursor:pointer;font-size:22px;line-height:1;text-align:center;box-shadow:0 4px 18px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;padding:0;pointer-events:auto;z-index:5;box-sizing:border-box;} 
.jg-review-lightbox__close:focus{outline:2px solid rgba(255,255,255,.8);outline-offset:2px;}

/* --- JG FIX: loop/catalog alignment & order (Enfold-safe) --- */
.woocommerce ul.products li.product .jg-rating-wrap.jg-rating-wrap--loop,
#top .woocommerce ul.products li.product .jg-rating-wrap.jg-rating-wrap--loop,
.inner_product_header .jg-rating-wrap.jg-rating-wrap--loop,
.inner_product_header_cell .jg-rating-wrap.jg-rating-wrap--loop{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    text-align: center !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    line-height: 1 !important;
}

.woocommerce ul.products li.product .jg-rating-wrap--loop .star-rating,
#top .woocommerce ul.products li.product .jg-rating-wrap--loop .star-rating,
.inner_product_header .jg-rating-wrap--loop .star-rating{
    order: 0 !important;
    float: none !important;
    margin: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.woocommerce ul.products li.product .jg-rating-wrap--loop .jg-rating-count,
#top .woocommerce ul.products li.product .jg-rating-wrap--loop .jg-rating-count,
.inner_product_header .jg-rating-wrap--loop .jg-rating-count{
    order: 1 !important;
    float: none !important;
    margin: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}


/* Botão: limpar anexos (imagens/vídeo) no formulário */
.jg-review-media__actions {
  margin-top: 8px;
}
.jg-review-media__clear {
  appearance: none;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.04);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.jg-review-media__clear:hover {
  background: rgba(0,0,0,0.06);
}

/* Resposta da loja (admin) em avaliações */
#reviews #comments ol.commentlist li.jg-review-store-reply {
  margin-left: 18px;
}
#reviews #comments ol.commentlist li.jg-review-store-reply > .comment_container .comment-text {
  background: rgba(0,0,0,0.04);
    padding: 8px 10px 8px 10px;
  border-radius: 8px;
  border-left: 3px solid rgba(0,0,0,0.25);
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  position: relative;
}
#reviews #comments ol.commentlist li.jg-review-store-reply > .comment_container .comment-text:before {
  content: "Resposta da loja";
  display: inline-block;
  font-weight: 700;
  font-size: 12px;
    margin-bottom: 4px;
  opacity: 0.85;
}

#reviews #comments ol.commentlist li.jg-review-store-reply > .comment_container .comment-text .meta,
#reviews #comments ol.commentlist li.jg-review-store-reply > .comment_container .comment-text .woocommerce-review__author,
#reviews #comments ol.commentlist li.jg-review-store-reply > .comment_container .comment-text time {
  display: none !important;
}