/* =====================================================
   CAFEZALL — Componentes UI
   Estilos para header, navegação, cards, ad slots e mais.
   Mobile-first: estilos base aplicam em mobile, breakpoints
   min-width adicionam estilos para desktop.
   ===================================================== */

/* =====================================================
   1. HEADER VERDE (mobile + desktop)
   ===================================================== */

.cz-header {
	background-color: var(--cz-green-800);
	color: var(--cz-text-on-dark);
	padding: var(--cz-space-3) var(--cz-space-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: var(--cz-z-sticky);
}

.cz-header__brand {
	display: flex;
	align-items: center;
	gap: var(--cz-space-2);
}

.cz-header__logo {
	width: 22px;
	height: 22px;
}

.cz-header__name {
	font-family: var(--cz-font-serif);
	font-size: var(--cz-text-md);
	font-weight: var(--cz-weight-medium);
	letter-spacing: -0.02em;
	color: var(--cz-neutral-50);
}

.cz-header__actions {
	display: flex;
	align-items: center;
	gap: var(--cz-space-4);
}

.cz-header__icon {
	width: 18px;
	height: 18px;
	color: var(--cz-neutral-200);
	cursor: pointer;
	transition: color var(--cz-transition-fast);
}

.cz-header__icon:hover {
	color: var(--cz-orange-300);
}

/* Menu desktop (oculto em mobile) */
.cz-header__nav {
	display: none;
}

@media (min-width: 1024px) {
	.cz-header {
		padding: var(--cz-space-3) var(--cz-space-8);
	}
	.cz-header__nav {
		display: flex;
		gap: var(--cz-space-6);
		font-size: var(--cz-text-sm);
		margin-left: var(--cz-space-8);
	}
	.cz-header__nav a {
		color: var(--cz-neutral-300);
		font-weight: var(--cz-weight-regular);
	}
	.cz-header__nav a.is-active,
	.cz-header__nav a:hover {
		color: var(--cz-neutral-50);
		font-weight: var(--cz-weight-medium);
	}
}

/* Botão "entrar" no header desktop */
.cz-header__cta {
	display: none;
}

@media (min-width: 1024px) {
	.cz-header__cta {
		display: inline-flex;
		align-items: center;
		padding: var(--cz-space-2) var(--cz-space-4);
		background-color: var(--cz-orange-500);
		color: var(--cz-neutral-50);
		border-radius: var(--cz-radius-sm);
		font-size: var(--cz-text-xs);
		font-weight: var(--cz-weight-medium);
	}
	.cz-header__cta:hover {
		background-color: var(--cz-orange-700);
		color: var(--cz-neutral-50);
	}
}

/* =====================================================
   2. HERO VERDE (home, login splash)
   ===================================================== */

.cz-hero {
	background-color: var(--cz-green-800);
	color: var(--cz-text-on-dark);
	padding: var(--cz-space-6) var(--cz-space-5) var(--cz-space-8);
}

.cz-hero__title {
	font-family: var(--cz-font-serif);
	font-size: var(--cz-text-2xl);
	font-weight: var(--cz-weight-medium);
	line-height: var(--cz-leading-tight);
	letter-spacing: -0.02em;
	margin: 0 0 var(--cz-space-2);
	color: var(--cz-neutral-50);
}

.cz-hero__subtitle {
	font-size: var(--cz-text-sm);
	color: var(--cz-neutral-300);
	margin: 0 0 var(--cz-space-5);
	line-height: var(--cz-leading-normal);
}

@media (min-width: 1024px) {
	.cz-hero {
		padding: var(--cz-space-12) var(--cz-space-8) var(--cz-space-16);
		text-align: center;
	}
	.cz-hero__title {
		font-size: var(--cz-text-3xl);
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
	}
	.cz-hero__subtitle {
		font-size: var(--cz-text-base);
		max-width: 560px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: var(--cz-space-8);
	}
}

/* =====================================================
   3. SEARCH PILL — barra de busca arredondada
   ===================================================== */

.cz-search {
	display: flex;
	align-items: center;
	gap: var(--cz-space-3);
	padding: var(--cz-space-3) var(--cz-space-4);
	background-color: var(--cz-neutral-50);
	border-radius: var(--cz-radius-pill);
	border: 0.5px solid var(--cz-border-subtle);
}

.cz-search__icon {
	width: 16px;
	height: 16px;
	color: var(--cz-neutral-500);
	flex-shrink: 0;
}

.cz-search__input {
	flex: 1;
	border: none;
	background: transparent;
	font-size: var(--cz-text-sm);
	color: var(--cz-text-primary);
	outline: none;
	min-width: 0; /* previne overflow em flex containers */
}

.cz-search__input::placeholder {
	color: var(--cz-text-tertiary);
}

.cz-search__divider {
	width: 1px;
	height: 18px;
	background-color: var(--cz-border-subtle);
	flex-shrink: 0;
}

.cz-search__geo {
	width: 16px;
	height: 16px;
	color: var(--cz-orange-500);
	cursor: pointer;
	flex-shrink: 0;
}

/* Versão desktop com botão sólido à direita */
@media (min-width: 1024px) {
	.cz-search--with-button {
		padding: var(--cz-space-2) var(--cz-space-2) var(--cz-space-2) var(--cz-space-5);
		max-width: 520px;
		margin: 0 auto;
	}
	.cz-search__btn {
		padding: var(--cz-space-2) var(--cz-space-5);
		background-color: var(--cz-orange-500);
		color: var(--cz-neutral-50);
		border-radius: var(--cz-radius-pill);
		font-size: var(--cz-text-sm);
		font-weight: var(--cz-weight-medium);
		border: none;
		cursor: pointer;
	}
	.cz-search__btn:hover {
		background-color: var(--cz-orange-700);
	}
}

/* =====================================================
   4. CITY CARDS — cards das cidades em destaque
   ===================================================== */

.cz-city-grid {
	display: flex;
	gap: var(--cz-space-3);
	overflow-x: auto;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
	padding-bottom: var(--cz-space-2);
}

.cz-city-grid::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

@media (min-width: 1024px) {
	.cz-city-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		overflow: visible;
	}
}

