/*
 * Duda Flex - Estilos da Página Contato
 */

/* ==========================================
   SEÇÃO CONTATO (FORMULÁRIO + INFO)
   ========================================== */

.contact-section {
    overflow: hidden;
}

.contact-section .grid {
    align-items: start;
}

.contact-section__form {
    min-width: 0;
    background: var(--color-off-white);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
}

.contact-section__info {
    min-width: 0;
}

.contact-section__info .sec__title {
    line-height: var(--line-height-tight);
}

/* Lista de contatos (replicado do footer, cores para fundo claro) */
.contact-section__contacts {
    list-style: none;
    padding: 0;
    margin: var(--space-xl) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--s16);
}

.contact-section__contacts li {
    display: flex;
}

.contact-section__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s12);
    font-size: var(--text-sm);
    color: var(--color-text-main);
    transition: color var(--transition-fast);
    text-decoration: none;
}

.contact-section__link:hover,
.contact-section__link:focus-visible {
    color: var(--color-primary);
}

.contact-section__link svg {
    width: var(--s16);
    height: var(--s16);
    color: var(--color-primary);
    flex-shrink: 0;
}

.contact-section__link--func {
    align-items: flex-start;
    pointer-events: none;
}

.contact-section__link--func:hover,
.contact-section__link--func:focus-visible {
    color: var(--color-text-main);
}

.contact-section__link--func svg {
    margin-top: 2px;
}

/* Redes sociais (replicado do footer, cores para fundo claro) */
.contact-section__socials {
    display: flex;
    align-items: center;
    gap: var(--s12);
    margin-top: var(--space-lg);
}

.contact-section__social {
    width: var(--s44);
    height: var(--s44);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-off-white);
    color: var(--color-text-main);
    transition: all var(--transition-fast);
}

.contact-section__social:hover,
.contact-section__social:focus-visible {
    background: var(--color-primary);
    color: var(--color-white);
}

.contact-section__social svg {
    width: var(--s16);
    height: var(--s16);
    display: block;
}

/* ==========================================
   FORMULÁRIO FLUENTFORM
   ========================================== */

/* Reset de inline styles do plugin */
.contact-section__form .fluentform_wrapper_1 fieldset {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    min-inline-size: 100%;
}

.contact-section__form .fluentform_wrapper_1 .ff-el-group {
    margin-bottom: var(--space-md);
}

/* Labels */
.contact-section__form .fluentform_wrapper_1 .ff-el-input--label {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
    line-height: var(--line-height-normal);
    margin-bottom: var(--s8);
    letter-spacing: var(--letter-spacing-sm);
    text-transform: uppercase;
}

.contact-section__form .fluentform_wrapper_1 .ff-el-input--label label {
    cursor: pointer;
}

/* Asterisco de campo obrigatório */
.contact-section__form
    .fluentform_wrapper_1
    .ff-el-is-required
    .ff-el-input--label
    label::after {
    content: " *";
    color: var(--color-primary);
}

/* Inputs e textarea */
.contact-section__form .fluentform_wrapper_1 .ff-el-form-control {
    width: 100%;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-main);
    background: var(--color-white);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--s12) var(--s16);
    outline: none;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
}

.contact-section__form .fluentform_wrapper_1 .ff-el-form-control::placeholder {
    color: var(--color-text-muted);
}

.contact-section__form .fluentform_wrapper_1 .ff-el-form-control:hover {
    border-color: var(--color-text-secondary);
}

.contact-section__form .fluentform_wrapper_1 .ff-el-form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-border);
}

.contact-section__form .fluentform_wrapper_1 textarea.ff-el-form-control {
    min-height: 120px;
    resize: vertical;
}

/* Radio buttons — cards de seleção em grid */
.contact-section__form
    .fluentform_wrapper_1
    .ff-el-input--content:has(.ff-el-form-check) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--s12);
}

.contact-section__form .fluentform_wrapper_1 .ff-el-form-check {
    margin: 0;
    min-width: 0;
    height: 100%;
}

