/*
 * JG Tools - Simulador de Parcelas
 * Estilos estruturais (cores/tamanhos vêm do CSS inline gerado a partir do painel)
 */

.wsp_parcelamento_valor,
.wsp_parcelamento_carrinho,
.wsp_parcelamento_minicart{
	display: block;
	margin-top: 6px;
	/* Alguns temas (ex.: Enfold) aplicam font-weight forte em .price span.
	   As simulações não têm opção de negrito no painel, então mantemos normal. */
	font-weight: 400 !important;
}

/* Força peso normal em todo o conteúdo das simulações (inclui o link "Ver parcelas") */
.wsp_parcelamento_valor *,
.wsp_parcelamento_carrinho *,
.wsp_parcelamento_minicart *{
	font-weight: 400 !important;
}

/* Página do produto: sempre abaixo do preço */
.single-product #top .summary .price .wsp_parcelamento_valor{
	display: block;
	margin-top: 8px;
}

/* Catálogo/grade: compacto */
.woocommerce ul.products li.product .price .wsp_parcelamento_valor{
	display: block;
	margin-top: 4px;
}

/* Evita quebra feia do "10x" / "no Pix" */
.wsp_context_product .wsp_discount{white-space: nowrap;}

/* Uma simulação por linha */
.wsp_one_per_line_item{display:block; white-space:normal; margin-top:4px;}
.wsp_one_per_line_item:first-child{margin-top:0;}
.wsp_context_catalog .wsp_discount{white-space: normal;}

/* Cart total */
.shop_table .order-total td .wsp_parcelamento_carrinho{
	margin-top: 6px;
}

/* Mini-cart total */
.woocommerce-mini-cart__total .wsp_parcelamento_minicart{
	margin-top: 6px;
}


/* Preço (wc_price) deve herdar cor e tamanho definidos no painel */
.wsp_discount .wsp_price_inherit,
.wsp_discount .wsp_price_inherit *{
	color: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

/* Ícones sempre antes da frase */
.wsp_discount .wsp_sim_icon_wrap,
.wsp_discount img.wsp_sim_img_icon{
	margin-right: 6px;
	vertical-align: middle;
}
.wsp_discount .wsp_sim_icon_wrap{
	display: inline-flex;
	align-items: center;
}



/* ============================
   Modal (Popup "Ver parcelas")
   - Blindado para não herdar CSS do tema (especialmente em produtos variáveis)
   ============================ */

.wsp_modal{
  position: fixed;
  inset: 0;
  /* Mais alto possível para ficar acima de headers fixos (Enfold/UberMenu etc.) */
  z-index: 2147483647;
  display: none;
  font-family: inherit !important;
}

.wsp_modal.is-open{
  display: block;
}

body.wsp-modal-open{
  overflow: hidden !important;
}

.wsp_modal .wsp_modal_overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

.wsp_modal .wsp_modal_dialog{
  position: relative;
  max-width: 960px;
  width: calc(100% - 40px);
  margin: 6vh auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 50px rgba(0,0,0,0.25);
  max-height: 88vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.wsp_modal .wsp_modal_head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.wsp_modal .wsp_modal_title{
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.wsp_modal .wsp_modal_close{
  appearance: none;
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.wsp_modal .wsp_modal_body{
  padding: 16px 20px 22px;
}

/* garante que temas não "transformem" a tabela em layout móvel */
.wsp_modal table.wsp_installments_table{
  display: table !important;
}

.wsp_modal table.wsp_installments_table thead{
  display: table-header-group !important;
}

.wsp_modal table.wsp_installments_table tbody{
  display: table-row-group !important;
}

.wsp_modal table.wsp_installments_table tr{
  display: table-row !important;
}

.wsp_modal table.wsp_installments_table th,
.wsp_modal table.wsp_installments_table td{
  display: table-cell !important;
}


/* ============================
   Modal / Tabela de parcelas
   (garante estilo consistente inclusive em produtos variáveis,
   onde o preço pode ter font-style herdado do tema)
   ============================ */

.wsp_modal,
.wsp_modal *{
	font-style: normal !important;
	text-transform: none;
}

.wsp_modal .wsp_modal_content{
	font-style: normal !important;
}

.wsp_modal .wsp_installments_table{
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
	background: #fff;
}

.wsp_modal .wsp_installments_table thead th{
	font-style: normal !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}

.wsp_modal .wsp_installments_table tbody td{
	font-style: normal !important;
	font-weight: 400 !important;
	font-size: 14px;
	padding: 12px 14px;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	vertical-align: middle;
}

.wsp_modal .wsp_installments_table tbody tr:nth-child(even){
	background: rgba(0,0,0,0.02);
}


/* --- Blindagem extra: alguns temas escondem <thead> em tabelas responsivas.
   No modal do simulador, queremos SEMPRE o layout de tabela padrão (como na página "normal"). --- */
.wsp_modal{
	font-family: inherit !important;
}
.wsp_modal .wsp_installments_table,
.wsp_modal .wsp_installments_table *{
	font-family: inherit !important;
}

.wsp_modal table.wsp_installments_table thead{
	display: table-header-group !important;
}
.wsp_modal table.wsp_installments_table tbody{
	display: table-row-group !important;
}
.wsp_modal table.wsp_installments_table tr{
	display: table-row !important;
}
.wsp_modal table.wsp_installments_table th,
.wsp_modal table.wsp_installments_table td{
	display: table-cell !important;
	float: none !important;
}

/* MOBILE (catálogo/grade): dar respiro entre linhas quando há ícone SVG */
@media (max-width: 767px){
  .wsp_context_catalog .wsp_item.wsp_sim_svg_icon{
    margin-bottom: 6px !important;
  }
}