/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}


/* Cambia el color predeterminado de los enlaces */
a {
    color: #69be28; /* Color verde */
    text-decoration: none; /* Opcional: para eliminar el subrayado */
}

    /* Cambia el color de los enlaces al pasar el cursor por encima */
    a:hover,
    a:focus {
        color: #218838; /* Un tono más oscuro de verde para hover y focus */
        text-decoration: underline; /* Opcional: para agregar subrayado al hover */
    }

    /* Cambia el color de los enlaces visitados */
    a:visited {
        color: #69be28; /* Mantener el mismo color verde para enlaces visitados */
    }

    /* Cambia el color de los enlaces activos */
    a:active {
        color: #1e7e34; /* Un tono más oscuro de verde para enlaces activos */
    }

.h3, h3, .h5, h5, .h6, h6 {
    font-size: 22px;
    color: white;
}

.kconnect-titles {
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}

#postal-code::placeholder {
    color: #69be28;
    opacity: 1; /* Asegura que el color se muestre con la opacidad deseada */
}

/* Cambiar el color del texto de las opciones en los campos select a verde */
#modelosGenericos-dropdown option,
#versiones-dropdown option {
    color: #69be28;
}


/* Cambiar el color del texto del elemento seleccionado en los campos select a verde */
#modelosGenericos-dropdown,
#versiones-dropdown {
    color: #69be28;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size:14px;
}

    /* Forcing the selected option to also use the custom color */
    #modelosGenericos-dropdown option:checked,
    #versiones-dropdown option:checked {
        color: #69be28;
    }

.container-fluid {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    padding-top: 90px;
    overflow-y: auto;
}

.row {
    margin-right:0px;
}

.main-content {
    padding-top: 100px
}

@media (min-width: 768px) {
    .filter-column {
        /*padding: 20px;*/
        padding-right: 0px;
        background: url('../img/kawabackground.jpg') no-repeat center center; /* Background Image */
        background-size: cover;
        background-position: center;
    }

    .filter-container {
        background: rgba(0, 0, 0, 0.7);
        padding: 30px;
        /*border-radius: 20px;*/
        padding-top: 10px;
    }
}

@media (max-width: 768px) {
    .filter-column {
        /*padding: 20px;*/
        padding-right: 0px;
        background: rgba(0, 0, 0, 0.7);
    }

    .filter-container {
        background: rgba(0, 0, 0, 0.7);
        padding-right: 10px;
    }

    .accordion {
        background-color: transparent;
        color: #444;
        cursor: pointer;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
    }

    .accordion-button:after {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
        margin-left:10px;
    }
}

    .form-box {
        padding: 40px;
        border-radius: 20px;
        margin-top: 10%;
    }


