/* Language Switcher Styles */

/* Pre-auth pages: in-flow, top-right aligned.
   The partial renders before .container.top-bar in the document, so normal
   flow places it above the merchant logo instead of overlapping it at all
   viewport widths. position: relative (not static) keeps z-index effective
   so the selector stays below modals (z-index 850+). */
.language-switcher {
	position: relative;
	text-align: right;
	margin: 10px 15px 0;
	z-index: 100;
}

.language-switcher select {
	padding: 5px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #fff;
	font-size: 13px;
	color: #333;
	cursor: pointer;
	outline: none;
	min-width: 120px;
}

.language-switcher select:hover {
	border-color: #999;
}

.language-switcher select:focus {
	border-color: #54de62;
	box-shadow: 0 0 3px rgba(84, 222, 98, 0.3);
}

/* Post-auth pages: inline in navigation area */
.navigation-container .language-switcher {
	position: relative;
	top: auto;
	right: auto;
	z-index: auto;
	display: inline-block;
	float: right;
	/* Full shorthand so the pre-auth base rule's `margin: 10px 15px 0`
	   does not leak its right/left margins into the post-auth switcher. */
	margin: 5px 0 0;
}

.navigation-container .language-switcher select {
	padding: 3px 8px;
	font-size: 12px;
	min-width: 100px;
}

/* Responsive: ensure switcher is accessible on mobile */
@media (max-width: 767px) {
	/* Pre-auth switcher: drop the top margin and the select's default
	   bottom margin (legacy bootstrap applies margin-bottom: 10px to form
	   controls) so the in-flow selector does not add ~20px of empty space
	   above the page content on mobile. */
	.language-switcher {
		margin: 0 15px;
	}

	.language-switcher select {
		font-size: 12px;
		min-width: 100px;
		padding: 4px 6px;
		margin-bottom: 0;
	}

	.navigation-container .language-switcher {
		float: none;
		display: block;
		margin: 5px 0;
		text-align: right;
	}
}