/*
 * GUEST-LANG-2 (1.7.0): the language menu in the top bar of the
 * storefront and the checkout. Shared by both pages, so it uses only
 * the --rso-* tokens both stylesheets define, each with a fallback.
 * Brand: green on white, black ink; the active language is the one
 * green item.
 */
.rso-lang { position: relative; flex: none; }
.rso-lang-btn {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 42px; padding: 0 12px 0 10px; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--rso-line, #e8e1d2); background: var(--rso-surface-2, #f0ede4); color: var(--rso-ink, #241a10);
	font-family: var(--rso-font-display, inherit); font-size: .82rem; font-weight: 800; letter-spacing: .04em; line-height: 1;
}
.rso-lang-btn:hover { background: var(--rso-ink, #241a10); border-color: var(--rso-ink, #241a10); color: var(--rso-bg, #fff); }
.rso-lang-btn:focus-visible { outline: 3px solid var(--rso-focus, #1857c4); outline-offset: 2px; }
.rso-lang.is-busy .rso-lang-btn { opacity: .55; pointer-events: none; }
/* The glyph degrades to the two-letter code beside it (Windows draws
   no regional-indicator flags); `wp-exclude-emoji` on the span keeps
   twemoji from swapping it for a remote image — see storefront.js. */
.rso-lang-flag { font-size: 17px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.rso-lang-code { line-height: 1; }
.rso-lang-menu {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 200px;
	display: flex; flex-direction: column; gap: 2px; padding: 6px;
	background: var(--rso-surface, #fff); color: var(--rso-ink, #241a10);
	border: 1px solid var(--rso-line, #e8e1d2); border-radius: 14px;
	box-shadow: var(--rso-shadow, 0 8px 24px -12px rgba(36, 26, 16, .3));
}
.rso-lang-menu[hidden] { display: none; }
.rso-lang-item {
	display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px;
	border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; text-align: left;
	font-family: var(--rso-font-body, inherit); font-size: .95rem; font-weight: 600;
}
.rso-lang-item:hover, .rso-lang-item:focus { background: var(--rso-accent-tint, #eaf6df); outline: none; }
.rso-lang-item:focus-visible { box-shadow: inset 0 0 0 3px var(--rso-focus, #1857c4); }
.rso-lang-item.is-active { background: var(--rso-accent, #46a500); color: #fff; }
.rso-lang-item.is-active:hover, .rso-lang-item.is-active:focus { background: var(--rso-accent-deep, #35800a); color: #fff; }
.rso-lang-item .rso-lang-name { flex: 1 1 auto; }
.rso-lang-item .rso-lang-code { font-size: .75rem; font-weight: 800; letter-spacing: .06em; opacity: .7; }
.rso-lang-item[aria-busy="true"] { opacity: .55; }
/* Up to tablet width the top bar is brand · status · search · phone ·
   basket · this, and the brand name is what gives way: with the flag
   pill beside it "Demo Restaurant" fell to a third line at 768px
   (responsive suite). So below 900px the button is a 42px circle with
   the two-letter code, the same footprint as the phone button; the
   code alone still says which language is on screen, and the flag is
   in the menu itself. */
@media (max-width: 900px) {
	.rso-lang-btn { width: 42px; height: 42px; min-height: 42px; padding: 0; justify-content: center; font-size: .78rem; }
	.rso-lang-btn .rso-lang-flag { display: none; }
}
/* Kiosk: bigger targets, like every other control there. */
body.rso-kiosk .rso-lang-btn { min-height: 56px; font-size: 1rem; padding: 0 16px; }
body.rso-kiosk .rso-lang-item { min-height: 56px; font-size: 1.1rem; }