.contact-section__form .fluentform_wrapper_1 .ff-el-form-check-label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: var(--s16) var(--s12);
    background: var(--color-white);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-main);
    line-height: var(--line-height-tight);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.contact-section__form .fluentform_wrapper_1 .ff-el-form-check-label:hover {
    border-color: var(--color-primary);
}

/* Input invisível mas acessível */
.contact-section__form .fluentform_wrapper_1 .ff-el-form-check-input {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Card selecionado */
.contact-section__form
    .fluentform_wrapper_1
    .ff-el-form-check:has(.ff-el-form-check-input:checked)
    .ff-el-form-check-label {
    border-color: var(--color-primary);
    background: rgba(185, 4, 4, 0.06);
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

/* Focus para acessibilidade */
.contact-section__form
    .fluentform_wrapper_1
    .ff-el-form-check-input:focus-visible
    + span {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Help message */
.contact-section__form .fluentform_wrapper_1 .ff-el-help-message {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--s8);
    line-height: var(--line-height-normal);
}

/* Submit button — replica .btn + .btn-primary */
.contact-section__form .fluentform_wrapper_1 .ff-btn-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--s8) !important;
    font-family: var(--font-primary) !important;
    font-size: var(--text-12) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: var(--letter-spacing-sm) !important;
    line-height: var(--line-height-tight) !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: var(--radius-full) !important;
    padding: var(--s16) var(--s40) !important;
    cursor: pointer !important;
    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-primary-light) 25%,
        var(--color-primary) 50%,
        var(--color-primary-bright) 75%,
        var(--color-primary) 100%
    ) !important;
    background-size: 400% 400% !important;
    color: var(--color-text-white) !important;
    position: relative !important;
    overflow: hidden !important;
    animation: btnGradientShift var(--anim-duration-shift) ease infinite !important;
    transition: all var(--transition-normal) !important;
}

.contact-section__form .fluentform_wrapper_1 .ff-btn-submit::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: var(--s80);
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        var(--color-shine),
        transparent
    );
    transform: var(--skew-angle);
    animation: btnShineSweep var(--anim-duration-sweep) infinite ease-in-out;
    pointer-events: none;
    z-index: 3;
}

.contact-section__form .fluentform_wrapper_1 .ff-btn-submit:hover {
    transform: translateY(calc(var(--s4) * -0.5)) !important;
    box-shadow: 0 var(--s8) var(--s24) var(--color-shadow-primary) !important;
    filter: brightness(var(--brightness-hover)) !important;
    color: var(--color-text-white) !important;
}

.contact-section__form .fluentform_wrapper_1 .ff-btn-submit:active {
    transform: translateY(0) !important;
}

/* Remove style tag inline do FluentForm */
.contact-section__form .fluentform_wrapper_1 style {
    display: none !important;
}

/* Botão full width apenas no mobile */
@media (max-width: 768px) {
    .contact-section__form .fluentform_wrapper_1 .ff-btn-submit {
        width: 100% !important;
    }

    .contact-section__form {
        padding: var(--space-lg);
    }
}

@media (max-width: 640px) {
    .contact-section__form .fluentform_wrapper_1 .ff-el-form-check-label {
        font-size: var(--text-xs);
        padding: var(--s12) var(--s8);
    }
}

/* ==========================================
   MAPA
   ========================================== */

.areas-map {
    width: 100%;
    line-height: 0;
}

.areas-map__link {
    display: block;
    width: 100%;
}

.areas-map__iframe {
    display: block;
    width: 100%;
    height: 450px;
    border: 0;
    filter: grayscale(0.2);
    transition: filter var(--transition-quick);
}

.areas-map__link:hover .areas-map__iframe,
.areas-map__link:focus .areas-map__iframe {
    filter: grayscale(0);
}

/* ==========================================
   RESPONSIVO
   ========================================== */

@media (max-width: 768px) {
    .areas-map__iframe {
        height: 300px;
    }

    .contact-section .grid {
        gap: var(--space-xl);
    }

    .contact-section__contacts {
        margin-top: var(--space-lg);
    }
}