/* Language switcher (inc/canamek-language-switcher.php) and "view in your
 * language" toast (inc/canamek-language-suggest.php). Loaded only when the
 * site has two or more languages. */

/* ---- switcher ---- */
/* Same right-hand column as .ck-live-expert, one slot above it. The bottom
   offsets mirror that button's own values in style.css (120/172 desktop,
   88/150 phones) so the two always stack without overlapping. */
.ck-langfab{ position:fixed; right:28px; bottom:188px; z-index:801;
	font-family:inherit; -webkit-tap-highlight-color:transparent; }
/* One slot above .ck-live-expert, which is 56px tall (48px on phones) plus
   a gap. --ck-fab-base is measured from the sticky add-to-cart bar by
   placeFabs() in theme.js; the literal fallback matches the old fixed
   offset for the moment before it runs. */
body.single-product .ck-langfab{ bottom:calc(var(--ck-fab-base, 150px) + 92px); }
@media (max-width:640px){ body.single-product .ck-langfab{ bottom:calc(var(--ck-fab-base, 126px) + 84px); } }

/* ---- closed button: globe + language code, deliberately NOT a flag ---- */
.ck-langfab__toggle{ position:relative; width:48px; height:48px; padding:0; border:0; cursor:pointer;
	border-radius:50%; background:var(--ink,#111827); color:#fff; display:flex; align-items:center; justify-content:center;
	box-shadow:0 8px 24px rgba(0,0,0,.28); transition:transform .2s cubic-bezier(.34,1.4,.5,1), box-shadow .2s ease; }
.ck-langfab__toggle:hover, .ck-langfab__toggle:focus-visible{ transform:scale(1.08); box-shadow:0 12px 30px rgba(0,0,0,.34); }
.ck-langfab__globe{ width:24px; height:24px; }
.ck-langfab__badge{ position:absolute; right:-3px; bottom:-3px; min-width:20px; height:20px; padding:0 4px;
	border-radius:999px; background:var(--red,#ED1C24); color:#fff; border:2px solid #fff;
	font-size:9.5px; font-weight:800; letter-spacing:.02em; line-height:16px; text-align:center; }

/* ---- open items: flag + NAME, so it can't read as a currency picker ---- */
.ck-langfab__list{ position:absolute; top:50%; right:100%; transform:translateY(-50%);
	padding-right:12px; /* padding, not margin: keeps an unbroken hover path */
	display:flex; flex-direction:row-reverse; align-items:center; gap:8px;
	opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, visibility .18s ease; }
.ck-langfab.is-open .ck-langfab__list{ opacity:1; visibility:visible; pointer-events:auto; }

.ck-langfab__item{ display:flex; align-items:center; gap:8px; flex:0 0 auto; white-space:nowrap;
	height:40px; padding:0 14px 0 6px; border-radius:999px; background:#fff; text-decoration:none;
	color:var(--ink,#111827); font-size:13.5px; font-weight:700;
	box-shadow:0 6px 20px rgba(0,0,0,.18);
	opacity:0; transform:translateX(16px) scale(.9);
	transition:opacity .22s ease, transform .34s cubic-bezier(.34,1.45,.5,1), box-shadow .18s ease, background .18s ease;
	transition-delay:0s; }
.ck-langfab.is-open .ck-langfab__item{ opacity:1; transform:translateX(0) scale(1);
	transition-delay:calc(var(--ck-i,0) * .06s); }
.ck-langfab__item:hover{ background:var(--red,#ED1C24); color:#fff; box-shadow:0 10px 26px rgba(237,28,36,.34); }

.ck-langfab__flag{ width:28px; height:28px; border-radius:50%; overflow:hidden; flex:0 0 auto;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); background:#fff; }
.ck-langfab__flag svg{ width:100%; height:100%; object-fit:cover; display:block; }

/* Desktop: hover opens it, no click needed. Guarded so touch screens (which
   emulate a sticky :hover) use the JS tap handler instead. */
@media (hover:hover) and (pointer:fine){
	.ck-langfab:hover .ck-langfab__list{ opacity:1; visibility:visible; pointer-events:auto; }
	.ck-langfab:hover .ck-langfab__item{ opacity:1; transform:translateX(0) scale(1);
		transition-delay:calc(var(--ck-i,0) * .06s); }
}

/* Phones: names make a horizontal row too wide, so stack upward instead. */
@media (max-width:640px){
	.ck-langfab{ right:16px; bottom:146px; }
	/* Clears .ck-live-expert, whose phone button is 48px tall and sits at
	   --ck-fab-base + 24px. 48 + 24 + a 12px gap = 84. Declared here as
	   well as above because this media query comes later in the file and
	   would otherwise win with a fixed value, pinning the switcher on top
	   of the call button the moment the bar changed height. */
	body.single-product .ck-langfab{ bottom:calc(var(--ck-fab-base, 126px) + 84px); }
	.ck-langfab__toggle{ width:44px; height:44px; }
	.ck-langfab__globe{ width:22px; height:22px; }
	.ck-langfab__list{ top:auto; bottom:100%; right:0; transform:none;
		padding-right:0; padding-bottom:10px; flex-direction:column-reverse; align-items:flex-end; }
	.ck-langfab__item{ height:38px; font-size:13px; transform:translateY(10px) scale(.92); }
	.ck-langfab.is-open .ck-langfab__item{ transform:translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce){
	.ck-langfab__toggle, .ck-langfab__item{ transition:opacity .12s ease; transform:none !important; }
}

/* ---- inline switcher for the header / mobile menu ---------------------
   Sized and coloured to sit beside the currency switcher (.ck-currency)
   without looking like a second copy of it: a globe marks it as language,
   and the rows carry language names rather than codes. */
.ck-langsw{ position:relative; }
.ck-langsw__btn{ border:none; background:transparent; padding:10px 8px; color:var(--ink);
	display:flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; font-weight:600;
	font-family:inherit; line-height:1; }
.ck-langsw__globe{ width:16px; height:16px; flex:0 0 auto; opacity:.75; }
.ck-langsw__flag{ display:inline-flex; border:1px solid var(--line); width:24px; height:16px; overflow:hidden; flex:0 0 auto; }
.ck-langsw__flag svg{ width:100%; height:100%; display:block; }
.ck-langsw__code{ letter-spacing:.02em; }
.ck-langsw__caret{ width:9px; height:9px; transition:transform .15s; }
.ck-langsw.is-open .ck-langsw__caret{ transform:rotate(180deg); }

.ck-langsw__panel{ position:absolute; top:calc(100% + 8px); right:0; background:#fff;
	border:1px solid var(--line); min-width:240px; z-index:100;
	box-shadow:0 16px 32px rgba(0,0,0,.12); display:none; }
.ck-langsw.is-open .ck-langsw__panel{ display:block; }
.ck-langsw__head{ padding:14px 16px; border-bottom:1px solid var(--line); background:var(--bg-warm); }
.ck-langsw__head .eyebrow{ color:var(--red); margin-bottom:4px; }
.ck-langsw__head p{ margin:0; font-size:12px; color:var(--ink-soft); }
.ck-langsw__row{ width:100%; padding:12px 16px; border:none; text-align:left; background:transparent;
	display:flex; align-items:center; gap:14px; cursor:pointer; text-decoration:none;
	border-bottom:1px solid var(--line-soft); font-family:inherit; }
.ck-langsw__row:last-child{ border-bottom:none; }
.ck-langsw__row.is-active{ background:rgba(237,28,36,0.04); }
.ck-langsw__row-name{ font-size:13px; font-weight:600; color:var(--ink); }
.ck-langsw__row.is-active .ck-langsw__row-name{ color:var(--red); }
.ck-langsw__row-check{ color:var(--red); font-size:16px; margin-left:auto; }

/* Mobile menu variant: flat tappable row, no dropdown. */
.ck-langrow{ display:flex; gap:8px; flex-wrap:wrap; }
.ck-langrow__item{ display:flex; align-items:center; gap:8px; padding:8px 12px;
	border:1px solid var(--line); border-radius:999px; text-decoration:none;
	color:var(--ink); font-size:13px; font-weight:700; background:#fff; }
.ck-langrow__item.is-active{ border-color:var(--red); color:var(--red); background:rgba(237,28,36,0.05); }
.ck-langrow__item .ck-langsw__flag{ width:22px; height:15px; }

/* Language block in the mobile drawer — mirrors .ck-mmenu__currency
   (style.css:203-207) so the two sit as one stack, same 1100px breakpoint. */
.ck-mmenu__lang{ display:none; }
@media (max-width:1100px){
	.ck-mmenu__lang{ display:block; padding:14px 20px; border-bottom:1px solid var(--line); }
}
/* The header switcher is drawer-only below that width, like the currency one. */
@media (max-width:1100px){
	.ck-header__actions > .ck-langsw{ display:none; }
}


/* ---- suggestion toast ---- */
/* Bottom-LEFT on purpose: the right-hand corner already holds the phone
   button and the language switcher. position:fixed + injected after load,
   so it contributes nothing to CLS. */
.ck-langsuggest{ position:fixed; left:20px; bottom:20px; z-index:900; max-width:min(360px, calc(100vw - 40px));
	display:flex; align-items:flex-start; gap:12px; padding:14px 38px 14px 14px;
	background:#fff; border:1px solid var(--line,#e5e7eb); border-radius:14px;
	box-shadow:0 16px 40px rgba(0,0,0,.18); font-size:13.5px; line-height:1.45; color:var(--ink,#111827);
	opacity:0; transform:translateY(12px); transition:opacity .3s ease, transform .35s cubic-bezier(.34,1.3,.5,1); }
.ck-langsuggest.is-in{ opacity:1; transform:translateY(0); }
.ck-langsuggest__flag{ width:28px; height:28px; border-radius:50%; overflow:hidden; flex:0 0 auto;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); margin-top:1px; }
.ck-langsuggest__flag svg{ width:100%; height:100%; display:block; }
.ck-langsuggest__tx{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; }
.ck-langsuggest__title{ font-weight:600; }
.ck-langsuggest__cta{ font-weight:800; color:var(--red,#ED1C24); text-decoration:none; margin-top:4px; }
.ck-langsuggest__cta:hover{ text-decoration:underline; }
.ck-langsuggest__no{ border:none; background:none; padding:0; margin-top:2px; cursor:pointer;
	font-family:inherit; font-size:12px; color:var(--ink-muted,#9ca3af); text-decoration:underline; }
.ck-langsuggest__x{ position:absolute; top:8px; right:10px; border:none; background:none; cursor:pointer;
	font-size:20px; line-height:1; color:var(--ink-muted,#9ca3af); padding:2px 4px; }
.ck-langsuggest__x:hover{ color:var(--ink,#111827); }
@media (max-width:640px){
	.ck-langsuggest{ left:12px; right:12px; bottom:80px; max-width:none; }
}
@media (prefers-reduced-motion: reduce){
	.ck-langsuggest{ transition:opacity .15s ease; transform:none; }
}