/* Nenhuma página deve rolar para os lados */
html, body {
	overflow-x: hidden;
	max-width: 100%;
}

/* O zoom é desativado pela meta viewport (user-scalable=no) nas páginas. */

/* ── Campos de data no Safari / iOS ──────────────────────────────────
   O Safari não estiliza input[type=date] como os outros navegadores:
   o campo aparece vazio, sem ícone de calendário e com altura
   colapsada. As regras abaixo devolvem aparência e altura. */
input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	/* ícone de calendário próprio, já que o iOS não desenha um */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .75rem center;
	background-size: 1rem 1rem;
	padding-right: 2.25rem;
	min-height: calc(1.5em + 1rem + 2px);
	line-height: 1.5;
	text-align: left;
}

/* o iOS centraliza e encolhe o texto interno do campo */
input[type="date"]::-webkit-date-and-time-value {
	text-align: left;
	min-height: 1.5em;
	line-height: 1.5;
	margin: 0;
}
input[type="date"]::-webkit-datetime-edit {
	line-height: 1.5;
	padding: 0;
	display: block;
}

/* esconde o ícone nativo do Chrome/Edge para não duplicar com o nosso,
   mantendo a área clicável que abre o seletor */
input[type="date"]::-webkit-calendar-picker-indicator {
	position: absolute;
	right: 0;
	width: 2.25rem;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}
input[type="date"] {
	position: relative;
}

/* campo vazio: mostra o formato esperado, já que o iOS não aceita
   placeholder em input[type=date] */
input[type="date"].sem-valor::before {
	content: attr(data-placeholder);
	position: absolute;
	left: .75rem;
	top: 50%;
	transform: translateY(-50%);
	color: #98a2b3;
	pointer-events: none;
}
input[type="date"].sem-valor::-webkit-datetime-edit {
	opacity: 0;
}

/* Header no mobile: hambúrguer | logos | Entrar — numa única linha */
@media (max-width: 575.98px) {
	.navbar-marketing > .container {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: .5rem;
		padding-left: .75rem !important;
		padding-right: .75rem !important;
	}

	/* hambúrguer primeiro */
	.navbar-marketing .navbar-toggler {
		order: 1;
		flex-shrink: 0;
		padding: .25rem .45rem;
		border: 0;
		margin: 0;
	}
	.navbar-marketing .navbar-toggler:focus {
		box-shadow: none;
	}

	/* as duas logos ocupam o espaço restante */
	.navbar-marketing .navbar-brand:not(.d-sm-none) {
		order: 2;
		margin: 0;
		padding: 0;
		flex-shrink: 1;
		min-width: 0;
	}
	.navbar-marketing .navbar-brand img {
		max-width: 100%;
		height: auto;
		margin-left: 0 !important;
	}
	.navbar-marketing .navbar-brand img[alt="MobCard"] {
		width: 112px;
	}
	.navbar-marketing .navbar-brand img[alt="Internacional"] {
		width: 124px;
	}

	/* sem margem automática: as logos ficam agrupadas à esquerda,
	   deixando o espaço vago à direita */
	.navbar-marketing .navbar-brand,
	.navbar-marketing .navbar-brand:not(.d-sm-none) {
		margin-right: 0 !important;
	}
	.navbar-marketing > .container {
		justify-content: flex-start;
	}

	/* "Entrar" fica só no menu do hambúrguer */
	.navbar-marketing .navbar-brand.d-sm-none {
		display: none !important;
	}

	/* menu expandido ocupa a linha inteira abaixo */
	.navbar-marketing .navbar-collapse {
		order: 4;
		flex-basis: 100%;
	}
}

/* Telas muito estreitas: aperta um pouco as logos */
@media (max-width: 359.98px) {
	.navbar-marketing .navbar-brand img[alt="MobCard"] {
		width: 112px;
	}
	.navbar-marketing .navbar-brand img[alt="Internacional"] {
		width: 124px;
	}
}

/* Home no mobile: o azul preenche tudo abaixo do header,
   sem as bordas brancas do container em volta. */
@media (max-width: 575.98px) {
	/* container que envolve o bloco azul não pode ter recuo lateral */
	.navbar-marketing ~ .container,
	nav ~ .container {
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: 100% !important;
	}

	/* espaçador abaixo da navbar fixa: vira só a altura do header */
	.navbar-marketing ~ .container > .row.px-sm-3.pt-5,
	nav ~ .container > .row.px-sm-3.pt-5 {
		margin: 0 !important;
		padding: 0 !important;
		height: 74px;
	}

	/* o bloco azul encosta nas bordas e preenche o resto da tela;
	   o card fica logo abaixo do header, não centralizado */
	.page-header-ui.bg-primary {
		margin: 0;
		/* sobrescreve o padding de 8rem do tema */
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
		min-height: calc(100vh - 74px);
		display: flex;
		align-items: flex-start;
	}
	.page-header-ui.bg-primary > .page-header-ui-content {
		width: 100%;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* o conteúdo interno não pode vazar para fora da tela:
	   o gutter gx-5 do Bootstrap cria margens negativas de 1.5rem
	   em cada lado, que somam 48px de estouro horizontal. */
	.page-header-ui.bg-primary .page-header-ui-content > .container {
		width: 100%;
		max-width: 100%;
		/* respiro lateral do card */
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	.page-header-ui.bg-primary .row,
	.page-header-ui.bg-primary .row.gx-5 {
		--bs-gutter-x: 0;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.page-header-ui.bg-primary .row > [class*="col-"] {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* as colunas do formulário viram largura total, empilhadas */
	.page-header-ui.bg-primary .card-body .row > [class*="col-md-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}
}