/**
 * Rede Débito/Crédito - Layout Compacto
 *
 * Campos sempre lado a lado (encolhem juntos, inclusive no mobile):
 *   Linha 1: Nome do titular | Tipo do cartão
 *   Linha 2: Número do cartão (com bandeiras) | Data de validade | Código
 *   Linha 3: Parcelas
 *
 * Duas seções: checkout clássico (shortcode) e checkout de Blocos (Gutenberg).
 *
 * @package Lknwoo\IntegrationRedeForWoocommerce
 */

/* ============================================================
 * CHECKOUT CLÁSSICO (SHORTCODE)
 * ============================================================ */
.rede-compact-classic {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
  /* Igual ao compacto do Cielo: o padding do fieldset fica a cargo do container
   * externo (.payment_box do tema), como no Cielo. A regra compartilhada
   * .rede-payment-form { padding: 20px !important } (layout padrão) criava um
   * bloco cinza grande em volta dos campos — neutralizada aqui. */
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

.rede-compact-classic .rede-compact-wrapper,
.rede-compact-classic .rede-compact-fields {
  min-width: 0 !important;
  max-width: 100% !important;
}

.rede-compact-classic .rede-compact-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  column-gap: 12px;
  margin-bottom: 16px;
}

.rede-compact-classic .rede-compact-field {
  position: relative;
  min-width: 0 !important;
  display: flex;
  flex-direction: column;
}

.rede-compact-classic .rede-compact-field--name {
  flex: 1 1 50%;
}

.rede-compact-classic .rede-compact-field--type {
  flex: 0 1 42%;
}

.rede-compact-classic .rede-compact-row--name-only .rede-compact-field--name {
  flex: 1 1 100%;
}

.rede-compact-classic .rede-compact-field--number {
  flex: 3 1 0;
}

.rede-compact-classic .rede-compact-field--exp {
  flex: 1.05 1 0;
}

.rede-compact-classic .rede-compact-field--cvc {
  flex: 1 1 0;
}

.rede-compact-classic .rede-compact-field--installments {
  flex: 1 1 100%;
}

/* Linha 1 (Nome + Tipo) e Linha 2 (Número + Validade + Código) usam a MESMA grade
 * de colunas. Assim o NOME e o NÚMERO do cartão ficam com exatamente a mesma
 * largura (antes o nome esticava para ~58% e o número para ~59%, gerando a
 * diferença de largura entre as linhas). O tipo do cartão ocupa as colunas 2-3 da
 * linha 1. O gap vem do `.rede-compact-row` (12px; 8/6px nos breakpoints). */
.rede-compact-classic .rede-compact-row--top,
.rede-compact-classic .rede-compact-row--card {
  display: grid;
  grid-template-columns: 3fr 1.05fr 1fr;
  align-items: end;
}

.rede-compact-classic .rede-compact-row--top > .rede-compact-field--name {
  grid-column: 1 / 2;
}

.rede-compact-classic .rede-compact-row--top > .rede-compact-field--type {
  grid-column: 2 / 4;
}

.rede-compact-classic .rede-compact-row--name-only > .rede-compact-field--name {
  grid-column: 1 / -1;
}

.rede-compact-classic .rede-compact-row--card > .rede-compact-field--number {
  grid-column: 1 / 2;
}

.rede-compact-classic .rede-compact-row--card > .rede-compact-field--exp {
  grid-column: 2 / 3;
}

.rede-compact-classic .rede-compact-row--card > .rede-compact-field--cvc {
  grid-column: 3 / 4;
}

.rede-compact-classic .rede-compact-field label {
  display: block;
  font-weight: 600;
  color: #495057;
  margin-bottom: 6px;
  font-size: 12.6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rede-compact-classic .rede-compact-field label .required {
  color: #dc3545;
  margin-left: 3px;
}

.rede-compact-classic .rede-compact-input-wrap {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0 !important;
}

.rede-compact-classic .rede-compact-input-wrap input,
.rede-compact-classic .rede-compact-input-wrap select {
  height: 50px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border: 2px solid #e9ecef !important;
  padding: .5em .8em !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  background-color: #fff !important;
  color: #495057;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.rede-compact-classic .rede-compact-input-wrap input::placeholder {
  color: #adb5bd;
  opacity: 1;
}

/* Placeholder dos inputs do compacto dos BLOCOS em cinza (o tema costuma deixá-lo
   escuro). Escopado ao container do método; só os inputs (o select não tem
   placeholder). */
#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-container input::placeholder {
  color: #adb5bd !important;
  opacity: 1 !important;
}

