/* ============================================================
   OCULTAR BLOQUE ORIGINAL FIRSTDATA (SIN ROMPER JS)
============================================================ */

/*
.woocommerce-checkout
.wc_payment_methods
.payment_method_wanderlust_firstdata_gateway{
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
*/



/* ============================================================
   PAYMENT — CARD PRINCIPAL
   Contenedor del método de pago con tarjeta
============================================================ */
.loq-pay-card {
  background: var(--loq-surface);
  border-radius: var(--loq-radius-card);
  box-shadow: var(--loq-shadow-card);
  padding: var(--loq-space-3);          /* 24px */
  margin: var(--loq-space-3) 0;         /* separación vertical */
}


/* ============================================================
   HEADER — TÍTULO + SUBTÍTULO
============================================================ */

/* Contenedor del header */
.loq-pay-card__header {
  margin-bottom: var(--loq-space-3);    /* aire antes de cuotas */
}

/* Título principal */
.loq-pay-card__title {
  font-size: var(--loq-text-strong-size); /* 20px */
  font-weight: var(--loq-font-semibold);  /* 600 */
  color: var(--loq-text);
  margin: 0;
  line-height: 1.2;
}

/* Subtítulo */
.loq-pay-card__subtitle {
  font-size: var(--loq-text-base-size);   /* 14px */
  font-weight: var(--loq-font-regular);   /* 400 */
  color: var(--loq-text-muted);
  margin: 4px 0 0 0;
}


/* ============================================================
   GRID DE CUOTAS
   Lista compacta de opciones
============================================================ */
.loq-installments-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px; /* compacto, evita scroll innecesario */
}


/* ============================================================
   MINI CARD — BASE
   Opción de cuota (estado neutro)
============================================================ */
.loq-installment-card{
  appearance: none;
  -webkit-appearance: none;
   align-items: flex-start; /* evita centrados raros */

  width: 100%;
  text-align: left;

  background: var(--loq-surface);
  border: 1px solid var(--loq-border-soft);
  border-radius: var(--loq-radius-card);

  padding: 12px;                /* más denso que 16px */
  box-shadow: none;

  display: flex;
  flex-direction: column;
  gap: 4px;                     /* reduce altura total */

  cursor: pointer;
  transition:
    border-color var(--loq-transition-base),
    box-shadow var(--loq-transition-base),
    transform .12s ease;
}


/* ============================================================
   MINI CARD — TEXTOS (VERSIÓN COMPACTA FINAL)
   Estructura:
   - Línea principal: cuotas + monto
   - Línea secundaria: sin interés
   - Línea terciaria: total
============================================================ */

/* Línea principal: "6 cuotas de $1.172.640" */
.loq-installment-main{
  font-size: var(--loq-text-base-size);   /* 14px */
  font-weight: var(--loq-font-semibold);    /* 600 */
  color: var(--loq-text);
  line-height: 1.1;
}

/* Línea "Sin interés" */
.loq-installment-interest{
  font-size: var(--loq-text-muted-size);    /* 12px */
  font-weight: var(--loq-font-medium);      /* 500 */
  color: var(--loq-success);                /* verde confianza */
  line-height: 1.1;
}

/* Línea total */
.loq-installment-total{
  font-size: var(--loq-text-muted-size);    /* 12px */
  color: var(--loq-text-muted);
  line-height: 1.1;
}


/* ============================================================
   MINI CARD — HOVER
   Feedback suave (no selección)
============================================================ */
@media (hover:hover){
  .loq-installment-card:hover{
    border-color: rgba(0,0,0,0.18);
  }
}


/* ============================================================
   MINI CARD — SELECCIONADA
   Única señal fuerte de decisión
============================================================ */
.loq-installment-card.is-active{
  border-color: var(--loq-accent);
  box-shadow: 0 0 0 2px rgba(90,56,229,0.18);
}


/* ============================================================
   MINI CARD — ACCESIBILIDAD
============================================================ */
.loq-installment-card:focus-visible{
  outline: 3px solid rgba(90,56,229,0.25);
  outline-offset: 2px;
}


/* ============================================================
   CARD FIELDS — FIRSTDATA (UX FINAL DEFINITIVO)
   - Mobile + Desktop
   - Vencimiento + CVV SIEMPRE en la misma fila
   - Override de clear + inline styles Woo
============================================================ */

/* Contenedor visual del bloque */
.loq-payment-visual-card-fields{
  margin-top: var(--loq-space-3);
}

