/* =====================================================================
   Gastro maskot - dekoracia v bocnych "ulickach" (gutter) vedla obsahu.
   Inspirovane lano-motuz.sk: na sirokom monitore stoji maskot v prazdnom
   priestore po stranach stredoveho stlpca => NEprekryva obsah.
   - kontajner ma pointer-events:none => nikdy neblokuje klik
   - na mobile/tablete skryty
   - respektuje prefers-reduced-motion
   ===================================================================== */

:root{
    /* sirka stredoveho obsahu Electro - jedine miesto na doladenie */
    --gk-container: 1320px;
    --gk-mascot-w: 160px;     /* ZAMYSLENY poza je vyssia => uzsia sirka aby vyska ~222px ako stara poza */
}

.gk-mascot{
    position: fixed;            /* plavajuci - drzi sa okna pri scrolle */
    bottom: 20px;               /* trochu nizsie */
    z-index: 60;                /* nad obsahom, pod modalmi/cookie bannerom (9999) */
}
/* pocas "Pridané" hlasky nad tmavym overlayom bocneho kosika - spolahlivo vpredu */
.gk-mascot.gk-front{
    z-index: 2147483000 !important;
}
/* po reakcii sa maskot strati (fade-out) */
.gk-mascot.gk-gone{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .45s ease, visibility .45s;
}
.gk-mascot{
    width: var(--gk-mascot-w);
    pointer-events: none;       /* wrapper neblokuje klik; klikatelne su len tlacidlo a bublina */
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.18));
}

/* maskot ako semanticke tlacidlo (klavesnica + a11y), hit-area = obrazok.
   all:unset zmaze tmave button styly z Electro temy (cierny zaobleny box). */
.gk-mascot__btn{
    all: unset;
    display: block !important;
    width: 100%;
    box-sizing: border-box;
    line-height: 0;             /* preč medzera pod img */
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    pointer-events: auto;
    transform-origin: bottom center;
    /* obcas sa sam JEMNE nakloni (nenapadne upozornenie) ~ kazdych 16s */
    animation: gk-attention 16s ease-in-out 10s infinite;
}
@keyframes gk-attention{
    0%, 90%, 100% { transform: rotate(0deg); }
    94%           { transform: rotate(-3deg); }
    97%           { transform: rotate(2deg); }
}
.gk-mascot__btn:focus-visible{
    outline: 3px solid #1f3a8f;
    outline-offset: 4px;
    border-radius: 12px;
}

.gk-mascot img{
    display: block;
    width: 100%;
    height: auto;
    animation: gk-mascot-bob 4.5s ease-in-out infinite;
}

/* klik = "poskocenie" maskota (jiggle), potom sa vrati k hojdaniu */
.gk-mascot.gk-clicked img{
    animation: gk-mascot-jiggle .55s ease;
}

/* uz videny v session => bez 5s oneskorenia, zobraz hned */
html.gk-mascot-instant .gk-mascot--right,
html.gk-mascot-instant .gk-mascot--left{
    animation-delay: 0s !important;
}

/* ---------------------------------------------------------------------
   Rozpravacia bublina nad maskotom
   --------------------------------------------------------------------- */
