/*
 * CSS para o formulário Opt-in
 */

.widget_optin {
    background: #F9FBFF;
    padding: 40px 20px; /* Padding padrão para o widget */
    box-sizing: border-box;
}

.widget_optin .paragrafo strong{
    color: #0092C5;
}

.widget_optin_header {
    width: 100%;
    max-width: 600px; /* Limita a largura máxima do cabeçalho */
    margin: 0 auto 50px auto; /* Centraliza e define margem inferior padrão */
    padding: 20px; /* Padding interno do cabeçalho */
    text-align: center;
    box-sizing: border-box;
}

.widget_optin_header h1{
    font-size: 2em; /* Tamanho de fonte padrão */
    font-weight: var(--weight-bold);
    color: var(--title-color)!important;
    line-height: 1.3;
    margin-bottom: 20px;
}

.widget_optin_header p{
    font-size: 1.1em; /* Tamanho de fonte padrão */
    color: #555555;
    line-height: 1.6;
    margin: 0 auto; /* Centraliza o parágrafo */
    max-width: 85%; /* Limita o comprimento da linha para legibilidade */
}

.widget_optin_asks {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}

.widget_optin_content_flex{
    flex-basis: 35%; /* Largura para telas desktop */
    max-width: 450px; /* Largura máxima do formulário para mantê-lo legível */
}

/* Estilos internos do formulário */
.widget_optin_content_flex h4 {
    font-size: 1em;
    font-weight: var(--weight-bold);
    margin-bottom: 20px;
    color: #888888;
}

.widget_optin_content_flex strong{
    color: #0092C5;
}

.widget_optin_content_flex p .login{
    text-decoration: none;
    color: #ffffff;
    text-decoration: underline;
    font-weight: var(--weight-normal);
}

.widget_optin_content_flex h5{
    margin-top: 20px;
    font-weight: var(--weight-light);
}

.widget_optin_content_flex h5 .login{
    text-decoration: none;
    color: #0092C5;
    text-decoration: underline;
    font-weight: var(--weight-normal);
}

.widget_optin_content_flex p{
    padding: 10px;
}
.login {
    color: #0092C5!important;
}

.widget_optin_content_flex form textarea,
.widget_optin_content_flex form input,
.widget_optin_content_flex form select {
    display: block;
    width: 100%;
    font-size: var(--font-small);
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #cccccc;
    border-radius: var(--radius-normal);
    box-sizing: border-box; /* Garante que padding e borda não aumentem a largura */
}

.widget_optin_content_flex form button {
    cursor: pointer;
    border: none;
    display: block;
    width: 100%;
    text-align: center;
    padding: 20px;
    font-size: 1em;
    font-weight: var(--weight-light); /* Pode ser sobrescrito pelo inline style do HTML */
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-normal);
}

#contact_optin_form button{ /* Mais específico para garantir que o font-weight seja aplicado */
    font-weight: var(--weight-bold);
}


/* --- Media Queries --- */

/* Para telas até 768px (tablets em retrato, celulares maiores em paisagem) */
@media (max-width: 48em) { /* 768px / 16px = 48em */
    .widget_optin {
        padding: 30px 15px;
    }
    .widget_optin_header {
        margin-top: -2.5em; /* Ajuste para puxar o cabeçalho um pouco para cima */
        margin-bottom: 2em;
        padding: 15px;
    }
    .widget_optin_header h1 {
        font-size: 1.8em;
    }
    .widget_optin_header p {
        font-size: 1em;
        max-width: 90%;
    }
    .widget_optin_content_flex {
        flex-basis: 100%; /* Formulário ocupa a largura total */
        margin: 0 auto; /* Centraliza o formulário */
        max-width: 400px; /* Limita a largura para que não fique muito esticado */
    }
}

/* Para telas até 480px (celulares em retrato) */
@media (max-width: 30em) { /* 480px / 16px = 30em */
    .widget_optin {
        padding: 20px 10px;
    }
    .widget_optin_header {
        margin-top: -2em;
        margin-bottom: 1.5em;
        padding: 10px;
    }
    .widget_optin_header h1 {
        font-size: 1.5em;
    }
    .widget_optin_header p {
        font-size: 0.9em;
        max-width: 95%;
    }
    .widget_optin_content_flex {
        max-width: 350px; /* Limita mais a largura do formulário */
    }
    .widget_optin_content_flex form textarea,
    .widget_optin_content_flex form input,
    .widget_optin_content_flex form select,
    .widget_optin_content_flex form button {
        padding: 12px; /* Reduz um pouco o padding dos campos */
    }
}

/* NOVO: Para Dispositivos Móveis em Modo Paisagem (Horizontal) */
@media (max-width: 51.25em) and (orientation: landscape) { /* 820px / 16px = 51.25em */
    .widget_optin {
        padding: 1.5em 1em; /* Reduz padding geral */
    }
    .widget_optin_header {
        margin-top: -1.5em; /* Ajusta margem para subir o cabeçalho */
        margin-bottom: 1em; /* Reduz a margem inferior */
        padding: 1em; /* Reduz padding */
    }
    .widget_optin_header h1 {
        font-size: 1.4em; /* Fonte menor para otimizar espaço vertical */
        line-height: 1.2;
    }
    .widget_optin_header p {
        font-size: 0.85em; /* Fonte ainda menor */
        max-width: 95%;
    }
    .widget_optin_content_flex {
        flex-basis: 100%;
        max-width: 350px; /* Limita a largura do formulário para legibilidade */
        margin: 0 auto; /* Centraliza o formulário */
    }
    .widget_optin_content_flex h4 {
        font-size: 0.8em; /* Ajusta o tamanho da fonte do h4 */
    }
    .widget_optin_content_flex form textarea,
    .widget_optin_content_flex form input,
    .widget_optin_content_flex form select,
    .widget_optin_content_flex form button {
        padding: 0.8em; /* Padding menor para campos e botão */
        margin-bottom: 0.8em; /* Margem inferior menor */
        font-size: 0.9em; /* Reduz um pouco a fonte nos campos */
    }
}

/* Opcional: Para telas ainda mais curtas em paisagem (altura) */
@media (max-height: 22em) and (orientation: landscape) { /* 350px / 16px = 21.875em, arredondado para 22em */
    .widget_optin {
        padding: 1em 0.8em;
    }
    .widget_optin_header {
        margin-top: -1em;
        margin-bottom: 0.8em;
        padding: 0.5em;
    }
    .widget_optin_header h1 {
        font-size: 1.2em;
        line-height: 1.1;
    }
    .widget_optin_header p {
        font-size: 0.8em;
    }
    .widget_optin_content_flex {
        max-width: 300px;
    }
    .widget_optin_content_flex h4 {
        font-size: 0.75em;
    }
    .widget_optin_content_flex form textarea,
    .widget_optin_content_flex form input,
    .widget_optin_content_flex form select,
    .widget_optin_content_flex form button {
        padding: 0.6em;
        margin-bottom: 0.6em;
        font-size: 0.8em;
    }
}