/* Reference: user-provided Figma screenshot (2026-08-02), saved to
   amazon-design-refs/sections-v2/international-map.png — this section was
   missing from the original amazon-design-refs/ hand-crop set (see
   design.md Decision 13). User confirmed (2026-08-02): simplified approach
   — a static map background image with real, editable HTML pin overlays,
   not a fully accurate interactive SVG map.

   The background image (assets/images/international-map/international-map-bg.png) was
   sourced by screenshotting the Figma source's own map-only node (531:259,
   1646x835 clip frame) directly — a clean map with no pins/heading/footer
   baked in, confirmed by inspecting the file's node tree (the country
   shapes are ~150 individual vector paths grouped in that one frame,
   separate from the pin markers). Every pin/region label's `left`/`top`
   percentage was computed directly from that same frame's own real
   sub-node coordinates (not eyeballed), so the HTML overlays land in the
   exact real positions from the source design. */

.rds-international {
	position: relative;
	width: 100%;
	background: #111419;
	padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5rem);
	box-sizing: border-box;
}

.rds-international__heading {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	text-align: center;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 700;
	font-size: clamp(1.75rem, 4vw, 3rem);
	letter-spacing: 0.02em;
}

.rds-international__map {
	position: relative;
	width: 100%;
	max-width: 64rem;
	margin: 0 auto;
}

.rds-international__map::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: clamp(1rem, 3vw, 2rem);
	border: 1px solid rgba(157, 119, 233, 0.5);
	border-right: none;
}

.rds-international__map::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: clamp(1rem, 3vw, 2rem);
	border: 1px solid rgba(157, 119, 233, 0.5);
	border-left: none;
}

.rds-international__map-bg {
	display: block;
	width: 100%;
	height: auto;
}

.rds-international__region {
	position: absolute;
	transform: translate(-50%, -50%);
	background: rgba(120, 120, 150, 0.55);
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 700;
	font-size: clamp(0.6rem, 1vw, 0.8rem);
	letter-spacing: 0.05em;
	padding: 0.35rem 0.9rem;
	border-radius: 0.25rem;
	white-space: nowrap;
}

.rds-international__pin {
	position: absolute;
	transform: translate(-15%, -85%);
	display: flex;
	align-items: center;
	gap: 0.3rem;
	color: #ffffff;
}

.rds-international__pin-icon {
	width: 0.85rem;
	height: 0.85rem;
	flex: 0 0 auto;
	transform: rotate(20deg);
}

.rds-international__pin-label {
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 400;
	font-size: clamp(0.6rem, 0.95vw, 0.8rem);
	white-space: nowrap;
	/* The map background export came out lighter than the original
	   reference (white ocean/unhighlighted countries instead of dark) —
	   confirmed via screenshot that plain white label text became
	   unreadable wherever it crossed a light area (only the portion over a
	   purple-highlighted country stayed visible). A text-shadow halo
	   guarantees contrast regardless of what's underneath, without adding
	   an opaque box around every label. */
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.95),
		0 0 6px rgba(0, 0, 0, 0.85),
		0 0 10px rgba(0, 0, 0, 0.6);
}

.rds-international__pin-icon {
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.95));
}

.rds-international__pin--emphasis .rds-international__pin-label {
	font-weight: 700;
	font-size: clamp(0.75rem, 1.2vw, 1rem);
}

.rds-international__pin--emphasis .rds-international__pin-icon {
	width: 1.1rem;
	height: 1.1rem;
}