/* ====================================================================
   CONTATOS — página "Fale connosco" (contatos.php)
   --------------------------------------------------------------------
   Refactor visual 2026-09: substiui o layout de colunas do tema
   (form-horizontal) por uma grelha própria, com identidade 2.0
   (cartões brancos, tokens --ix-* do design system e --u-* do
   ivalene-uniforme.css) e breakpoints coerentes com o site.

   Só afeta o markup desta página (.mkx-ct-*). O formulário, o endpoint
   ajax/email_contato.php e a lógica de negócio não mudam.
   ==================================================================== */

/* ── Grelha da página: 320px · 1 coluna → 992px · 2 colunas ───────── */
.mkx-ct-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:var(--ix-space-5);
    margin-bottom:var(--ix-space-6);
}
@media (min-width:992px){
    .mkx-ct-grid{ grid-template-columns:34% minmax(0,1fr); align-items:start; }
}

/* ── Cartões de informação e do formulário ─────────────────────────── */
.mkx-ct-card{
    background:var(--ix-surface);
    border:1px solid var(--ix-border);
    border-radius:var(--ix-radius-md);
    padding:var(--ix-space-6) var(--ix-space-5);
    box-shadow:var(--ix-shadow-sm);
}
@media (max-width:600px){
    .mkx-ct-card{ padding:var(--ix-space-5) var(--ix-space-4); }
}

.mkx-ct-info{ font-style:normal; }

.mkx-ct-title{
    font-size:var(--ix-fs-h4);
    font-weight:var(--ix-fw-bold);
    color:var(--ix-text);
    margin:0 0 var(--ix-space-4);
    padding-bottom:var(--ix-space-3);
    border-bottom:1px solid var(--ix-border);
}

/* ── Itens de contacto (email, telefone) ───────────────────────────── */
.mkx-ct-item{
    display:flex;
    align-items:flex-start;
    gap:var(--ix-space-3);
    margin-bottom:var(--ix-space-4);
}
.mkx-ct-item:last-child{ margin-bottom:0; }

.mkx-ct-ico{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--ix-primary-soft);
    color:var(--ix-primary);
    border-radius:var(--ix-radius-sm);
    font-size:16px;
}

.mkx-ct-label{
    display:block;
    font-size:var(--ix-fs-caption);
    font-weight:var(--ix-fw-semibold);
    color:var(--ix-text-muted);
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:2px;
}
.mkx-ct-item p{
    margin:0;
    font-size:var(--ix-fs-body);
    font-weight:var(--ix-fw-medium);
    color:var(--ix-text);
    overflow-wrap:anywhere;           /* emails/telefones longos não geram overflow */
}
.mkx-ct-item a{ color:var(--u-blue); text-decoration:none; }
.mkx-ct-item a:hover{ color:var(--u-orange); text-decoration:underline; }

.mkx-ct-texto{
    font-size:var(--ix-fs-body);
    color:var(--ix-text-secondary);
    line-height:1.6;
    margin:0;
    padding-top:var(--ix-space-4);
    border-top:1px solid var(--ix-border);
}

/* ── Formulário ─────────────────────────────────────────────────────── */
.mkx-ct-campo{ margin-bottom:var(--ix-space-4); }

.mkx-ct-campo > label{
    display:block;
    font-size:var(--ix-fs-sm);
    font-weight:var(--ix-fw-semibold);
    color:var(--ix-text);
    margin-bottom:var(--ix-space-2);
}
.mkx-ct-campo > label .mkx-req{ color:var(--ix-danger); }

.mkx-ct-campo .form-control{ width:100%; }

/* Botão de envio: alinhado à direita; a cor vem da camada de
   uniformização (btn-primary = laranja da marca nas páginas internas)
   para manter a consistência com login/cadastro/etc. */
.mkx-ct-acoes{
    display:flex;
    justify-content:flex-end;
    gap:var(--ix-space-3);
    margin-top:var(--ix-space-5);
}
@media (max-width:600px){
    .mkx-ct-acoes{ justify-content:stretch; }
    .mkx-ct-acoes .buttonGray{ width:100%; }
}

/* Feedback do submit (role="status" aria-live="polite" no markup).
   Âmbito: só o formulário desta página — #mensagem existe noutras páginas
   (login, cadastro, carrinho) e esta folha é carregada em todo o site. */
#form_email #mensagem{ margin-top:var(--ix-space-4); font-size:var(--ix-fs-sm); }
#form_email #mensagem.text-danger{ color:var(--ix-danger); font-weight:var(--ix-fw-medium); }

/* Respeitar utilizadores com movimento reduzido (o DS faz isto globalmente;
   repetido aqui para garantir no âmbito desta página). */
@media (prefers-reduced-motion: reduce){
    .mkx-ct-grid, .mkx-ct-card, .mkx-ct-item, .mkx-ct-campo, .buttonGray{
        transition:none !important;
        animation:none !important;
    }
}