/* Colors reference the theme's own live palette (confirmed via the WordPress.com
   connector: Appearance > Editor > Styles > Colors) instead of fixed hex, so a
   future palette change updates this automatically. Actual slugs on this site:
   theme-1 = white (#FFFFFF)      theme-4 = dark gray (#1E1E1E) - used as accent
   theme-2 = off-white (#EEEEEE)  theme-5 = black (#000000) - primary text
   theme-3 = light gray (#BBBBBB) */

.sftgm-root {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
	margin: 24px 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
}
.sftgm-root *,
.sftgm-root *::before,
.sftgm-root *::after {
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: break-word;
}
.sftgm-card {
	background: var(--wp--preset--color--theme-1, #FFFFFF);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--theme-5, #000000) 15%, transparent);
	border-radius: 20px;
	padding: clamp(16px, 4vw, 24px) clamp(14px, 4vw, 24px) clamp(18px, 4vw, 28px);
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
	box-shadow: 0 4px 24px color-mix(in srgb, var(--wp--preset--color--theme-5, #000000) 8%, transparent);
}
.sftgm-heading {
	margin: 0 0 4px;
	font-size: clamp(17px, 4vw, 20px);
	font-weight: 800;
	color: var(--wp--preset--color--theme-5, #000000);
}
.sftgm-sub {
	margin: 0 0 18px;
	font-size: 13px;
	color: color-mix(in srgb, var(--wp--preset--color--theme-5, #000000) 55%, transparent);
	line-height: 1.5;
}
.sftgm-body {
	display: block;
}
.sftgm-map-col {
	width: 100%;
}
.sftgm-info-col {
	width: 100%;
}
.sftgm-svg {
	width: 100%;
	height: auto;
	max-width: 420px;
	display: block;
	margin: 0 auto;
	border-radius: 12px;
	overflow: hidden;
}
@media (min-width: 760px) {
	.sftgm-body {
		display: grid;
		grid-template-columns: 1.15fr 0.85fr;
		gap: 28px;
		align-items: start;
	}
	.sftgm-svg {
		max-width: 100%;
	}
	.sftgm-legend {
		justify-content: flex-start;
	}
	.sftgm-info-col {
		position: sticky;
		top: 16px;
	}
	.sftgm-macau-local,
	.sftgm-info-panel {
		margin-top: 0;
	}
	.sftgm-macau-local + .sftgm-info-panel {
		margin-top: 18px;
	}
}
.sftgm-marker {
	cursor: pointer;
}
.sftgm-marker:hover {
	opacity: 0.92;
}
.sftgm-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
	margin-top: 14px;
	font-size: 11px;
	color: color-mix(in srgb, var(--wp--preset--color--theme-5, #000000) 50%, transparent);
}
.sftgm-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
}
.sftgm-badge {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #E8622C;
	border: 1.5px solid #E8622C;
	color: var(--wp--preset--color--theme-1, #FFFFFF);
	font-size: 9px;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.sftgm-macau-local {
	margin-top: 18px;
}
.sftgm-macau-heading {
	font-size: 13px;
	font-weight: 700;
	color: color-mix(in srgb, var(--wp--preset--color--theme-5, #000000) 65%, transparent);
	margin-bottom: 10px;
}
.sftgm-macau-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--wp--preset--color--theme-2, #EEEEEE);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--theme-5, #000000) 15%, transparent);
	border-radius: 14px;
	padding: 12px 14px;
	margin-bottom: 8px;
	color: var(--wp--preset--color--theme-5, #000000);
	font-size: 13px;
	font-weight: 600;
}
.sftgm-macau-price {
	color: var(--wp--preset--color--theme-4, #1E1E1E);
	font-weight: 800;
}
.sftgm-info-panel {
	margin-top: 18px;
}
.sftgm-info-card {
	background: linear-gradient(135deg, var(--wp--preset--color--theme-1, #FFFFFF), var(--wp--preset--color--theme-2, #EEEEEE));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--theme-5, #000000) 15%, transparent);
	border-radius: 18px;
	padding: 18px 18px 20px;
	box-shadow: 0 2px 12px color-mix(in srgb, var(--wp--preset--color--theme-5, #000000) 6%, transparent);
}
.sftgm-info-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 10px;
}
.sftgm-info-route {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--wp--preset--color--theme-4, #1E1E1E);
	margin-bottom: 4px;
}
.sftgm-info-title {
	font-size: 16px;
	font-weight: 800;
	color: var(--wp--preset--color--theme-5, #000000);
}
.sftgm-info-price {
	font-size: 19px;
	font-weight: 800;
	color: var(--wp--preset--color--theme-4, #1E1E1E);
}
.sftgm-info-warn {
	font-size: 12px;
	color: #C0472B;
	margin-top: 4px;
}
.sftgm-info-desc {
	font-size: 13px;
	line-height: 1.7;
	color: color-mix(in srgb, var(--wp--preset--color--theme-5, #000000) 65%, transparent);
	margin: 8px 0 16px;
}
.sftgm-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--wp--preset--color--theme-4, #1E1E1E);
	color: var(--wp--preset--color--theme-1, #FFFFFF);
	font-weight: 800;
	font-size: 13px;
	padding: 10px 18px;
	border-radius: 999px;
	text-decoration: none;
}
.sftgm-cta:hover {
	opacity: 0.85;
}
.sftgm-info-empty {
	border: 1px dashed color-mix(in srgb, var(--wp--preset--color--theme-5, #000000) 15%, transparent);
	border-radius: 16px;
	padding: 22px 18px;
	text-align: center;
	color: color-mix(in srgb, var(--wp--preset--color--theme-5, #000000) 45%, transparent);
	font-size: 13px;
}