/* Estilos para la barra de newsletter y su botón */

/* Sección de newsletter */
.newsletter-section,
.newsletter-container,
.newsletter-popup,
.newsletter-bar,
section.newsletter {
    background-color: var(--newsletter-bar-background, #f5f5f5) !important;
    color: var(--newsletter-bar-text-color, #333333) !important;
}

/* Estilos para el botón de newsletter */
.btn-subscribe,
.newsletter-btn,
.subscribe-btn,
.btn-submit-news,
.newsletter-form button[type="submit"],
.form-subcriber button,
input[type="submit"].newsletter-btn,
button.newsletter-btn,
form[name="newsletter"] button,
form[name="newsletter"] input[type="submit"],
section.newsletter .btn,
.newsletter .btn,
.form-subcriber .btn {
    background-color: var(--button-background, #F15412) !important;
    color: var(--button-text-color, #FFFFFF) !important;
    border-color: var(--button-background, #F15412) !important;
    display: inline-block !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    text-transform: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 10 !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    cursor: pointer !important;
    height: auto !important;
    min-height: 40px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Estilos para hover del botón */
.btn-subscribe:hover,
.newsletter-btn:hover,
.subscribe-btn:hover,
.btn-submit-news:hover,
.newsletter-form button[type="submit"]:hover,
.form-subcriber button:hover,
input[type="submit"].newsletter-btn:hover,
button.newsletter-btn:hover,
form[name="newsletter"] button:hover,
form[name="newsletter"] input[type="submit"]:hover,
section.newsletter .btn:hover,
.newsletter .btn:hover,
.form-subcriber .btn:hover {
    background-color: var(--hover-color, #FDC040) !important;
    border-color: var(--hover-color, #FDC040) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Estilos para el campo de entrada del email */
.newsletter-form input[type="email"],
.form-subcriber input[type="email"],
.newsletter-input-box,
input.newsletter-input,
section.newsletter input[type="email"],
.newsletter input[type="email"] {
    border: 1px solid var(--border-color, #e2e5e9) !important;
    padding: 10px 15px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    background-color: #FFFFFF !important;
    height: auto !important;
    min-height: 40px !important;
    flex: 1 !important;
    min-width: 100px !important;
}

.newsletter-form input[type="email"]:focus,
.form-subcriber input[type="email"]:focus,
.newsletter-input-box:focus,
input.newsletter-input:focus,
section.newsletter input[type="email"]:focus,
.newsletter input[type="email"]:focus {
    border-color: var(--theme-color, #F15412) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--theme-color-rgb, 241, 84, 18), 0.25) !important;
    outline: none !important;
}

/* Asegurar compatibilidad con diseños de newsletter en filas o columnas */
.newsletter-row,
.form-subcriber,
.newsletter-form {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    width: 100% !important;
    flex-direction: row !important;
}

/* Asegurar que el formulario siempre permanezca en línea */
section.newsletter .form-subcriber,
.newsletter .form-subcriber {
    flex-direction: row !important;
}

/* Para pantallas pequeñas */
@media (max-width: 576px) {
    .newsletter-row,
    .form-subcriber,
    .newsletter-form {
        flex-direction: row !important;
        width: 100% !important;
    }
    
    .newsletter-form input[type="email"],
    .form-subcriber input[type="email"],
    .newsletter-input-box,
    input.newsletter-input,
    section.newsletter input[type="email"],
    .newsletter input[type="email"] {
        min-width: 0 !important;
        width: auto !important;
    }
    
    .btn-subscribe,
    .newsletter-btn,
    .subscribe-btn,
    .btn-submit-news,
    .newsletter-form button[type="submit"],
    .form-subcriber button,
    input[type="submit"].newsletter-btn,
    button.newsletter-btn,
    section.newsletter .btn,
    .newsletter .btn,
    .form-subcriber .btn {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 13px !important;
    }
}