/**
 * Language + currency inside the theme's ☰ menu (phones).
 *
 * The menu's colours are not ours to know — Flatsome menus come light or
 * dark — so everything here inherits the text colour and draws its edges in a
 * mid grey that reads on either. The one filled shape, the active language,
 * takes the shop's own primary colour when the theme publishes it.
 */

.sqp-drawer-li {
	display: block;
	/* Explicit: menus give their rows width:100%, and without this the side
	   padding is added on top — the rows spill past the edge of the menu. */
	box-sizing: border-box;
	list-style: none;
	padding: 16px 20px 20px;
}
/* The theme gives every menu row display:block, which beats [hidden]. */
.sqp-drawer-li[hidden] { display: none !important; }

.sqp-drawer-row + .sqp-drawer-row { margin-top: 16px; }

.sqp-drawer-h {
	display: block;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	/* Spacing and capitals pull Arabic letters apart. */
	letter-spacing: 0;
	text-transform: none;
	opacity: .6;
}

/* ------------------------------------------------------------
   Language: one segmented control across the row
   ------------------------------------------------------------ */
.sqp-drawer-li .sqp-lang {
	display: flex;
	gap: 4px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 3px;
	border: 1px solid rgba(128, 128, 128, .35);
	border-radius: 10px;
}
.sqp-drawer-li .sqp-lang-btn {
	flex: 1 1 0;
	min-height: 40px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
}
.sqp-drawer-li .sqp-lang-btn.is-active {
	background: var(--primary-color, #111827);
	color: #fff;
}

/* ------------------------------------------------------------
   Currency: a full-width row whose list opens in place

   Not the bottom sheet used elsewhere on a phone: the menu slides in
   with a transform, and anything position:fixed inside a transformed
   box is pinned to that box — the sheet would open inside the menu,
   cut to its width, instead of across the screen.
   ------------------------------------------------------------ */
.sqp-cur.is-drawer {
	display: block;
	width: 100%;
}
.sqp-cur.is-drawer .sqp-cur-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid rgba(128, 128, 128, .35);
	border-radius: 10px;
	background: transparent;
	color: inherit;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
}
.sqp-cur.is-drawer .sqp-cur-code { letter-spacing: 0; }
.sqp-cur.is-drawer .sqp-cur-caret {
	margin-inline-start: auto;
	font-size: 13px;
	opacity: .7;
	transition: transform .15s ease;
}
.sqp-cur.is-drawer.open .sqp-cur-caret { transform: rotate(180deg); }

.sqp-cur.is-drawer .sqp-cur-menu {
	position: static;
	width: auto;
	min-width: 0;
	max-height: 50vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
	margin: 8px 0 0;
	/* No frame of its own: the rows carry their own shape, and a faint outline
	   around a scrolling list only shows as stray slivers at its edges. */
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	z-index: auto;
}
.sqp-cur.is-drawer .sqp-cur-menu[hidden] { display: none; }

/* No dimmed backdrop and no grab handle: this is a list, not a sheet. */
.sqp-cur.is-drawer.open::before,
.sqp-cur.is-drawer .sqp-cur-menu::before {
	content: none;
	display: none;
}

.sqp-cur.is-drawer .sqp-cur-item {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	gap: 12px;
	padding: 10px;
	border-radius: 8px;
	color: inherit;
	font-size: 14px;
	white-space: normal;
}
.sqp-cur.is-drawer .sqp-cur-item + .sqp-cur-item { border-top: 0; }
.sqp-cur.is-drawer .sqp-cur-item:hover { background: rgba(128, 128, 128, .1); }
.sqp-cur.is-drawer .sqp-cur-item.is-active {
	background: rgba(128, 128, 128, .16);
	color: inherit;
	font-weight: 700;
}
.sqp-cur.is-drawer .sqp-cur-item .sqp-cur-flag { width: 26px; height: 18px; }
.sqp-cur.is-drawer .sqp-cur-name { flex: 1; text-align: start; line-height: 1.35; }

.sqp-cur.is-drawer .sqp-cur-search {
	position: static;
	margin: 2px 0 6px;
	border-color: rgba(128, 128, 128, .35);
	background: transparent;
	color: inherit;
	box-shadow: none;
	/* 16px, or iOS zooms the page in the moment it is tapped. */
	font-size: 16px;
}