/* ============================================================
   Reserva de Evento — Dom Valtin
   Carregado apenas em page-reserva-evento.php via enqueue.
   Todo o CSS é escopado em .dv-reserva para não vazar no tema.
   Fontes (Cormorant Garamond + Jost) são enfileiradas no PHP —
   sem @import aqui, que bloqueia renderização.
============================================================ */

.dv-reserva {
	--ink: #1c1a17;
	--charcoal: #2b2723;
	--paper: #f6f3ec;
	--paper-dim: #eee9dd;
	--line: #d8d0bd;
	--gold: #a9822f;
	--gold-deep: #8a6a24;
	--grafite: #4a4640;
	--error: #8a3324;
	--ok: #3f5a3f;

	background: var(--paper);
	color: var(--ink);
	font-family: 'Jost', sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

.dv-reserva *,
.dv-reserva *::before,
.dv-reserva *::after {
	box-sizing: border-box;
}

/* ---------- Topbar ---------- */

.dv-reserva .dv-topbar {
	background: var(--charcoal);
	color: var(--paper);
	padding: 22px 28px 20px;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	border-bottom: 3px solid var(--gold);
}

.dv-reserva .dv-brand {
	font-family: 'Cormorant Garamond', serif;
	font-size: 30px;
	letter-spacing: 0.06em;
	font-style: italic;
	font-weight: 500;
}

.dv-reserva .dv-brand span {
	color: var(--gold);
	font-style: normal;
}

/* ---------- Layout ---------- */

.dv-reserva .dv-main {
	max-width: 920px;
	margin: 0 auto;
	padding: 36px 24px 80px;
}

.dv-reserva .dv-lede {
	font-family: 'Cormorant Garamond', serif;
	font-size: 19px;
	color: var(--grafite);
	max-width: 640px;
	margin: 0 0 34px;
	line-height: 1.5;
}

/* Fieldset/legend semânticos, com reset dos estilos default do browser.
   Legend não aceita border-bottom "esticado" por padrão — o float:left
   + width:100% é a técnica padrão para tratá-lo como bloco normal. */

.dv-reserva .dv-fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 44px;
	min-width: 0; /* corrige overflow de fieldset com grid/flex filhos */
}

.dv-reserva .dv-fieldset:last-of-type {
	margin-bottom: 0;
}

.dv-reserva .section-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 22px;
	font-style: italic;
	font-weight: 500;
	color: var(--gold-deep);
	margin: 0 0 4px;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--line);
}

.dv-reserva legend.section-title {
	float: left;
	width: 100%;
}

.dv-reserva legend.section-title + * {
	clear: both;
}

.dv-reserva .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.dv-reserva .dv-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 28px;
	margin-top: 18px;
}

.dv-reserva .dv-grid .full {
	grid-column: 1 / -1;
}

@media (max-width: 640px) {
	.dv-reserva .dv-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Campos ---------- */

.dv-reserva label {
	display: block;
	font-size: 11.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--grafite);
	margin-bottom: 6px;
}

.dv-reserva label .req {
	color: var(--error);
}

/* O CF7 envolve cada campo num span .wpcf7-form-control-wrap */
.dv-reserva .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.dv-reserva input[type="text"],
.dv-reserva input[type="tel"],
.dv-reserva input[type="email"],
.dv-reserva input[type="date"],
.dv-reserva input[type="number"],
.dv-reserva select,
.dv-reserva textarea {
	width: 100%;
	background: var(--paper);
	border: none;
	border-bottom: 1.5px solid var(--line);
	border-radius: 0;
	padding: 9px 2px;
	font-family: 'Jost', sans-serif;
	font-size: 15.5px;
	color: var(--ink);
	outline: none;
	transition: border-color 0.15s;
	box-shadow: none;
}

.dv-reserva input:focus,
.dv-reserva select:focus,
.dv-reserva textarea:focus {
	border-bottom-color: var(--gold);
	box-shadow: none;
}

.dv-reserva textarea {
	resize: vertical;
	min-height: 64px;
}

.dv-reserva select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4640' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 2px center;
	background-size: 16px;
	padding-right: 22px;
}

/* ---------- Participantes (linhas dinâmicas) ---------- */

.dv-reserva .participants-wrap {
	margin-top: 16px;
}

