/* Inline Arabic / English language switcher (header / menu) */
.sqp-lang,
.sqp-lang--inline { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; border: 1px solid rgba(0,0,0,.15); border-radius: 8px; padding: 3px; }
.sqp-switch-li-lang { display: inline-flex; align-items: center; }

/* The language buttons sit beside the currency inside one menu item, and the
   pair never breaks onto its own line under the header. */
.sqp-switch-li { display: inline-flex !important; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
.sqp-switch-li .sqp-lang { flex: 0 0 auto; }

.sqp-lang-btn { border: 0; background: none; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1; color: inherit; font-weight: 600; }
.sqp-lang-btn:hover { background: rgba(0,0,0,.07); }
.sqp-lang-btn.is-active { background: #111827; color: #fff; }

@media (max-width: 600px) {
	.sqp-lang-btn { font-size: 12px; padding: 5px 8px; }
}

/* Compact enough to share the row with the currency switcher. */
.sqp-switch-li .sqp-lang { padding: 2px; }
.sqp-switch-li .sqp-lang-btn { padding: 4px 9px; font-size: 12.5px; }

/* Once moved up beside the account link the row is roomier, so the pair can
   breathe a little and stay vertically centred with its neighbours. */
.sqp-switch-li.is-beside-account,
.sqp-switch-inline { display: inline-flex !important; align-items: center; gap: 8px; margin-inline-end: 10px; vertical-align: middle; }
.sqp-switch-li.is-beside-account > a { display: none; }

/* The strip that appears under the header when the menu that normally holds
   the switchers is hidden — the phone, most of the time. */
.sqp-switch-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 7px 12px;
	background: #fff;
	border-bottom: 1px solid rgba( 0, 0, 0, .08 );
	position: relative;
	z-index: 20;
}
.sqp-switch-bar[hidden] { display: none; }
.sqp-switch-bar .sqp-cur,
.sqp-switch-bar .sqp-lang { flex: 0 0 auto; }
.sqp-switch-bar .sqp-cur-toggle { padding: 4px 9px; font-size: 13px; }
.sqp-switch-bar .sqp-lang { padding: 2px; }
.sqp-switch-bar .sqp-lang-btn { padding: 4px 9px; font-size: 12.5px; }

/* On a phone the strip stops being a second header.

   A white band with its own bottom border sat directly under the real header
   and read as a stray toolbar. With no background and no rule it is just the
   page's own top margin with one chip resting in it, so the header above it
   is still the only bar on screen. */
@media (max-width: 600px) {
	.sqp-switch-bar {
		padding: 4px 12px;
		gap: 8px;
		background: transparent;
		border-bottom: 0;
	}
	/* The chip carries its own shape on a phone — see currency.css. */
	.sqp-switch-bar .sqp-cur-toggle { padding: 0 13px; font-size: 13px; }
	.sqp-switch-bar .sqp-lang-btn { font-size: 13px; }
}

/* The menu never shows it on a phone, so keep the strip out of print too. */
@media print {
	.sqp-switch-bar { display: none !important; }
}