/* ==========================================================================
   AUME – 8) Bublina "Přidáno do košíku"                             [v1]
   Vzhled a animace bubliny, kterou vkládá 08-pridano-do-kosiku.js.
   Doba trvání tady musí sedět s CFG.vydrz v JS.
   ========================================================================== */

:root {
    --aume-add-bg: #FFFFFF;
    --aume-add-text: #222222;        /* barva textu webu */
    --aume-add-muted: #6B6B6B;
    --aume-add-accent: #CFB388;      /* champagne akcent webu */
    --aume-add-border: #E8E1D6;
}

.aume-add {
    position: fixed;
    /* Nad sticky lištou košíku (z-index 900), ale pod bublinou chatu
       (Smartsupp má 10000000), ať se nepřekrývá s obsluhou. */
    z-index: 9500;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--aume-add-border);
    background: var(--aume-add-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);

    font-family: "Red Hat Display", sans-serif;
    line-height: 1.2;
    white-space: nowrap;

    /* Bublina je jen oznámení – nesmí překážet v klikání na to, co je pod ní */
    pointer-events: none;

    /* Výchozí (skrytý) stav. Třídu .je-videt přidá JS hned po vložení,
       aby animace naskočila. */
    opacity: 0;
    transform: translateY(6px) scale(.92);
    transition: opacity .18s ease, transform .18s cubic-bezier(.2, .9, .3, 1.2);
}

.aume-add.je-videt {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Pomalejší odchod než příchod – zmizení má být nenápadné */
.aume-add.mizi {
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    transition: opacity .55s ease, transform .55s ease;
}

/* --- Ikona košíku -------------------------------------------------------- */
.aume-add__ikona {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--aume-add-accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Kolečka koleček košíku jsou plná, ne obrysová */
.aume-add__ikona path:first-child {
    fill: var(--aume-add-accent);
    stroke: none;
}

/* Jemné cuknutí košíku při naskočení */
.aume-add.je-videt .aume-add__ikona {
    animation: aume-add-cuk .45s ease;
}

@keyframes aume-add-cuk {
    0%   { transform: translateX(-4px) rotate(-8deg); }
    60%  { transform: translateX(1px) rotate(3deg); }
    100% { transform: translateX(0) rotate(0); }
}

/* --- Text ---------------------------------------------------------------- */
.aume-add__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aume-add__nadpis {
    font-size: 14px;
    font-weight: 700;
    color: var(--aume-add-text);
}

.aume-add__pocet {
    font-size: 12px;
    color: var(--aume-add-muted);
}

/* --- Mobil --------------------------------------------------------------- */
@media (max-width: 767px) {
    .aume-add {
        padding: 9px 12px;
        gap: 8px;
    }

    .aume-add__nadpis { font-size: 13px; }
    .aume-add__pocet  { font-size: 11px; }
    .aume-add__ikona  { width: 20px; height: 20px; }
}

/* --- Omezený pohyb ------------------------------------------------------- */
/* Bublina se pořád objeví a zmizí, jen bez posunu, zvětšení a cuknutí. */
@media (prefers-reduced-motion: reduce) {
    .aume-add,
    .aume-add.mizi {
        transform: none;
        transition: opacity .2s ease;
    }

    .aume-add.je-videt .aume-add__ikona {
        animation: none;
    }
}