/* Language switcher of the website (mod_newtasticswitcher): layouts side by side, below each other, button bar,
   dropdown and floating button; looks plain, pills, outline and underline; size, corners, alignment and own colours
   through custom properties. The default (side by side, plain) looks like the template's links. */
.nt-switcher { --nt-sw-accent: var(--bs-link-color, #2a69b8); --nt-sw-bg: #fff; --nt-sw-line: rgba(0, 0, 0, .15); --nt-sw-radius: .5rem;
  --nt-sw-pad-y: .3rem; --nt-sw-pad-x: .7rem; --nt-sw-font: 1em; font-size: var(--nt-sw-font); }
/* Text only for screen readers (label, language names next to a flag) also where the template has no Bootstrap,
   e.g. YOOtheme with UIkit (05.10.2026). */
.nt-switcher .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.nt-switcher-size-small { --nt-sw-font: .875em; --nt-sw-pad-y: .2rem; --nt-sw-pad-x: .5rem; }
.nt-switcher-size-large { --nt-sw-font: 1.125em; --nt-sw-pad-y: .45rem; --nt-sw-pad-x: .9rem; }
.nt-switcher-radius-none { --nt-sw-radius: 0; }
.nt-switcher-radius-small { --nt-sw-radius: .25rem; }
.nt-switcher-radius-round { --nt-sw-radius: 999px; }
.nt-switcher-list { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin: 0; padding: 0; list-style: none; }
.nt-switcher-block .nt-switcher-list { flex-direction: column; align-items: flex-start; }
.nt-switcher-align-center { text-align: center; }
.nt-switcher-align-center .nt-switcher-list { justify-content: center; }
.nt-switcher-align-end { text-align: end; }
.nt-switcher-align-end .nt-switcher-list { justify-content: flex-end; }
.nt-switcher-block.nt-switcher-align-center .nt-switcher-list { align-items: center; }
.nt-switcher-block.nt-switcher-align-end .nt-switcher-list { align-items: flex-end; }
.nt-switcher-link { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.nt-switcher-active .nt-switcher-link, .nt-switcher-link[aria-current="true"] { font-weight: 600; }
.nt-switcher-has-text .nt-switcher-link, .nt-switcher-has-text .nt-switcher-toggle { color: var(--nt-sw-text); }
.nt-switcher-has-accent .nt-switcher-link[aria-current="true"] { color: var(--nt-sw-accent); }
.nt-switcher-flag { object-fit: contain; flex: none; }
.nt-switcher-code { font-size: .85em; font-weight: 600; letter-spacing: .02em; opacity: .8; }
.nt-switcher-icon { flex: none; }
.nt-switcher-toggle { display: inline-flex; align-items: center; gap: .4rem; border-radius: var(--nt-sw-radius); }
.nt-switcher-has-bg .nt-switcher-toggle { background: var(--nt-sw-bg); border-color: var(--nt-sw-line); }
.nt-switcher .dropdown-item { display: flex; align-items: center; gap: .5rem; }

/* Looks of the entries (side by side, below each other, floating panel). */
.nt-switcher-style-pills .nt-switcher-link, .nt-switcher-style-outline .nt-switcher-link, .nt-switcher-style-underline .nt-switcher-link {
  padding: var(--nt-sw-pad-y) var(--nt-sw-pad-x); transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.nt-switcher-style-pills .nt-switcher-link { border-radius: var(--nt-sw-radius); background: rgba(0, 0, 0, .05); }
.nt-switcher-has-bg.nt-switcher-style-pills .nt-switcher-link { background: var(--nt-sw-bg); }
.nt-switcher-style-pills .nt-switcher-link:hover { background: rgba(0, 0, 0, .1); }
.nt-switcher-style-pills .nt-switcher-link[aria-current="true"] { background: var(--nt-sw-accent); color: #fff; }
.nt-switcher-style-outline .nt-switcher-link { border: 1px solid var(--nt-sw-line); border-radius: var(--nt-sw-radius); }
.nt-switcher-has-bg.nt-switcher-style-outline .nt-switcher-link { background: var(--nt-sw-bg); }
.nt-switcher-style-outline .nt-switcher-link:hover, .nt-switcher-style-outline .nt-switcher-link[aria-current="true"] { border-color: var(--nt-sw-accent); color: var(--nt-sw-accent); }
.nt-switcher-style-underline .nt-switcher-link { padding-left: .1rem; padding-right: .1rem; border-bottom: 2px solid transparent; }
.nt-switcher-style-underline .nt-switcher-link:hover { border-bottom-color: var(--nt-sw-line); }
.nt-switcher-style-underline .nt-switcher-link[aria-current="true"] { border-bottom-color: var(--nt-sw-accent); }

/* Button bar: the languages as one group of buttons. */
.nt-switcher-buttons .nt-switcher-list { display: inline-flex; flex-wrap: nowrap; gap: 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--nt-sw-line); border-radius: var(--nt-sw-radius); }
.nt-switcher-has-bg.nt-switcher-buttons .nt-switcher-list { background: var(--nt-sw-bg); }
.nt-switcher-buttons .nt-switcher-item + .nt-switcher-item { border-left: 1px solid var(--nt-sw-line); }
.nt-switcher-buttons .nt-switcher-link { padding: var(--nt-sw-pad-y) var(--nt-sw-pad-x); border: 0; border-radius: 0; background: none; height: 100%; white-space: nowrap; }
.nt-switcher-buttons .nt-switcher-link:hover { background: rgba(0, 0, 0, .06); }
.nt-switcher-buttons .nt-switcher-link[aria-current="true"] { background: var(--nt-sw-accent); color: #fff; }

/* Floating button in a corner of the page; the panel opens towards the page. */
.nt-switcher-floating { position: fixed; z-index: 1030; }
.nt-switcher-corner-bottom-end { right: 1rem; bottom: 1rem; }
.nt-switcher-corner-bottom-start { left: 1rem; bottom: 1rem; }
.nt-switcher-corner-top-end { right: 1rem; top: 1rem; }
.nt-switcher-corner-top-start { left: 1rem; top: 1rem; }
/* Templates style details and summary themselves (e.g. Joomla's Atum): the switcher keeps its own look. */
.nt-switcher-float { position: relative; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.nt-switcher-float > summary { display: grid; place-items: center; min-width: 3rem; height: 3rem; margin: 0; padding: 0 .75rem; border: 0; list-style: none; cursor: pointer; border-radius: 999px;
  background: var(--nt-sw-bg); color: var(--nt-sw-text, inherit); box-shadow: 0 6px 20px rgba(15, 23, 42, .2); }
.nt-switcher-radius-none .nt-switcher-float > summary, .nt-switcher-radius-small .nt-switcher-float > summary { border-radius: var(--nt-sw-radius); }
.nt-switcher-float > summary::-webkit-details-marker { display: none; }
.nt-switcher-float > summary:focus-visible { outline: 3px solid var(--nt-sw-accent); outline-offset: 2px; }
.nt-switcher-float > summary > * { display: inline-flex; }
.nt-switcher-float .nt-switcher-list { position: absolute; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .15rem; min-width: 12rem; padding: .4rem;
  background: var(--nt-sw-bg); border-radius: .75rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .22); }
.nt-switcher-float .nt-switcher-link { width: 100%; padding: var(--nt-sw-pad-y) var(--nt-sw-pad-x); border-radius: calc(var(--nt-sw-radius) * .75); }
.nt-switcher-float .nt-switcher-link:hover { background: rgba(0, 0, 0, .06); }
.nt-switcher-corner-bottom-end .nt-switcher-list { right: 0; bottom: calc(100% + .5rem); }
.nt-switcher-corner-bottom-start .nt-switcher-list { left: 0; bottom: calc(100% + .5rem); }
.nt-switcher-corner-top-end .nt-switcher-list { right: 0; top: calc(100% + .5rem); }
.nt-switcher-corner-top-start .nt-switcher-list { left: 0; top: calc(100% + .5rem); }

/* Flags only on small screens (the name stays the link's accessible label). */
@media (max-width: 575.98px) {
  .nt-switcher-mobile-flags .nt-switcher-name, .nt-switcher-mobile-flags .nt-switcher-code { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nt-switcher-link { transition: none; }
}

/* Preview in newtastic Languages' "Appearance": a small stand-in for the page; a floating button sits in its corner. */
.nt-switcher-stage { position: relative; min-height: 7rem; padding: 1.25rem; border: 1px dashed rgba(0, 0, 0, .2); border-radius: .5rem; background: #fff; }
.nt-switcher-stage:has(.nt-switcher-floating) { min-height: 17rem; }
.nt-switcher-stage .nt-switcher-floating { position: absolute; }
/* Flags only: no text to make bold, so the other languages' flags step back and the active one keeps a ring
   (05.10.2026). Pointing at a flag brings it forward. */
.nt-switcher-flags-only .nt-switcher-flag { opacity: .4; filter: grayscale(.7); transition: opacity .15s, filter .15s, box-shadow .15s; }
.nt-switcher-flags-only .nt-switcher-link:hover .nt-switcher-flag, .nt-switcher-flags-only .nt-switcher-link:focus-visible .nt-switcher-flag { opacity: 1; filter: none; }
.nt-switcher-flags-only .nt-switcher-link[aria-current="true"] .nt-switcher-flag { opacity: 1; filter: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--nt-sw-accent); border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .nt-switcher-flags-only .nt-switcher-flag { transition: none; } }