/*
 * Fontinha — barra de reserva, sobreposta ao hero.
 *
 * Desktop: nó 4001:809. Barra de 697x48 centrada no frame de 1440, com a base a
 * 48px do fundo do hero. Fundo sólido #3D3D3C (o mesmo ink do header, não é
 * translúcido — confirmado por leitura dos pixéis do frame).
 *
 * Mobile: Frame 38 (4003:2386), 331.382x58.585 em (22.663, 305) — sobreposta à
 * fotografia, numa grelha 2x2 de células de 161.691x27.7925 com 8px de
 * intervalo horizontal e 3 vertical. Os intervalos deixam ver a fotografia.
 * Três células a #3D3D3C e a quarta, que é o botão, com o gradiente dourado e
 * texto escuro.
 *
 * ATENÇÃO À ESTRUTURA — este ficheiro NÃO é mobile-first, ao contrário do resto
 * do tema. A base tem só o que é comum às duas larguras, e cada uma tem o seu
 * bloco: `max-width: 1199px` para mobile e `min-width: 1200px` para desktop.
 *
 * A razão: os dois desenhos são composições diferentes da mesma peça — linha
 * contra grelha, fundo na barra contra fundo nas células —, e com a base a
 * conter os valores de mobile qualquer coisa que o bloco de desktop se
 * esquecesse de desfazer passava para lá em silêncio. Foi o que aconteceu com o
 * `background: none`: a barra de desktop ficou sem fundo, com o texto branco
 * direto na fotografia, e só apareceu na medição.
 *
 * Larguras e alturas dos ícones estão em px porque são geometria de asset
 * exportado do Figma, não espaçamento — os espaçamentos vêm todos de tokens.
 */

/* ============================================================
   Comum às duas larguras
   ============================================================ */

.booking {
	position: absolute;
	color: var(--s-text-on-media);
}

.booking__icone {
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	width: 14px;
}

.booking__icone svg {
	display: block;
}

/* Geometria exportada do Figma, preservada por ícone. */
.booking__campo .booking__icone svg {
	width: auto;
	height: 9.227px;
}

.booking__campo:last-of-type .booking__icone svg {
	width: 12.072px;
	height: 8.993px;
}

.booking__campo {
	display: flex;
	align-items: center;
}