.cz-city-card {
	min-width: 118px;
	height: 128px;
	border-radius: var(--cz-radius-xl);
	padding: var(--cz-space-3);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: relative;
	overflow: hidden;
	color: var(--cz-neutral-50);
	text-decoration: none;
	flex-shrink: 0;
	transition: transform var(--cz-transition-base);
}

.cz-city-card:hover {
	transform: translateY(-2px);
}

.cz-city-card--green   { background-color: var(--cz-green-800); }
.cz-city-card--brown   { background-color: var(--cz-orange-800); color: var(--cz-orange-50); }
.cz-city-card--olive   { background-color: var(--cz-green-700); }
.cz-city-card--orange  { background-color: var(--cz-orange-700); color: var(--cz-orange-50); }

.cz-city-card__name {
	font-family: var(--cz-font-serif);
	font-size: var(--cz-text-base);
	font-weight: var(--cz-weight-medium);
	margin: 0 0 2px;
}

.cz-city-card__count {
	font-size: 11px;
	opacity: 0.85;
}

@media (min-width: 1024px) {
	.cz-city-card {
		min-width: 0;
		height: 140px;
	}
}

/* =====================================================
   5. CAFE CARD — card de cafeteria (listas)
   ===================================================== */

.cz-cafe-card {
	display: flex;
	gap: var(--cz-space-3);
	padding: var(--cz-space-3);
	border: 0.5px solid var(--cz-border-subtle);
	border-radius: var(--cz-radius-lg);
	background-color: var(--cz-bg-surface);
	transition: border-color var(--cz-transition-fast), transform var(--cz-transition-fast);
	text-decoration: none;
	color: inherit;
}

.cz-cafe-card:hover {
	border-color: var(--cz-green-500);
	transform: translateY(-1px);
}

.cz-cafe-card.is-selected {
	border: 1.5px solid var(--cz-green-800);
	background-color: var(--cz-bg-muted);
}

.cz-cafe-card__thumb {
	width: 64px;
	height: 64px;
	border-radius: var(--cz-radius-md);
	flex-shrink: 0;
	background-color: var(--cz-neutral-200);
	background-size: cover;
	background-position: center;
}

.cz-cafe-card__body {
	flex: 1;
	min-width: 0; /* previne overflow do nome */
}

