/* Magie Libros: botones de compra. Antes vivían en el CSS de WPCode del blog (.button-custom-1, .button-amazon…). */

.ml-libro {
    text-align: center;
}

.ml-titulo {
    color: #e0115f !important;
}

/* Mientras libros.js elige el país no se ve el de la caché. Si el script no corre, aparece solo a los 2 segundos. */
.ml-cargando .ml-nombre-pais,
.ml-cargando .ml-botones {
    visibility: hidden;
    animation: ml-mostrar 0s 2s forwards;
}

@keyframes ml-mostrar {
    to {
        visibility: visible;
    }
}

.ml-libro .ml-botones {
    margin-top: 2.5rem;
}

.ml-botones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2rem;
    margin-bottom: 1rem;
}

.ml-boton .wp-block-button__link,
.ml-boton .wp-block-button__link:visited {
    display: inline-flex;
    align-items: center;
    background-color: #f6f1eb !important;
    border: 0 !important;
    color: #393939 !important;
    text-decoration: none;
}

/* El tema pinta de negro los enlaces en foco; aquí el botón mantiene su color. */
.ml-boton .wp-block-button__link:hover,
.ml-boton .wp-block-button__link:focus,
.ml-boton .wp-block-button__link:active {
    background-color: #f8f5f0 !important;
    color: #393939 !important;
    text-decoration: none;
}

.ml-boton .wp-block-button__link::before {
    content: '';
    flex: none;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    background-size: 24px 24px;
}

.ml-icono-amazon .wp-block-button__link::before { background-image: url('img/amazon.png'); }
.ml-icono-apple .wp-block-button__link::before { background-image: url('img/apple.png'); }
.ml-icono-whatsapp .wp-block-button__link::before { background-image: url('img/whatsapp.png'); }
.ml-icono-lemonsqueezy .wp-block-button__link::before { background-image: url('img/lemonsqueezy.png'); }

.ml-cambiar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 1rem;
}

.ml-cambiar label {
    font-size: 14px;
    margin: 0;
}

.ml-cambiar select {
    padding: 4px 8px;
    font-size: 14px;
    border: 2px solid #ccc;
    border-radius: 4px;
    min-width: 150px;
}