/* ===================================
   FLOATING CART BUTTON PARTIAL STYLES
   =================================== */

/* Dodaj padding na scroll-content kada je cart vidljiv */
.cart-visible .scroll-content {
    padding-bottom: 100px !important;
}

/* Main floating button container */
#floating-cart-button {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: 90%;
    max-width: 500px;
    /* Bez animacije ovdje: prazna traka stoji mirno pri svakom otvaranju
       stranice. Odozdo ulazi samo puna traka (.ima-stavke niže). */
}

/* Hidden state */
#floating-cart-button.hidden {
    display: none;
}

/* Puna traka: ulazak, bez stalnog njihanja ───────────────────────────────
   Traka se prije njihala beskonačno. Pokret koji nikad ne stane ljudi brzo
   prestanu primjećivati, a WCAG 2.2.2 traži da se pokret dulji od 5 s može
   zaustaviti. Umjesto toga: jedan podsjetnik (.podsjetnik) kad gost sa
   stavkama ~20 s ništa ne radi — vidi js/customer-base.js.

   .bez-ulaska: traka koja je već bila puna i samo je dobila novi sadržaj
   (dodavanje iz sheeta, menu/items.html) ne smije ponovno ući odozdo.

   MORA biti translate(-50%, …), ne translateY: element je centriran preko
   transform: translateX(-50%), a animacija transforma zamjenjuje cijelu
   vrijednost — s golim translateY traka odskoči na desnu polovicu ekrana. */
#floating-cart-button.ima-stavke {
    animation: cartSlideUp 0.3s ease-out;
}

#floating-cart-button.bez-ulaska {
    animation: none;
}

/* Prvi artikl: puna traka se pojavi NA MJESTU prazne (samo prozirnost, bez
   pomaka) — slika artikla u tom trenutku već leti prema ikoni, pa ikona mora
   biti na konačnom položaju. Klasu dodaje menu/items.html. */
#floating-cart-button.prvo-punjenje {
    animation: cartFadeIn 0.25s ease-out;
}

@keyframes cartFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#floating-cart-button.podsjetnik {
    animation: cartNudge 0.9s ease-in-out;
}

@keyframes cartNudge {
    0%, 100% { transform: translate(-50%, 0); }
    25%      { transform: translate(-50%, -12px); }
    50%      { transform: translate(-50%, 0); }
    70%      { transform: translate(-50%, -5px); }
}

/* Slijetanje slike u traku: ikona "proguta" sliku, cijena kratko zasvijetli.
   Klase dodaje menu/items.html kad let završi i stigne nova traka. */
.floating-cart-icon.gutljaj {
    animation: cartGulp 0.26s ease-out;
}

@keyframes cartGulp {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.25); }
    75%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.floating-cart-price.cijena-blic {
    animation: priceGlow 0.6s ease-out;
}

@keyframes priceGlow {
    0%   { transform: scale(1);    text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
    30%  { transform: scale(1.12); text-shadow: 0 0 14px rgba(255, 255, 255, 0.95); }
    100% { transform: scale(1);    text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
}

/* Cart button link
   ─────────────────────────────────────────────────────────────────────────
   Boja akcija gosta (2026-10-14): tamna narančasta #c2410c — "Dodaj u
   košaricu" i ova traka. Bijelo na njoj 5,2:1 (AA); stara #e67e22 imala je
   2,85:1. Cijene su sad tamnoplave, pa narančasta više nije boja svega i
   traka se ne gubi. Do 2026-10-14 traka je bila plava (#2563eb).

   "Pošalji konobaru" NIJE ove boje nego zelen (current_order.css): dok su
   traka i "Pošalji" bili iste boje, gost je "Pošalji" čitao kao traku koju
   je već stisnuo i nije ga doživio kao zadnji korak. Kratko je bio
   narančast i vraćen je isti dan.
   Ravno, bez gradijenta — isti obrazac kao checkout-btn--primary. */
#floating-cart-button a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #c2410c;
    color: white;
    padding: 18px 28px;
    border-radius: 16px;
    text-decoration: none;
    /* Dva sloja: tamna sjena odiže traku od stranice, aura u boji pod njom
       daje dojam da lebdi. Jedna plitka sjena se u ovoj mreži gubila. */
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22),
                0 16px 44px rgba(194, 65, 12, 0.45);
    transition: all 0.3s;
    border: none;
}

