/**
 * Estilos del checkout Izipay.
 * Se carga solo en la pantalla de checkout, junto al tema Neón de Krypton.
 */

.izipay-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}

.izipay-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.izipay-input::placeholder {
  color: #94a3b8;
}

.izipay-input:focus {
  border-color: #0b70c9;
  box-shadow: 0 0 0 3px rgba(11, 112, 201, 0.15);
}

.izipay-input:invalid:not(:placeholder-shown) {
  border-color: #f87171;
}

textarea.izipay-input {
  resize: vertical;
  min-height: 90px;
}

/* Spinner del botón de pago */
.izipay-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: izipay-spin 0.7s linear infinite;
}

.izipay-spinner.hidden {
  display: none;
}

@keyframes izipay-spin {
  to {
    transform: rotate(360deg);
  }
}

/* El pop-in de Krypton debe quedar por encima del header sticky del tema. */
.kr-popin-modal-wrapper,
.kr-popin-modal-backdrop,
#krPopinModalWrapper {
  z-index: 99999 !important;
}

/* El contenedor del smart form en modo pop-in no ocupa espacio hasta abrirse. */
.izipay-checkout > .kr-smart-form[kr-popin] {
  margin: 0;
}