.dv-reserva .p-row {
	display: grid;
	grid-template-columns: 34px 1.6fr 1fr 34px;
	gap: 10px;
	align-items: end;
	margin-bottom: 12px;
}

.dv-reserva .p-num {
	font-family: 'Cormorant Garamond', serif;
	font-size: 20px;
	color: var(--gold-deep);
	text-align: center;
	padding-bottom: 9px;
}

.dv-reserva .p-row input {
	font-size: 14.5px;
}

.dv-reserva .p-remove {
	background: none;
	border: 1px solid var(--line);
	color: var(--grafite);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
	padding: 0;
	transition: all 0.15s;
}

.dv-reserva .p-remove:hover {
	border-color: var(--error);
	color: var(--error);
}

.dv-reserva .add-p {
	background: none;
	border: 1px dashed var(--gold);
	color: var(--gold-deep);
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	letter-spacing: 0.05em;
	padding: 9px 18px;
	cursor: pointer;
	margin-top: 4px;
	transition: background 0.15s;
}

.dv-reserva .add-p:hover {
	background: rgba(169, 130, 47, 0.08);
}

/* ---------- Ações e feedback do CF7 ---------- */

.dv-reserva .actions {
	margin-top: 48px;
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.dv-reserva .submit-btn {
	background: var(--charcoal);
	color: var(--paper);
	border: none;
	border-radius: 0;
	padding: 15px 36px;
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s;
}

.dv-reserva .submit-btn:hover {
	background: var(--gold-deep);
}

.dv-reserva .wpcf7-form.submitting .submit-btn {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Spinner nativo do CF7 alinhado ao botão */
.dv-reserva .wpcf7-spinner {
	margin: 0;
}

/* Mensagens de validação por campo */
.dv-reserva .wpcf7-not-valid-tip {
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	color: var(--error);
	margin-top: 4px;
}

.dv-reserva .wpcf7-not-valid {
	border-bottom-color: var(--error) !important;
}

/* Mensagem geral pós-envio */
.dv-reserva .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 12px 16px;
	border: none !important;
	border-left: 3px solid var(--gold) !important;
	background: var(--paper-dim);
	font-size: 14px;
	color: var(--grafite);
}

.dv-reserva .wpcf7-form.sent .wpcf7-response-output {
	border-left-color: var(--ok) !important;
	color: var(--ok);
}

.dv-reserva .wpcf7-form.invalid .wpcf7-response-output,
.dv-reserva .wpcf7-form.failed .wpcf7-response-output {
	border-left-color: var(--error) !important;
	color: var(--error);
}

/* ---------- Resumo dos participantes (é o que vai no e-mail) ----------
   Preenchido pelo JS e reescrito no servidor a cada envio. Envolva a tag
   do CF7 em <div data-dv-resumo> para o bloco se esconder quando não houver
   participantes; use a classe dv-oculto se preferir nunca exibi-lo.        */

.dv-reserva [data-dv-resumo] {
	margin-top: 18px;
}

.dv-reserva [data-dv-resumo][hidden],
.dv-reserva .dv-oculto {
	display: none;
}

.dv-reserva textarea#dvParticipantesLista {
	background: var(--paper-dim);
	border: 1px solid var(--line);
	padding: 12px 14px;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--grafite);
	min-height: 0;
	white-space: pre;
	overflow-x: auto;
	cursor: default;
}

.dv-reserva textarea#dvParticipantesLista:focus {
	border-color: var(--gold);
	border-bottom-color: var(--gold);
}

/* ---------- Stepper do formulário público (page-reserva-contato.php) ----
   Lista numerada horizontal com o nome de cada etapa. Os fieldsets recebem
   data-step / data-step-title no editor do CF7; assets/reserva-stepper.js
   monta a barra e alterna as etapas. Sem JS o formulário aparece inteiro. */

.dv-reserva .dv-steps {
	list-style: none;
	display: flex;
	margin: 0 0 40px;
	padding: 0;
	counter-reset: none;
}