.cz-cafe-card__name {
	font-size: var(--cz-text-sm);
	font-weight: var(--cz-weight-medium);
	color: var(--cz-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
}

.cz-cafe-card__rating {
	display: flex;
	align-items: center;
	gap: var(--cz-space-1);
	margin: 2px 0;
	font-size: 11px;
}

.cz-cafe-card__rating-value {
	font-weight: var(--cz-weight-medium);
	color: var(--cz-text-primary);
}

.cz-cafe-card__meta {
	font-size: 11px;
	color: var(--cz-text-secondary);
}

.cz-cafe-card__status--open {
	color: var(--cz-success);
	font-weight: var(--cz-weight-medium);
}

.cz-cafe-card__status--closed {
	color: var(--cz-warning);
	font-weight: var(--cz-weight-medium);
}

/* Variante com numeração (página de cidade) */
.cz-cafe-card--numbered {
	align-items: center;
}

.cz-cafe-card__number {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: var(--cz-green-800);
	color: var(--cz-neutral-50);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: var(--cz-weight-medium);
	font-family: var(--cz-font-serif);
	flex-shrink: 0;
}

@media (min-width: 1024px) {
	.cz-cafe-card__number {
		width: 32px;
		height: 32px;
		font-size: 14px;
	}
}

/* =====================================================
   6. AD SLOTS — espaços para AdSense/GAM
   Critical: min-height reservado para evitar CLS.
   ===================================================== */

.cz-ad-slot {
	background-color: var(--cz-bg-muted);
	border: 0.5px dashed var(--cz-border-subtle);
	border-radius: var(--cz-radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: var(--cz-space-1);
	overflow: hidden;
}

/* Quando o ad estiver carregado, esconder o placeholder */
.cz-ad-slot.has-ad {
	background-color: transparent;
	border: none;
	display: block;
}

.cz-ad-slot__label {
	font-size: 10px;
	font-weight: var(--cz-weight-medium);
	color: var(--cz-text-secondary);
	letter-spacing: 1px;
}

.cz-ad-slot__hint {
	font-size: 11px;
	color: var(--cz-text-secondary);
}

/* Variantes por tipo */
.cz-ad-slot--infeed {
	min-height: var(--cz-ad-infeed-h);
	margin: var(--cz-space-3) 0;
}

.cz-ad-slot--incontent {
	min-height: var(--cz-ad-incontent-h);
	margin: var(--cz-space-4) 0;
}

.cz-ad-slot--leaderboard {
	min-height: var(--cz-ad-leaderboard-h);
	margin: var(--cz-space-5) 0;
}

.cz-ad-slot--sidebar {
	min-height: var(--cz-ad-sidebar-h);
	margin: var(--cz-space-4) 0;
	position: sticky;
	top: var(--cz-space-5);
}

/* =====================================================
   7. BOTTOM NAV — navegação fixa mobile
   IMPORTANTE: respeitamos a regra do AdSense — sem ads
   no anchor. O bottom nav é APENAS navegação interna.
   ===================================================== */

.cz-bottom-nav {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 0.5px solid var(--cz-border-subtle);
	padding: var(--cz-space-2) 0 var(--cz-space-3);
	background-color: var(--cz-bg-surface);
	position: sticky;
	bottom: 0;
	z-index: var(--cz-z-bottom-nav);
	/* safe area para iPhones com notch/home indicator */
	padding-bottom: max(var(--cz-space-3), env(safe-area-inset-bottom));
}

.cz-bottom-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	color: var(--cz-text-secondary);
	font-size: 10px;
	text-decoration: none;
	transition: color var(--cz-transition-fast);
	-webkit-tap-highlight-color: transparent;
}

.cz-bottom-nav__item:hover,
.cz-bottom-nav__item.is-active {
	color: var(--cz-orange-500);
}

.cz-bottom-nav__item.is-active {
	font-weight: var(--cz-weight-medium);
}

.cz-bottom-nav__icon {
	width: 20px;
	height: 20px;
}

.cz-bottom-nav__badge {
	position: absolute;
	top: -2px;
	right: 14px;
	width: 14px;
	height: 14px;
	background-color: var(--cz-orange-500);
	color: var(--cz-neutral-50);
	font-size: 9px;
	font-weight: var(--cz-weight-medium);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Desktop: bottom nav some, navegação fica no header */
@media (min-width: 1024px) {
	.cz-bottom-nav {
		display: none;
	}
}

/* =====================================================
   8. FILTER PILLS — pílulas de filtro horizontais
   ===================================================== */

.cz-filters {
	display: flex;
	gap: var(--cz-space-2);
	overflow-x: auto;
	padding: var(--cz-space-2) 0;
	scrollbar-width: none;
}

.cz-filters::-webkit-scrollbar {
	display: none;
}

.cz-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--cz-space-1);
	padding: 6px 13px;
	background-color: var(--cz-bg-surface);
	border: 0.5px solid var(--cz-neutral-300);
	border-radius: var(--cz-radius-pill);
	font-size: var(--cz-text-xs);
	color: var(--cz-text-primary);
	white-space: nowrap;
	cursor: pointer;
	transition: all var(--cz-transition-fast);
}

.cz-pill:hover {
	border-color: var(--cz-green-500);
}

.cz-pill.is-active {
	background-color: var(--cz-green-800);
	color: var(--cz-neutral-50);
	border-color: var(--cz-green-800);
	font-weight: var(--cz-weight-medium);
}

