/* ==========================================================================
   WC Simulador de Parcelas — style-2.5.2.css
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. VARIÁVEIS GLOBAIS
   -------------------------------------------------------------------------- */

* {
  /* Fontes */
  --wcsp-price-font-size:       19px;
  --wcsp-small-font-size:       11px;
  --wcsp-medium-font-size:      14px;
  --wcsp-incash-del-font-size:  17px;

  /* Ícones */
  --wcsp-icons-color:  #000;
  --wcsp-icons-size:   30px;

  /* Cores dos preços — produto */
  --wcsp-incash-price-color:           #000;
  --wcsp-card-price-color:             #000;
  --wcsp-card-description-price-color: #000;
  --wcsp-card-all-instalments-color:   var(--wcsp-card-price-color);
  --wcsp-descriptions-color:           #000;

  /* Tamanhos de fonte — produto */
  --wcsp-incash-price-font-size: 21px;
  --wcsp-card-price-font-size:   21px;
  --wcsp-descriptions-font-size: 14px;

  /* Tamanhos de fonte — loop (listagem) */
  --wcsp-loop-incash-price-font-size: 17px;
  --wcsp-loop-card-price-font-size:   17px;
  --wcsp-loop-descriptions-font-size: 14px;
}


/* --------------------------------------------------------------------------
   2. CONTAINER PRINCIPAL
   -------------------------------------------------------------------------- */

.wcsp-container {
  display:        block;
  line-height:    1;
  letter-spacing: initial;
  word-spacing:   initial;
}


/* --------------------------------------------------------------------------
   3. BLOCO DE PAGAMENTO (.payment)
   -------------------------------------------------------------------------- */

.wcsp-container .payment {
  margin-bottom: 10px;
  display:       block;
}

.wcsp-container .payment.has-icons {
  margin-bottom: 20px;
  display:       flex;
  text-align:    left;
}