.dv-reserva .dv-step {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

/* Conector entre os círculos */
.dv-reserva .dv-step::before {
	content: '';
	position: absolute;
	top: 16px;
	right: 50%;
	width: 100%;
	height: 3px;
	background: var(--line);
	z-index: 0;
}

.dv-reserva .dv-step:first-child::before {
	display: none;
}

.dv-reserva .dv-step.is-done::before,
.dv-reserva .dv-step.is-current::before {
	background: var(--gold);
}

.dv-reserva .dv-step-dot {
	position: relative;
	z-index: 1;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid var(--line);
	background: var(--paper-dim);
	color: var(--grafite);
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
	padding: 0;
	transition: all 0.15s;
}

.dv-reserva .dv-step.is-reachable .dv-step-dot {
	cursor: pointer;
}

.dv-reserva .dv-step.is-done .dv-step-dot {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--paper);
}

.dv-reserva .dv-step.is-current .dv-step-dot {
	background: var(--charcoal);
	border-color: var(--gold);
	color: var(--paper);
}

.dv-reserva .dv-step-name {
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--grafite);
}

.dv-reserva .dv-step.is-current .dv-step-name {
	color: var(--gold-deep);
	font-weight: 600;
}

/* Em telas estreitas, só o nome da etapa atual fica visível */
@media (max-width: 640px) {
	.dv-reserva .dv-step-name {
		display: none;
	}
	.dv-reserva .dv-step.is-current .dv-step-name {
		display: block;
	}
}

/* Navegação Voltar / Avançar */
.dv-reserva .dv-step-nav {
	margin-top: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.dv-reserva .dv-step-prev {
	background: none;
	border: 1px solid var(--line);
	color: var(--grafite);
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 14px 28px;
	cursor: pointer;
	transition: all 0.15s;
}

.dv-reserva .dv-step-prev:hover {
	border-color: var(--charcoal);
	color: var(--charcoal);
}

.dv-reserva .dv-step-prev[hidden],
.dv-reserva .dv-step-next[hidden],
.dv-reserva .actions[hidden],
.dv-reserva fieldset[hidden] {
	display: none;
}

/* Só o Avançar visível: encosta na direita */
.dv-reserva .dv-step-nav .dv-step-next {
	margin-left: auto;
}

/* Erro inline do stepper (mesmo visual do wpcf7-not-valid-tip) */
.dv-reserva .dv-field-tip {
	display: block;
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	color: var(--error);
	margin-top: 4px;
}

.dv-reserva .dv-invalid {
	border-bottom-color: var(--error) !important;
}

/* ---------- Mobile: formulário 100% utilizável ---------- */

@media (max-width: 640px) {

	/* iOS dá zoom automático em campo com fonte < 16px */
	.dv-reserva input[type="text"],
	.dv-reserva input[type="tel"],
	.dv-reserva input[type="email"],
	.dv-reserva input[type="date"],
	.dv-reserva input[type="number"],
	.dv-reserva select,
	.dv-reserva textarea,
	.dv-reserva .p-row input {
		font-size: 16px;
	}

	/* Repetidor: nome e telefone empilhados, número e remover na lateral */
	.dv-reserva .p-row {
		grid-template-columns: 26px 1fr 30px;
		align-items: center;
		row-gap: 8px;
	}

	.dv-reserva .p-row .p-num {
		grid-column: 1;
		grid-row: 1 / span 2;
		padding-bottom: 0;
	}

	.dv-reserva .p-row .p-nome {
		grid-column: 2;
		grid-row: 1;
	}

	.dv-reserva .p-row .p-tel {
		grid-column: 2;
		grid-row: 2;
	}

	.dv-reserva .p-row .p-remove {
		grid-column: 3;
		grid-row: 1 / span 2;
		margin-bottom: 0;
	}

	/* Alvos de toque maiores no stepper */
	.dv-reserva .dv-step-dot {
		width: 38px;
		height: 38px;
		font-size: 14px;
	}

	.dv-reserva .dv-step::before {
		top: 19px;
	}

	/* Botões de navegação e envio confortáveis no polegar */
	.dv-reserva .dv-step-nav {
		flex-wrap: wrap;
	}

	.dv-reserva .dv-step-prev,
	.dv-reserva .dv-step-nav .dv-step-next {
		flex: 1 1 auto;
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.dv-reserva .actions .submit-btn {
		width: 100%;
		padding-top: 16px;
		padding-bottom: 16px;
	}
}