/* ============================================================
   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__eyebrow { color: var(--grz-blue); letter-spacing: .11em; }
.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, blue when active */
.grz-region-option-check {
	position: static;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-inline-start: 0;
	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__flag { display: inline-flex; }
.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; }
}