.gk-bubble{
    position: absolute;
    left: calc(100% - 8px);          /* Z BOKU - napravo od maskota, nech vidno oci */
    top: 0;                          /* zarovnane k hornej casti (uroven oci) */
    width: max-content;
    max-width: 230px;
    background: rgba(255,255,255,.94);   /* len velmi jemne priesvitne */
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);          /* obsah za bublinou rozostreny -> text citatelny */
    color: #1f2937;
    font: 600 13.5px/1.4 system-ui, Arial, sans-serif;
    padding: 11px 28px 11px 14px;
    border-radius: 14px;
    border: 2px solid #1f3a8f;       /* firemna modra */
    box-shadow: 0 10px 26px rgba(0,0,0,.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(8px) scale(.95);
    transform-origin: left top;
    transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1), visibility .35s;
    z-index: 2;
}
.gk-bubble.gk-bubble--show{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    cursor: pointer;
    transform: translateX(0) scale(1);
}
.gk-bubble__text{ margin: 0; }
/* velke emoji "napad" (kontextova kategoria) */
.gk-bubble__idea{
    display: block;
    font-size: 30px;
    line-height: 1;
    text-align: center;
    margin: 0 0 4px;
}
.gk-bubble strong{ color: #1f3a8f; }
/* zvyrazneny kod kuponu ako zeleny "chip" */
.gk-bubble__code{
    display: inline-block;
    background: #eaf5e3;
    color: #3f7e2c;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 6px;
    letter-spacing: .3px;
    white-space: nowrap;
    vertical-align: baseline;
}

/* tlacidlo kopirovania odkazu so zlavou */
/* CTA odkaz - aplikuje kupon a presmeruje do kosika; !important prebija theme <a>/button */
.gk-bubble__cta{
    display: block !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    background: #67ae4a !important;     /* zelena ako "Pridať do košíka" */
    color: #fff !important;
    font: 700 13.5px/1.25 system-ui, Arial, sans-serif !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    pointer-events: auto;
}
.gk-bubble__cta:hover,
.gk-bubble__cta:focus{ background: #599a40 !important; color: #fff !important; }
.gk-bubble__cta[hidden]{ display: none !important; }
.gk-bubble__x:focus-visible,
.gk-bubble__cta:focus-visible{ outline: 3px solid #1f3a8f; outline-offset: 2px; }
/* chvostik smerom DOLAVA k maskotovi (uroven oci) */
.gk-bubble::after{
    content: ""; position: absolute; right: 100%; top: 26px;
    border: 10px solid transparent; border-right-color: #1f3a8f;
}
.gk-bubble::before{
    content: ""; position: absolute; right: 100%; top: 28px;
    border: 8px solid transparent; border-right-color: rgba(255,255,255,.94);
    transform: translateX(3px); z-index: 1;
}
.gk-bubble__x{
    position: absolute; top: 3px; right: 5px;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    padding: 2px !important; margin: 0 !important;
    width: auto !important; min-width: 0 !important;
    border-radius: 0 !important;
    font-size: 16px; line-height: 1; color: #9aa3af; cursor: pointer;
}
.gk-bubble__x:hover{ color: #1f3a8f; }
@keyframes gk-mascot-jiggle{
    0%  { transform: scale(1)    rotate(0); }
    25% { transform: scale(1.09) rotate(-5deg); }
    50% { transform: scale(1.04) rotate(4deg); }
    75% { transform: scale(1.07) rotate(-2deg); }
    100%{ transform: scale(1)    rotate(0); }
}

/* ---------------------------------------------------------------------
   FALLBACK (uzsie monitory < 1600px): vykuka z okraja obrazovky
   --------------------------------------------------------------------- */
.gk-mascot--right{
    right: 0;
    transform: translateX(34%);
    animation: gk-mascot-in-right .8s cubic-bezier(.22,1,.36,1) 5s both;
}
.gk-mascot--left{
    left: 0;
    transform: translateX(-34%);
    animation: gk-mascot-in-left .8s cubic-bezier(.22,1,.36,1) 5s both;
}
@keyframes gk-mascot-in-right{
    from{ transform: translateX(100%); opacity: 0; }
    to  { transform: translateX(34%);  opacity: 1; }
}
@keyframes gk-mascot-in-left{
    from{ transform: translateX(-100%); opacity: 0; }
    to  { transform: translateX(-34%);  opacity: 1; }
}

/* ---------------------------------------------------------------------
   SIROKY MONITOR (>= 1600px): postav maskotov do bocnych uliciek
   vedla obsahu - centrovane v prazdnom priestore, bez prekryvu obsahu.
   gutter = (100vw - container) / 2 ; centrovanie = (gutter - W) / 2
   => odsadenie od okraja = (100vw - container)/4 - W/2
   --------------------------------------------------------------------- */
@media (min-width: 1600px){
    .gk-mascot--right,
    .gk-mascot--left{
        transform: none;
        animation: gk-mascot-fade .8s ease 5s both;
    }
    .gk-mascot--right{
        right: calc( (100vw - var(--gk-container)) / 4 - (var(--gk-mascot-w) / 2) );
        left: auto;
    }
    .gk-mascot--left{
        left: calc( (100vw - var(--gk-container)) / 4 - (var(--gk-mascot-w) / 2) );
        right: auto;
    }
    /* na velkej obrazovke mala medzera od maskota (chvostik takmer dosada) */
    .gk-bubble{ left: calc(100% + 14px); }
}
@keyframes gk-mascot-fade{
    from{ opacity: 0; transform: translateY(14px); }
    to  { opacity: 1; transform: translateY(0); }
}

/* jemne "hojdanie" - aby postavicka posobila ziva */
@keyframes gk-mascot-bob{
    0%,100%{ transform: translateY(0); }
    50%    { transform: translateY(-7px); }
}

/* mobil + tablet: skryt uplne */
@media (max-width: 991px){
    .gk-mascot{ display: none !important; }
}

/* pristupnost: kto ma vypnute animacie, nech ma maskota staticky */
@media (prefers-reduced-motion: reduce){
    .gk-mascot{ animation: none !important; }
    .gk-mascot img{ animation: none !important; }
    .gk-mascot__btn{ animation: none !important; }
    .gk-mascot--right{ transform: translateX(34%); }
    .gk-mascot--left { transform: translateX(-34%); }
    @media (min-width: 1600px){
        .gk-mascot--right, .gk-mascot--left{ transform: none; }
    }
}