/**
 * components/country-tabs.css — Country / Region Tab Selector
 *
 * Shared component used wherever a country tab bar appears.
 * Pages: page-service-taxation.php, page-services.php
 *
 * BEM roots: .tax-country-selector · .tax-tabs · .tax-tab · .tax-coming-soon
 *
 * @package MJC_Fintech_Child
 */

/* =====================================================
   COUNTRY TAB SELECTOR
   ===================================================== */

.tax-country-selector {
	background-color: var(--color-navy);
	border-bottom: 1px solid var(--color-border-dark);
	padding: var(--space-5) 0;
	overflow: hidden;
}

.tax-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
}

.tax-tab {
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-white-muted);
	background: transparent;
	border: 1px solid var(--color-border-dark);
	border-radius: var(--radius-md);
	padding: var(--space-2) var(--space-5);
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s, background 0.2s;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.tax-tab:hover {
	color: var(--color-white);
	border-color: var(--color-teal);
}

.tax-tab--active,
.tax-tab[aria-selected="true"] {
	color: var(--color-white);
	background: var(--color-tag-bg);
	border-color: var(--color-teal);
}

.tax-tab:focus-visible {
	outline: 2px solid var(--color-cyan);
	outline-offset: 2px;
}

.tax-coming-soon {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--color-cyan);
	background: rgba(34, 211, 238, 0.12);
	border-radius: var(--border-radius-pill);
	padding: 2px var(--space-2);
	white-space: nowrap;
}

/* =====================================================
   LABELED MODIFIER
   Left: section identifier text · Right: tab group
   Applied only on pages that need it (e.g. services page).
   The base bar (taxation page) is unaffected.
   ===================================================== */

.tax-country-selector__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
}

.tax-country-selector__label {
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-teal);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Tabs sit on the right — override center alignment */
.tax-country-selector--labeled .tax-tabs {
	justify-content: flex-end;
}

/* =====================================================
   RESPONSIVE — MOBILE (768px and below)
   ===================================================== */

@media (max-width: 768px) {
	.tax-tabs {
		gap: var(--space-2);
	}

	.tax-tab {
		font-size: var(--text-xs);
		padding: var(--space-2) var(--space-4);
	}

	/* Labeled variant: stack vertically, both centered */
	.tax-country-selector__inner {
		flex-direction: column;
		align-items: center;
		gap: var(--space-3);
	}

	.tax-country-selector--labeled .tax-tabs {
		justify-content: center;
	}
}