/* Pagina: pages/contact.php (estilos extraidos do arquivo e convertidos para o tema claro) */
.contact-wrap{max-width: 680px;margin: 0 auto;padding: 20px 14px 80px;font-family:"Inter",sans-serif;}
.contact-header{padding: 26px 2px 6px;}
.contact-title{font-size: 22px;font-weight: 700;color: #000000;margin: 0 0 4px;letter-spacing: -.3px;font-family:"Space Grotesk",sans-serif;}
.contact-subtitle{font-size: 13px;color: #5c5c63;margin: 0 0 20px;}
.c-divider{height: 1px;background: #f5f5f6;margin: 0 0 20px;}

/* Banner WhatsApp */
.wa-banner{
    background: #eaf7ef;border: 1px solid rgba(37,211,102,.2);
    border-radius: 12px;padding: 14px 16px;margin-bottom: 16px;
    display: flex;align-items: center;gap: 14px;
}
.wa-icon{width: 42px;height: 42px;border-radius: 50%;background: #fff1f0;
    display: flex;align-items: center;justify-content: center;flex-shrink: 0;}
.wa-icon i{font-size: 20px;color: #12823b;}
.wa-text-title{font-size: 13px;font-weight: 700;color: #12823b;margin-bottom: 2px;}
.wa-text-desc{font-size: 12px;color: #5c5c63;}

/* Card */
.contact-card{background: #ffffff;border-radius: 12px;padding: 20px;margin-bottom: 12px;border: 1px solid #e6e6e9;}

.form-label{color: #5c5c63;font-size: 10px;font-weight: 700;margin-bottom: 6px;display: block;text-transform: uppercase;letter-spacing: .5px;}
.form-control{
    background: #ffffff!important;border: 1px solid #e6e6e9!important;
    border-radius: 8px!important;color: #000000!important;
    padding: 12px 14px!important;font-size: 14px!important;
    transition: border-color .18s!important;width: 100%;
    resize: vertical;min-height: 140px;
}
.form-control:focus{border-color: #DC2626!important;box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.12)!important;outline: none!important;background: #f5f5f6!important;}
.form-control::placeholder{color: #000000!important;}

.char-count{text-align: right;font-size: 11px;color: #000000;margin-top: 6px;transition: color .2s;}
.char-count.warn{color: #f87171;}

.help-row{display: flex;align-items: center;gap: 6px;margin-top: 8px;font-size: 12px;color: #000000;}
.help-row i{font-size: 13px;}

/* Botão */
.btn-enviar{
    background: linear-gradient(135deg,#DC2626 0%,#b91c1c 100%);
    color: #ffffff;padding: 13px 24px;border: none;border-radius: 10px;
    font-size: 14px;font-weight: 700;cursor: pointer;
    transition: all .2s ease;width: 100%;
    display: flex;align-items: center;justify-content: center;gap: 8px;
    box-shadow: 0 4px 16px rgba(225, 6, 0, 0.18);letter-spacing: .2px;
}
.btn-enviar:hover{transform: translateY(-2px);box-shadow: 0 6px 22px rgba(225, 6, 0, 0.18);}
.btn-enviar i{font-size: 18px;}

/* Toast */
.toast-container{position: fixed;top: 24px;right: 16px;z-index: 99999;display: flex;flex-direction: column;gap: 10px;pointer-events: none;max-width: 340px;}
@keyframes toastSlideIn{from{opacity: 0;transform: translateX(110%)}to{opacity: 1;transform: translateX(0)}}
@keyframes toastSlideOut{to{opacity: 0;transform: translateX(110%)}}
.toast-item{background: rgba(0, 0, 0, 0.45);backdrop-filter: blur(20px);border: 1px solid #e6e6e9;border-radius: 12px;padding: 14px 16px;min-width: 280px;max-width: 340px;display: flex;align-items: center;gap: 12px;box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);animation: toastSlideIn .3s ease;pointer-events: auto;}
.toast-item.removing{animation: toastSlideOut .3s ease forwards;}
.toast-icon-wrap{flex-shrink: 0;width: 34px;height: 34px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 15px;font-weight: 700;}
.toast-item.t-error .toast-icon-wrap{background: #fff1f0!important;color: #f87171!important;}
.toast-item.t-success .toast-icon-wrap{background: #eaf7ef!important;color: #12823b!important;}
.toast-item.t-info .toast-icon-wrap{background: #fff1f0!important;color: #e10600!important;}
.toast-body{flex: 1;min-width: 0;}
.toast-ttl{font-size: 13px;font-weight: 700;margin-bottom: 2px;}
.toast-item.t-error .toast-ttl{color: #f87171!important;}
.toast-item.t-success .toast-ttl{color: #12823b!important;}
.toast-item.t-info .toast-ttl{color: #e10600!important;}
.toast-msg{font-size: 12px;color: #5c5c63;line-height: 1.4;}
@media(max-width:600px){
    .contact-wrap{padding: 20px 12px 80px;}
    .contact-title{font-size: 20px;}
    .contact-card{padding: 16px;}
    .toast-container{top: 16px;right: 12px;max-width: calc(100vw - 24px);}
    .toast-item{min-width: auto;max-width: none;}
}