/* MODAL COOKIES - ESTILOS GENERALES */
#modal-cookies {
    .modal-content{
      max-width: 55rem;
      max-height: calc(100vh - 3rem);
      width: 95%;
    }

    legend.cmp-form-options__legend {
        color: #8B8D8E;
    }

    /* Etiquetas de campo */
    label.cmp-form-options__field-label {
        display: flex;
        align-items: center;
        gap: 0.3rem;
    }

    /* Descripción de campos */
    span.cmp-form-options__field-description {
        color: #007934;
    }

    /* Checkbox */
    input.cmp-form-options__field.cmp-form-options__field--checkbox {
        width: 20px;
        height: 20px;
        accent-color: #007934;
    }

    /* Botón de configuración */
    #cookie-aceptar-configuracion {
        margin-top: 20px;
    }
}

/* MODAL COOKIES - MODO OSCURO */   
body.dark-mode #modal-cookies {
    
    span.cmp-form-options__field-description {
        color: #00ff6e;
    }

    input.cmp-form-options__field.cmp-form-options__field--checkbox {
        accent-color: #00ff6e;
    }

    legend.cmp-form-options__legend {
        color: #ffffff;
    }
}

  .cmp-cookies {
    background-color: #3D3D3D80;
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;

    &.show {
        display: block;
    }


    .cookies-component {
        background-color: #ffffff;
        border-radius: 30px;
        padding: 1rem;
        position: fixed;
        min-height: 164px;
        max-height: calc(100vh - 5rem);
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        max-width: 95rem;
        width: 90%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        overflow-y: auto;

        /* MEDIA QUERY para centrarlo*/
        @media (max-width: 450px) {
            bottom: 3rem;
        }

        .cookies-text {
            margin-bottom: 12px;
            text-wrap: balanced;
            /* color: #707070; */
            font-size: 1rem;
        }

        .cookies-buttons {
            margin: auto;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 1rem;
            @media (max-width: 550px) {
              gap: 0.5rem;
            }

            button {
                cursor: pointer;
                text-align: center;
                min-width: 12.5rem;
                padding: 8px 20px;
                border-radius: 20px;
            }

            .button-accept {
                border: 2px solid #36A21D;
                background-color: #36A21D;
                color: #ffffff;

                &:hover {
                    background-color: #fff;
                    color: #36A21D;
                }

                &.secondary {
                    border: 2px solid #36A21D;
                    background-color: #ffffff;
                    color: #36A21D;

                    &:hover {
                        background-color: #36A21D;
                        color: #ffffff;
                    }
                }
            }
        }
    }
}