/* ============================================================
   Sahla — inline currency switcher (header / menu)
   ============================================================ */
.sqp-cur,
.sqp-cur--inline { position: relative; display: inline-block; vertical-align: middle; }
.sqp-switch-li { display: inline-flex; align-items: center; }
.sqp-switch-li > a { display: none; } /* hide any theme menu-link styling on the wrapper */

.sqp-cur-toggle {
	display: inline-flex; align-items: center; gap: 7px;
	background: transparent;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: 8px;
	padding: 5px 10px;
	cursor: pointer;
	font-size: 14px; line-height: 1;
	color: inherit;
}
.sqp-cur-toggle:hover { border-color: rgba(0,0,0,.35); }
.sqp-cur-flag { width: 22px; height: 15px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 1px rgba(0,0,0,.3); display: block; flex: 0 0 auto; }
.sqp-cur-code { font-weight: 600; letter-spacing: .3px; }
.sqp-cur-caret { font-size: 11px; opacity: .7; }

.sqp-cur-menu {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-end: 0;
	min-width: 230px;
	background: #fff;
	border: 1px solid #e3e6ea;
	border-radius: 12px;
	box-shadow: 0 12px 36px rgba(0,0,0,.16);
	padding: 6px;
	z-index: 100000;
	text-align: start;
}
.sqp-cur-item {
	display: flex; align-items: center; gap: 12px;
	width: 100%;
	background: none; border: 0;
	padding: 10px 12px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	color: #333;
	text-align: start;
	white-space: nowrap;
}
.sqp-cur-item:hover { background: #f3f5f7; }
.sqp-cur-item.is-active { font-weight: 700; }
.sqp-cur-item .sqp-cur-flag { width: 26px; height: 18px; }

@media (max-width: 600px) {
	.sqp-cur-toggle { font-size: 13px; padding: 5px 8px; gap: 5px; }
	.sqp-cur-flag { width: 20px; height: 14px; }
	.sqp-cur-menu { min-width: 200px; }
}

/* ============================================================
   Phone: the list becomes a sheet from the bottom of the screen.

   A little drop-down could not work here — it is anchored to a
   button that sits at the very edge of a narrow screen, so the
   flag and the currency name were being cut off, and in English
   it opened the other way and ran off the side. A full-width
   sheet is never clipped, never widens the page, and gives each
   currency a proper target for a thumb.
   ============================================================ */
@media (max-width: 600px) {
	.sqp-cur.open::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(17, 24, 39, .45);
		z-index: 99998;
	}

	.sqp-cur-menu {
		position: fixed;
		inset: auto 0 0 0;
		width: 100%;
		/* Explicit, because a theme's box model decides whether the padding
		   sits inside this width or pushes the sheet off the screen. */
		box-sizing: border-box;
		min-width: 0;
		max-height: 72vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		border: 0;
		border-radius: 18px 18px 0 0;
		padding: 6px 10px calc(12px + env(safe-area-inset-bottom));
		box-shadow: 0 -12px 40px rgba(0, 0, 0, .28);
		z-index: 99999;
	}

	/* The grab handle stays put while the list scrolls under it. */
	.sqp-cur-menu:before {
		content: "";
		display: block;
		position: sticky;
		top: 0;
		width: 42px;
		height: 4px;
		margin: 6px auto 10px;
		border-radius: 999px;
		background: #d8dadd;
	}

	.sqp-cur-item {
		box-sizing: border-box;
		width: 100%;
		gap: 14px;
		padding: 14px 12px;
		font-size: 15px;
		border-radius: 12px;
		min-height: 52px;
		white-space: normal;
	}
	.sqp-cur-item + .sqp-cur-item { border-top: 1px solid #f2f4f6; }
	.sqp-cur-item .sqp-cur-flag { width: 32px; height: 22px; }
	.sqp-cur-item .sqp-cur-name { flex: 1; text-align: start; line-height: 1.35; }

	/* Which one is in use, at a glance. */
	.sqp-cur-item.is-active { background: #f0f6ff; color: #14539a; }
	.sqp-cur-item.is-active:after {
		content: "\2713";
		margin-inline-start: auto;
		font-size: 15px;
		font-weight: 700;
	}
}