@media (min-width: 768px) {
    /* Style the buttons that are used to open and close the accordion panel */
    .accordion {
        background-color: transparent;
        color: #444;
        cursor: pointer;
        padding-top: 18px;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
    }

    .accordion-button:after {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
    }
}

    .custom-accordion-body {
        padding-top: 1rem;
    }

    .custom-search-width {
        max-width: 85%;
        width: 100%;
    }

    .accordion-item {
        background: rgba(0, 0, 0, 0);
        color: white; /* Texto blanco para contraste */
    }

    .accordion-button {
        background: rgba(0, 0, 0, 0.5); /* Fondo negro semi transparente para el botón */
        color: white; /* Texto blanco para contraste */
        border: none; /* Elimina el borde para una apariencia más limpia */
        padding: 1.25rem;
        /*transition: background-color 0.3s ease, color 0.3s ease;*/
    }

        .accordion-button:not(.collapsed) {
            background: rgba(0, 0, 0, 0.7); /* Fondo más oscuro cuando el acordeón está expandido */
            color: white;
        }


    /* Efecto de transición en la altura del contenido del accordion */
    .accordion-collapse {
        /*transition: height 0.35s ease;*/
    }

    /* Opcional: Estilo adicional para mejorar la visibilidad y apariencia */
    .accordion-header-search {
        border-bottom: 2px solid #69be28;
    }

    /* Mejora la animación de expansión/colapso */
    .accordion-body {
        /*transition: max-height 0.35s ease;*/
        overflow: hidden;
        border: 1px solid black;
    }

    /* Animación personalizada para la entrada y salida del contenido del accordion */
    .accordion-collapse.collapsing {
        /*transition: height 0.35s ease-out;*/
    }

    .accordion-collapse.show {
        /*transition: height 0.35s ease-in;*/
    }

    /* Cambiar el color del borde cuando el acordeón está enfocado (focus) */
    .accordion-button:focus {
        border-color: #69be28; /* Cambiar el color del borde a verde */
        box-shadow: 0 0 0 0.25rem rgba(0, 128, 0, 0.25); /* Añadir sombra verde */
    }



    /* ********************** */
    /* Estilo específico para los botones del acordeón de concesionarios */
    /* ********************** */


    .concesionario-accordion-button {
        background-color: white;
        color: black;
        border: 1px solid white;
        border-top: 1px solid #69be28;
        padding-left: 0 !important;
        box-shadow: none !important;
    }


        .concesionario-accordion-button:not(.collapsed) {
            background-color: white;
            color: black;
            border: 1px solid white;
            border-top: 1px solid #69be28 !important; /* Borde superior verde cuando se despliega */
            padding-left: 0;
        }

        .concesionario-accordion-button:focus {
            outline: none;
            box-shadow: none;
            border-color: transparent; /* Opcional, para asegurar que no haya borde */
        }

        /* Cambiar el color de la flecha del acordeón a negro */
        .concesionario-accordion-button::after {
            filter: invert(1); /* Cambia el color de blanco a negro */
        }

        /* Opcional: Puedes añadir estilos de hover o focus si es necesario */
        .concesionario-accordion-button:hover,
        .concesionario-accordion-button:focus {
            color: #69be28;
        }

    /* Estilo específico para el cuerpo del acordeón de concesionarios */
    .concesionario-accordion-body {
        color: black !important;
        padding-left: 0 !important;
        border: 1px solid white; /* Bordes blancos */
        box-shadow: none !important; /* Elimina cualquier sombra */
        padding-top: 0px;
    }


    /* Borde verde entre accordion items cuando están colapsados */
    .concesionario-accordion-item {
        border-top: 1px solid #69be28; /* Borde verde entre los headers de items */
    }

        /* Borde verde debajo del body cuando el acordeón está expandido */
        .concesionario-accordion-item .accordion-collapse.show {
            border-bottom: 1px solid #69be28; /* Añade borde verde debajo del body */
        }


        /* Para el primer item, quitar el borde superior */
        .concesionario-accordion-item:first-of-type {
            border-top: none;
        }


    .concesionario-content-fontstyle {
        color: black;
        font-size: 12px;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        font-style: normal;
        padding-bottom: 20px;
    }

    .concesionario-content-nopadding-fontstyle {
        padding-bottom: 5px;
    }

    .concesionario-content-nopadding-bold-fontstyle {
        padding-bottom: 5px;
        font-weight: 500;
        font-size: 14px;
    }



    /* Color verde para el texto del botón cuando el acordeón está desplegado */
    .color-kawagreen {
        color: #69be28; /* Cambia el texto a verde */
    }





    .map-column {
        padding: 0;
    }

    .map-container {
        height: 100%;
        width: 100%;
    }

    #map {
        width: 100%;
        height: 100%;
    }


    .numConcesionarios {
        color: #69be28;
    }

    .concesionarios-list-container {
        flex-grow: 1; /* Toma una parte del espacio comparado con el mapa */
        background-color: white;
        padding-bottom: 10px;
        overflow-y: auto; /* Para que sea desplazable si hay muchos concesionarios */
        padding-left: 30px;
        padding-right: 30px;
    }

    .concesionarios-list-container-mobile {
        flex-grow: 1; /* Toma una parte del espacio comparado con el mapa */
        background-color: white;
        padding-bottom: 10px;
        padding-left: 30px;
        padding-right: 30px;
    }


    /* estilo para el spinner de carga de concesionarios */
    .concesionarios-loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Fondo gris semitransparente */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10; /* Asegura que esté por encima del contenido */
    }

        .concesionarios-loading-overlay .spinner-border {
            width: 3rem;
            height: 3rem;
            color: #69be28; /* Color del spinner */
        }

    .mt-3 {
        margin-top: 0px !important;
    }

    /* Estilos para la lista */
    #concesionarios-list {
        list-style-type: none; /* Sin estilo de lista predeterminado */
        padding: 0;
        margin: 0;
    }

        /* Estilos para los elementos de la lista */
        #concesionarios-list li {
            padding: 8px;
            border-top: 1px solid #69be28;
        }

            /* Efecto hover para los elementos de la lista */
            #concesionarios-list li:hover {
                background-color: #f0f0f0;
                cursor: pointer;
            }

    .concesionario-name {
        font-weight: bold;
    }

        /* Estilo para el nombre del concesionario activo */
        .concesionario-name.active {
            /*color: #69be28;*/
        }


    /* Media query para reordenar columnas en dispositivos móviles */
    @media (max-width: 768px) {
        .map-column {
            height: 40vh; /* Ajusta la altura del mapa */
        }
    }

    /* Estilo para los resultados del API Autocomplete */
    .pac-container {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        font-family: "Poppins", sans-serif;
        font-size: 12px;
    }

    /* Estilo para cada elemento de la lista */
    .pac-item {
        padding: 10px;
        font-size: 16px;
        cursor: pointer;
    }

    /* Estilo para el icono de cada elemento */
    .pac-icon {
        display: none;
    }

    /* Estilo para el texto principal de cada elemento */
    .pac-item .pac-item-query {
        font-weight: bold;
        font-size: 16px;
    }

    .pac-matched {
        font-weight: bold;
        color: #69be28;
    }

    .carousel {
        padding-top: 12px;
    }

    .carousel-inner {
        position: relative;
    }

    .carousel-control-prev,
    .carousel-control-next {
        position: absolute;
        top: 80%;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        background: transparent;
        z-index: 2;
        color: #69be28;
        padding-bottom: 50px;
    }


    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background: none;
        color: green;
        font-size: 1.5rem;
        padding-top: 0px;
        /*padding-bottom: 50px;*/
    }

        .carousel-control-prev-icon::before {
            content: '\f053'; /* Font Awesome icon code for left arrow */
            font-family: 'Font Awesome 5 Free';
            font-weight: 600;
        }

        .carousel-control-next-icon::before {
            content: '\f054'; /* Font Awesome icon code for right arrow */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
        }


    /* Estilos personalizados para el botón verde */
    .btn-outline-green {
        color: #69be28; /* Color del texto verde */
        border-color: #69be28; /* Color del borde verde */
    }

        .btn-outline-green:hover {
            background-color: #69be28; /* Fondo verde al pasar el cursor */
            color: white; /* Texto blanco al pasar el cursor */
        }

        /* Estilos para el estado deshabilitado */
        .btn-outline-green:disabled {
            color: #6c757d; /* Color del texto gris */
            border-color: #6c757d; /* Color del borde gris */
            background-color: transparent; /* Fondo transparente */
        }

        .btn-outline-green:focus,
        .btn-outline-green.focus {
            box-shadow: 0 0 0 0.25rem rgba(105, 190, 40, 0.5); /* Sombra verde */
        }