.booking__texto {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

.booking__label {
	font-family: var(--font-body);
	line-height: normal;
	text-transform: uppercase;
}

/* O <input type="date"> e o <select> trazem molduras e fundos do sistema
   operativo. Aqui são só texto sobre a barra. */
.booking__valor {
	appearance: none;
	-webkit-appearance: none;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-family: var(--font-body);
	font-weight: var(--fw-body);
	line-height: normal;
	cursor: pointer;

	/* No Figma as duas linhas do campo medem 14px cada (nós 4001:811 e 4001:814,
	   12.727px com leading normal). A etiqueta, que é um <span>, dá exatamente
	   esses 14px. Este não: um <input type="date"> tem um campo de edição na
	   shadow DOM cuja caixa é mais alta que a linha, e mede 16px. A diferença
	   não é de métrica da fonte — é do controlo nativo. Daí a altura explícita,
	   que a 12px de corpo não corta nada. */
	height: 14px;
}

.booking__valor:focus-visible {
	outline: 2px solid var(--s-text-on-media);
	outline-offset: 2px;
}

/* O indicador nativo do calendário fica escondido: o ícone à esquerda é o do
   design, e o JS abre o seletor com showPicker(). */
.booking__valor::-webkit-calendar-picker-indicator {
	display: none;
}

.booking__valor::-webkit-datetime-edit {
	padding: 0;
}

/* O espelho da data só existe em mobile — em desktop o input nativo tem espaço
   de sobra e mostra-se como está. */
.booking__espelho {
	display: none;
}

.booking__ornamento svg {
	display: block;
	width: 24.909px;
	height: 21.571px;
}

.booking__erro {
	margin: 0;
	color: var(--s-text-on-media);
	font-size: var(--fs-xsmall);
	line-height: normal;
}

.booking__erro[hidden] {
	display: none;
}

/* ============================================================
   Mobile — até 1199px. Frame 38 (4003:2386).
   ============================================================ */

@media (max-width: 1199px) {
	.booking {
		/* Em percentagem para acompanhar a largura: 22.663 e 331.382 sobre 375. */
		left: 6.0435%;
		width: 88.3685%;

		/* Ancorada ao fundo da fotografia e não ao topo: no desenho fica 41.6px
		   acima do fim dela (363.585 contra 405.2), e assim continua certa
		   quando a altura do hero mudar. */
		bottom: 41.615px;

		display: grid;

		/* minmax(0, 1fr) e não 1fr: um item de grelha tem `min-width: auto`, por
		   isso o conteúdo empurrava as colunas para 169.6 e 181.7 em vez das
		   161.691 iguais do desenho, e a página ganhava 7px de scroll
		   horizontal. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 8px;
		row-gap: 3px;
		padding: 0;

		/* O fundo vive nas células, não na barra: os intervalos da grelha
		   deixam ver a fotografia. */
		background: none;
	}

	.booking__campo {
		gap: var(--sp-2);
		height: 27.7925px;
		min-width: 0;
		padding-inline: 7.35px;
		background: var(--s-bg-dark);
	}

	/* A etiqueta e o valor na mesma linha, com o valor encostado à direita — no
	   desenho os três valores acabam todos a ~147 numa caixa de 148. */
	.booking__texto {
		align-items: center;
		gap: var(--sp-2);
	}

	.booking__texto .booking__valor {
		margin-left: auto;
		text-align: right;
	}

	/* O espelho toma o lugar do input no fluxo, com a largura do texto — 51px
	   no desenho, contra os 74 que o controlo nativo reserva. */
	.booking__espelho {
		display: block;
		margin-left: auto;
		font-size: 10.996px;
		line-height: normal;
		white-space: nowrap;
	}

	/* O input cobre a célula, invisível: o seletor nativo continua a abrir no
	   toque e o campo continua a ser focável e a receber o `required`. */
	.booking__campo {
		position: relative;
	}

	.booking__valor[type="date"] {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	/* Com o input invisível, o anel de foco tem de ir para a célula. */
	.booking__campo:focus-within {
		outline: 2px solid var(--s-text-on-media);
		outline-offset: 2px;
	}

	.booking__label {
		font-size: 10.996px; /* nó 4002:1125 */
		font-weight: var(--fw-body-strong);
		white-space: nowrap;
	}

	.booking__valor {
		font-size: 10.996px; /* nó 4002:1126 */
	}

	/* A quarta célula. No desenho mobile não é um botão fantasma: é o gradiente
	   dourado com o rótulo em escuro — nó 4002:1146, `text-[#3d3d3c]`, Gill Sans
	   Medium 10.427px. Amostrei o fundo e confirma-se o --g-gold: (173,117,90) a
	   x=210 e (238,195,147) a x=340, contra (168,111,86) e (238,194,146)
	   previstos pelas paradas do gradiente. */
	.booking__submit {
		height: 27.7925px;
		min-height: 0;
		padding: 0;
		border: 0;

		/* O .btn--ghost desenha a moldura com `box-shadow: inset`, não com
		   `border` — sem isto ficava um anel por cima do dourado. */
		box-shadow: none;
		background: var(--g-gold);
		color: var(--s-text);
		font-family: var(--font-body);
		font-size: 10.427px;
		font-weight: var(--fw-body-strong);
		letter-spacing: 0;
		white-space: nowrap;
	}

	.booking__submit:hover,
	.booking__submit:focus-visible {
		filter: brightness(1.08);
	}

	/* Os hexágonos não têm sítio no Frame 38. */
	.booking__ornamento {
		display: none;
	}

	.booking__erro {
		grid-column: 1 / -1;
		padding: var(--sp-2) 7.35px;
		background: var(--s-bg-dark);
	}
}

/* ============================================================
   Desktop — 1200px e acima. Nó 4001:809.
   ============================================================ */

@media (min-width: 1200px) {
	/* Sobreposta ao hero, centrada, com a base a 48px do fundo. O .hero é o
	   bloco de referência — ver hero.css. */
	.booking {
		bottom: var(--sp-12);

		/* Centrada por margens automáticas, e não por left:50% + translate.
		   Com left:50% a largura disponível de um bloco absoluto passa a ser
		   metade do hero, e a barra encolhia consoante o ecrã: 746px a 1440,
		   796px a 1920. Assim tem sempre a largura do conteúdo. */
		inset-inline: 0;
		margin-inline: auto;
		width: fit-content;
		max-width: calc(100% - var(--sp-8));

		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--sp-12);

		/* 10px em cima e em baixo, e não os 8 do --sp-2: a barra do Figma tem
		   48px e o conteúdo 28 (as duas linhas de 14). 28 + 2x10 = 48. Fora da
		   escala de espaçamentos, mas é medição do nó 4001:809 e não escolha. */
		padding: 10px var(--sp-4);

		/* Fundo sólido do nó 4001:809 — aqui é a barra que o leva. */
		background: var(--s-bg-dark);
	}

	.booking__campo {
		gap: var(--sp-4);
	}

	/* A etiqueta fica por cima do valor, como no nó 4001:809. */
	.booking__texto {
		flex-direction: column;
	}

	.booking__label,
	.booking__valor {
		font-size: var(--fs-xsmall);
	}

	.booking__label {
		font-weight: var(--fw-body);
	}

	/* O botão fantasma. A moldura e o padding vêm do .btn e do .btn--ghost;
	   redeclarar a moldura com `border` somava 2px à altura, porque a do ghost
	   é `box-shadow: inset`.

	   A cor tem de estar aqui: o .btn--ghost tira-a do --s-text-on-dark, que é
	   creme, e o Figma usa branco nesta barra. Como a moldura do ghost é
	   `currentColor`, a cor manda nas duas — deixá-la cair punha o botão e o
	   anel a creme. */
	.booking__submit {
		align-self: auto;
		color: var(--s-text-on-media);
		white-space: nowrap;
	}

	.booking__submit:hover,
	.booking__submit:focus-visible {
		background: var(--s-text-on-media);
		color: var(--s-bg-dark);
	}

	.booking__ornamento {
		display: block;
		flex: 0 0 auto;
	}

	/* A mensagem de erro sai da linha da barra e assenta por baixo dela, para
	   não empurrar os campos quando aparece. */
	.booking__erro {
		position: absolute;
		top: calc(100% + var(--sp-2));
		left: 0;
		right: 0;
		padding: var(--sp-2) var(--sp-4);
		background: var(--s-bg-dark);
		text-align: center;
	}
}