/* MAGE Cookies – frontend */
#mage-ck-root { --mck-line-def: color-mix(in srgb, var(--mck-text) 14%, transparent); --mck-ease: cubic-bezier(.2, .9, .3, 1.15); }
#mage-ck-root *, #mage-ck-root *::before, #mage-ck-root *::after { box-sizing: border-box; }
#mage-ck-root [hidden] { display: none !important; }
html.mage-ck-lock { overflow: hidden; }

/* ---------- banner ---------- */
#mage-ck {
    position: fixed; z-index: 2147483000; bottom: 20px;
    padding: 22px 22px 18px;
    background: var(--mck-bg); color: var(--mck-text);
    border-radius: var(--mck-radius);
    box-shadow: 0 1px 0 var(--mck-line, var(--mck-line-def)) inset, 0 24px 60px -18px rgba(0, 0, 0, .45), 0 0 0 1px var(--mck-line, var(--mck-line-def));
    font-family: inherit; font-weight: 400; font-size: 15px; line-height: 1.55;
    opacity: 0; transform: translateY(28px);
    transition: opacity .3s ease, transform .5s var(--mck-ease);
}
#mage-ck.is-visible { opacity: 1; transform: none; }
#mage-ck.mage-ck--blur { background: color-mix(in srgb, var(--mck-bg) 88%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); }

.mage-ck--box { width: min(390px, calc(100vw - 32px)); }
.mage-ck--box.mage-ck--left  { left: 20px; }
.mage-ck--box.mage-ck--right { right: 20px; }
.mage-ck--box.mage-ck--center { left: 0; right: 0; margin: 0 auto; }

#mage-ck.mage-ck--bar {
    left: 16px; right: 16px; margin: 0 auto; max-width: 1180px;
    display: flex; align-items: center; gap: 20px; padding: 18px 22px;
}
.mage-ck--bar .mage-ck__icon { margin: 0; }
.mage-ck--bar .mage-ck__body { flex: 1; }
.mage-ck--bar .mage-ck__actions { margin: 0; flex-wrap: nowrap; }

