/* ==========================================================================
   Contacto page: "Solicitar Orçamento" form component.
   Replicated from the prototype source (index_dc.html, bloco isContacto).
   Client-side validation + simulated submit states only.
   Real submission endpoint decided later.
   ========================================================================== */

[data-contacto-grid] { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(40px,5vw,80px); margin: clamp(36px,4vw,56px) 0 0; align-items: start; }

/* ---- Campos ---- */
[data-field-grid] { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
[data-field-grid-tail] { margin: 30px 0 0; align-items: start; }
[data-field] { margin: 0; }
[data-field-block] { margin: 30px 0 0; }
[data-field] label { display: block; font: 500 14px/1 var(--mf-font-body); color: #0E1A2B; margin: 0 0 9px; }
[data-required-mark] { color: var(--mf-blue); }

[data-field] input,
[data-field] select {
	width: 100%;
	height: 54px;
	padding: 0 16px;
	border: 1px solid #C2CCDA;
	background: #FFFFFF;
	border-radius: 3px;
	font: 400 16px/1 var(--mf-font-body);
	color: #0E1A2B;
	outline: none;
	box-sizing: border-box;
	transition: border-color .22s ease, box-shadow .22s ease;
}
[data-field] textarea {
	width: 100%;
	padding: 15px 16px;
	border: 1px solid #C2CCDA;
	background: #FFFFFF;
	border-radius: 3px;
	font: 400 16px/1.65 var(--mf-font-body);
	color: #0E1A2B;
	outline: none;
	resize: vertical;
	box-sizing: border-box;
	transition: border-color .22s ease, box-shadow .22s ease;
}

[data-field] input:focus-visible,
[data-field] select:focus-visible,
[data-field] textarea:focus-visible { border-color: #1478C8; box-shadow: 0 0 0 3px rgba(20,120,200,0.14); }

[data-field-error] { display: none; font: 400 14px/1.5 var(--mf-font-body); color: #B3261E; margin: 8px 0 0; }
[data-field].is-invalid input,
[data-field].is-invalid select,
[data-field].is-invalid textarea { border-color: #B3261E; }
[data-field].is-invalid [data-field-error],
[data-chip-field].is-invalid [data-field-error] { display: block; }

/* ---- Chips ---- */
[data-chip-field] { margin: 30px 0 0; }
[data-field-grid-tail] [data-chip-field] { margin: 0; }
[data-chip-legend] { display: block; font: 500 14px/1 var(--mf-font-body); color: #0E1A2B; margin: 0 0 9px; }
[data-chip-legend]:has(+ [data-chip-help]) { margin-bottom: 4px; }
[data-chip-help] { display: block; font: 400 14px/1.5 var(--mf-font-body); color: var(--mf-text-soft); margin: 0 0 12px; }
[data-chip-group] { display: flex; flex-wrap: wrap; gap: 9px; }
[data-chip-group] input { position: absolute; opacity: 0; width: 1px; height: 1px; }
[data-chip-label] {
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 0 18px;
	border: 1px solid #C2CCDA;
	background: #FFFFFF;
	border-radius: 3px;
	font: 500 15px/1 var(--mf-font-body);
	color: var(--mf-text-mid);
	cursor: pointer;
	transition: background .24s ease, color .24s ease, border-color .24s ease;
}
[data-chip-group] input:checked + [data-chip-label] { background: var(--mf-navy); border-color: var(--mf-navy); color: #FFFFFF; }
[data-chip-group] input:focus-visible + [data-chip-label] { outline: 2px solid var(--mf-blue); outline-offset: 2px; }
[data-chip-field].is-invalid [data-chip-label] { border-color: #B3261E; }

/* Segmentado: como prefere ser contactado */
[data-chip-segmented] { display: flex; flex-wrap: nowrap; gap: 3px; background: #EEF2F7; padding: 4px; border-radius: 3px; }
[data-chip-segmented] [data-chip-label] { flex: 1; justify-content: center; height: 46px; padding: 0 10px; border: none; background: transparent; border-radius: 2px; color: #44546B; }
[data-chip-segmented] input:checked + [data-chip-label] { background: #FFFFFF; color: #0E1A2B; box-shadow: 0 1px 3px rgba(8,32,63,0.14); }

/* ---- Submeter ---- */
[data-submit-row] { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin: 32px 0 0; }
[data-form-submit] {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 48px;
	padding: 0 24px;
	border: none;
	background: var(--mf-yellow);
	color: var(--mf-navy);
	font: 600 14px/1 var(--mf-font-body);
	letter-spacing: 0.002em;
	border-radius: 2px;
	cursor: pointer;
	transition: background .24s ease, gap .4s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
[data-form-submit]:hover { background: #FFC93F; gap: 16px; box-shadow: 0 4px 14px rgba(242,184,36,0.2); }
[data-form-submit]:disabled { cursor: not-allowed; opacity: 0.85; }
[data-form-submit] [data-btn-arrow] { font: 400 14px/1 var(--mf-font-mono); }
[data-submit-note] { font: 400 15px/1.6 var(--mf-font-body); color: var(--mf-text-soft); max-width: 34ch; }

[data-btn-spinner] { display: none; width: 16px; height: 16px; border: 2px solid rgba(8,32,63,0.28); border-top-color: var(--mf-navy); border-radius: 50%; }
[data-quote-form].is-loading [data-btn-spinner] { display: inline-block; animation: mindelo-spin 0.7s linear infinite; }
[data-quote-form].is-loading [data-btn-arrow] { display: none; }
@keyframes mindelo-spin { to { transform: rotate(360deg); } }

/* ---- Erro: banner acima do formulario, os campos mantem os valores ---- */
[data-form-error] { display: none; gap: 14px; align-items: flex-start; background: #FDF3F2; border: 1px solid #F0C4C0; border-radius: 3px; padding: 18px 20px; margin: 0 0 28px; }
[data-form-error].is-visible { display: flex; }
[data-form-error-mark] { width: 22px; height: 22px; border-radius: 50%; background: #B3261E; color: #FFFFFF; font: 600 13px/22px var(--mf-font-body); text-align: center; flex-shrink: 0; }
[data-form-error-title] { font: 600 16px/1.4 var(--mf-font-body); color: #7A1C15; }
[data-form-error] p { font: 400 15px/1.65 var(--mf-font-body); color: #7A1C15; margin: 6px 0 0; max-width: 60ch; }
[data-form-error] p a { color: inherit; text-decoration: underline; }
[data-form-retry] {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 600 15px/1 var(--mf-font-body);
	color: #B3261E;
	margin: 14px 0 0;
	padding: 0 0 6px;
	background: none;
	border: none;
	border-bottom: 1px solid #E7A9A3;
	cursor: pointer;
	transition: gap .38s cubic-bezier(.16,1,.3,1);
}
[data-form-retry]:hover { gap: 16px; }
[data-form-retry] [data-btn-arrow] { font-family: var(--mf-font-mono); }

/* ---- Sucesso ---- */
[data-form-success] { display: none; border: 1px solid var(--mf-line); border-top: 3px solid var(--mf-yellow); border-radius: 3px; padding: clamp(32px,4vw,56px); background: #FBFCFD; }
[data-form-success].is-visible { display: block; }
[data-success-mark] { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mf-navy); color: var(--mf-yellow); font: 400 20px/1 var(--mf-font-mono); }
[data-form-success] h3 { font: 700 clamp(26px,2.4vw,34px)/1.14 var(--mf-font-heading); letter-spacing: -0.026em; margin: 26px 0 0; max-width: 22ch; color: var(--mf-ink); }
[data-form-success] p { font: 400 17px/1.75 var(--mf-font-body); color: #44546B; margin: 16px 0 0; max-width: 56ch; }
[data-success-actions] { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 0; }
[data-success-call] a,
[data-form-reset] { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 22px; font: 600 14px/1 var(--mf-font-body); letter-spacing: 0.002em; border-radius: 2px; cursor: pointer; box-sizing: border-box; }
[data-success-call] a { background: var(--mf-navy); color: #FFFFFF; transition: background .24s ease, gap .4s cubic-bezier(.16,1,.3,1); }
[data-success-call] a:hover { background: #123A6E; gap: 18px; }
[data-form-reset] { border: 1px solid #C2CCDA; background: none; color: #44546B; transition: border-color .24s ease, color .24s ease; }
[data-form-reset]:hover { border-color: var(--mf-navy); color: var(--mf-navy); }

[data-quote-form].is-hidden { display: none; }

/* ---- Coluna lateral ---- */
[data-contacto-aside] { position: sticky; top: 96px; }
[data-aside-card] { background: #F5F7FA; border: 1px solid var(--mf-line); border-radius: 3px; padding: clamp(24px,2.4vw,32px); }
[data-aside-label] { font: 500 10px/1 var(--mf-font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: #8FA3BE; }
[data-aside-card] h3 { font: 600 21px/1.28 var(--mf-font-heading); letter-spacing: -0.016em; margin: 16px 0 0; color: var(--mf-ink); }
[data-aside-card] p { font: 400 16px/1.7 var(--mf-font-body); color: #44546B; margin: 10px 0 0; }
[data-aside-btn] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 52px;
	width: 100%;
	margin: 20px 0 0;
	border: 1px solid var(--mf-navy);
	color: var(--mf-navy);
	font: 600 15px/1 var(--mf-font-body);
	border-radius: 2px;
	box-sizing: border-box;
	transition: background .24s ease, color .24s ease;
}
[data-aside-btn]:hover { background: var(--mf-navy); color: #FFFFFF; }
[data-aside-map-card] { border: 1px solid var(--mf-line); border-radius: 3px; margin: 20px 0 0; overflow: hidden; }
[data-aside-map] { height: 190px; background: #E8ECF2; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--mf-line); }
[data-aside-map] span { font: 400 13px/1.5 var(--mf-font-mono); color: #8FA3BE; text-align: center; }
[data-aside-map-body] { padding: 20px; }
[data-aside-map-body] p { font: 400 16px/1.6 var(--mf-font-body); color: #0E1A2B; margin: 12px 0 0; }

@media (max-width: 1024px) {
	[data-contacto-grid] { grid-template-columns: 1fr; }
	[data-contacto-aside] { position: static; }
}
@media (max-width: 640px) {
	[data-field-grid] { grid-template-columns: 1fr; }
	[data-chip-segmented] { flex-wrap: wrap; }
	[data-chip-segmented] [data-chip-label] { flex: 1 0 100%; }
}


/* Mapa incorporado da sede */
[data-aside-map] { padding: 0; }
[data-aside-map] iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.15); }

/* Espacamento por campo, como no prototipo */
[data-field-for="espaco"] [data-chip-legend] { margin-bottom: 12px; }