#floating-cart-button a:hover {
    transform: translateY(-3px);
    background: #9a3412;
    /* Oba sloja se moraju ponoviti — box-shadow se ne nasljeđuje po sloju nego
       se cijela lista zamjenjuje, pa bi ih inače hover pojeo. */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25),
                0 18px 48px rgba(194, 65, 12, 0.5);
}

#floating-cart-button a:active {
    transform: translateY(-1px);
    background: #7c2d12;
}

/* Prazno stanje — vidljivo, ali bez akcije (nije <a>, vidi predložak).
   Sivo i tanje od pune trake: drži mjesto i najavljuje košaricu, a ne natječe
   se s artiklima za pažnju. Isprekidan rub je isti jezik kao "Učitaj još" na
   popisu artikala — "ovdje će nešto doći". */
.floating-cart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 16px;
    /* Puna boja, ne prozirna: traka lebdi iznad mreže artikala, pa je kroz
       poluprozirnu pozadinu probijao naziv kategorije ispod nje. */
    background: #ffffff;
    border: 2px dashed #d4d7da;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    color: #5c6670;
    font-size: 15px;
    font-weight: 600;
}

.floating-cart-empty-icon {
    font-size: 18px;
    opacity: 0.75;
}

/* Bljesak nakon dodavanja artikla ─────────────────────────────────────────
   Toast je maknut (orders/views.py), pa je promjena same trake jedina potvrda
   da je artikl ušao u košaricu. Gost je u tom trenutku prstom na dnu ekrana i
   stranica mu se upravo zamijenila — tiha promjena broja se lako propusti.
   Kratko, jednom, i gotovo: duže ili ponavljano bi postalo smetnja.

   Klasu postavlja predložak samo uz ?dodano=1, pa se ne okida na običnom
   otvaranju kategorije.

   Animira se <a>, ne #floating-cart-button: roditelj nosi
   transform: translateX(-50%) za centriranje, koje bi scale() ovdje pregazio
   i traku odgurao udesno. */
.floating-cart-flash {
    animation: cartFlash 0.6s ease-out;
}

@keyframes cartFlash {
    0%   { background: #ea580c; transform: scale(1); }
    35%  { background: #ea580c; transform: scale(1.035); }
    100% { background: #c2410c; transform: scale(1); }
}

/* Tko je u postavkama ugasio animacije ne dobiva ni ovu — potvrda je i dalje
   tu, samo bez pokreta. */
@media (prefers-reduced-motion: reduce) {
    .floating-cart-flash,
    #floating-cart-button.podsjetnik,
    .floating-cart-icon.gutljaj,
    .floating-cart-price.cijena-blic {
        animation: none;
    }
}

/* Left side: Icon + Item count */
.floating-cart-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.floating-cart-icon {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.floating-cart-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.floating-cart-label {
    font-size: 14px;
    opacity: 0.9;
    font-weight: 500;
}

.floating-cart-count {
    font-size: 18px;
    font-weight: 700;
}

/* Right side: Price + Arrow */
.floating-cart-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.floating-cart-price {
    font-size: 24px;
    font-weight: 800;
}

.floating-cart-arrow {
    font-size: 20px;
}

/* Vlastito ime, ne "slideUp": extras-form.css se na stranici artikala učita
   poslije ove datoteke i ima svoj slideUp (diže i gasi), koji bi pregazio
   ovaj — traka bi poskočila gore-desno, nestala i vratila se. */
@keyframes cartSlideUp {
    from {
        transform: translate(-50%, 100px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    #floating-cart-button {
        width: 94%;
        bottom: 15px;
    }
    
    #floating-cart-button a {
        padding: 16px 20px;
    }
}