/*
 * WIDGET OFF CANVAS (Vojto 2. 11. 2026, podľa Elementor Off-Canvas)
 * =============================================================================
 * Vysúvací panel (stranky/widget-web-off_canvas, js/ve-off_canvas.js). Koreň .ve-oc
 * je pevne cez celé okno (skript ho presunie do <body>), v ňom prekrytie a panel.
 * Poloha .ve-oc--vlavo / vpravo / hore / dole / stred, animácia .ve-oc--anim-*,
 * otvorený stav .ve-oc--otvorene. Hodnoty z Lišty sú premenné --ve-oc-* v style.
 * .ve-oc--nahlad = náhľad otvoreného panela v ploche editora (v obdĺžniku, nie v okne).
 */

/* Widget v obsahu webu nič nezaberá - ani jeho obal (medzera stĺpca, okraje Štýlu). Panel
   skript presunie do <body>; v obsahu ostane len prázdne miesto [data-ve-oc-miesto].
   (:has nemôže byť vnorený v :has - preto dve pravidlá.) */
.ve-obsah--off_canvas:has(> [data-ve-oc-miesto]),
.ve-w-dizajn:has(> .ve-obsah--off_canvas > [data-ve-oc-miesto]) {
    display: none !important;
}

.ve-oc[hidden] {
    display: none !important;
}

.ve-oc {
    position: fixed;
    inset: 0;
    z-index: 100000;
    pointer-events: none;
    --ve-oc-sirka: 400px;
    --ve-oc-mimo: 0px;
}

.ve-oc-prekrytie {
    position: absolute;
    inset: 0;
    background: var(--ve-oc-prekrytie, rgba(0, 0, 0, .5));
    -webkit-backdrop-filter: blur(var(--ve-oc-rozmazanie, 0px));
    backdrop-filter: blur(var(--ve-oc-rozmazanie, 0px));
    opacity: 0;
    transition: opacity var(--ve-oc-trvanie, 300ms) ease;
    pointer-events: auto;
}

.ve-oc-panel {
    position: absolute;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--ve-oc-pozadie, #fff);
    border-radius: var(--ve-oc-zaoblenie, 0px);
    box-shadow: var(--ve-oc-tien, none);
    pointer-events: auto;
    outline: none;
    opacity: 0;
    transition: transform var(--ve-oc-trvanie, 300ms) ease, opacity var(--ve-oc-trvanie, 300ms) ease;
}

.ve-oc-svitok {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    padding: var(--ve-oc-odsadenie, 20px);
    border-radius: inherit;
}

/* --- Poloha a rozmery ---------------------------------------------------- */
.ve-oc--vlavo .ve-oc-panel,
.ve-oc--vpravo .ve-oc-panel {
    top: 0;
    bottom: 0;
    width: var(--ve-oc-sirka);
    max-width: 100%;
}
.ve-oc--vlavo .ve-oc-panel { left: 0; }
.ve-oc--vpravo .ve-oc-panel { right: 0; }

.ve-oc--hore .ve-oc-panel,
.ve-oc--dole .ve-oc-panel {
    left: 0;
    right: 0;
    height: var(--ve-oc-vyska, auto);
    max-height: 100%;
}
.ve-oc--hore .ve-oc-panel { top: 0; }
.ve-oc--dole .ve-oc-panel { bottom: 0; }

.ve-oc--stred .ve-oc-panel {
    top: 50%;
    left: 50%;
    width: var(--ve-oc-sirka);
    max-width: calc(100% - 32px);
    height: var(--ve-oc-vyska, auto);
    max-height: calc(100% - 32px);
}

/* --- Animácia: zatvorený stav podľa polohy, otvorený bez posunu ------------ */
.ve-oc--anim-vysunutie.ve-oc--vlavo .ve-oc-panel { transform: translateX(-100%); }
.ve-oc--anim-vysunutie.ve-oc--vpravo .ve-oc-panel { transform: translateX(100%); }
.ve-oc--anim-vysunutie.ve-oc--hore .ve-oc-panel { transform: translateY(-100%); }
.ve-oc--anim-vysunutie.ve-oc--dole .ve-oc-panel { transform: translateY(100%); }
.ve-oc--anim-vysunutie:is(.ve-oc--vlavo, .ve-oc--vpravo, .ve-oc--hore, .ve-oc--dole) .ve-oc-panel { opacity: 1; }
.ve-oc--anim-vysunutie.ve-oc--stred .ve-oc-panel { transform: translate(-50%, calc(-50% + 60px)); }
.ve-oc--anim-prelinanie .ve-oc-panel { transform: none; }
.ve-oc--anim-prelinanie.ve-oc--stred .ve-oc-panel { transform: translate(-50%, -50%); }
.ve-oc--anim-zvacsenie .ve-oc-panel { transform: scale(.85); }
.ve-oc--anim-zvacsenie.ve-oc--stred .ve-oc-panel { transform: translate(-50%, -50%) scale(.85); }