#cargar-mas-btn {
    width: 100%;
    text-align: center;
    border: none;
    background-color: transparent;
    color: #69be28;
}

    #cargar-mas-btn:focus,
    #cargar-mas-btn:active {
        outline: none; /* Elimina el borde al estar enfocado */
        box-shadow: none; /* Evita cualquier sombra */
        border: none; /* Sin bordes adicionales */
    }

    #cargar-mas-btn:hover {
        color: #218838; /* Verde más oscuro */
    }


    #cargar-mas-btn span {
        font-size: 1.2rem;
        transition: transform 0.2s ease;
        vertical-align: middle;
        position: relative;
    }

    #cargar-mas-btn:hover span {
        transform: translateY(3px);
    }

    /* Estilos para hacer el botón más pequeño en dispositivos móviles */
    @media (max-width: 768px) {
        .btn-outline-green {
            padding: 0.25rem 0.5rem; /* Reducir el padding */
            font-size: 0.9rem; /* Reducir el tamaño de la fuente */
        }
    }

    /* Modal styles */
    /* Centrar y ajustar la altura del modal */
    .modal-dialog {
        display: flex;
        align-items: center;
        min-height: calc(100% - 3.5rem); /* Altura mínima del modal */
        max-width: 40vw; /* Ajustar el ancho máximo del modal */
    }


    /* Estilos específicos para dispositivos móviles */
    @media (max-width: 768px) {
        .modal-dialog {
            max-width: 95vw; /* Ajustar el ancho máximo del modal en dispositivos móviles */
        }

        .modal .form-check-input {
            margin-right: 0.1rem;
        }

        .legalCheck {
            margin-top: 0.1rem;
        }

        .form-floating .form-control:focus,
        .form-floating .form-control:hover,
        .form-check-input:focus {
            box-shadow: none; /* Desactivar la sombra en dispositivos móviles */
        }

        .form-floating > .form-control, .form-floating > .form-select {
            height: calc(3rem + 1px);
            font-size: 0.775rem;
        }

        .form-floating {
            margin-top: 0.7rem;
        }

            .form-floating > label {
                padding: .75rem .75rem;
            }
    }


    .modal-content {
        margin: auto;
        max-height: 90vh; /* Altura máxima del modal para que no sea demasiado alto */
        overflow-y: auto; /* Permitir el desplazamiento si el contenido es demasiado grande */
    }

    .modal-header {
        background-color: black;
        border-bottom: 4px solid #69be28;
    }

    /* Cambiar el color del botón de cierre a blanco */
    .modal .btn-close {
        filter: invert(1);
        background-color: white;
    }

        .modal .btn-close:hover,
        .modal .btn-close:focus {
            filter: invert(1);
            background-color: white;
        }

    /* Cambiar el color de borde en hover y focus para los campos de texto */
    .modal input[type="text"]:hover,
    .modal input[type="text"]:focus,
    .input-group input[type="text"]:hover,
    .input-group input[type="text"]:focus,
    .modal input[type="number"]:hover,
    .modal input[type="number"]:focus,
    .modal input[type="email"]:hover,
    .modal input[type="email"]:focus,
    .modal textarea:hover,
    .modal textarea:focus,
    .accordion-collapse select:hover,
    .accordion-collapse select:focus,
    .modal select:hover,
    .modal select:focus {
        border-color: #69be28; /* Verde */
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); /* Sombra verde */
    }