.cz-pill--orange {
	background-color: var(--cz-orange-50);
	color: var(--cz-orange-800);
	border-color: var(--cz-orange-100);
}

/* =====================================================
   9. METHOD TAGS — tags de métodos de preparo
   ===================================================== */

.cz-method-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cz-space-2);
}

.cz-method-tag {
	padding: 5px 11px;
	background-color: var(--cz-orange-50);
	color: var(--cz-orange-800);
	font-size: var(--cz-text-xs);
	border-radius: var(--cz-radius-pill);
}

/* =====================================================
   10. BUTTONS — botões primário e secundário
   ===================================================== */

.cz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cz-space-2);
	padding: var(--cz-space-3) var(--cz-space-5);
	border-radius: var(--cz-radius-md);
	font-size: var(--cz-text-sm);
	font-weight: var(--cz-weight-medium);
	border: none;
	cursor: pointer;
	transition: all var(--cz-transition-fast);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.cz-btn--primary {
	background-color: var(--cz-green-800);
	color: var(--cz-neutral-50);
}

.cz-btn--primary:hover {
	background-color: var(--cz-green-700);
	color: var(--cz-neutral-50);
}

.cz-btn--secondary {
	background-color: transparent;
	color: var(--cz-green-800);
	border: 0.5px solid var(--cz-green-800);
}

.cz-btn--secondary:hover {
	background-color: var(--cz-bg-muted);
	color: var(--cz-green-800);
}

.cz-btn--accent {
	background-color: var(--cz-orange-500);
	color: var(--cz-neutral-50);
}

.cz-btn--accent:hover {
	background-color: var(--cz-orange-700);
	color: var(--cz-neutral-50);
}

.cz-btn--full {
	width: 100%;
}

.cz-btn--pill {
	border-radius: var(--cz-radius-pill);
}

/* =====================================================
   11. RATING — estrelas e avaliação
   ===================================================== */

.cz-rating {
	display: inline-flex;
	align-items: center;
	gap: var(--cz-space-1);
	font-size: var(--cz-text-xs);
}

.cz-rating__stars {
	display: inline-flex;
	gap: 1px;
}

.cz-rating__star {
	width: 11px;
	height: 11px;
	color: var(--cz-orange-500);
}

.cz-rating__star--empty {
	color: var(--cz-neutral-300);
}

.cz-rating__value {
	font-weight: var(--cz-weight-medium);
	color: var(--cz-text-primary);
}

.cz-rating__count {
	color: var(--cz-text-secondary);
}

/* =====================================================
   12. BOTTOM SHEET — login contextual e filtros mobile
   ===================================================== */

.cz-bottom-sheet-backdrop {
	position: fixed;
	inset: 0;
	background-color: rgba(22, 53, 37, 0.45);
	z-index: var(--cz-z-overlay);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--cz-transition-base);
}

.cz-bottom-sheet-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.cz-bottom-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--cz-bg-surface);
	border-radius: var(--cz-radius-2xl) var(--cz-radius-2xl) 0 0;
	z-index: var(--cz-z-bottom-sheet);
	transform: translateY(100%);
	transition: transform var(--cz-transition-base);
	max-height: 85vh;
	overflow-y: auto;
	padding-bottom: env(safe-area-inset-bottom);
	box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}

.cz-bottom-sheet.is-open {
	transform: translateY(0);
}

.cz-bottom-sheet__handle {
	display: flex;
	justify-content: center;
	padding: var(--cz-space-2) 0 var(--cz-space-4);
}

.cz-bottom-sheet__handle::before {
	content: '';
	width: 40px;
	height: 4px;
	background-color: var(--cz-neutral-300);
	border-radius: 2px;
}

/* =====================================================
   13. CLAIM BANNER — banner de reivindicar cafeteria
   ===================================================== */

.cz-claim-banner {
	margin: var(--cz-space-2) var(--cz-space-5) var(--cz-space-4);
	padding: var(--cz-space-4);
	background-color: var(--cz-orange-50);
	border: 0.5px solid var(--cz-orange-300);
	border-radius: var(--cz-radius-lg);
	display: flex;
	align-items: flex-start;
	gap: var(--cz-space-3);
}

