/*
Theme Name:   Belleza del Ser
Theme URI:    https://wordpress.org/themes/twentytwentyfive/
Description:  Tema hijo personalizado para Twenty Twenty-Five.
Author:       Gabriel Romero
Author URI:   https://gabrielromero.dev
Template:     twentytwentyfive
Version:      1.0.0
Text Domain:  twentytwentyfive-child
*/

/* ==========================================================================
   Formulario MailerLite - Estilos Base (Flexbox Global)
   ========================================================================== */
.custom-ml-container {
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
}

.custom-ml-container *, 
.custom-ml-container *::before, 
.custom-ml-container *::after {
    box-sizing: border-box;
}

/* El formulario permite que los elementos salten de línea */
.custom-ml-form {
    display: flex;
    flex-wrap: wrap; 
    width: 100%;
    row-gap:10px;
}

/* Grupos de campos individuales */
.custom-ml-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.custom-ml-form .ml-label {
    font-size: 0.85rem;
    color: #7A6F68;
    font-weight: 500;
    margin-left: 4px;
}

/* Inputs de texto y email */
.custom-ml-form input[type="text"],
.custom-ml-form input[type="email"] {
    width: 100%;
    padding: 14px 16px;
    background-color: #FFFFFF;
    border: 1px solid #E6DCD5;
    border-radius: 10px;
    color: #4A3E3D;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
}

.custom-ml-form input:focus {
    outline: none;
    border-color: #B57A55;
    background-color: #FFF;
}

/* Botón de envío básico */
.btn-ml-submit {
    background-color: #B57A55;
    color: #FFFFFF;
    padding: 16px 20px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
    transition: background-color 0.2s ease;
    box-shadow: 0 4px 12px rgba(181, 122, 85, 0.2);
}

.btn-ml-submit:hover {
    background-color: #9C6340;
}

.ml-privacy-notice {
    text-align: center;
    font-size: 0.8rem;
    color: #8C827A;
    margin-top: 14px;
}

.ml-success { color: #2E7D32; font-weight: 600; text-align: center; margin-bottom: 15px; }
.ml-error { color: #C62828; font-weight: 600; text-align: center; margin-bottom: 15px; }


/* ==========================================================================
   ORDEN EN MÓVILES (Menor a 767px) y variante layout="col"
   Estructura: Input texto -> Input email -> Checkbox -> Enviar
   ========================================================================== */

.custom-ml-container.ml-layout-col .custom-ml-form{
    gap:0.5rem;
}

.ml-layout-col {
    max-width: 440px;
    margin: 20px auto;
}

.ml-layout-col .custom-ml-form,
@media (max-width: 767px) {
    .custom-ml-form {
        flex-direction: column;
        gap: 16px;
    }
    
    /* Reordenación estricta para móvil */
    .custom-ml-form .fg-name { order: 1; }
    .custom-ml-form .fg-email { order: 2; }
    .custom-ml-form .form-privacy { order: 3; margin: 4px 0; }
    .custom-ml-form .form-actions { order: 4; } /* El botón se va al final */
}


/* ==========================================================================
   ORDEN EN ESCRITORIO (Desde 768px en adelante para layout="row")
   Estructura: Input texto - Input email - Enviar / Checkbox abajo
   ========================================================================== */
@media (min-width: 768px) {
    .ml-layout-row {
        max-width: 900px;
        margin: 20px auto;
    }

    .ml-layout-row .custom-ml-form {
        flex-direction: row;
        align-items: flex-end; /* Alinea el botón perfectamente con los inputs */
        column-gap: 20px;
    }

    /* Primera Fila: Inputs y Botón juntos */
    .ml-layout-row .fg-name {
        flex: 1;
        width: calc(35% - 10px);
        order: 1;
    }

    .ml-layout-row .fg-email {
        flex: 1;
        width: calc(35% - 10px);
        order: 2;
    }

    .ml-layout-row .form-actions {
        order: 3; /* El botón sube al lado del input email */
    }

    /* Segunda Fila: El Checkbox salta abajo solo */
    .ml-layout-row .form-privacy {
        flex: 0 0 100%;
        width: 100%;
        order: 4; /* Pasa abajo */
        margin-top: 10px;
        margin-bottom: 0;
    }
}


/* ==========================================================================
   Elementos Auxiliares (Honeypot, Checkbox Interno)
   ========================================================================== */

/* Ocultar Honeypot */
.ml-hidden-field {
    display: none !important;
    visibility: hidden;
}

/* Estado Loading */
.btn-ml-submit.btn-ml-loading {
    background-color: #9C6340;
    cursor: not-allowed;
    opacity: 0.8;
}

/* Bloque contenedor de la privacidad */
.custom-ml-form .form-privacy {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

/* Cuadrado Checkbox */
.custom-ml-form input[type="checkbox"] {
    margin-top: 3px;
    cursor: pointer;
    accent-color: #B57A55;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Texto legal */
.ml-privacy-label {
    font-size: 0.85rem;
    color: #7A6F68;
    line-height: 1.35;
    cursor: pointer;
}

.ml-privacy-label a {
    color: #B57A55;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.ml-privacy-label a:hover {
    color: #9C6340;
}