.ve-oc.ve-oc--otvorene .ve-oc-prekrytie { opacity: 1; }
.ve-oc.ve-oc--otvorene .ve-oc-panel { transform: none; opacity: 1; }
.ve-oc.ve-oc--otvorene.ve-oc--stred .ve-oc-panel { transform: translate(-50%, -50%); }
/* Vysunutý panel pri zatváraní ostáva viditeľný, kým nevyjde z okna. */
.ve-oc--anim-vysunutie:not(.ve-oc--stred) .ve-oc-panel { transition: transform var(--ve-oc-trvanie, 300ms) ease; }

@media (prefers-reduced-motion: reduce) {
    .ve-oc-panel,
    .ve-oc-prekrytie { transition: none !important; }
}

/* --- Tlačidlo Zavrieť (X) ------------------------------------------------- */
.ve-oc-x {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ve-oc-x-velkost, 24px) + 12px);
    height: calc(var(--ve-oc-x-velkost, 24px) + 12px);
    padding: 6px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ve-oc-x-farba, #000);
    cursor: pointer;
    line-height: 0;
    box-sizing: border-box;
}
.ve-oc-x svg { width: 100%; height: 100%; display: block; }
.ve-oc-x:hover { background: rgba(127, 127, 127, .15); }
.ve-oc-x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ve-oc--x-vlavo .ve-oc-x { right: auto; left: 10px; }
/* X vnútri panela neprekryje obsah - odsadenie na jeho strane aspoň po X. */
.ve-oc--s-x.ve-oc--x-vpravo .ve-oc-svitok { padding-right: max(var(--ve-oc-odsadenie, 20px), calc(var(--ve-oc-x-velkost, 24px) + 26px)); }
.ve-oc--s-x.ve-oc--x-vlavo .ve-oc-svitok { padding-left: max(var(--ve-oc-odsadenie, 20px), calc(var(--ve-oc-x-velkost, 24px) + 26px)); }
/* Vonku: pri okraji panela na strane stránky. */
.ve-oc--x-vonku.ve-oc--vlavo .ve-oc-x { right: auto; left: calc(100% + 10px); }
.ve-oc--x-vonku.ve-oc--vpravo .ve-oc-x { right: calc(100% + 10px); }
.ve-oc--x-vonku.ve-oc--hore .ve-oc-x { top: calc(100% + 10px); }
.ve-oc--x-vonku.ve-oc--dole .ve-oc-x { top: auto; bottom: calc(100% + 10px); }
.ve-oc--x-vonku.ve-oc--stred .ve-oc-x { top: auto; right: 0; bottom: calc(100% + 6px); }

/* Mobil: panel vľavo / vpravo širší ako okno má celú šírku, okno v strede menší okraj. */
@media (max-width: 767px) {
    .ve-oc--stred .ve-oc-panel { max-width: calc(100% - 20px); max-height: calc(100% - 20px); }
    .ve-oc--x-vonku.ve-oc--vlavo .ve-oc-x,
    .ve-oc--x-vonku.ve-oc--vpravo .ve-oc-x { left: auto; right: 10px; }
}

/* Zamknutý posun stránky počas otvoreného panela. */
html.ve-oc-zamknute,
html.ve-oc-zamknute body {
    overflow: hidden !important;
}

/* --- Editor: zástupný box a náhľad otvoreného panela ---------------------- */
.ve-off-canvas--editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.ve-oc-zastupca {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px dashed #B5B5B5;
    border-radius: 8px;
    background: #F4F4F6;
    color: #333;
    font: 500 13px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif;
    box-sizing: border-box;
}
.ve-oc-zastupca-ikona { width: 22px; height: 22px; flex: 0 0 22px; color: #555; }
.ve-oc-zastupca-ikona svg { width: 100%; height: 100%; display: block; }
.ve-oc-zastupca b { font-weight: 700; }

.ve-oc--nahlad {
    position: relative;
    inset: auto;
    z-index: 0;
    height: 420px;
    overflow: hidden;
    border-radius: 8px;
    pointer-events: none;
    /* Stránka pod panelom - aby bolo vidno prekrytie a rozmazanie. */
    background:
        repeating-linear-gradient(0deg, transparent 0 34px, #E6E6EA 34px 46px),
        #F8F8FA;
}
.ve-oc--nahlad .ve-oc-prekrytie,
.ve-oc--nahlad .ve-oc-panel { transition: none; }