/* ==========================================================================
   1. CORRECCIONES MÓVILES (BOTONES, ESPACIOS Y LOGO)
   ========================================================================== */

/* Quitar el subrayado forzado de WordPress en los botones */
.btn-gold, a.btn-gold {
    text-decoration: none !important;
}

@media (max-width: 768px) {
    /* Arreglar el botón gigante del centro en Hero */
    .hero-section .btn-gold {
        display: inline-block !important;
        width: auto !important;
        min-width: 240px !important;
        padding: 15px 20px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        border-radius: 8px !important;
    }

    /* Darle respiro a la barra superior (Header) para que no se apile */
    .header-inner {
        padding: 0 10px !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Hacer el botón "Call Now" más pequeño y sutil en celulares */
    .header-cta .btn-gold {
        padding: 8px 12px !important;
        font-size: 11px !important;
        min-width: 0 !important;
        margin: 0 10px !important;
    }

    /* Ajustar el tamaño del logo para que no empuje los elementos del menú */
    .site-branding img {
        max-width: 120px !important;
    }
}

/* ==========================================================================
   2. AJUSTES EDITORIALES Y DE LIMPIEZA (ABOUT US & JETPACK)
   ========================================================================== */

/* Limitar altura de la imagen del personal en computadoras */
@media (min-width: 992px) {
    .site-main .container img[alt*="Magic Cleaning Gabby Staff"] {
        max-height: 500px !important;
        width: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }
}

/* Ocultar botones automáticos de compartir (Jetpack) en el área del formulario */
.sharedaddy, 
.sd-sharing, 
.sd-social-icon {
    display: none !important;
}

/* ==========================================================================
   3. ESTILO PREMIUM PARA WPFORMS (ANCHO COMPLETO EXCLUSIVO)
   ========================================================================== */

/* Forzar que los sub-contenedores ocupen el 100% y anulen las columnas de WPForms */
.wpforms-container .wpforms-field-row-block,
.wpforms-container .wpforms-one-half,
.wpforms-container .wpforms-field-name-first,
.wpforms-container .wpforms-field-email-primary {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
}

/* Ocultar por completo las segundas cajas junto con sus etiquetas */
.wpforms-field-name-last,
.wpforms-container .wpforms-field-row-block:nth-child(2),
.wpforms-field-email-confirmation,
.wpforms-container label.wpforms-sublabel {
    display: none !important;
}

/* Estilo unificado y forzado para las cajas de entrada de texto de Magic Cleaning */
.wpforms-container .wpforms-field input[type="text"], 
.wpforms-container .wpforms-field input[type="email"], 
.wpforms-container .wpforms-field input[type="tel"], 
.wpforms-container .wpforms-field textarea,
div.wpforms-container .wpforms-form input.wpforms-field-name-first,
div.wpforms-container .wpforms-form input[type="email"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding: 14px 18px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    font-family: var(--font-primary) !important;
    font-size: 16px !important;
    background-color: #fff !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Efecto dorado corporativo al hacer clic o enfocar una caja */
.wpforms-container input:focus, 
.wpforms-container textarea:focus {
    border-color: var(--clr-gold) !important;
    outline: none !important;
    box-shadow: 0 0 10px rgba(247, 187, 91, 0.4) !important;
}

/* ==========================================================================
   4. ALINEACIÓN DE OPCIONES DE SELECCIÓN CORPORATIVAS (ESTILO PROPIO GABBY)
   ========================================================================== */

/* Alinear las opciones de selección horizontalmente con buen espacio */
.wpforms-form .wpforms-field-radio ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 8px 0 0 0 !important;
}

.wpforms-form .wpforms-field-radio ul li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    list-style: none !important;
    margin: 0 !important;
}

/* Círculo seleccionable estilizado con el morado de Magic Cleaning Gabby */
.wpforms-form .wpforms-field-radio input[type=radio] {
    margin: 0 !important;
    width: 19px !important;
    height: 19px !important;
    appearance: auto !important;
    cursor: pointer !important;
    accent-color: var(--clr-purple) !important;
}

/* Ajustar el texto de la opción para que mantenga proporción */
.wpforms-form .wpforms-field-radio label {
    margin: 0 !important;
    font-weight: normal !important;
    font-size: 16px !important;
    display: inline-block !important;
}

/* ==========================================================================
   5. BOTÓN DE ENVIAR (DISEÑO DORADO DE ALTA CONVERSIÓN)
   ========================================================================== */
.wpforms-submit-container button.wpforms-submit {
    background-color: var(--clr-gold) !important;
    color: var(--clr-text-main) !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 16px !important;
    border: none !important;
    border-radius: 6px !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

.wpforms-submit-container button.wpforms-submit:hover {
    background-color: #e5a94a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}

/* Forzar que el logo fusione su fondo blanco y se vea transparente en el menú */
.site-branding img, 
header img, 
.custom-logo {
    mix-blend-mode: multiply !important;
    background-color: transparent !important;
}