#mage-ck.mage-ck--modal {
    inset: 0; margin: auto; height: fit-content; width: min(460px, calc(100vw - 32px));
    padding: 30px 28px 24px; text-align: center; transform: translateY(20px) scale(.96);
}
#mage-ck.mage-ck--modal.is-visible { transform: none; }
.mage-ck--modal .mage-ck__icon { margin: 0 auto 14px; }
.mage-ck--modal .mage-ck__actions { justify-content: center; }
.mage-ck-overlay { position: fixed; inset: 0; z-index: 2147482999; background: rgba(12, 10, 9, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
.mage-ck-overlay.is-visible { opacity: 1; }

/* ikona – jediný „wow“ moment */
.mage-ck__icon { width: var(--mck-icon); height: var(--mck-icon); flex: none; margin-bottom: 12px; color: var(--mck-accent); }
#mage-ck-root .mage-ck__icon img, #mage-ck-root .mage-ck__icon svg { width: 100%; height: 100%; object-fit: contain; display: block; max-width: none; }
.mage-ck--anim.is-visible .mage-ck__icon { animation: mck-roll .9s .15s var(--mck-ease) both; }
@keyframes mck-roll {
    0%   { transform: translateX(-40px) rotate(-200deg) scale(.6); opacity: 0; }
    60%  { transform: translateX(3px) rotate(12deg) scale(1.04); opacity: 1; }
    100% { transform: none; }
}

#mage-ck .mage-ck__title { margin: 0 0 6px; padding: 0; font-family: var(--mck-font-title, inherit); font-weight: 700; font-size: var(--mck-title-size, 18px); line-height: 1.2; letter-spacing: -.01em; color: inherit; text-transform: none; }
#mage-ck .mage-ck__eyebrow { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mck-accent); }
#mage-ck-root h2 em { font-style: italic; font-weight: inherit; color: var(--mck-accent); }
#mage-ck .mage-ck__text { margin: 0; font-size: 14.5px; color: color-mix(in srgb, var(--mck-text) 78%, transparent); }
#mage-ck-root a { color: var(--mck-accent); text-decoration: underline; text-underline-offset: 3px; }

.mage-ck__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.mage-ck--box .mage-ck__actions .mck-btn { flex: 1 1 auto; }
.mage-ck--box .mage-ck__actions .mck-btn--ghost, .mage-ck--modal .mage-ck__actions .mck-btn--ghost { flex-basis: 100%; order: 3; }

/* ---------- tlačidlá (ID špecificita, aby ich téma neprebila) ---------- */
#mage-ck-root .mck-btn {
    appearance: none; margin: 0; border: 0; cursor: pointer;
    min-height: 0; padding: 11px 18px; border-radius: calc(var(--mck-radius) * .55);
    font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.2; letter-spacing: 0; text-transform: none; white-space: nowrap;
    transition: transform .15s ease, background-color .2s, box-shadow .2s, opacity .2s;
}
#mage-ck-root .mck-btn:hover { transform: translateY(-1px); }
#mage-ck-root .mck-btn:active { transform: translateY(0); }
#mage-ck-root .mck-btn:focus-visible, #mage-ck-root .mck-close:focus-visible, #mage-ck-fab:focus-visible { outline: 2px solid var(--mck-accent); outline-offset: 2px; }
#mage-ck-root .mck-btn--primary { background: linear-gradient(135deg, var(--mck-accent), var(--mck-accent2, var(--mck-accent))); color: var(--mck-accent-text); box-shadow: 0 8px 18px -10px var(--mck-accent); }
#mage-ck-root .mck-btn--primary:hover { filter: brightness(1.08); }
#mage-ck-root .mck-btn--outline { background: transparent; color: var(--mck-text); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mck-text) 24%, transparent); }
#mage-ck-root .mck-btn--outline:hover { background: color-mix(in srgb, var(--mck-text) 6%, transparent); }
#mage-ck-root .mck-btn--ghost { background: transparent; color: var(--mck-text); padding: 6px 4px; opacity: .7; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
#mage-ck-root .mck-btn--ghost:hover { opacity: 1; transform: none; }

/* ---------- okno nastavení ---------- */
#mage-ck-modal { position: fixed; inset: 0; z-index: 2147483001; display: grid; place-items: center; padding: 16px; font-family: inherit; }
#mage-ck-modal .mck-backdrop { position: absolute; inset: 0; background: rgba(12, 10, 9, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s; }
#mage-ck-modal .mck-panel {
    position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px);
    display: flex; flex-direction: column; outline: none;
    background: var(--mck-bg); color: var(--mck-text); border-radius: var(--mck-radius);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55), 0 0 0 1px var(--mck-line, var(--mck-line-def));
    opacity: 0; transform: translateY(18px) scale(.97);
    transition: opacity .25s ease, transform .4s var(--mck-ease);
    font-size: 15px; line-height: 1.5;
}
#mage-ck-modal.is-open .mck-backdrop { opacity: 1; }
#mage-ck-modal.is-open .mck-panel { opacity: 1; transform: none; }

.mck-head { display: flex; align-items: center; gap: 12px; padding: 22px 22px 10px 24px; }
.mck-head__icon { width: 34px; height: 34px; flex: none; color: var(--mck-accent); }
#mage-ck-root .mck-head__icon img, #mage-ck-root .mck-head__icon svg { width: 100%; height: 100%; object-fit: contain; display: block; }
#mage-ck-modal .mck-head h2 { margin: 0; padding: 0; font-family: var(--mck-font-title, inherit); font-weight: 700; font-size: calc(var(--mck-title-size, 18px) * 1.06); line-height: 1.2; letter-spacing: -.01em; color: inherit; }
#mage-ck-root .mck-close {
    margin-left: auto; width: 36px; height: 36px; padding: 8px; flex: none; border: 0; border-radius: 50%;
    background: transparent; color: var(--mck-text); cursor: pointer; opacity: .6; transition: opacity .2s, background-color .2s;
}
#mage-ck-root .mck-close:hover { opacity: 1; background: color-mix(in srgb, var(--mck-text) 8%, transparent); }
#mage-ck-root .mck-close svg { width: 100%; height: 100%; display: block; }
#mage-ck-modal .mck-intro { margin: 0; padding: 0 24px 14px; font-size: 14px; color: color-mix(in srgb, var(--mck-text) 75%, transparent); }

