/**
 * Profyle global currency switcher — options are real kit buttons.
 *
 * Each option carries .elementor-button, so the SELECTED state's colours and
 * typography come from the kit-4117 global button style itself (Titan Orange
 * bg, white text, Montserrat 14) — nothing is duplicated here, and a kit
 * button retune carries over automatically. The UNSELECTED state mirrors the
 * header's secondary "Log In" button (white bg, Slate text, Pebble-dark
 * hover) via the same kit colour tokens that button uses. Geometry (12px
 * padding / radius 8 / weight 700) mirrors the header CTA's per-widget
 * settings — the kit defines no button geometry, so these cannot be tokens.
 * Height therefore matches the header CTAs (~38px, WCAG 2.2 AA >=24px);
 * the previous blanket 44px min-height gave way to header alignment.
 */

.profyle-gcs {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.profyle-gcs .profyle-gcs__btn.elementor-button {
	min-width: 44px;
	padding: 12px;
	font-weight: 700;
	line-height: 1;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Unselected: quiet secondary treatment (the header "Log In" button's look). */
.profyle-gcs .profyle-gcs__btn[aria-pressed="false"] {
	color: var(--e-global-color-feeea68, #182A33);
	background: #FFFFFF;
}

.profyle-gcs .profyle-gcs__btn[aria-pressed="false"]:hover {
	background: var(--e-global-color-a85deeb, #E4E2DA);
}

/* Selected: no colour rules — the kit global button style shows through.
   Hover matches the header CTA's hover global (Titan Orange - Dark). */
.profyle-gcs .profyle-gcs__btn[aria-pressed="true"]:hover {
	background: var(--e-global-color-eb7c6f7, #DA471F);
}

.profyle-gcs .profyle-gcs__btn:focus-visible {
	outline: 2px solid var(--e-global-color-f920b8e, #F15A29);
	outline-offset: 2px;
}

/* Size variants */
.profyle-gcs--small .profyle-gcs__btn.elementor-button {
	min-width: 36px;
	padding: 8px 10px;
	font-size: 13px;
}

.profyle-gcs--large .profyle-gcs__btn.elementor-button {
	min-width: 52px;
	padding: 14px 20px;
	font-size: 16px;
}

/* Dropdown variant */
.profyle-gcs-select {
	min-height: 44px;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--e-global-color-feeea68, #182A33);
	background: var(--e-global-color-d6c0b6f, #F2F1ED);
	border: 1px solid var(--e-global-color-a85deeb, #E4E2DA);
	border-radius: 8px;
	cursor: pointer;
}

.profyle-gcs-select:focus-visible {
	outline: 2px solid var(--e-global-color-f920b8e, #F15A29);
	outline-offset: 2px;
}