/* =========================================================================
   localizacao.css — Doceria Doce Encanto
   Visual do "portao de localizacao": o overlay que confirma a cidade do
   visitante antes de liberar a vitrine.

   O HTML e injetado por js/localizacao.js — aqui so ha aparencia.
   Depende dos tokens --if-* definidos em css/tema.css, que carrega antes.
   Nenhuma cor literal: tudo sai de var(--if-*).

   Contrato de classes (o JS injeta, este arquivo estiliza):
     .geo-portao / .geo-portao--visivel
     .geo-cartao / __logo / __titulo / __texto
     .geo-cidade-detectada
     .geo-trocar
     .geo-seletores / .geo-campo / .geo-campo__label / .geo-campo__select
     .geo-cta / .geo-cta--desabilitado
     .geo-spinner
     .geo-etapa
     .geo-resultado / __loja / __distancia
     .geo-aviso
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. ANTI-FLASH E TRAVA DE SCROLL
   O <script> inline do <head> poe .aguardando-localizacao no <html> quando
   ainda nao existe o cookie localCidade. Enquanto essa classe estiver la,
   a vitrine fica oculta para nao aparecer por tras/antes do portao.

   Usamos visibility (e nao display) de proposito: o layout continua
   calculado, entao nada "pula" quando a classe cai — inclusive pela rede
   de seguranca de 8s do proprio index.html.
   ------------------------------------------------------------------------- */
html.aguardando-localizacao {
	overflow: hidden;
}

html.aguardando-localizacao body > *:not(.geo-portao) {
	visibility: hidden;
}

/* O portao e a unica coisa que continua visivel — reafirmado aqui porque
   ele pode ser injetado antes ou depois dos irmaos ocultos. */
html.aguardando-localizacao .geo-portao--visivel {
	visibility: visible;
}

/* Reabertura por acao do cliente (link "Trocar"): ai o cookie ja existe e
   .aguardando-localizacao nao esta no <html>, mas o fundo tambem nao deve
   rolar. Resolvido por :has() — o JS nao precisa marcar classe nenhuma.
   O mesmo padrao ja e usado em tema.css para a barra da sacola. */
html:has(.geo-portao--visivel),
body:has(.geo-portao--visivel) {
	overflow: hidden;
}

/* O atributo hidden alterna as etapas e o bloco de seletores. O
   carrinho.css ja garante isto globalmente; repetimos no escopo do portao
   para o arquivo nao depender da ordem de carregamento. */
.geo-portao [hidden] {
	display: none !important;
}

/* -------------------------------------------------------------------------
   2. PORTAO (overlay full-screen)
   z-index 1400: acima da gaveta da sacola (1300) e da pilha de toasts
   (1250), definidas em carrinho.css / tema.css.
   ------------------------------------------------------------------------- */
.geo-portao {
	position: fixed;
	inset: 0;
	z-index: 1400;

	display: flex;
	align-items: center;
	justify-content: center;

	/* Padding lateral para o cartao nao colar nas bordas no celular.
	   As areas seguras evitam a barra de gestos do iPhone. */
	padding: 24px 16px;
	padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	padding-top: calc(24px + env(safe-area-inset-top, 0px));

	background: var(--if-overlay);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);

	font-family: var(--if-fonte);
	color: var(--if-ink);

	/* Estado fechado. O JS abre acrescentando .geo-portao--visivel.
	   pointer-events: none garante que o overlay fechado nunca engula
	   cliques da vitrine. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--if-transicao), visibility var(--if-transicao);
}

.geo-portao--visivel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* -------------------------------------------------------------------------
   3. CARTAO CENTRAL
   ------------------------------------------------------------------------- */
.geo-cartao {
	box-sizing: border-box;
	width: 100%;
	max-width: 440px;

	/* Em telas baixas (celular deitado) o conteudo rola dentro do cartao
	   em vez de vazar para fora da tela. */
	max-height: 100%;
	overflow-y: auto;

	padding: 32px 28px;

	background: var(--if-surface);
	border-radius: var(--if-raio);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .22);

	font-family: var(--if-fonte);
	color: var(--if-ink);
	text-align: center;

	/* Entrada suave: o cartao sobe um pouco quando o portao abre. */
	transform: translateY(8px);
	transition: transform var(--if-transicao);
}

.geo-portao--visivel .geo-cartao {
	transform: translateY(0);
}

.geo-cartao__logo {
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 auto 16px;

	border-radius: var(--if-raio-pill);
	object-fit: cover;
	background: var(--if-surface);
	box-shadow: var(--if-sombra);
}

.geo-cartao__titulo {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--if-ink);
}

.geo-cartao__texto {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--if-muted);
}

/* O ultimo paragrafo antes de um bloco de acao nao precisa da margem
   dupla — o proprio bloco ja tem espacamento. */
.geo-cartao__texto:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   4. CIDADE DETECTADA
   O destaque da tela de confirmacao: o nome que veio do geojs.io.
   ------------------------------------------------------------------------- */
.geo-cidade-detectada {
	display: block;
	margin: 4px 0 20px;
	font-size: 24px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--if-ink);
	word-break: break-word;
}

/* -------------------------------------------------------------------------
   5. ETAPAS
   Cada estado do fluxo (detectando / confirmar / escolher / resultado).
   Alternadas pelo atributo hidden — ver secao 1.
   ------------------------------------------------------------------------- */
.geo-etapa {
	display: block;
}

