*{box-sizing:border-box}

.contact-wrap{display:grid; place-content:center; padding:48px 16px}
.contact-card{
  max-width: 980px;
  width: min(100%, 980px);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) , var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 3vw, 32px);
}

.contact-title{font-size:clamp(22px, 2.6vw, 28px); margin:0 0 6px}
.contact-intro{color:var(--muted); margin:0 0 22px}

.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 720px){ .form-grid{ grid-template-columns: 1fr; } }

.field{display:flex; flex-direction:column; gap:8px}
.field label{font-weight:600}
.req{color:var(--primary)}
.hint{color:var(--muted); font-size:12px}
.hp{display:none}

input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea{
  background:#0e141d;
  border:1px solid var(--border);
  color:var(--text);
  border-radius:12px;
  padding:12px 14px;
  outline:none;
  transition: border .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea{resize:vertical; min-height:140px}
input:focus, textarea:focus{
  border-color: rgba(42,168,255,.6);
  box-shadow: 0 0 0 4px rgba(42,168,255,.15);
}

.consent{display:flex; align-items:center; gap:10px; margin:18px 0 8px; color:var(--muted)}
.consent input{width:18px; height:18px; accent-color: var(--primary)}

.actions{display:flex; align-items:center; gap:16px; margin-top:8px}
.note{color:var(--muted); font-size:12px}

.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 20px;
  border-radius:12px;
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  color:white; font-weight:700; letter-spacing:.2px;
  border:none; cursor:pointer;
  box-shadow: 0 8px 20px rgba(32,158,255,.35);
  transition: transform .06s ease, filter .2s ease, opacity .2s ease;
}
.btn:hover{ filter:brightness(1.02) }
.btn:active{ transform: translateY(1px) }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

.btn__spinner{
  width:0; height:0; border-radius:50%;
  border:2px solid transparent; border-top-color:white; border-right-color:white;
  animation: spin .8s linear infinite;
  display:none; /* só visível quando loading */
}
.btn.loading .btn__spinner{ display:inline-block; width:16px; height:16px }
.btn.loading .btn__label{ opacity:.8 }

@keyframes spin{ to{ transform:rotate(360deg) } }

.inline-status{min-height:18px; margin-top:6px; font-size:13px}
.inline-status.ok{ color: var(--success) }
.inline-status.err{ color: var(--danger) }

/* Estados inválidos */
.is-invalid{ border-color: rgba(239,68,68,.9) !important; box-shadow: 0 0 0 4px rgba(239,68,68,.15) !important }
.field .error-text{ color: var(--danger); font-size:12px }

/* MessageBox (modal) */
.msgbox{
  position:fixed; inset:0; display:none; place-items:center;
  background: rgba(10,14,20,.55); backdrop-filter: blur(4px);
  z-index: 9999;
}
.msgbox[aria-hidden="false"]{ display:grid }

.msgbox__panel{
  width:min(520px, 92vw);
  background: #0f1622;
  border:1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding:20px 20px 16px;
  display:grid; grid-template-columns: 48px 1fr auto; gap:14px; align-items:flex-start;
  outline:none;
}
.msgbox__icon{
  width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  font-size:26px; font-weight:900; color:white;
}
.msgbox--success .msgbox__icon{ background: linear-gradient(180deg,#22c55e,#16a34a) }
.msgbox--error .msgbox__icon{ background: linear-gradient(180deg,#ef4444,#dc2626) }

.msgbox__content h3{ margin:0 0 4px; font-size:18px }
.msgbox__content p{ margin:0; color:var(--muted) }

.msgbox__close{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--border);
  background:#0d1320; color:#b9c3d3; font-size:18px; line-height:0;
  display:grid; place-items:center; cursor:pointer;
}
.msgbox__close:hover{ filter:brightness(1.1) }

/* ===== QFRIO – FIX SCOPED (não altera o site todo) ===== */
.contact-wrap{
  /* mapear tokens do form para os tokens do tema global */
  --border: var(--stroke);        /* style.css usa --stroke */
  --card: var(--card);
  --text: var(--text);
  --muted: var(--muted);
  --primary: var(--brand);        /* usa a cor de marca existente */
  --primary-600: #1995ea;         /* tom ligeiramente mais escuro para hover */
  --success: #22c55e;
  --danger: #ef4444;
  --radius: 12px;
  --shadow: var(--shadow);
}

/* inputs e textarea com contraste do tema */
.contact-wrap input[type="text"],
.contact-wrap input[type="email"],
.contact-wrap input[type="tel"],
.contact-wrap input[type="search"],
.contact-wrap textarea{
  background: var(--card) !important;   /* antes era #0e141d */
  border: 1px solid var(--stroke) !important;
  color: var(--text) !important;
}
.contact-wrap input::placeholder,
.contact-wrap textarea::placeholder{
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}


/* botão bem visível em qualquer fundo */
.contact-wrap .btn{
  background: linear-gradient(180deg, var(--primary), var(--primary-600)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(32,158,255,.35);
}
.contact-wrap .btn:hover{ filter: brightness(1.03); }
.contact-wrap .btn:focus{ outline: none; box-shadow: 0 0 0 4px rgba(42,168,255,.2); }

/* estado loading do botão mantém contraste */
.contact-wrap .btn.loading .btn__label{ opacity: .9; }

/* ==== Fix: cor do título da mensagem de confirmação ==== */
.msgbox__content h3 {
  color: #fff !important;
}

.msgbox--success .msgbox__content h3 { color: #eaffef !important; }
.msgbox--error   .msgbox__content h3 { color: #ffecec !important; }