/* MK Talen taalkiezer. Rustig en klein; werkt als dropdown in menu's en als zwevend knopje. */
.mkt-dd{--bg:#fff;--bg-hover:rgba(30,24,46,.05);--text:#1e182e;--text-hover:#1e182e;--border-color:rgba(30,24,46,.12);--border-width:1px;--radius:12px;--flag-radius:2px;--flag-size:16px;--font-size:15px;position:relative;display:inline-block;font-size:var(--font-size);line-height:1.2;color:var(--text)}

/* De knop: de knopstijl van het thema (bijv. de blauwe actieknop) mag er niet overheen komen. */
.mkt-dd .mkt-trigger.mkt-trigger{display:flex;align-items:center;gap:8px;width:auto;min-width:0;min-height:44px;margin:0;padding:0 14px;background:var(--bg)!important;color:var(--text)!important;border:var(--border-width) solid var(--border-color)!important;border-radius:var(--radius)!important;box-shadow:none!important;font:inherit;font-weight:500;letter-spacing:0;text-transform:none;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,opacity .2s,border-color .2s}
.mkt-dd .mkt-trigger.mkt-trigger:hover,.mkt-dd .mkt-trigger.mkt-trigger[aria-expanded=true]{background:var(--bg-hover)!important;color:var(--text-hover)!important}
.mkt-trigger:focus-visible,.mkt-item:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.mkt-item{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:inherit;white-space:nowrap}
.mkt-flag{width:calc(var(--flag-size)*4/3);height:var(--flag-size);object-fit:cover;border-radius:var(--flag-radius);display:block;flex:none}
.mkt-arrow{flex:none;width:14px;height:14px;margin-left:2px;opacity:.55;transition:transform .2s}
.mkt-trigger[aria-expanded=true] .mkt-arrow{transform:rotate(180deg)}

/* De lijst: opent naar beneden of naar boven, afhankelijk van de ruimte (zie switcher.js), en blijft binnen het scherm. */
.mkt-list{position:absolute;z-index:9999;top:calc(100% + 6px);left:0;min-width:100%;max-height:60vh;margin:0;padding:6px;list-style:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid rgba(30,24,46,.1);border-radius:var(--radius);box-shadow:0 10px 30px rgba(30,24,46,.14)}
.mkt-list[hidden]{display:none}
.mkt-list a.mkt-item{display:flex;min-height:44px;padding:0 12px;border-radius:8px;color:#1e182e;font-weight:500}
.mkt-list a.mkt-item:hover,.mkt-list a.mkt-item:focus-visible{background:rgba(30,24,46,.06);color:#1e182e}
.mkt-list .is-current a.mkt-item,.mkt-list a.mkt-item[aria-current]{background:rgba(30,24,46,.05)}
.mkt-up .mkt-list{top:auto;bottom:calc(100% + 6px)}
[dir=rtl] .mkt-list{left:auto;right:0}

/* In het uitklapmenu en in popups: de knop is een rustige rij, gecentreerd, de lijst klapt binnen het scherm uit. */
.elementor-popup-modal .mkt-dd{display:block;max-width:100%}
.elementor-popup-modal .mkt-dd .mkt-trigger.mkt-trigger{margin:0 auto;padding:0 18px;background:transparent!important;border-color:rgba(30,24,46,.14)!important}
.elementor-popup-modal .mkt-dd .mkt-list{left:50%;right:auto;min-width:220px;transform:translateX(-50%)}
.elementor-popup-modal .mkt-dd .mkt-trigger.mkt-trigger:hover,.elementor-popup-modal .mkt-dd .mkt-trigger.mkt-trigger[aria-expanded=true]{background:rgba(30,24,46,.05)!important}

/* Zwevend knopje (desktop): klein, alleen de vlag, bijna onzichtbaar tot je erop wijst. */
.mkt-floater{position:fixed;bottom:16px;z-index:9998;opacity:.78;transition:opacity .2s}
.mkt-floater:hover,.mkt-floater:focus-within{opacity:1}
.mkt-floater.mkt-pos-bottom-left{left:16px}
.mkt-floater.mkt-pos-bottom-right{right:16px}
.mkt-floater .mkt-dd .mkt-trigger.mkt-trigger{min-height:36px;width:36px;height:36px;justify-content:center;gap:0;padding:0;border-radius:999px!important;background:rgba(255,255,255,.92)!important;border:1px solid rgba(20,56,82,.14)!important;box-shadow:0 2px 10px rgba(20,56,82,.12)!important}
.mkt-floater .mkt-dd .mkt-trigger.mkt-trigger:hover{background:#fff!important}
.mkt-floater .mkt-arrow{display:none}
.mkt-floater .mkt-flag{--flag-size:15px}
.mkt-floater .mkt-list{min-width:170px;left:0}
.mkt-floater.mkt-pos-bottom-right .mkt-list{left:auto;right:0}

@media (pointer:coarse){.mkt-list a.mkt-item{min-height:48px}}
@media (prefers-reduced-motion:reduce){.mkt-trigger,.mkt-arrow,.mkt-floater{transition:none}}
