/* Modal shell */
.ml-lc-modal{position:fixed;inset:0;display:none;z-index:99999}
.ml-lc-modal[aria-hidden="false"]{display:block}
.ml-lc-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.ml-lc-dialog{position:relative;max-width:640px;margin:6vh auto;background:#fff;border-radius:16px;padding:24px}
.ml-lc-title{margin:0 0 16px;font-size:26px;line-height:1.2}
.ml-lc-help{margin:14px 0 8px;color:#4d4d4d;font-size:14px}
.ml-lc-row{display:flex;flex-wrap:wrap;gap:12px}
.ml-lc-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}
.ml-lc-close{position:absolute;right:12px;top:10px;font-size:22px;background:none;border:0;cursor:pointer}
@media (max-width:640px){.ml-lc-dialog{margin:2vh 14px}.ml-lc-row{gap:10px}}

/* Pills (no dot, focus/active state) */
.ml-lc-pill{
    appearance:none;background:#fff;border:1px solid #ddd;border-radius:12px;
    padding:12px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;
    font-size:14px;line-height:1.2;position:relative;outline:0
}
.ml-lc-pill:hover{border-color:#c7a76a}
.ml-lc-pill.is-active{background:#c7a76a;color:white;border-color:#c7a76a;box-shadow:0 0 0 2px rgba(199,167,106,.25)}
.ml-lc-pill:focus-visible{border-color:#c7a76a;box-shadow:0 0 0 3px rgba(199,167,106,.35)}
.ml-flag{font-size:18px;line-height:1}

/* Buttons */
.ml-lc-cancel{background:#eee;border:1px solid #ddd;border-radius:10px;padding:10px 18px;cursor:pointer}
.ml-lc-save{background:#c7a76a;color:#fff;border:1px solid #b59354;border-radius:10px;padding:10px 18px;cursor:pointer}
/* Safer for GTranslate: keep it rendered, just move it off screen */
/* Keep it rendered and "visible" to scripts, but invisible to users */
/* Safer for GTranslate: keep it rendered, just move it off screen */
/* Keep the widget on-screen so scripts initialize.
   Do NOT use display:none, visibility:hidden, clip, clip-path, overflow:hidden, or transforms. */
/* Layout & spacing to mimic your pill row */
/* Make GTranslate flag links look/feel like your pills */
.ml-lc-flags .gtranslate_wrapper{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}

/* Base pill look for each flag link */
.ml-lc-flags a.glink{
    display:flex; align-items:center; gap:10px;
    background:#fff; border:1px solid #ddd; border-radius:12px;
    padding:12px 14px; cursor:pointer; text-decoration:none; outline:0;
    font-size:14px; line-height:1.2; color:inherit;
}
.ml-lc-flags a.glink:hover{ border-color:#c7a76a; }
.ml-lc-flags a.glink:focus-visible{ border-color:#c7a76a; box-shadow:0 0 0 3px rgba(199,167,106,.35); }

/* Active language (plugin toggles .gt-current-lang) */
.ml-lc-flags a.glink.gt-current-lang{
    background:#c7a76a; color:#fff; border-color:#c7a76a;
    box-shadow:0 0 0 2px rgba(199,167,106,.25);
}

/* Flag icon size */
.ml-lc-flags a.glink img{
    width:18px; height:18px; border-radius:50%;
}

/* Add a text label next to the flag via CSS (no JS needed) */
.ml-lc-flags a.glink::after{
    display:inline-block; content:""; /* default empty, filled by rules below */
    font-size:14px; line-height:1.2;
}

/* Map language → label (extend as needed) */
.ml-lc-flags a.glink[data-gt-lang="pl"]::after{ content:"Polski"; }
.ml-lc-flags a.glink[data-gt-lang="en"]::after{ content:"English"; }

/* Slight left spacing for the label */
.ml-lc-flags a.glink::after{ margin-left:6px; }

/* Keep Google’s native select present but hidden safely (not display:none) */
#ml-lc-lang-flags #google_translate_element2{
    position:fixed; left:0; top:0; width:1px; height:1px;
    opacity:0; pointer-events:none;
}