/* Estilos específicos para el contenedor de Izipay - no afectar el resto de la página */
#izipay-container,
#tarjeta-container {
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 320px;
  width: 100% !important;
  overflow: visible;
  position: relative;
}

/* Estilos para iconos SVG */
#izipay-container .icon-inline,
#tarjeta-container .icon-inline {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

#izipay-container h2,
#tarjeta-container h2 {
  font-size: 18px !important;
  color: #333;
}

#izipay-container h3 .icon-inline,
#tarjeta-container h3 .icon-inline {
  width: 1.125em;
  height: 1.125em;
  margin-right: 0.35em;
  vertical-align: -0.15em;
}

#izipay-container .izipay-form-wrapper,
#tarjeta-container .izipay-form-wrapper {
  background-color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
}

#izipay-container .izipay-header h3,
#tarjeta-container .izipay-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#izipay-container .izipay-header p,
#tarjeta-container .izipay-header p {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin: 0 0 1rem;
}

#izipay-container .izipay-footer,
#tarjeta-container .izipay-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}

#izipay-container .izipay-footer p,
#tarjeta-container .izipay-footer p {
  font-size: 0.813rem;
  color: var(--atv-green);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  justify-content: center;
}

/* Formulario embebido de Krypton */
#izipay-container .kr-embedded,
#izipay-container .kr-smart-form,
#tarjeta-container .kr-embedded,
#tarjeta-container .kr-smart-form {
  display: block !important;
  width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#izipay-container .kr-pan,
#izipay-container .kr-expiry,
#izipay-container .kr-security-code,
#tarjeta-container .kr-pan,
#tarjeta-container .kr-expiry,
#tarjeta-container .kr-security-code {
  display: block !important;
  width: 100% !important;
  margin-bottom: 0.75rem !important;
  visibility: visible !important;
}

#izipay-container .kr-payment-button,
#tarjeta-container .kr-payment-button {
  width: 100% !important;
  height: 44px !important;
  border-radius: 6px !important;
  background-color: var(--atv-wine) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: block !important;
  visibility: visible !important;
}

#izipay-container .kr-payment-button:hover,
#tarjeta-container .kr-payment-button:hover {
  background-color: #8f4450 !important;
  transform: translateY(-1px) !important;
}

/* Visibilidad forzada en resumen móvil */
.xpay-summary #izipay-container,
.xpay-summary #tarjeta-container,
.summary-card #izipay-container,
.summary-card #tarjeta-container,
#summary-content #izipay-container,
#summary-content #tarjeta-container {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
}

.xpay-summary #payment-action-container,
.summary-card #payment-action-container,
#summary-content #payment-action-container {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
}

/* Media queries para responsive */
@media (max-width: 900px) {
  #izipay-container,
  #tarjeta-container {
    min-height: 300px !important;
  }
}

@media (max-width: 640px) {
  #izipay-container,
  #tarjeta-container {
    min-height: 280px !important;
  }
  
  #izipay-container .izipay-form-wrapper,
  #tarjeta-container .izipay-form-wrapper {
    padding: 0.75rem;
  }
  
  #izipay-container .izipay-header h3,
  #tarjeta-container .izipay-header h3 {
    font-size: 1rem;
  }
  
  #izipay-container .izipay-header p,
  #tarjeta-container .izipay-header p {
    font-size: 0.813rem;
  }
  
  #izipay-container .kr-pan,
  #izipay-container .kr-expiry,
  #izipay-container .kr-security-code,
  #tarjeta-container .kr-pan,
  #tarjeta-container .kr-expiry,
  #tarjeta-container .kr-security-code {
    margin-bottom: 0.625rem !important;
  }
}