/*
    * Archivo: public/css/custom-stripe.css (o similar)
    * Asegúrate de que este archivo CSS se cargue en tu layout.
    */

    /* Contenedor principal del formulario de Stripe */
    #stripe-payment-form-container {
    /* Asegura que no se exceda un ancho máximo, pero que siempre tenga espacio */
    max-width: 550px; /* Ajusta este valor si necesitas más o menos ancho */
    width: 100%; /* Ocupa todo el ancho disponible hasta el max-width */
    margin-left: auto; /* Centra el contenedor si su padre lo permite */
    margin-right: auto;

    /* Muy importante: Asegura que el contenido que "se sale" no sea cortado */
    overflow: visible !important;
    }

    /* El div donde Stripe monta su iframe */
    #payment-element {
    /* Permite que Stripe maneje su propia altura y ancho interno.
    Añadimos un borde y padding aquí para que el área donde se monta el formulario
    se vea como un campo de entrada con Bootstrap. */
    border: 1px solid #ced4da; /* Color de borde típico de Bootstrap */
    border-radius: 0.25rem; /* Radio de borde típico de Bootstrap */
    padding: 1rem; /* Padding interno para que los campos de Stripe no toquen los bordes */
    background-color: #f8f9fa; /* Fondo ligero similar al 'bg-light' de Bootstrap */
    box-sizing: border-box; /* Asegura que padding y border se incluyan en el ancho/alto */
    min-height: 150px; /* Un mínimo para asegurar que hay espacio vertical al inicio */
    }

    /* Asegura que los contenedores padres no recorten el contenido */
    /* Las siguientes clases son comunes en tu estructura, ajusta si tus nombres son diferentes */
    .card-checkout,
    .payment-method-form {
    overflow: visible !important; /* Sobreescribe cualquier overflow: hidden */
    /* Asegúrate de que no tengan 'max-width' demasiado pequeños o 'flex-shrink' */
    }

    /* Para el iframe y su wrapper interno de Stripe */
    #payment-element > div,
    #payment-element iframe {
    /* Estas reglas son muy agresivas pero pueden ser necesarias para forzar el espacio */
    width: 100% !important; /* Asegura que ocupen todo el ancho del #payment-element */
    max-width: none !important; /* Desactiva cualquier restricción de ancho máximo */
    min-width: 100% !important; /* Asegura un mínimo de 100% */
    overflow: visible !important; /* Evita que el contenido del iframe se corte a sí mismo */
    box-sizing: border-box !important; /* Importante para el cálculo del ancho */
    }

    /* Estilos adicionales para los inputs dentro del Stripe Element (configurados en JS Appearance) */
    /* Asegúrate de que los colores y tamaños de fuente también sean consistentes */