.wcsp-container .payment:last-child {
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   4. PREÇO PRINCIPAL (.payment-price)
   -------------------------------------------------------------------------- */

.wcsp-container .payment .payment-price {
  display:     block;
  font-size:   var(--wcsp-price-font-size);
  line-height: 1;
  font-weight: bold !important;
}

.wcsp-container .payment .payment-price *,
.wcsp-container .payment .payment-price .amount,
.wcsp-container .payment .payment-price bdi {
  font-weight: bold !important;
}

.wcsp-container .payment .payment-price del {
  color:   #6d6d6d;
  opacity: .7;
}

.wcsp-container .payment .payment-price ins {
  margin-left: 5px;
  font-weight: bold;
}

.wcsp-container .payment .payment-price .amount {
  font-size: var(--wcsp-price-font-size);
}


/* --------------------------------------------------------------------------
   5. PREÇO À VISTA / PIX (.payment-discount)
   -------------------------------------------------------------------------- */

.wcsp-container .payment.payment-discount .payment-price {
  font-size: var(--wcsp-incash-price-font-size);
  color:     var(--wcsp-incash-price-color);
}

.wcsp-container .payment.payment-discount .payment-price del {
  display:   block;
  font-size: var(--wcsp-incash-del-font-size);
}

.wcsp-container .payment.payment-discount .payment-price ins {
  margin: 0;
}

.wcsp-container .payment.payment-discount .payment-price .amount {
  font-size: var(--wcsp-incash-price-font-size);
  color:     var(--wcsp-incash-price-color);
}


/* --------------------------------------------------------------------------
   6. PREÇO NO CARTÃO (.payment-card)
   -------------------------------------------------------------------------- */

.wcsp-container .payment.payment-card .payment-price {
  font-size: var(--wcsp-card-price-font-size);
  color:     var(--wcsp-card-price-color);
}

.wcsp-container .payment.payment-card .payment-price .amount {
  font-size: var(--wcsp-card-price-font-size);
  color:     var(--wcsp-card-price-color);
}


/* --------------------------------------------------------------------------
   7. INFORMAÇÕES / DESCRIÇÃO (.payment-info)
   -------------------------------------------------------------------------- */

.wcsp-container .payment .payment-info {
  display:     block;
  line-height: 1;
  text-wrap:   auto;
}

.wcsp-container .payment .payment-info .price-from {
  display:     block;
  line-height: var(--wcsp-small-font-size);
  font-size:   var(--wcsp-small-font-size);
}

.wcsp-container .payment .payment-info .payment-name {
  line-height:   1;
  display:       block;
  font-size:     var(--wcsp-descriptions-font-size);
  color:         var(--wcsp-descriptions-color);
  margin-top:    5px;
  font-weight:   normal !important;
}

.wcsp-container .payment .payment-info .payment-name .text,
.wcsp-container .payment .payment-info .payment-name * {
  font-weight: normal !important;
}

/* Exceção: link "Mais formas de pagamento" dentro do .payment-name */
.wcsp-container .payment .payment-info .payment-name .text a.wcsp-toggle-all-installments,
.wcsp-container .payment .payment-info .payment-name a.wcsp-toggle-all-installments {
  font-weight: bold !important;
}

.wcsp-container .payment .payment-info .payment-name .amount {
  font-size: var(--wcsp-descriptions-font-size);
  color:     var(--wcsp-descriptions-color);
}

.wcsp-container .payment .payment-info .payment-name.best_no_fee,
.wcsp-container .payment .payment-info .payment-name.best_with_fee {
  color: var(--wcsp-card-description-price-color);
}

.wcsp-container .payment .payment-info .payment-name.best_no_fee .amount,
.wcsp-container .payment .payment-info .payment-name.best_no_fee .amount span,
.wcsp-container .payment .payment-info .payment-name.best_with_fee .amount,
.wcsp-container .payment .payment-info .payment-name.best_with_fee .amount span {
  color: var(--wcsp-card-description-price-color);
}


/* --------------------------------------------------------------------------
   8. ÍCONES
   -------------------------------------------------------------------------- */

.wcsp-container .payment .icon {
  display:    inline-block;
  width:      var(--wcsp-icons-size);
  min-width:  var(--wcsp-icons-size);
  color:      var(--wcsp-icons-color);
  margin-right: 15px;
}

.wcsp-container .payment .icon svg {
  width:  var(--wcsp-icons-size);
  height: var(--wcsp-icons-size);
  fill:   var(--wcsp-icons-color);
}

/* Ícone Pix (à vista) — verde */
.wcsp-container .payment.payment-discount .icon,
.wcsp-container .payment.payment-discount .icon svg {
  color: #00a650;
  fill:  #00a650;
}

/* Ícone cartão — preto */
.wcsp-container .payment.payment-card .icon,
.wcsp-container .payment.payment-card .icon svg {
  color: #000000;
  fill:  #000000;
}


/* --------------------------------------------------------------------------
   9. LINK "VER TODAS AS PARCELAS"
   -------------------------------------------------------------------------- */

.wcsp-container .payment .wcsp-toggle-all-installments,
.wcsp-container .payment a.wcsp-toggle-all-installments {
  display:         block;
  font-size:       var(--wcsp-medium-font-size);
  color:           var(--wcsp-card-all-instalments-color);
  line-height:     1;
  margin-top:      3px;
  text-decoration: underline;
  font-weight:     bold !important;
}


/* --------------------------------------------------------------------------
   10. TABELA DE PARCELAS
   -------------------------------------------------------------------------- */

.wcsp-container .wcsp-installments-table {
  display:       none;
  columns:       30px 2;
  border-radius: 4px;
  border:        1px solid #ccc;
  padding:       10px 15px;
  margin-bottom: 25px;
  font-size:     var(--wcsp-medium-font-size);
}

.wcsp-container .wcsp-installments-table .installment-option {
  display:    block;
  color:      var(--wcsp-descriptions-color);
  text-align: left;
}

.wcsp-container .wcsp-installments-table .installment-option + .installment-option {
  margin-top: 5px;
}

.wcsp-container .wcsp-installments-table .installment-option span {
  font-size: inherit !important;
}


/* --------------------------------------------------------------------------
   11. LAYOUT INLINE (preço + descrição na mesma linha)
   -------------------------------------------------------------------------- */

.wcsp-container.wcsp-container-product .payment-discount.inline .payment-price,
.wcsp-container.wcsp-container-product .payment-discount.inline .payment-name,
.wcsp-container.wcsp-container-loop .payment-discount.inline .payment-price,
.wcsp-container.wcsp-container-loop .payment-discount.inline .payment-name {
  display:        inline;
  vertical-align: middle;
}


/* --------------------------------------------------------------------------
   12. LOOP / LISTAGEM DE PRODUTOS
   -------------------------------------------------------------------------- */

.wcsp-container.wcsp-container-loop .payment .payment-price {
  font-size: var(--wcsp-loop-price-font-size);
}

/* À vista no loop */
.wcsp-container.wcsp-container-loop .payment.payment-discount .payment-price {
  font-size: var(--wcsp-loop-incash-price-font-size);
  color:     var(--wcsp-incash-price-color);
}

.wcsp-container.wcsp-container-loop .payment.payment-discount .payment-price .amount {
  font-size: var(--wcsp-loop-incash-price-font-size);
  color:     var(--wcsp-incash-price-color);
}

/* Cartão no loop */
.wcsp-container.wcsp-container-loop .payment.payment-card .payment-price {
  font-size: var(--wcsp-loop-card-price-font-size);
  color:     var(--wcsp-card-price-color);
}

.wcsp-container.wcsp-container-loop .payment.payment-card .payment-price .amount {
  font-size: var(--wcsp-loop-card-price-font-size);
  color:     var(--wcsp-card-price-color);
}

/* Descrição no loop — respeita o valor configurado no wp-admin */
.wcsp-container.wcsp-container-loop .payment .payment-info .payment-name,
.wcsp-container.wcsp-container-loop .payment .payment-info .payment-name .amount {
  font-size: var(--wcsp-loop-descriptions-font-size);
}

/* Descrição na página do produto — fixo em 14px independente do wp-admin */
.wcsp-container.wcsp-container-product .payment .payment-info .payment-name,
.wcsp-container.wcsp-container-product .payment .payment-info .payment-name .amount {
  font-size: 14px;
}


/* --------------------------------------------------------------------------
   13. MOBILE — garantir negrito nos preços
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .wcsp-container .payment .payment-price,
  .wcsp-container .payment .payment-price *,
  .wcsp-container .payment .payment-price .amount,
  .wcsp-container .payment .payment-price bdi,
  .wcsp-container .payment.payment-discount .payment-price,
  .wcsp-container .payment.payment-discount .payment-price .amount,
  .wcsp-container .payment.payment-card .payment-price,
  .wcsp-container .payment.payment-card .payment-price .amount {
    font-weight: bold !important;
  }
}