/* Estilo para desactivar el azul predeterminado */
.modal .form-check-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    border: 0.1em solid #69be28;
    outline: none;
    cursor: pointer;
    position: relative;
    margin-right: 0.2em;
    bottom: 2px;
}

    /* Cambiar el color de los radio buttons seleccionados */
    .modal .form-check-input:checked {
        background-color: #69be28 !important; /* Fondo verde */
        border-color: #69be28 !important; /* Borde verde */
    }

    /* Cambiar el color de hover para los labels de los radio buttons */
    .modal .form-check-input + .form-check-label:hover::before {
        border-color: #69be28 !important; /* Borde verde en hover */
    }

    /* Cambiar el color del texto y el fondo del label al seleccionar el radio button */
    .modal .form-check-input:checked + .form-check-label {
        color: #69be28 !important; /* Texto verde */
    }

    /* Cambiar el color de fondo del radio button en hover */
    .modal .form-check-input:hover {
        border-color: #69be28 !important; /* Borde verde en hover */
    }

    /* Estilo para la apariencia del radio button cuando está seleccionado */
    .modal .form-check-input:checked::before {
        display: block;
        width: 75%;
        height: 75%;
        background-color: #69be28;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* Cambiar el color de la sombra al tener el foco */
    .modal .form-check-input:focus {
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important; /* Sombra verde */
    }

    .form-switch .form-check-input:checked {
        background-position: right center;
        background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e);
    }

    .form-switch .form-check-input {
        width: 2em;
        margin-left: -2.5em;
        background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e);
        background-position: left center;
        border-radius: 2em;
        transition: background-position .15s ease-in-out;
    }

    .form-check-inline {
        margin-right: 0.5rem; /* Reducir el margen derecho */
    }

    /* Ajustar los radio buttons para dispositivos móviles */
    @media (max-width: 768px) {
        .form-check-inline {
            margin-right: 0.2rem; /* Reducir el margen derecho */
        }

        .form-check-input {
            margin-left: 0.25rem; /* Reducir el margen izquierdo */
            margin-right: 0.25rem; /* Reducir el margen derecho */
        }

        .form-check-label {
            margin-right: 0rem; /* Reducir el margen derecho de las etiquetas */
        }
    }

    /* CSS personalizado para el fondo semi transparente */
    .modal-backdrop {
        opacity: 0.5; /* Ajusta el nivel de opacidad según lo desees */
        background-color: #000; /* Color de fondo para el semi transparente */
    }

    /* Padding para el label de los camops usando floating */
    .form-floating > label {
        padding-left: 1.25rem;
    }

    /* Ocultar las flechas de los campos de tipo number */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }

    .invalid-feedback {
        display: none;
    }

    .is-invalid ~ .invalid-feedback {
        display: block;
    }

    .was-validated .form-check-input:invalid ~ .invalid-feedback {
        display: block;
    }


    .form-control.is-invalid {
        border-color: #dc3545; /* Rojo */
    }

    .form-control.is-valid {
        border-color: #28a745; /* Verde */
    }

    .is-invalid:focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }

    .is-valid:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    }

    .hide-elements {
        display: none;
    }

    /* Oculta el botón de cierre de la infWindow ya que introduce un padding y tamaño de la popup demasiado grande */
    .gm-style-iw-chr button {
        display: none !important; /* Oculta el botón de cierre */
    }

.gdprText {
    font-size: 12px;
}