.zscustom-section-91 .zsbox-spacing:hover {
    background: #000000;
}
#google_translate_element {
    float: right;
    margin: 10px;
    z-index: 1000;
    position: absolute;
    right: 10px;
    top: 0;
}
.theme-scoialicon-inner-parent {
    margin-right: 160px;
}
/* Color base del enlace */
.zpdark-section a, 
.zpdark-section a:visited {
    color: #ffffff !important;
    text-decoration: none; /* Opcional: quita el subrayado inicial */
}

/* Estado al pasar el mouse (Hover) */
.zpdark-section a:hover {
    color: #ffffff !important;
    text-decoration: underline; /* Recomendado para accesibilidad */
    opacity: 0.8; /* Opcional: un ligero cambio visual al pasar el mouse */
}

/* Estado al hacer clic (Active) */
.zpdark-section a:active {
    color: #ffffff !important;
}

/* Estado cuando se navega con el teclado (Focus) */
.zpdark-section a:focus {
    color: #ffffff !important;
    outline: 1px dashed #ffffff;
}

.translation-wrapper-section {
    position: absolute !important;
    top: 0;
    right: 0;
    z-index: 1000;
    pointer-events: none; /* No estorba al menú */
}
.translation-wrapper {
    height: 20px;
    display: flex;
    align-items: center;
    background: transparent;
    width: 45px;
}

#language-picker {
    background: transparent;
    color: white;
    border: none;
    font-size: 15px;
    cursor: pointer;
    outline: none;
    padding: 2px 5px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    pointer-events: auto; /* El selector sí responde */
}

/* El truco de la flecha blanca: Usamos un SVG codificado para que sea siempre blanca */
.translation-wrapper::after {
    content: '';
    width: 15px;
    height: 15px;
    margin-left: -15px; /* Superpone la flecha al select */
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Estilo para las opciones (depende del navegador, pero ayuda) */
#language-picker option {
    background-color: white;
    color: black;
}

@media only screen and (max-width: 680px) {
    .translation-wrapper-section {
        width: 66px;
    }
    .translation-wrapper {
        top: 66px;
    }
    #language-picker {
        color: navyblue;
    }

    /* El truco de la flecha blanca: Usamos un SVG codificado para que sea siempre blanca */
    .translation-wrapper::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='navyblue'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    }

    /* Estilo para las opciones (depende del navegador, pero ayuda) */
    #language-picker option {
        background-color: white;
        color: black;
    }
}