.rede-compact-classic .rede-compact-input-wrap input:focus,
.rede-compact-classic .rede-compact-input-wrap select:focus {
  border-color: #007cba !important;
  box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
}

/* Bandeiras dentro do campo de número */
.rede-compact-classic .rede-compact-card-brands {
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 0;
  pointer-events: none;
}

.rede-compact-classic .rede-compact-card-brands img {
  width: 30px;
  height: auto;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
  filter: none;
  opacity: 1;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.rede-compact-classic .rede-compact-field--number .rede-compact-input-wrap input {
  padding-right: 116px !important;
}

/* Ícones dos campos (validade/código) */
.rede-compact-classic .rede-compact-field-icon {
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 20px;
  height: 20px;
  opacity: 0.55;
  pointer-events: none;
}

.rede-compact-classic .rede-compact-field--exp .rede-compact-input-wrap input,
.rede-compact-classic .rede-compact-field--cvc .rede-compact-input-wrap input {
  padding-right: 36px !important;
}

@media (max-width: 520px) {
  .rede-compact-classic .rede-compact-row {
    column-gap: 8px;
  }

  .rede-compact-classic .rede-compact-field label {
    font-size: 12.6px;
  }

  .rede-compact-classic .rede-compact-input-wrap input,
  .rede-compact-classic .rede-compact-input-wrap select {
    font-size: 14px !important;
    padding: .45em .5em !important;
  }

  .rede-compact-classic .rede-compact-card-brands img {
    width: 22px;
  }

  .rede-compact-classic .rede-compact-field--number .rede-compact-input-wrap input {
    padding-right: 84px !important;
  }
}

@media (max-width: 400px) {
  .rede-compact-classic .rede-compact-row {
    column-gap: 6px;
  }

  .rede-compact-classic .rede-compact-card-brands {
    gap: 3px;
    right: 6px;
  }

  .rede-compact-classic .rede-compact-card-brands img {
    width: 18px;
  }

  .rede-compact-classic .rede-compact-field--number .rede-compact-input-wrap input {
    padding-right: 68px !important;
  }
}

/* ============================================================
 * CHECKOUT DE BLOCOS (GUTENBERG)
 * Escopado pelo container do conteúdo do método de pagamento.
 * ============================================================ */
#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  column-gap: 12px;
  width: 100%;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-field {
  position: relative;
  min-width: 0 !important;
  display: flex;
  flex-direction: column;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-field--name {
  flex: 1 1 50%;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-field--type {
  flex: 0 1 42%;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-row--name-only .rede-compact-field--name {
  flex: 1 1 100%;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-field--number {
  flex: 3 1 0;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-field--exp {
  flex: 1.05 1 0;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-field--cvc {
  flex: 1 1 0;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-field--installments {
  flex: 1 1 100%;
}

/* Mesma grade de colunas para Nome (Linha 1) e Número (Linha 2), garantindo
 * larguras idênticas. Tipo do cartão ocupa as colunas 2-3 da Linha 1. */
#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-row--top,
#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-row--card {
  display: grid;
  grid-template-columns: 3fr 1.05fr 1fr;
  align-items: end;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-row--top > .rede-compact-field--name {
  grid-column: 1 / 2;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-row--top > .rede-compact-field--type {
  grid-column: 2 / 4;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-row--name-only > .rede-compact-field--name {
  grid-column: 1 / -1;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-row--card > .rede-compact-field--number {
  grid-column: 1 / 2;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-row--card > .rede-compact-field--exp {
  grid-column: 2 / 3;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-row--card > .rede-compact-field--cvc {
  grid-column: 3 / 4;
}

/* Aparência base dos campos */
#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-container .wc-block-components-text-input input,
#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-container select {
  border: 1px solid #ccc !important;
  border-radius: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  height: 50px !important;
  background-color: #fff !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 0 12px !important;
}

/* Seta própria do plugin APENAS nos selects (o tema usa appearance:none e o
   reset de background apagaria a seta nativa). Nos inputs NÃO se aplica. */
#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-container select {
  padding-right: 40px !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

/* Labels ACIMA do input */
#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-container .wc-block-components-text-input {
  position: relative !important;
  margin: 0 !important;
  padding-top: 22px !important;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-container .wc-block-components-text-input label,
#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-container .wc-block-components-text-input.is-active label {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  font-size: 12.6px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #495057 !important;
  letter-spacing: 0.2px;
  max-width: 100% !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-field--installments label {
  display: block;
  font-size: 12.6px !important;
  font-weight: 600 !important;
  color: #495057 !important;
  margin-bottom: 6px !important;
}

/* Labels dos selects crus (tipo do cartão / parcelas) — ficam acima do campo */
#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-field > label {
  display: block;
  font-size: 12.6px !important;
  font-weight: 600 !important;
  color: #495057 !important;
  margin-bottom: 6px !important;
}

/* Bandeiras e ícones dentro dos campos (centralizados no input: topo em 22px,
 * que é onde o input começa após o padding-top do container do campo). */
#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-field-with-icon {
  position: relative;
  width: 100%;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-card-brands,
#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-field-icon {
  position: absolute;
  right: 10px;
  top: 22px;
  bottom: 0;
  margin: auto 0;
  pointer-events: none;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-card-brands {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 0;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-card-brands img {
  width: 30px;
  height: auto;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
  filter: none;
  opacity: 1;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-field-icon {
  width: 20px;
  height: 20px;
  opacity: 0.55;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-container .rede-compact-field--number input {
  padding-right: 116px !important;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-container .rede-compact-field--exp input,
#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-container .rede-compact-field--cvc input {
  padding-right: 36px !important;
}

/* Botão finalizar (mesma cor do template moderno) */
#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-submit-button {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  /* Mesmo espaçamento (18px) acima do botão de finalizar em todos os templates. */
  margin-top: 18px;
  background-color: #306FC5 !important;
  color: #fff !important;
  border: 1px solid #2557a3 !important;
  border-radius: 8px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-submit-button:hover {
  background-color: #2557a3 !important;
  color: #fff !important;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-submit-button.blocked,
#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-submit-button:disabled {
  background-color: #cccccc !important;
  color: #666666 !important;
  cursor: not-allowed !important;
  opacity: 0.6;
}

/* Botão finalizar do compacto CLÁSSICO (shortcode) — mesma cara do compacto de
 * Blocos/moderno. O lápis/label já vem do PHP. */
.rede-compact-classic .payment-submit-section {
  /* O espaçamento de 18px fica no próprio botão; o wrapper não adiciona margem. */
  margin-top: 0;
}

.rede-compact-classic .rede-compact-submit-button {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  /* Mesmo espaçamento (18px) acima do botão de finalizar em todos os templates. */
  margin-top: 18px;
  background-color: #306FC5 !important;
  color: #fff !important;
  border: 1px solid #2557a3 !important;
  border-radius: 8px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.rede-compact-classic .rede-compact-submit-button:hover {
  background-color: #2557a3 !important;
  color: #fff !important;
}

.rede-compact-classic .rede-compact-submit-button:disabled {
  background-color: #cccccc !important;
  color: #666666 !important;
  cursor: not-allowed !important;
  opacity: 0.6;
}

#radio-control-wc-payment-method-options-rede_debit__content .rede-compact-description {
  text-align: center;
  margin-top: 12px;
  color: #8e9ba8;
  font-size: 11.2px;
}

@media (max-width: 640px) {
  #radio-control-wc-payment-method-options-rede_debit__content .rede-compact-row {
    column-gap: 8px;
  }

  #radio-control-wc-payment-method-options-rede_debit__content .rede-compact-container .wc-block-components-text-input input,
  #radio-control-wc-payment-method-options-rede_debit__content .rede-compact-container select {
    font-size: 14px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Mantém espaço para a seta nos selects (sobrepõe o padding-right:8px acima). */
  #radio-control-wc-payment-method-options-rede_debit__content .rede-compact-container select {
    padding-right: 32px !important;
  }

  #radio-control-wc-payment-method-options-rede_debit__content .rede-compact-container .rede-compact-field--number input {
    padding-right: 82px !important;
  }

  #radio-control-wc-payment-method-options-rede_debit__content .rede-compact-container .rede-compact-field--exp input,
  #radio-control-wc-payment-method-options-rede_debit__content .rede-compact-container .rede-compact-field--cvc input {
    padding-right: 30px !important;
  }

  #radio-control-wc-payment-method-options-rede_debit__content .rede-compact-card-brands {
    gap: 3px;
    right: 6px;
  }

  #radio-control-wc-payment-method-options-rede_debit__content .rede-compact-card-brands img {
    width: 22px;
  }
}

@media (max-width: 400px) {
  #radio-control-wc-payment-method-options-rede_debit__content .rede-compact-row {
    column-gap: 6px;
  }

  #radio-control-wc-payment-method-options-rede_debit__content .rede-compact-card-brands img {
    width: 18px;
  }

  #radio-control-wc-payment-method-options-rede_debit__content .rede-compact-container .rede-compact-field--number input {
    padding-right: 68px !important;
  }
}