/* 1. CONTENEDOR PRINCIPAL */
.mj-switch-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin-left: 20px !important;  
    margin-right: 20px !important; 
    padding: 5px 0 !important;
}

/* 2. ESTRUCTURA DEL SWITCH */
.mj-switch {
    position: relative;
    display: inline-block;
    width: 60px !important;
    height: 32px !important; /* Un toque más alto para que luzca la bandera */
}

.mj-switch input { 
    opacity: 0; 
    width: 0; 
    height: 0; 
}

/* 3. EL SLIDER (EL CANAL) CON TRANSPARENCIA */
.mj-slider
{ position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.4); backdrop-filter: blur(5px); border-radius: 34px; border: 1px solid white; transition: .4s; }

/* 4. LA BOLITA BLANCA (HANDLE) - GRANDE CON BANDERA */
.mj-handle {
    position: absolute;
    height: 28px !important; /* Ocupa casi todo el alto */
    width: 28px !important;
    left: 2px !important;
    bottom: 1px !important; /* Ajuste fino para centrarla verticalmente */
    background-color: white !important;
    border-radius: 50% !important;
    overflow: hidden; /* Clave para que la bandera se corte circular */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: .4s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Recorrido de la bolita al cambiar */
.mj-switch input:checked + .mj-slider .mj-handle {
    transform: translateX(28px) !important;
}

/* 5. CONTROL DE LOS SVG DENTRO DE LA BOLITA */
.mj-handle svg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* La bandera llena el círculo sin deformarse */
    position: absolute;
    transition: opacity 0.4s;
}

/* Lógica de visibilidad de banderas */
.mj-flag-us { opacity: 0; }
.mj-flag-ar { opacity: 1; }

.mj-switch input:checked + .mj-slider .mj-handle .mj-flag-ar { 
    opacity: 0; 
}
.mj-switch input:checked + .mj-slider .mj-handle .mj-flag-us { 
    opacity: 1; 
}

/* 6. RESPONSIVE (Ajuste para móviles) */
@media (max-width: 921px) {
    .mj-switch-wrapper {
        display: flex !important;
        margin-left: 10px !important;
        margin-right: 15px !important; 
        transform: scale(0.9); /* Achica todo el conjunto un 10% */
        transform-origin: right center;
    }
}


/*******************************************************************************
 * [ CORE - DISEÑO DE PÁGINA HABITACIONES / ROOMS ]
 * Objetivo: Eliminar paddings de Astra que rompen el Full Width del video.
 * Aplicable a: Página de detalle de habitación (Gratitud, Resiliencia, etc.)
 * ID de referencia: post-3533 (y generales de Astra)
 *******************************************************************************/

/* Forzar ancho completo eliminando paddings del contenedor de Astra */
.ast-separate-container .ast-article-single, 
.ast-separate-container .site-main article,
.page-id-3533 .ast-article-single {
    padding: 0 !important;
    margin: 0 !important;
}

/* Eliminar márgenes superiores que Astra inyecta en el contenido */
.page-id-3533 .entry-content,
.ast-separate-container #primary {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* Asegurar que los bloques de UAGB (Spectra) no hereden márgenes laterales */
.page-id-3533 .uagb-is-root-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* * COLOR DE FONDO MAÍZ - SOLO PARA ROOMS
 * Aplicamos el color al contenedor padre pero SOLO cuando está dentro de la página 3533
 */

/* 1. El contenedor principal (donde Astra deja el hueco blanco) */
.page-id-3533 #primary.content-area,
.page-id-3533 .site-main,
.page-id-3533 article.post-3533 {
    background-color: #f2d891 !important; /* El color maíz de Mai Jaii */
}

/* 2. El área de contenido específica */
.page-id-3533 .entry-content {
    background-color: #f2d891 !important;
}

/* * OPCIONAL: Si querés que TODO el fondo de la página (fuera del contenedor) 
 * también sea maíz para que no haya bordes blancos en monitores gigantes:
 */
body.page-id-3533 {
    background-color: #f2d891 !important;
}

/************************* [ FIN CORE ROOMS ] *********************************/