/* ============================================================
   GRZ Region Preferences — v4 redesign layer
   SEAGM-style catalog layout, done the GRZ way:
   - Left: continent catalog cards with real flag thumbnails
   - Right: sticky preferences panel (language + currency rows)
   - Bottom: always-visible apply bar
   Clean minimal system: Manrope, white cards, hairlines,
   6px radius, single blue accent.
   Layered on top of region-preferences.css — same DOM.
   ============================================================ */

/* ---------- type & page ---------- */
.grz-region-page {
	background: #f7f8fa;
	font-family: "Manrope", "Inter", system-ui, sans-serif;
}

.grz-region-back {
	color: #8a94a6;
	font-size: .76rem;
	font-weight: 700;
}
.grz-region-back:hover,
.grz-region-back:focus-visible { color: var(--grz-blue); }

/* ---------- bundled flag thumbnails ---------- */
.grz-region-page .grz-flag-img {
	display: block;
	width: 26px;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid rgba(16,24,40,.1);
	border-radius: 3px;
}
.grz-region-page .grz-flag-img--lg { width: 32px; }
.grz-region-hero__flag,
.grz-region-actionbar__flag { display: inline-flex; font-size: 1.2rem; line-height: 1; }

/* ---------- hero ---------- */
.grz-region-hero {
	border-bottom: 0;
	margin-bottom: 20px;
	padding-bottom: 0;
}
.grz-region-hero h1 {
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -.025em;
}
.grz-region-hero p { color: #6b7686; font-size: .85rem; }

.grz-region-hero__status {
	border: 1px solid #e7eaf0;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16,24,40,.04);
	gap: 10px;
	padding: 8px 12px;
}
.grz-region-token {
	border: 0;
	border-radius: 4px;
	background: #eef4fe;
	color: var(--grz-blue);
	font-size: .66rem;
	font-weight: 800;
	padding: 4px 9px;
}

/* ---------- master layout: catalog left, sticky prefs right ---------- */
.grz-region-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 348px;
	align-items: start;
	gap: 16px;
}
.grz-region-quick-grid {
	grid-column: 2;
	grid-row: 1;
	position: sticky;
	top: 70px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.grz-region-panel--country {
	grid-column: 1;
	grid-row: 1;
}
.grz-region-actionbar { grid-column: 1 / -1; }

/* ---------- panels ---------- */
.grz-region-panel {
	border: 1px solid #e7eaf0;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16,24,40,.04);
	padding: 18px;
}
.grz-region-panel__head { margin-bottom: 14px; }
.grz-region-panel__icon {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	background: #eaf1fe;
	color: var(--grz-blue);
}
.grz-region-panel__head h2 { font-size: .92rem; font-weight: 800; letter-spacing: -.01em; }
.grz-region-panel__head p { color: #8a94a6; font-size: .72rem; }

/* ---------- sidebar: language & currency as clean list rows ---------- */
.grz-region-quick-grid .grz-region-choice-grid,
.grz-region-quick-grid .grz-region-choice-grid--currencies {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
}
.grz-region-quick-grid .grz-region-choice {
	min-height: 44px;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	border: 1px solid #e7eaf0;
	border-radius: 6px;
	background: #fff;
	padding: 8px 10px;
	transition: border-color 140ms ease, background 140ms ease;
}
.grz-region-quick-grid .grz-region-choice:hover,
.grz-region-quick-grid .grz-region-choice:focus-within {
	border-color: #c3d6f5;
	background: #f9fbff;
	transform: none;
}
.grz-region-quick-grid .grz-region-choice.is-selected,
.grz-region-quick-grid .grz-region-choice:has(input:checked) {
	border-color: var(--grz-blue);
	background: #f0f6ff;
}
.grz-region-quick-grid .grz-region-choice__symbol {
	display: inline-flex;
	width: 26px;
	justify-content: center;
	font-size: .72rem;
	font-weight: 800;
	color: #7b8494;
}
.grz-region-quick-grid .grz-region-choice strong {
	flex: 1;
	min-width: 0;
	font-size: .76rem;
	font-weight: 800;
	color: #1c2733;
}
.grz-region-quick-grid .grz-region-choice small {
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #a0a8b5;
}
.grz-region-quick-grid .grz-region-choice.is-selected small,
.grz-region-quick-grid .grz-region-choice:has(input:checked) small { color: #5b8def; }

/* currency rows: CSS-only symbol chip (template outputs code only) */
.grz-region-quick-grid .grz-region-choice--currency::before {
	content: "";
	flex: 0 0 auto;
	display: inline-flex;
	width: 26px;
	height: 26px;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background: #f1f4f8;
	color: #7b8494;
	font-size: .68rem;
	font-weight: 800;
	transition: background 140ms ease, color 140ms ease;
}
.grz-region-quick-grid .grz-region-choice--currency:has(input[value="USD"])::before { content: "$"; }
.grz-region-quick-grid .grz-region-choice--currency:has(input[value="EUR"])::before { content: "€"; }
.grz-region-quick-grid .grz-region-choice--currency:has(input[value="GBP"])::before { content: "£"; }
.grz-region-quick-grid .grz-region-choice--currency:has(input[value="DZD"])::before { content: "د.ج"; }
.grz-region-quick-grid .grz-region-choice--currency:has(input[value="MAD"])::before { content: "د.م."; }
.grz-region-quick-grid .grz-region-choice--currency:has(input[value="TND"])::before { content: "د.ت"; }
.grz-region-quick-grid .grz-region-choice--currency:has(input[value="AED"])::before { content: "د.إ"; }
.grz-region-quick-grid .grz-region-choice--currency:has(input[value="SAR"])::before { content: "﷼"; }
.grz-region-quick-grid .grz-region-choice--currency:has(input[value="QAR"])::before { content: "﷼"; }
.grz-region-quick-grid .grz-region-choice--currency:has(input[value="KWD"])::before { content: "د.ك"; }
.grz-region-quick-grid .grz-region-choice--currency:has(input[value="EGP"])::before { content: "E£"; }
.grz-region-quick-grid .grz-region-choice--currency:has(input[value="TRY"])::before { content: "₺"; }
.grz-region-quick-grid .grz-region-choice--currency:has(input[value="CAD"])::before { content: "$"; }
.grz-region-quick-grid .grz-region-choice--currency:has(input[value="AUD"])::before { content: "$"; }
.grz-region-quick-grid .grz-region-choice--currency:has(input[value="MXN"])::before { content: "$"; }
.grz-region-quick-grid .grz-region-choice--currency:has(input[value="CNY"])::before { content: "¥"; }
.grz-region-quick-grid .grz-region-choice--currency:has(input[value="JPY"])::before { content: "¥"; }
.grz-region-quick-grid .grz-region-choice--currency:has(input:checked)::before {
	background: #dbe8fd;
	color: var(--grz-blue);
}

/* check badge: rounded square pinned to the row's right edge, blue when active */
.grz-region-option-check {
	position: static;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-inline-start: auto;
	border: 1px solid #d9dee6;
	border-radius: 4px;
}
.grz-region-option-check .grz-icon { width: 10px; height: 10px; }
.is-selected > .grz-region-option-check,
.grz-region-choice:has(input:checked) .grz-region-option-check,
.grz-region-country:has(input:checked) .grz-region-option-check {
	border-color: var(--grz-blue);
	background: var(--grz-blue);
	color: #fff;
}

/* ---------- country panel head & search ---------- */
.grz-region-panel__head--country {
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.grz-region-country-search input {
	height: 42px;
	border: 1px solid #e7eaf0;
	border-radius: 6px;
	background: #fff;
	font-size: .8rem;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}
.grz-region-country-search input:focus {
	border-color: var(--grz-blue);
	box-shadow: 0 0 0 3px rgba(8,104,242,.1);
}
.grz-region-country-search__clear { border-radius: 4px; }
.grz-region-country-search__clear:hover,
.grz-region-country-search__clear:focus-visible { background: #f1f4f8; }

/* ---------- quick picks: flag chips ---------- */
.grz-region-popular {
	border: 0;
	border-radius: 0;
	background: transparent;
	gap: 10px;
	margin-bottom: 14px;
	padding: 0 0 14px;
	border-bottom: 1px solid #eef0f4;
}
.grz-region-popular__label { color: #8a94a6; }
.grz-region-popular__list { gap: 6px; }
.grz-region-popular__item {
	min-height: 30px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: #f2f4f7;
	color: #3c4657;
	font-size: .7rem;
	font-weight: 700;
	padding: 4px 10px;
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease;
}
.grz-region-popular__item .grz-flag-img { width: 18px; }
.grz-region-popular__item:hover,
.grz-region-popular__item:focus-within {
	background: #eaf1fe;
	color: var(--grz-blue);
}
.grz-region-popular__item.is-selected { background: #eaf1fe; color: var(--grz-blue); border-color: transparent; }

/* ---------- continents: catalog cards, 3-col flag rows ---------- */
.grz-region-country-groups {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
.grz-region-continent {
	border: 1px solid #eceff3;
	border-radius: 6px;
	background: #fff;
}
.grz-region-continent__head {
	min-height: 42px;
	border-bottom: 1px solid #eef0f4;
	background: transparent;
	padding: 0 14px;
}
.grz-region-continent__head h3 {
	color: #8a94a6;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.grz-region-continent__head small {
	border-radius: 999px;
	background: #eef0f4;
	color: #7b8494;
	font-size: .6rem;
	font-weight: 800;
	padding: 2px 8px;
}

.grz-region-country-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
	padding: 10px;
}
.grz-region-country {
	min-height: 48px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	padding: 6px 10px;
	transition: background 140ms ease, border-color 140ms ease;
}
.grz-region-country:hover,
.grz-region-country:focus-within {
	border-color: transparent;
	background: #f4f6f9;
}
.grz-region-country.is-selected,
.grz-region-country:has(input:checked) {
	border-color: var(--grz-blue);
	background: #f0f6ff;
}
.grz-region-country .grz-flag-img { width: 30px; }
.grz-region-country__copy strong { font-size: .74rem; font-weight: 800; color: #1c2733; }
.grz-region-country__copy small { font-size: .62rem; font-weight: 600; color: #a0a8b5; }
.grz-region-country.is-selected .grz-region-country__copy small,
.grz-region-country:has(input:checked) .grz-region-country__copy small { color: #5b8def; }

/* ---------- empty state ---------- */
.grz-region-empty { color: #8a94a6; }

/* ---------- actionbar ---------- */
.grz-region-actionbar {
	bottom: 12px;
	border: 1px solid #e7eaf0;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(16,24,40,.08);
	backdrop-filter: none;
}
.grz-region-actionbar__selection small { color: #98a1b0; }
.grz-region-actionbar__selection strong { color: #1c2733; font-weight: 800; }
.grz-region-cancel { color: #8a94a6; font-weight: 700; }
.grz-region-cancel:hover,
.grz-region-cancel:focus-visible { color: var(--grz-blue); }
.grz-region-save { border-radius: 6px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	.grz-region-form { grid-template-columns: minmax(0, 1fr) 300px; }
	.grz-region-country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.grz-region-form { grid-template-columns: 1fr; }
	.grz-region-quick-grid {
		grid-column: 1;
		grid-row: 1;
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.grz-region-panel--country { grid-row: 2; }
	.grz-region-actionbar { grid-row: 3; }
}
@media (max-width: 640px) {
	.grz-region-panel { padding: 16px; }
	.grz-region-quick-grid { grid-template-columns: 1fr; }
	.grz-region-panel__head--country { align-items: flex-start; flex-direction: column; }
	.grz-region-country-search { width: 100%; }
	.grz-region-country-grid { grid-template-columns: 1fr; }
	.grz-region-popular { align-items: flex-start; flex-direction: column; }
}

/* Mobile: keep the selected storefront and Apply action within thumb reach.
   The action bar used to return to normal flow below the full country catalog,
   which forced users to scroll through every region after changing a language
   or currency near the top of the page. */
@media (max-width: 760px) {
	.grz-region-page__container {
		padding-bottom: calc(154px + env(safe-area-inset-bottom, 0px));
	}
	.grz-region-actionbar {
		position: fixed;
		inset-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
		bottom: max(10px, env(safe-area-inset-bottom, 0px));
		z-index: 1000;
		width: auto;
		max-width: none;
		margin: 0;
		align-items: stretch;
		gap: 8px;
		border-color: #d7e1ee;
		background: rgba(255,255,255,.98);
		box-shadow: 0 16px 42px rgba(16,24,40,.2);
		padding: 9px;
		backdrop-filter: blur(14px);
	}
	.grz-region-actionbar__selection {
		width: 100%;
		padding-inline: 3px;
	}
	.grz-region-actionbar__selection > div {
		flex: 1;
	}
	.grz-region-actionbar__actions {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		width: 100%;
	}
	.grz-region-save {
		min-width: 0;
		width: 100%;
	}
}

@media (max-width: 420px) {
	.grz-region-actionbar__selection {
		gap: 6px;
	}
	.grz-region-actionbar__selection strong {
		max-width: 126px;
	}
	.grz-region-actionbar .grz-region-token {
		min-width: 38px;
		padding-inline: 6px;
	}
	.grz-region-cancel {
		padding-inline: 9px;
	}
}