/* ==========================================================================
   Desktop locale / region switcher popover
   ========================================================================== */

/**
 * Jedi-Robe desktop locale switcher popover.
 *
 * Keeps the existing WP Jedi Toolkit region/currency markup and switching
 * behaviour intact while presenting a compact desktop utility popover.
 * Mobile continues to use the dedicated Location Preferences page.
 *
 * @package    Jedi_Theme
 * @subpackage Header_Locale_Switcher
 * @since      1.4.0
 */

@media (min-width: 993px) {

	/* ======================================================================
	   Popover visibility and anchoring
	   ====================================================================== */

	body.jr-dark-commerce
		.jedi-highlights-strip
		.locale-switcher-container {
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 120;

		display: block;
		width: min(27.75rem, calc(100vw - 2rem));
		padding-top: 0.5rem;

		opacity: 0;
		visibility: hidden;
		transform: translate3d(0, 0.3rem, 0);
		pointer-events: none;

		transition:
			opacity 150ms ease,
			transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
			visibility 0s linear 180ms;
	}

	body.jr-dark-commerce
		.jedi-highlights-strip
		.highlight-item:last-child:hover
		.locale-switcher-container,
	body.jr-dark-commerce
		.jedi-highlights-strip
		.highlight-item:last-child:focus-within
		.locale-switcher-container {
		opacity: 1;
		visibility: visible;
		transform: translate3d(0, 0, 0);
		pointer-events: auto;
		transition-delay: 0s;
	}


	/* ======================================================================
	   Main panel
	   ====================================================================== */

	/**
	 * Uses a near-balanced split so the region names retain comfortable room
	 * while the currency area is wide enough to keep GBP, USD and EUR on one
	 * row at all desktop widths.
	 */
	body.jr-dark-commerce
		.jedi-highlights-strip
		.locale-switcher {
		position: relative;

		display: grid;
		grid-template-columns:
			minmax(0, 1.12fr)
			minmax(0, 1fr);
		align-items: stretch;

		padding: 0.55rem;

		border: 1px solid var(--jr-border);
		border-top-color: var(--jr-border-strong);
		border-radius: 0.3125rem;

		background:
			linear-gradient(
				180deg,
				var(--jr-surface-raised),
				var(--jr-surface)
			);

		color: var(--jr-text);
		font-size: 0.8125rem;

		box-shadow:
			0 1rem 2.4rem rgba(0, 0, 0, 0.44),
			0 0 0 1px rgba(111, 203, 255, 0.02),
			inset 0 1px 0 rgba(255, 255, 255, 0.03);
	}


	/* ======================================================================
	   Pointer
	   ====================================================================== */

	body.jr-dark-commerce
		.jedi-highlights-strip
		.locale-switcher::after {
		position: absolute;
		top: -0.375rem;
		right: 5.75rem;

		width: 0.7rem;
		height: 0.7rem;

		border-top: 1px solid var(--jr-border);
		border-left: 1px solid var(--jr-border);
		background: var(--jr-surface-raised);

		content: "";
		transform: rotate(45deg);
		pointer-events: none;
	}


	/* ======================================================================
	   Columns
	   ====================================================================== */

	body.jr-dark-commerce
		.jedi-highlights-strip
		.locale-switcher
		> div {
		min-width: 0;
		padding: 0.6rem 0.7rem;
	}

	body.jr-dark-commerce
		.jedi-highlights-strip
		.locale-switcher
		.region-section {
		border-right: 1px solid var(--jr-border);
	}

	body.jr-dark-commerce
		.jedi-highlights-strip
		.locale-switcher
		.your-preferences-section {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}


	/* ======================================================================
	   Headings
	   ====================================================================== */

	body.jr-dark-commerce
		.locale-switcher
		h5 {
		margin: 0 0 0.5rem;
		padding: 0 0 0.45rem;

		border-bottom: 1px solid var(--jr-border);

		color: var(--jr-text);
		font-size: 0.7rem;
		font-weight: 750;
		letter-spacing: 0.075em;
		line-height: 1.2;
		text-transform: uppercase;
	}

	body.jr-dark-commerce
		.locale-switcher
		h6 {
		margin: 0;

		color: var(--jr-text-soft);
		font-size: 0.65rem;
		font-weight: 700;
		letter-spacing: 0.065em;
		line-height: 1.2;
		text-transform: uppercase;
	}


	/* ======================================================================
	   Region list
	   ====================================================================== */

	body.jr-dark-commerce
		.locale-switcher
		.region-switcher {
		display: grid;
		gap: 0.25rem;
	}

	body.jr-dark-commerce
		.locale-switcher
		.region-section
		.region-switcher
		a {
		display: grid;
		grid-template-columns: 2rem minmax(0, 1fr);
		gap: 0.6rem;
		align-items: center;

		width: 100%;
		min-height: 2.5rem;
		margin: 0;
		padding: 0.4rem 0.55rem;

		border: 1px solid transparent;
		border-radius: 0.25rem;
		background: transparent;

		color: var(--jr-text);
		font-size: 0.765625rem;
		font-weight: 650;
		line-height: 1.2;
		text-decoration: none;
		text-transform: none;

		transition:
			border-color 160ms ease,
			background-color 160ms ease,
			box-shadow 160ms ease;
	}


	/* ======================================================================
	   Region flags
	   ====================================================================== */

	body.jr-dark-commerce
		.locale-switcher
		.region-switcher
		a
		.flag-image {
		display: flex;
		align-items: center;

		width: 2rem;
		height: 1.3125rem;
	}

	body.jr-dark-commerce
		.locale-switcher
		.region-switcher
		a
		.flag-image
		img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: none;
	}


	/* ======================================================================
	   Region states
	   ====================================================================== */

	body.jr-dark-commerce
		.locale-switcher
		.region-switcher
		a.active {
		border-color: rgba(69, 217, 107, 0.5);
		background: rgba(45, 166, 83, 0.085);
		color: var(--jr-text);
		box-shadow: inset 2px 0 0 var(--jr-green-light);
		pointer-events: none;
	}

	@media (hover: hover) and (pointer: fine) {

		body.jr-dark-commerce
			.locale-switcher
			.region-switcher
			a:not(.active):hover {
			border-color: rgba(69, 217, 107, 0.34);
			background: rgba(45, 166, 83, 0.05);
			color: var(--jr-text);
		}
	}


	/* ======================================================================
	   Currency area
	   ====================================================================== */

	body.jr-dark-commerce
		.locale-switcher
		.currency-section {
		padding: 0;
	}

	body.jr-dark-commerce
		.locale-switcher
		.currency-section
		.currency-switcher {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.3rem;
		padding-top: 0.6rem;
	}

	body.jr-dark-commerce
		.locale-switcher
		.currency-switcher
		a {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		min-width: 0;
		min-height: 2rem;
		margin: 0;
		padding: 0.4rem 0.3rem;

		border: 1px solid var(--jr-border);
		border-radius: 0.25rem;
		background: transparent;

		color: var(--jr-text);
		font-size: 0.7rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;

		transition:
			border-color 160ms ease,
			background-color 160ms ease,
			box-shadow 160ms ease;
	}


	/* ======================================================================
	   Currency states
	   ====================================================================== */

	body.jr-dark-commerce
		.locale-switcher
		.currency-switcher
		a.active {
		border-color: rgba(69, 217, 107, 0.5);
		background: rgba(45, 166, 83, 0.085);
		color: var(--jr-text);
		box-shadow: inset 2px 0 0 var(--jr-green-light);
		pointer-events: none;
	}

	@media (hover: hover) and (pointer: fine) {

		body.jr-dark-commerce
			.locale-switcher
			.currency-switcher
			a:not(.active):hover {
			border-color: rgba(69, 217, 107, 0.34);
			background: rgba(45, 166, 83, 0.05);
			color: var(--jr-text);
		}
	}


	/* ======================================================================
	   Secondary currency dropdown
	   ====================================================================== */

	/**
	 * Keep the secondary currencies as a simple one-column dropdown.
	 *
	 * This intentionally follows the previous Stormtrooper Store pattern:
	 * one compact trigger inside the preferences column and one vertical menu
	 * anchored directly beneath it. The menu floats over page content rather
	 * than increasing the height of the main locale panel.
	 *
	 * @package    Jedi_Theme
	 * @subpackage Header_Locale_Switcher
	 */
	body.jr-dark-commerce
		.locale-switcher
		.secondary-currency-section {
		margin-top: 0.55rem;
	}

	body.jr-dark-commerce
		.locale-switcher
		.secondary-currency-dropdown {
		position: relative;
	}

	body.jr-dark-commerce
		.locale-switcher
		.secondary-currency-trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;

		width: 100%;
		min-height: 2.375rem;
		margin: 0;
		padding: 0.45rem 0.6rem;

		border: 1px solid var(--jr-border);
		border-radius: 0.25rem;
		background: rgba(255, 255, 255, 0.015);

		color: var(--jr-text-soft);
		font: inherit;
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.02em;
		line-height: 1.15;
		text-align: left;

		cursor: pointer;

		transition:
			border-color 160ms ease,
			background-color 160ms ease,
			color 160ms ease;
	}

	body.jr-dark-commerce
		.locale-switcher
		.secondary-currency-trigger
		.caret {
		display: inline-block;
		flex: 0 0 auto;
		font-size: 0.85rem;
		line-height: 1;
		transform: translateY(-0.05rem);
		transition: transform 160ms ease;
	}

	body.jr-dark-commerce
		.locale-switcher
		.secondary-currency-trigger.active {
		border-color: rgba(69, 217, 107, 0.5);
		background: rgba(45, 166, 83, 0.085);
		color: var(--jr-text);
	}

	body.jr-dark-commerce
		.locale-switcher
		.secondary-currency-menu {
		position: absolute;
		top: calc(100% - 1px);
		right: 0;
		left: 0;
		z-index: 4;

		display: block;
		margin: 0;
		padding: 0.3rem;

		border: 1px solid var(--jr-border);
		border-radius: 0 0 0.25rem 0.25rem;
		background: var(--jr-surface-raised);
		box-shadow: 0 0.75rem 1.6rem rgba(0, 0, 0, 0.34);

		opacity: 0;
		visibility: hidden;
		transform: translateY(0.2rem);
		pointer-events: none;

		transition:
			opacity 140ms ease,
			transform 160ms ease,
			visibility 0s linear 160ms;
	}

	body.jr-dark-commerce
		.locale-switcher
		.secondary-currency-dropdown:hover
		.secondary-currency-menu,
	body.jr-dark-commerce
		.locale-switcher
		.secondary-currency-dropdown:focus-within
		.secondary-currency-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
		transition-delay: 0s;
	}

	body.jr-dark-commerce
		.locale-switcher
		.secondary-currency-menu
		a {
		display: flex;
		align-items: center;
		justify-content: flex-start;

		width: 100%;
		min-height: 2rem;
		padding: 0.4rem 0.55rem;

		border: 0;
		border-radius: 0.1875rem;
		background: transparent;

		color: var(--jr-text);
		font-size: 0.675rem;
		font-weight: 650;
		line-height: 1.1;
		text-align: left;
		text-decoration: none;
		white-space: nowrap;

		transition:
			background-color 150ms ease,
			color 150ms ease;
	}

	body.jr-dark-commerce
		.locale-switcher
		.secondary-currency-dropdown:hover
		.secondary-currency-trigger,
	body.jr-dark-commerce
		.locale-switcher
		.secondary-currency-dropdown:focus-within
		.secondary-currency-trigger {
		border-color: var(--jr-border-strong);
		border-radius: 0.25rem 0.25rem 0 0;
		color: var(--jr-text);
	}

	body.jr-dark-commerce
		.locale-switcher
		.secondary-currency-dropdown:hover
		.secondary-currency-trigger
		.caret,
	body.jr-dark-commerce
		.locale-switcher
		.secondary-currency-dropdown:focus-within
		.secondary-currency-trigger
		.caret {
		transform: rotate(180deg) translateY(0.05rem);
	}

	@media (hover: hover) and (pointer: fine) {

		body.jr-dark-commerce
			.locale-switcher
			.secondary-currency-menu
			a:not(.active):hover {
			background: rgba(45, 166, 83, 0.06);
			color: var(--jr-text);
		}
	}

	body.jr-dark-commerce
		.locale-switcher
		.secondary-currency-menu
		a.active {
		background: rgba(45, 166, 83, 0.085);
		color: var(--jr-text);
		box-shadow: inset 2px 0 0 var(--jr-green-light);
		pointer-events: none;
	}


	/* ======================================================================
	   Keyboard focus
	   ====================================================================== */

	body.jr-dark-commerce
		.locale-switcher
		.region-switcher
		a:focus-visible,
	body.jr-dark-commerce
		.locale-switcher
		.currency-switcher
		a:focus-visible,
	body.jr-dark-commerce
		.locale-switcher
		.secondary-currency-trigger:focus-visible,
	body.jr-dark-commerce
		.locale-switcher
		.secondary-currency-menu
		a:focus-visible {
		outline: 2px solid var(--jr-green-light);
		outline-offset: 2px;
	}
}


/* ==========================================================================
   Mobile
   ========================================================================== */

/**
 * Mobile uses the dedicated Location Preferences page via the mobile header
 * locale link, so the desktop popover is intentionally not displayed here.
 *
 * @package Jedi_Theme
 */
@media (max-width: 992px) {

	body.jr-dark-commerce
		.jedi-highlights-strip
		.locale-switcher-container {
		display: none;
	}
}