.cz-claim-banner__icon {
	width: 38px;
	height: 38px;
	border-radius: var(--cz-radius-md);
	background-color: var(--cz-green-800);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cz-claim-banner__title {
	font-size: var(--cz-text-sm);
	font-weight: var(--cz-weight-medium);
	color: var(--cz-text-primary);
	margin: 0 0 2px;
}

.cz-claim-banner__desc {
	font-size: 11px;
	color: var(--cz-orange-800);
	line-height: var(--cz-leading-normal);
	margin: 0 0 var(--cz-space-2);
}

.cz-claim-banner__cta {
	display: inline-block;
	padding: 6px 14px;
	background-color: var(--cz-green-800);
	color: var(--cz-neutral-50);
	border-radius: var(--cz-radius-pill);
	font-size: 11px;
	font-weight: var(--cz-weight-medium);
}

/* =====================================================
   14. MAP — container do Google Maps
   ===================================================== */

.cz-map-container {
	position: relative;
	width: 100%;
	height: 400px;
	background-color: var(--cz-neutral-200); /* skeleton enquanto carrega */
}

@media (min-width: 1024px) {
	.cz-map-container {
		height: 620px;
	}
}

.cz-map-controls {
	position: absolute;
	right: var(--cz-space-3);
	top: var(--cz-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--cz-space-2);
}

.cz-map-control {
	width: 38px;
	height: 38px;
	background-color: var(--cz-bg-surface);
	border: 0.5px solid var(--cz-border-subtle);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color var(--cz-transition-fast);
}

.cz-map-control:hover {
	background-color: var(--cz-bg-muted);
}

.cz-map__research-btn {
	position: absolute;
	left: var(--cz-space-3);
	bottom: var(--cz-space-3);
	padding: var(--cz-space-2) var(--cz-space-4);
	background-color: var(--cz-green-800);
	color: var(--cz-neutral-50);
	border-radius: var(--cz-radius-pill);
	font-size: var(--cz-text-xs);
	font-weight: var(--cz-weight-medium);
	display: flex;
	align-items: center;
	gap: var(--cz-space-2);
	border: none;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(22, 53, 37, 0.2);
}

/* =====================================================
   15. EDITORIAL — conteúdo editorial (página cidade, blog)
   ===================================================== */

.cz-editorial-content {
	font-size: var(--cz-text-base);
	line-height: var(--cz-leading-relaxed);
	color: var(--cz-text-primary);
	max-width: var(--cz-container-narrow);
}

.cz-editorial-content p {
	margin: 0 0 var(--cz-space-4);
}

.cz-editorial-content h2 {
	margin-top: var(--cz-space-8);
	margin-bottom: var(--cz-space-4);
}

.cz-editorial-content h3 {
	margin-top: var(--cz-space-6);
	margin-bottom: var(--cz-space-3);
}

.cz-editorial-content blockquote {
	border-left: 3px solid var(--cz-orange-500);
	padding-left: var(--cz-space-4);
	margin: var(--cz-space-5) 0;
	font-family: var(--cz-font-serif);
	font-style: italic;
	color: var(--cz-text-secondary);
}

/* =====================================================
   16. BREADCRUMB
   ===================================================== */

.cz-breadcrumb {
	font-size: 11px;
	color: var(--cz-text-secondary);
	padding: var(--cz-space-3) var(--cz-space-5);
}

.cz-breadcrumb a {
	color: var(--cz-text-secondary);
}

.cz-breadcrumb a:hover {
	color: var(--cz-text-primary);
}

.cz-breadcrumb__current {
	color: var(--cz-text-primary);
	font-weight: var(--cz-weight-medium);
}

@media (min-width: 1024px) {
	.cz-breadcrumb {
		padding: var(--cz-space-4) var(--cz-space-8);
	}
}

/* =====================================================
   17. LAYOUT GRID — grid de duas colunas para desktop
   ===================================================== */

.cz-two-col {
	display: grid;
	gap: var(--cz-space-6);
}

@media (min-width: 1024px) {
	.cz-two-col {
		grid-template-columns: 1fr 320px;
		gap: var(--cz-space-8);
	}
}

.cz-two-col--map {
	display: grid;
	gap: 0;
}

@media (min-width: 1024px) {
	.cz-two-col--map {
		grid-template-columns: 5fr 7fr;
		min-height: 620px;
	}
}

/* =====================================================
   18. UTILS — utilidades de espaçamento e display
   ===================================================== */

.cz-hidden-mobile {
	display: none;
}

@media (min-width: 1024px) {
	.cz-hidden-mobile {
		display: block;
	}
	.cz-hidden-desktop {
		display: none;
	}
}

.cz-mt-0 { margin-top: 0; }
.cz-mt-3 { margin-top: var(--cz-space-3); }
.cz-mt-5 { margin-top: var(--cz-space-5); }
.cz-mb-0 { margin-bottom: 0; }
.cz-mb-3 { margin-bottom: var(--cz-space-3); }
.cz-mb-5 { margin-bottom: var(--cz-space-5); }