/* -------------------------------------------------------------------------
   6. SELETORES (estado + cidade)
   Selects nativos: mantemos a seta padrao do sistema de proposito — ela
   e acessivel, funciona em todo navegador e evita embutir cor literal
   num SVG de background.
   ------------------------------------------------------------------------- */
.geo-seletores {
	display: grid;
	gap: 14px;
	margin: 0 0 20px;
	text-align: left;
}

.geo-campo {
	display: block;
}

.geo-campo__label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--if-muted);
}

.geo-campo__select {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;

	border: 1px solid var(--if-line);
	border-radius: var(--if-raio);
	background: var(--if-surface);

	font-family: var(--if-fonte);
	font-size: 15px;
	color: var(--if-ink);
	cursor: pointer;
	transition: border-color var(--if-transicao), box-shadow var(--if-transicao);
}

.geo-campo__select:hover:not(:disabled) {
	border-color: var(--if-muted);
}

.geo-campo__select:disabled {
	background: var(--if-bg);
	color: var(--if-muted);
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   7. CTA PRINCIPAL — "Buscar Loja em sua cidade"
   ------------------------------------------------------------------------- */
.geo-cta {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	width: 100%;
	min-height: 50px;
	padding: 13px 20px;

	border: 0;
	border-radius: var(--if-raio);
	background: var(--if-red);
	color: var(--if-on-red);

	font-family: var(--if-fonte);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;

	cursor: pointer;
	transition: background var(--if-transicao), box-shadow var(--if-transicao), opacity var(--if-transicao);
}

.geo-cta:hover:not(:disabled):not(.geo-cta--desabilitado) {
	background: var(--if-red-dark);
	box-shadow: 0 4px 10px rgba(180, 20, 31, .25);
}

.geo-cta:active:not(:disabled):not(.geo-cta--desabilitado) {
	background: var(--if-red-dark);
	box-shadow: none;
}

.geo-cta--desabilitado,
.geo-cta:disabled,
.geo-cta[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
	box-shadow: none;
}

/* -------------------------------------------------------------------------
   8. LINK "Nao e sua cidade? Trocar"
   Acao secundaria: discreta, para nao competir com o CTA vermelho.
   ------------------------------------------------------------------------- */
.geo-trocar {
	display: inline-block;
	margin-top: 16px;
	padding: 4px 2px;

	border: 0;
	background: none;

	font-family: var(--if-fonte);
	font-size: 14px;
	color: var(--if-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	transition: color var(--if-transicao);
}

.geo-trocar:hover,
.geo-trocar:focus-visible {
	color: var(--if-red);
}

/* -------------------------------------------------------------------------
   9. SPINNER
   ------------------------------------------------------------------------- */
.geo-spinner {
	display: block;
	width: 36px;
	height: 36px;
	margin: 8px auto 16px;

	border: 3px solid var(--if-line);
	border-top-color: var(--if-red);
	border-radius: var(--if-raio-pill);

	animation: geo-girar .8s linear infinite;
}

@keyframes geo-girar {
	to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   10. RESULTADO
   So aparece quando ha unidade cadastrada em LOJA.unidades. Sem unidade,
   o JS pula esta etapa — nao existe distancia "de exemplo".
   ------------------------------------------------------------------------- */
.geo-resultado {
	margin: 4px 0 20px;
}

.geo-resultado__loja {
	display: block;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--if-ink);
}

.geo-resultado__distancia {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--if-red);
}

/* -------------------------------------------------------------------------
   12. FOCO VISIVEL
   O tema ja define um anel global; aqui garantimos o mesmo tratamento
   dentro do portao, inclusive para o <select> e para os botoes.
   ------------------------------------------------------------------------- */
.geo-portao a:focus-visible,
.geo-portao button:focus-visible,
.geo-portao select:focus-visible,
.geo-portao [tabindex]:focus-visible,
.geo-cta:focus-visible,
.geo-trocar:focus-visible,
.geo-campo__select:focus-visible {
	outline: 2px solid var(--if-red);
	outline-offset: 2px;
	box-shadow: var(--if-foco);
}

/* O <select> tambem recebe o anel no :focus simples: em parte dos
   navegadores o teclado dentro de um combobox nao dispara :focus-visible. */
.geo-campo__select:focus {
	border-color: var(--if-red);
	outline: 2px solid var(--if-red);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   13. MOVIMENTO REDUZIDO
   Sem giro e sem transicoes: o spinner vira apenas um anel estatico,
   que continua comunicando "carregando" junto do texto da etapa.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.geo-spinner {
		animation: none;
		opacity: .6;
	}

	.geo-portao,
	.geo-cartao,
	.geo-cta,
	.geo-trocar,
	.geo-campo__select {
		transition: none;
	}

	.geo-cartao {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   14. MOBILE
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.geo-portao {
		padding: 16px 12px;
		padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		padding-top: calc(16px + env(safe-area-inset-top, 0px));
	}

	.geo-cartao {
		max-width: none;
		padding: 24px 18px;
	}

	.geo-cartao__logo {
		width: 64px;
		height: 64px;
		margin-bottom: 12px;
	}

	.geo-cartao__titulo {
		font-size: 18px;
	}

	.geo-cartao__texto {
		font-size: 14px;
		margin-bottom: 16px;
	}

	.geo-cidade-detectada {
		font-size: 21px;
		margin-bottom: 16px;
	}

	.geo-cta {
		min-height: 48px;
		font-size: 15px;
	}

	.geo-resultado__loja {
		font-size: 16px;
	}
}