/* ============================================================
   FIELDSET REAL FIRSTDATA
============================================================ */
#wc-wanderlust_firstdata_gateway-cc-form{
  display: flex;
  flex-wrap: wrap;
}

/* Woo inyecta este clear y rompe el layout */
#wc-wanderlust_firstdata_gateway-cc-form .clear{
  display: none !important;
}

/* ============================================================
   FILAS BASE
============================================================ */
#wc-wanderlust_firstdata_gateway-cc-form .form-row{
  width: 100%;
  margin-bottom: var(--loq-space-2);
  box-sizing: border-box;
}

/* Número de tarjeta ocupa toda la fila */
#wc-wanderlust_firstdata_gateway-cc-form .form-row-wide{
  width: 100%;
}

/* ============================================================
   VENCIMIENTO + CVV — SIEMPRE EN FILA
============================================================ */
#wc-wanderlust_firstdata_gateway-cc-form .form-row-first,
#wc-wanderlust_firstdata_gateway-cc-form .form-row-last{
  width: 50%;
  box-sizing: border-box;
}

#wc-wanderlust_firstdata_gateway-cc-form .form-row-first{
  padding-right: 8px;
}

#wc-wanderlust_firstdata_gateway-cc-form .form-row-last{
  padding-left: 8px;
}

/* ============================================================
   LABELS
============================================================ */
#wc-wanderlust_firstdata_gateway-cc-form label{
  display: block;
  font-size: var(--loq-text-muted-size); /* 12px */
  font-weight: var(--loq-font-medium);
  color: var(--loq-text-muted);
  margin-bottom: 4px;
}

/* ============================================================
   INPUTS
============================================================ */
#wc-wanderlust_firstdata_gateway-cc-form input.input-text{
  width: 100%;
  padding: 12px;
  font-size: var(--loq-text-base-size); /* 14px */
  border-radius: 12px;
  border: 1px solid var(--loq-border-soft);
  box-sizing: border-box;
}

/* Override CRÍTICO: CVV trae width inline */
#wc-wanderlust_firstdata_gateway-cc-form
.wc-credit-card-form-card-cvc{
  width: 100% !important;
}

/* ============================================================
   TÍTULO DEL BLOQUE
============================================================ */
.loq-card-fields-title{
  font-size: var(--loq-text-base-size); /* 14px */
  font-weight: var(--loq-font-medium);
  color: var(--loq-text);
  margin-bottom: 8px;
}

/* =========================================================
   LoQ — FirstData: "Seleccionar cuotas" como mini-cards
   SIN espejos (radios reales siguen siendo source of truth)
========================================================= */



/* Grid final (lo crea el JS con esta clase) */
.woocommerce-checkout .loq-installments-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 8px;
}

/* Cada opción queda como card */
.woocommerce-checkout .loq-installment-card{
  background: var(--loq-surface);
  border: 1px solid var(--loq-border-soft);
  border-radius: var(--loq-radius-card);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition:
    border-color var(--loq-transition-base),
    box-shadow var(--loq-transition-base),
    transform .12s ease;
}

/* Hover */
@media (hover:hover){
  .woocommerce-checkout .loq-installment-card:hover{
    border-color: rgba(0,0,0,0.18);
  }
}

/* Seleccionada */
.woocommerce-checkout .loq-installment-card.is-active{
  border-color: var(--loq-accent);
  box-shadow: 0 0 0 2px rgba(90,56,229,0.18);
}

/* Ocultamos radio nativo pero sigue funcionando */
.woocommerce-checkout .loq-installment-card input[type="radio"]{
  position: absolute !important;
  left: -9999px !important;
}

/* Textos */
.woocommerce-checkout .loq-installment-main{
  font-size: var(--loq-text-base-size);
  font-weight: var(--loq-font-semibold);
  color: var(--loq-text);
  line-height: 1.1;
}

.woocommerce-checkout .loq-installment-interest{
  font-size: var(--loq-text-muted-size);
  font-weight: var(--loq-font-medium);
  color: var(--loq-success);
  line-height: 1.1;
}

.woocommerce-checkout .loq-installment-total{
  font-size: var(--loq-text-muted-size);
  color: var(--loq-text-muted);
  line-height: 1.1;
}

/* (opcional) ocultar el texto "Seleccionar Cuotas" si molesta */
.woocommerce-checkout .loq-hide-installments-title{
  display: none !important;
}