/* Liquid Glass surfaces. Layout stays in main.css and hagiang.css. */

:root {
	--lg-tint: rgba(255, 255, 255, 0.62);
	--lg-tint-strong: rgba(255, 255, 255, 0.78);
	--lg-ink-glass: rgba(14, 61, 50, 0.78);
	--lg-blur: blur(18px) saturate(1.45);
	--lg-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 0 0 1px rgba(255, 255, 255, 0.42);
	--lg-shadow: 0 12px 32px rgba(16, 40, 24, 0.1);
}

body.hg {
	background:
		radial-gradient(900px 480px at 8% -8%, rgba(31, 138, 76, 0.16), transparent 60%),
		radial-gradient(760px 420px at 100% 0%, rgba(242, 193, 78, 0.2), transparent 55%),
		radial-gradient(680px 420px at 90% 100%, rgba(14, 61, 50, 0.08), transparent 50%),
		#eef4f0;
}

.hg-header {
	background: var(--lg-tint-strong);
	backdrop-filter: var(--lg-blur);
	-webkit-backdrop-filter: var(--lg-blur);
	box-shadow: var(--lg-sheen), 0 8px 24px rgba(16, 40, 24, 0.06);
}
.search-pop-panel,
.hg-chat-panel {
	background: var(--lg-tint-strong);
	backdrop-filter: blur(22px) saturate(1.5);
	-webkit-backdrop-filter: blur(22px) saturate(1.5);
	box-shadow: var(--lg-sheen), 0 24px 50px rgba(16, 40, 24, 0.16);
}
.icon-link,
.nav-drawer-head button,
.search-pop-x,
.to-top {
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(12px) saturate(1.3);
	-webkit-backdrop-filter: blur(12px) saturate(1.3);
	box-shadow: var(--lg-sheen);
}
.icon-link:hover,
.to-top:hover {
	background: rgba(255, 255, 255, 0.82);
	color: var(--main);
}

.btn-main,
.btn-dark,
.btn-amber,
.nav-drawer-join,
.car-btn,
.hg-chat-topics button.is-selected,
.hg-chat-card button,
.hg-chat-composer button {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 46%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 18px rgba(20, 80, 48, 0.18);
}
.btn-outline,
.chip,
.hg-chat-topics button {
	background: rgba(255, 255, 255, 0.62);
	backdrop-filter: blur(12px) saturate(1.3);
	-webkit-backdrop-filter: blur(12px) saturate(1.3);
	box-shadow: var(--lg-sheen);
}
.chip.is-active {
	background: var(--main);
	color: #fff;
}

.hero-search {
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	box-shadow: var(--lg-sheen), 0 16px 40px rgba(0, 0, 0, 0.18);
}
.hero-search input,
.hero-search select,
.search-pop-form input,
.prep-banner input,
.composer input,
.composer textarea,
.hg-chat-card input[type="text"],
.hg-chat-card input[type="tel"],
.hg-chat-composer input,
.form-card input,
.form-card select,
.form-card textarea {
	background: rgba(255, 255, 255, 0.55);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.quick-row { background: transparent; }
.quick-grid span {
	background: rgba(255, 255, 255, 0.62);
	backdrop-filter: blur(12px) saturate(1.35);
	-webkit-backdrop-filter: blur(12px) saturate(1.35);
	box-shadow: var(--lg-sheen);
	color: var(--main);
}
.quick-grid a:hover span { background: rgba(255, 255, 255, 0.86); }

.spot-card,
.trip-tile,
.help-card,
.side-news,
.place-card,
.side-card,
.form-card,
.feature-card,
.stat-grid article,
.day-card,
.forecast article,
.day-forecast,
.week-list div,
.bubble,
.community-post,
.mua-hoa-card,
.utility-panel .utility-card,
.hg-chat-card,
.hg-chat-bubble {
	background: var(--lg-tint);
	backdrop-filter: blur(16px) saturate(1.35);
	-webkit-backdrop-filter: blur(16px) saturate(1.35);
	box-shadow: var(--lg-sheen), var(--lg-shadow);
}
.night-badge,
.place-badge {
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--lg-sheen);
}
.bubble.mine,
.hg-chat-msg.is-me .hg-chat-bubble { background: rgba(231, 246, 238, 0.82); }

.utility-ico {
	background: rgba(255, 255, 255, 0.62);
	box-shadow: var(--lg-sheen);
}
.utility-panel {
	background:
		radial-gradient(380px 180px at 0 0, rgba(242, 193, 78, 0.28), transparent 70%),
		linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(229, 246, 236, 0.72));
	backdrop-filter: blur(16px) saturate(1.3);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	box-shadow: var(--lg-sheen), var(--lg-shadow);
}
.utility-section { background: transparent; }

.weather-card,
.prep-banner,
.hg-chat-head {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), var(--lg-shadow);
}
.hg-footer,
.tabbar {
	background: var(--lg-ink-glass);
	backdrop-filter: blur(18px) saturate(1.3);
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.tabbar { background: rgba(255, 255, 255, 0.82); }

.hg-chat-body { background: rgba(246, 250, 247, 0.72); }
.tag-row span {
	background: rgba(232, 246, 238, 0.8);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

@media (prefers-reduced-transparency: reduce) {
	.hg-header,
	.drop-menu,
	.nav-drawer-panel,
	.search-pop-panel,
	.hg-chat-panel,
	.spot-card,
	.trip-tile,
	.feature-card,
	.help-card,
	.side-news,
	.place-card,
	.side-card,
	.form-card,
	.stat-grid article,
	.utility-panel .utility-card,
	.quick-grid span,
	.hero-search {
		background: #fff;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.hg-footer { background: var(--footer); backdrop-filter: none; -webkit-backdrop-filter: none; }
}