/* Ajustes responsivos específicos para la sección 'Buscar por datos' */
@media (max-width: 768px) {

    /* Ajustes para el acordeón de datos personales */
    #datos-accordion-content .form-row {
        flex-direction: column;
        margin-bottom: 0;
    }

    #datos-accordion-content .form-group {
        width: 100%;
        margin-bottom: 15px;
    }

    #datos-accordion-content input {
        width: 100%;
        box-sizing: border-box;
    }

    /* Asegurarse de que el selector de fecha se vea correctamente */
    #datos-accordion-content input[type="date"] {
        height: 40px;
        padding: 8px 12px;
    }

    /* Ajustes para la sección de pago en línea */
    #online-payment-details .form-row {
        flex-direction: row;
        flex-wrap: wrap;
    }

    #online-payment-details .form-row .form-group {
        flex: 1 1 45%;
        min-width: 140px;
    }

    /* Ajustes específicos para los campos de fecha y CVV */
    #expiry-date,
    #cvv {
        width: 100%;
        box-sizing: border-box;
    }

    /* Ajustes para la sección de verificar pago por referencia */
    .search-form-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-form-header .payment-info {
        margin: 10px 0;
        width: 100%;
    }

    .search-form-header .btn-show {
        align-self: flex-end;
        margin-top: 10px;
    }

    .black-form .form-row {
        flex-direction: column;
    }

    .black-form .form-group {
        width: 100%;
        margin-bottom: 15px;
    }

    .black-form input {
        width: 100%;
        box-sizing: border-box;
    }

    .black-form .btn-search {
        width: 100%;
        margin-top: 10px;
    }

    /* Ajustes específicos para el botón de búsqueda en la sección de verificar pago */
    #verificar-content .btn-search {
        align-self: center;
        width: 100%;
        max-width: none;
        margin-top: 10px;
    }


}