/*
 * Reskin do Fluent Forms com a identidade visual do tema — mesma receita de
 * 00-globals.css/premium-page.css (.portal-form) e login.css: campos em
 * vidro sobre fundo navy, foco dourado, botão no gradiente .portal-btn.gold.
 *
 * Só ajusta cor/tipografia/espaçamento dos elementos (classes estáveis do
 * Fluent Forms: .ff-el-group, .ff-el-form-control, .ff-btn-submit etc.) —
 * não mexe no sistema de colunas/grid do form builder, que continua sendo
 * controlado pelo próprio Fluent Forms (Container/largura de campo no
 * editor). Não há WordPress + Fluent Forms rodando neste ambiente para
 * testar ao vivo — confira visualmente após ativar o plugin e ajuste esta
 * folha se alguma versão nova tiver renomeado uma classe.
 */

.fluentform {
    --ff-gold: #d6a463;
    --ff-pale: #f1cf9c;
    color: rgba(255, 255, 255, .72);
    font-family: Georgia, 'Times New Roman', serif;
}

.fluentform .ff-el-group {
    margin-bottom: 22px;
}

.fluentform .ff-el-input--label {
    margin-bottom: 10px;
}

.fluentform .ff-el-input--label label,
.fluentform legend {
    display: inline-block;
    color: rgba(255, 255, 255, .72);
    font: 700 8px/1.4 Arial, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.fluentform .ff-el-input--label label .ff_required {
    color: var(--ff-gold);
}

.fluentform .ff-el-form-control {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0;
    background: rgba(255, 255, 255, .05);
    color: #fff;
    padding: 16px;
    font: 15px Georgia, serif;
    outline: none;
    box-shadow: none;
    transition: border-color .25s, background .25s;
}

.fluentform textarea.ff-el-form-control {
    min-height: 140px;
    resize: vertical;
}

.fluentform select.ff-el-form-control {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ff-gold) 50%), linear-gradient(135deg, var(--ff-gold) 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 15px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.fluentform select.ff-el-form-control option {
    color: #0a2035;
}

.fluentform .ff-el-form-control::placeholder {
    color: rgba(255, 255, 255, .4);
}

.fluentform .ff-el-form-control:focus {
    border-color: var(--ff-gold);
    background: rgba(214, 164, 99, .08);
    box-shadow: 0 0 0 1px rgba(214, 164, 99, .35);
}

.fluentform .ff-el-form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.fluentform .ff-el-form-check-input {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 2px;
    accent-color: var(--ff-gold);
}

.fluentform .ff-el-form-check-label {
    color: rgba(255, 255, 255, .68);
    font: 13px/1.5 Georgia, serif;
    text-transform: none;
    letter-spacing: normal;
}

.fluentform .ff_submit_btn_wrapper {
    margin-top: 8px;
}

.fluentform .ff-btn.ff-btn-submit {
    width: max-content;
    min-height: 55px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(135deg, #f0cb92, #b77c3d);
    color: #06182a;
    text-shadow: none;
    font: 800 9px Arial, sans-serif;
    letter-spacing: .13em;
    text-transform: uppercase;
    box-shadow: 0 18px 45px rgba(197, 142, 76, .28);
    cursor: pointer;
    transition: transform .35s, box-shadow .35s;
}

.fluentform .ff-btn.ff-btn-submit:hover,
.fluentform .ff-btn.ff-btn-submit:focus {
    background: linear-gradient(135deg, #f0cb92, #b77c3d);
    color: #06182a;
    transform: translateY(-3px);
    box-shadow: 0 22px 55px rgba(197, 142, 76, .34);
}

.fluentform .ff-el-is-error .ff-el-form-control {
    border-color: #f08a72;
    background: rgba(240, 138, 114, .08);
}

.fluentform .error,
.fluentform .text-danger,
.fluentform .ff-el-input--error {
    margin-top: 8px;
    color: #f0a68f;
    font: 12px/1.5 Arial, sans-serif;
    letter-spacing: .02em;
}

.fluentform .ff-message-success,
.fluentform .ff_message_container {
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-left: 3px solid var(--ff-gold);
    border-radius: 0;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    backdrop-filter: blur(10px);
    font: 14px/1.6 Georgia, serif;
}

.fluentform .ff-progress-bar {
    background: rgba(255, 255, 255, .12);
}

.fluentform .ff-progress-bar .ff-progress {
    background: linear-gradient(90deg, var(--ff-gold), var(--ff-pale));
}

@media (max-width: 760px) {
    .fluentform .ff-btn.ff-btn-submit {
        width: 100%;
    }
}