/* ==========================================================================
   BOTÕES E FORMULÁRIOS
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-sm);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 0.95em 1.8em;
	border: 1px solid transparent;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
	white-space: nowrap;
}

.btn--dark {
	background: var(--ink);
	color: var(--white);
	border-color: var(--ink);
}

.btn--dark:hover {
	background: var(--graphite);
}

.btn--light {
	background: var(--white);
	color: var(--ink);
	border-color: var(--white);
}

.btn--light:hover {
	background: transparent;
	color: var(--white);
}

.btn--outline-dark {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}

.btn--outline-dark:hover {
	background: var(--ink);
	color: var(--white);
}

.btn--outline {
	background: transparent;
	color: var(--ink);
	border-color: var(--line-color);
}

.btn--outline:hover {
	border-color: var(--ink);
}

.btn--whatsapp {
	border-color: var(--ink);
}

/* ---- Campos de formulário ---- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
	width: 100%;
	background: var(--white);
	border: 1px solid var(--line-color);
	padding: 0.85em 1em;
	font-size: var(--fs-base);
	transition: border-color var(--dur-fast) var(--ease);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--ink);
}

.form-row {
	margin-bottom: var(--space-sm);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.form-row label {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ash);
}

/* ---- Newsletter (rodapé e popup) ---- */
.newsletter-form {
	display: flex;
	border: 1px solid var(--line-color-on-dark);
}

.newsletter-form input[type="email"] {
	background: transparent;
	border: 0;
	color: var(--white);
	flex: 1;
}

.newsletter-form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.newsletter-form button {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0 1.2em;
	color: var(--white);
	border-left: 1px solid var(--line-color-on-dark);
	white-space: nowrap;
	transition: background var(--dur-fast) var(--ease);
}

.newsletter-form button:hover {
	background: rgba(255, 255, 255, 0.08);
}

.newsletter-form__feedback {
	margin-top: var(--space-2xs);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, 0.75);
}

.newsletter-form--popup {
	border-color: var(--line-color);
}

.newsletter-form--popup input[type="email"] {
	color: var(--ink);
}

.newsletter-form--popup input[type="email"]::placeholder {
	color: var(--ash);
}

.newsletter-form--popup button {
	color: var(--ink);
	border-left-color: var(--line-color);
}

.newsletter-popup .newsletter-form__feedback {
	color: var(--ash);
}

/* ---- Formulário de contato ---- */
.contact-form__feedback {
	margin-top: var(--space-xs);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--ash);
}