#custom-top-bar {
    width: 100vw; z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 10px 40px 10px 10px;
    font-size: 18px;
    background: var(--bg, inherit);
    /* --- BALRÓL BEÚSZÓ ANIMÁCIÓ --- */
    opacity: 0;
    transform: translateX(-120vw);
}
#custom-top-bar.custom-bar-animate {
    animation: bar-slide-in 0.7s cubic-bezier(0.33,1,0.68,1) forwards;
}
@keyframes bar-slide-in {
    0% { opacity: 0; transform: translateX(-120vw);}
    70% { opacity: 1; transform: translateX(15px);}
    100% { opacity: 1; transform: translateX(0);}
}
#custom-top-bar .custom-top-bar-ok:hover {
    box-shadow: 0 0 12px 2px #fff6cc, 0 0 4px 2px #ffe8a3;
}
#custom-top-bar[data-bg="transparent"] {
    background: transparent !important;
}
#custom-top-bar[data-overlay="1"] {
    position: fixed; left: 0;
    background-clip: padding-box;
    box-shadow: none !important;
    border-bottom: none !important;
}
#custom-top-bar[data-overlay="0"] {
    position: relative;
    box-shadow: none !important;
    border-bottom: none !important;
}
#custom-top-bar .custom-top-bar-x {
    position: absolute; right: 16px; top: 7px;
    font-size: 22px; color: #fff; cursor: pointer;
    font-weight: bold; padding: 3px 7px;
    background: none !important;
    border-radius: 50%;
    transition: background .2s;
}
#custom-top-bar .custom-top-bar-x:hover {
    background: none !important;
    color: #ff3131 !important;
}
#custom-top-bar .custom-top-bar-ok {
    margin: 0 16px;
    padding: 6px 18px;
    border: none;
    border-radius: 4px;
    background: var(--okcolor, #f39c12);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: box-shadow .2s, background .2s;
    font-family: inherit;
    text-transform: none !important;
}
#custom-top-bar[data-anim="pulse"] .custom-top-bar-ok { animation: topbar-pulse-3s1s 4s linear infinite;}
@keyframes topbar-pulse-3s1s {
    0% { box-shadow: 0 0 0 0 #f39c12aa;}
    65% { box-shadow: 0 0 0 8px transparent;}
    75%,100% { box-shadow: 0 0 0 0 transparent;}
}
#custom-top-bar[data-anim="shake"] .custom-top-bar-ok { animation: topbar-shake-3s1s 4s linear infinite;}
@keyframes topbar-shake-3s1s {
    0%,74%,100% { transform: translateX(0);}
    7%,12% { transform: translateX(-10px);}
    14%,19% { transform: translateX(10px);}
    21%,26% { transform: translateX(-7px);}
    28%,33% { transform: translateX(7px);}
    35%,74% { transform: translateX(0);}
}
#custom-top-bar[data-anim="blink"] .custom-top-bar-ok { animation: topbar-blink-3s1s 4s linear infinite;}
@keyframes topbar-blink-3s1s {
    0%, 64%, 100% { opacity: 1;}
    40% { opacity: 0.2;}
    74% { opacity: 1;}
}
#custom-top-bar[data-anim="bounce"] .custom-top-bar-ok { animation: topbar-bounce-3s1s 4s linear infinite;}
@keyframes topbar-bounce-3s1s {
    0%,100%{transform:translateY(0);}
    10%{transform:translateY(-16px);}
    20%{transform:translateY(-7px);}
    30%,74%{transform:translateY(0);}
}
#custom-top-bar[data-anim="flip"] .custom-top-bar-ok { animation: topbar-flip-3s1s 4s linear infinite;}
@keyframes topbar-flip-3s1s {
    0%{transform:rotateY(0);}
    35%{transform:rotateY(180deg);}
    65%,100%{transform:rotateY(0);}
}
#custom-top-bar[data-anim="wiggle"] .custom-top-bar-ok { animation: topbar-wiggle-3s1s 4s linear infinite;}
@keyframes topbar-wiggle-3s1s {
    0%,100%{transform:rotate(0);}
    18%{transform:rotate(10deg);}
    36%{transform:rotate(-10deg);}
    54%,74%{transform:rotate(0);}
}
#custom-top-bar[data-anim="vibrate"] .custom-top-bar-ok { animation: topbar-vibrate-3s1s 4s linear infinite;}
@keyframes topbar-vibrate-3s1s {
    0%,100%{transform:translateX(0);}
    8%{transform:translateX(6px);}
    16%{transform:translateX(-6px);}
    24%{transform:translateX(6px);}
    32%{transform:translateX(-6px);}
    40%,74%{transform:translateX(0);}
}
#custom-top-bar[data-anim="rotate"] .custom-top-bar-ok { animation: topbar-rotate-3s1s 4s linear infinite;}
@keyframes topbar-rotate-3s1s {
    0%{transform:rotate(0);}
    75%{transform:rotate(360deg);}
    100%{transform:rotate(0);}
}
/* ---- ÚJ! ZOOM/NAGYÍTÁS animáció ---- */
#custom-top-bar[data-anim="zoom"] .custom-top-bar-ok { animation: topbar-zoom-3s1s 4s linear infinite;}
@keyframes topbar-zoom-3s1s {
    0%,100%{transform:scale(1);}
    25%{transform:scale(1.12);}
    50%{transform:scale(0.92);}
    75%{transform:scale(1.07);}
}

@media (max-width: 700px) {
    #custom-top-bar { font-size: 16px; padding: 10px 10px 10px 10px;}
}