/**
* 2010-2026 ADPixNet | WebMastering
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop or ThirtyBees to newer
* versions in the future. If you wish to customize PrestaShop or ThirtyBees for your
* needs please refer to https://www.prestashop.com or https://www.thirtybees.com for more information.
*
*
* @Module		Web Accessibility Compliance (WCAG)
* @Description	Ensure your store complies with the European Web Accessibility Guidelines (WCAG).
* @Version		1.1.5
* @Copyright	ADPixNet | WebMasterring <https://adpixnet.com/>
* @Addons		PrestaShop - ThirtyBees Developments <https://addons.adpixnet.com/>
* @support		Support Requests <https://admin.adpixnet.com/forms/ticket?styled=1&with_logo=1>
* @license		Valid for 1 website (or project) for each purchase of license International Registered 
*				Trademark & Property of ADPixNet. More information on <https://addons.adpixnet.com/content/1-politique-de-license>
*/

/* Modo daltónico */
.colorblind-mode * {
    filter: contrast(120%) brightness(110%);
}

/* Modo alto contraste */
.high-contrast, .high-contrast * {
    background-color: #000  !important;
    color: #fff !important;
}

.high-contrast #accessibility-menu button.selected {
    border: 2px solid var(--psp-secondary);
}

/* Estilo general del widget de accesibilidad */
#accessibility-widget {
    position: fixed;
    z-index: 9999;
    width: auto;
    height: auto;
    display: block;
    pointer-events: auto;
    overflow: visible;
    text-align: center;
    transform: scale(0.9);
    font-size: 0.9rem;
    bottom: 20px;
    right: 20px;
}

/* Posiciones por defecto (derecha y abajo) */
#accessibility-widget {
    right: 20px;
    bottom: 20px;
}

/* Posiciones horizontales */
#accessibility-widget.pos-left {
    left: 20px;
    right: auto;
}

#accessibility-widget.pos-right {
    right: 20px;
    left: auto;
}

/* Posiciones verticales */
#accessibility-widget.pos-top {
    top: 20px;
    bottom: auto;
}

#accessibility-widget.pos-center {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) scale(0.9);
}

#accessibility-widget.pos-bottom {
    bottom: 20px;
    top: auto;
}

/* Estilo del botón de acceso */
#accessibility-toggle {
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilo del icono dentro del botón */
#accessibility-toggle i {
    font-size: 24px;
    color: var(--psp-primary);
}

/* Estilo del menú de accesibilidad */
#accessibility-menu {
    position: absolute;
    bottom: 70px;
    right: 0;
    background: rgb(255 255 255 / 83%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 15px;
    display: none;
    z-index: 9999;
    width: 220px;
}

/* Cuando el widget está en posición superior */
#accessibility-widget.pos-top #accessibility-menu {
    bottom: auto;
    top: 70px;
}

/* Ajuste del menú según posición horizontal */
#accessibility-widget.pos-left #accessibility-menu {
    right: auto;
    left: 0;
}

/* Estilo de los botones del menú */
#accessibility-menu button {
    display: block;
    margin: 10px auto;
    padding: 8px 10px;
    width: 85%;
    background-color: var(--psp-auxiliar);
    color: var(--psp-text);
    border: none;
    border-radius: 1px;
    cursor: pointer;
    text-align: center;
    font-size: 0.9rem;
}

#accessibility-menu button:hover {
    background: var(--psp-secondary);
}

/* Slider de colores */
#colorblind-menu {
    margin-top: 10px;
    display: none;
    text-align: center;
}

#color-slider {
    width: 90%;
    margin: 10px auto;
    height: 8px;
    border-radius: 5px;
    outline: none;
    background: linear-gradient(to right, red, yellow, green, cyan, blue, magenta, red);
    cursor: pointer;
}

#color-slider::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--psp-text);
    border: 2px solid var(--psp-primary);
    border-radius: 50%;
    cursor: grab;
}

/* Botón de resetear colores */
#reset-colorblind {
    margin-top: 10px;
    padding: 10px 12px;
    border: none;
    border-radius: 5px;
    color: var(--psp-text);
    cursor: pointer;
    width: 90%;
}

/* Ajustes para el menú de cursor */
#toggle-cursor {
    padding: 10px 12px;
    background: var(--psp-primary);
    color: var(--psp-text);
    cursor: pointer;
    width: 90%;
    text-align: center;
    transition: background-color 0.3s ease;
}

#toggle-cursor:hover {
    background: var(--psp-secondary);
}

#cursor-menu {
    display: none;
    text-align: center;
}

#cursor-size-slider,
#cursor-color-slider {
    width: 100%;
    margin: 10px 0;
    height: 8px;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}

#cursor-size-slider::-webkit-slider-thumb,
#cursor-size-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--psp-primary);
    border: 2px solid white;
    border-radius: 50%;
    cursor: grab;
}

#cursor-color-slider {
    height: 40px;
    background: transparent;
}

/* Botón de resetear cursor */
#reset-cursor {
    margin-top: 10px;
    padding: 10px 12px;
    width: 90%;
    border: none;
    border-radius: 5px;
    color: var(--psp-text);
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