.mck-list { overflow-y: auto; padding: 0 24px 6px; overscroll-behavior: contain; }
#mage-ck-modal .mck-cat {
    display: flex; align-items: center; gap: 16px; margin: 0; padding: 14px 0;
    border-top: 1px solid var(--mck-line, var(--mck-line-def)); cursor: pointer; font-weight: 400;
}
#mage-ck-modal div.mck-cat { cursor: default; }
.mck-cat__txt { flex: 1; min-width: 0; }
.mck-cat__t { display: block; font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.mck-cat__d { display: block; font-size: 13.5px; color: color-mix(in srgb, var(--mck-text) 70%, transparent); }
.mck-always { flex: none; font-size: 12.5px; font-weight: 600; color: var(--mck-accent); white-space: nowrap; }

.mck-switch { position: relative; flex: none; width: 46px; height: 26px; }
#mage-ck-root .mck-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mck-slider { position: absolute; inset: 0; border-radius: 99px; background: color-mix(in srgb, var(--mck-text) 22%, transparent); transition: background-color .2s; }
.mck-slider::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .25s var(--mck-ease);
}
.mck-switch input:checked + .mck-slider { background: var(--mck-accent); }
.mck-switch input:checked + .mck-slider::after { transform: translateX(20px); }
.mck-switch input:focus-visible + .mck-slider { outline: 2px solid var(--mck-accent); outline-offset: 2px; }

.mck-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 24px 22px; border-top: 1px solid var(--mck-line, var(--mck-line-def)); }

/* ---------- plávajúca ikona ---------- */
#mage-ck-fab {
    position: fixed; bottom: 18px; z-index: 2147482998;
    width: 50px; height: 50px; padding: 10px; margin: 0; border: 0; border-radius: 50%;
    background: var(--mck-bg); color: var(--mck-accent); cursor: pointer;
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .45), 0 0 0 1px var(--mck-line, var(--mck-line-def));
    transition: transform .3s var(--mck-ease);
}
#mage-ck-fab.mage-ck-fab--left { left: 18px; }
#mage-ck-fab.mage-ck-fab--right { right: 18px; }
#mage-ck-fab:hover { transform: rotate(-18deg) scale(1.08); }
#mage-ck-fab img, #mage-ck-fab svg { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- mobil ---------- */
@media (max-width: 640px) {
    #mage-ck.mage-ck--box, #mage-ck.mage-ck--bar { left: 10px; right: 10px; bottom: 10px; width: auto; margin: 0; }
    #mage-ck.mage-ck--bar { flex-direction: column; align-items: stretch; gap: 0; }
    .mage-ck--bar .mage-ck__icon { margin-bottom: 10px; }
    .mage-ck--bar .mage-ck__actions { margin-top: 16px; flex-wrap: wrap; }
    #mage-ck-root .mage-ck__actions .mck-btn { flex: 1 1 auto; }
    #mage-ck-modal { padding: 0; place-items: end center; }
    #mage-ck-modal .mck-panel { width: 100%; max-height: 90dvh; border-radius: var(--mck-radius) var(--mck-radius) 0 0; }
    .mck-foot { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
    #mage-ck-root .mck-foot .mck-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    #mage-ck-root *, #mage-ck, #mage-ck-modal .mck-panel { animation: none !important; transition: opacity .2s !important; transform: none !important; }
}