/* Ajuste para el menú de lectura */
#speech-menu {
    margin-top: 10px;
    padding: 15px;
    display: none;
    text-align: center;
    position: relative;
}

#volume-slider,
#rate-slider {
    width: 100%;
    margin: 10px 0;
    height: 8px;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(to right, var(--psp-primary), var(--psp-secondary));
}

#toggle-speech {
    padding: 10px 12px;
    background: var(--psp-primary);
    color: var(--psp-text);
    cursor: pointer;
    width: 90%;
    text-align: center;
    transition: background-color 0.3s ease;
}

#toggle-speech:hover {
    background: var(--psp-secondary);
}

#voice-select {
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
}

/* Switch de lector de pantalla */
#speech-switch {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#speech-switch label {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
}

#speech-switch input[type="checkbox"] {
    width: 50px;
    height: 25px;
    appearance: none;
    background-color: #ddd;
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-bottom: 10px;
}

#speech-switch input[type="checkbox"]:checked {
    background-color: var(--psp-primary);
}

#speech-switch input[type="checkbox"]:before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 21px;
    height: 21px;
    background-color: white;
    border-radius: 50%;
    transition: left 0.3s ease;
}

#speech-switch input[type="checkbox"]:checked:before {
    left: 27px;
}

/* Ajuste de los botones generales */
#accessibility-menu button,
#toggle-cursor,
#reset-cursor,
#reset-colorblind,
#toggle-speech {
    font-size: 0.9rem;
    padding: 8px 10px;
    width: 85%;
}

/* Estilo para la clase "selected" */
#accessibility-menu button.selected {
    background-color: var(--psp-secondary);
    color: var(--psp-text);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

#accessibility-menu button.selected:hover {
    background-color: var(--psp-secondary);
}

/* Ajuste del contenedor de fuente */
#accessibility-menu .font-slider-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Asegura distribución equilibrada */
    gap: 5px;
    flex-wrap: nowrap; /* Evita que los elementos se vayan a otra línea */
}

/* Ajuste del slider */
#font-slider {
    flex-grow: 1; 
    min-width: 50px; /* Evita que se encoja demasiado */
    max-width: 120px; /* Controla el crecimiento */
}

#accessibility-menu #decrease-font,
#accessibility-menu #increase-font
{
    background-color: var(--psp-secondary);
}

/* Ajuste de los botones */
#accessibility-menu .font-slider-container button {
    flex-shrink: 0; /* Evita que los botones se reduzcan */
    width: 30px; /* Tamaño fijo para evitar desbordes */
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

#accessibility-menu .reset-btn {
    background-color: var(--psp-secondary);
}

.cursor-color-buttons {
    display: flex;
    justify-content: center;
    gap: 10px; /* Espacio entre botones */
    margin: 10px 0;
}

.cursor-color-buttons button {
    flex: 1; /* Hace que los botones ocupen el espacio disponible */
    min-width: 0; /* Permite que los botones se ajusten correctamente */
    padding: 8px 5px; /* Ajusta el padding para pantallas pequeñas */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
}

.cursor-color-btn {
    font-size: 0.8rem; /* Reduce ligeramente el tamaño de fuente */
    padding: 5px 8px; /* Padding más ajustado */
}

/* Cursor normal para todo el body */
.cursor-custom-white {
    cursor: url('/modules/pspaccesibility/views/img/psp_accesibility_cursor_white.cur'), auto !important;
}

.cursor-custom-black {
    cursor: url('/modules/pspaccesibility/views/img/psp_accesibility_cursor_black.cur'), auto !important;
}

/* Cursor especial para elementos interactivos */
.cursor-custom-white a,
.cursor-custom-white button,
.cursor-custom-white input[type="button"],
.cursor-custom-white input[type="submit"],
.cursor-custom-white [role="button"],
.cursor-custom-white [onclick],
.cursor-custom-white [tabindex="0"],
.cursor-custom-white label[for] {
    cursor: url('/modules/pspaccesibility/views/img/psp_accesibility_hand_white.cur'), pointer !important;
}

.cursor-custom-black a,
.cursor-custom-black button,
.cursor-custom-black input[type="button"],
.cursor-custom-black input[type="submit"],
.cursor-custom-black [role="button"],
.cursor-custom-black [onclick],
.cursor-custom-black [tabindex="0"],
.cursor-custom-black label[for] {
    cursor: url('/modules/pspaccesibility/views/img/psp_accesibility_hand_black.cur'), pointer !important;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    #accessibility-widget {
        margin: 10px;
    }
    
    /* Posición izquierda en móvil */
    #accessibility-widget.pos-left {
        left: 10px;
        right: auto;
    }
    
    /* Posición derecha en móvil */
    #accessibility-widget.pos-right {
        right: 10px;
        left: auto;
    }
    
    /* Ajuste del menú para posición izquierda */
    #accessibility-widget.pos-left #accessibility-menu {
        left: 0;
        right: auto;
        width: calc(100vw - 20px);
    }
    
    /* Ajuste del menú para posición derecha */
    #accessibility-widget.pos-right #accessibility-menu {
        right: 0;
        left: auto;
        width: calc(100vw - 20px);
    }
}