/* ===================================
   GOSTOV MENI NA JEDNOJ STRANICI (menu/items.html, view: category)
   Traka kategorija lijevo, kompaktni redovi artikala, panel kategorija,
   donja traka (Pregledaj / Naruči) i košarica u sheetu.
   Boje su postojeće boje aplikacije (narančasta #c2410c).
   =================================== */

/* ── Raspored: zaglavlje stoji, traka i popis skrolaju se zasebno ─────────
   Kao u maketi. Prozor se na mobitelu inače skrola cijeli (customer.css,
   max-width 768px), pa bi dno trake s blijeđenjem pri otvaranju bilo ispod
   ekrana. :has jer su ti spremnici u customer_base.html. Isto vrijedi za
   potvrdu narudžbe (.potvrda), da ima isto zaglavlje i gumb uvijek dolje. */
html:has(.meni, .potvrda),
body:has(.meni, .potvrda) {
    height: 100%;
    overflow: hidden;
}

.kiosk-container:has(.meni, .potvrda) {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
}

.kiosk-container:has(.meni, .potvrda) .main-content,
.kiosk-container:has(.meni, .potvrda) .content-wrapper {
    overflow: hidden;
    min-height: 0;
}

.kiosk-container:has(.meni, .potvrda) .scroll-content {
    display: flex;
    overflow: hidden;
    padding: 0 !important;    /* customer-base.js dodaje padding za traku košarice */
}

/* Visina donje trake košarice: traka kategorija završava iznad nje. */
.meni {
    --dno: calc(77px + env(safe-area-inset-bottom));
    flex: 1;
    min-width: 0;
    display: flex;
    background: #f6f7f8;
}

/* ── Traka kategorija ─────────────────────────────────────────────────── */
.meni__traka-omot {
    position: relative;
    flex: 0 0 76px;
    height: calc(100% - var(--dno));
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid #e6e8eb;
}

.meni__traka {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    padding-bottom: 28px;    /* zadnja kategorija ne ostane ispod blijeđenja */
}

.meni__traka::-webkit-scrollbar {
    display: none;
}

.meni__kat {
    position: relative;
    flex: none;
    min-height: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    border: none;
    background: none;
    color: #1f2d3d;
    font: inherit;
    cursor: pointer;
    transition: background .15s;
}

.meni__kat img,
.meni__kat .meni__inicijal {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    transition: transform .15s;
}

.meni__kat:active img,
.meni__kat:active .meni__inicijal {
    transform: scale(1.1);
}

.meni__kat-ime {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Aktivna: svijetla podloga, narančasta crta uz rub, obrub sličice. */
.meni__kat.aktivna {
    background: #fceadf;
}

.meni__kat.aktivna::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #c2410c;
}

.meni__kat.aktivna img,
.meni__kat.aktivna .meni__inicijal {
    box-shadow: 0 0 0 2px #c2410c;
}

/* Blijeđenje i ▾ pri dnu dok ispod ima još (JS: .ima-jos). */
.meni__traka-omot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}

.meni__jos {
    position: absolute;
    left: 50%;
    bottom: 6px;
    z-index: 1;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fceadf;
    color: #9a3412;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}

.meni__traka-omot.ima-jos::after,
.meni__traka-omot.ima-jos .meni__jos {
    opacity: 1;
}

/* Isto na vrhu, dok iznad ima kategorija (JS: .ima-gore). */
.meni__traka-omot::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    height: 56px;
    background: linear-gradient(#fff 15%, rgba(255, 255, 255, 0));
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}

.meni__gore {
    position: absolute;
    left: 50%;
    top: 6px;
    z-index: 2;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fceadf;
    color: #9a3412;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}

.meni__traka-omot.ima-gore::before,
.meni__traka-omot.ima-gore .meni__gore {
    opacity: 1;
}

.meni__inicijal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fceadf;
    color: #c2410c;
    font-weight: 700;
    font-size: 18px;
}

/* ── Popis artikala ───────────────────────────────────────────────────── */
.meni__popis {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 12px calc(var(--dno) + 24px);
}

.meni__sekcija {
    scroll-margin-top: 8px;
}

.meni__naslov {
    font-size: 17px;
    font-weight: 700;
    color: #1f2d3d;
    margin: 16px 0 6px;
}

.meni-red {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #e6e8eb;
}

.meni-red__detalj {
    flex: 1;
    min-width: 0;
}

.meni-red__detalj button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.meni-red__slika {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    overflow: hidden;
    background: #eef0f2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.meni-red__slika img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.meni-red__tekst {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.meni-red__naziv {
    font-size: 14px;
    font-weight: 600;
    color: #1f2d3d;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.meni-red__cijena {
    font-size: 14px;
    font-weight: 700;
    color: #c2410c;
}

.meni-red__plus {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: #c2410c;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: transform .15s, background .15s;
}

.meni-red__plus:active {
    transform: scale(.9);
    background: #9a3412;
}

/* Kratka potvrda nakon dodavanja (JS doda klasu na ~0,7 s). */
.meni-red__plus.dodano {
    background: #15803d;
}

/* Nakon skoka na kategoriju sadržaj se kratko blago pojavi, umjesto
   glatkog skrola kroz cijeli popis ("vrtnja", vlasnik 2026-11-08). */
.meni__popis--skok {
    animation: meniSkok .22s ease-out;
}

@keyframes meniSkok {
    from { opacity: .35; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .meni__kat,
    .meni__kat img,
    .meni__traka-omot::after,
    .meni__traka-omot::before,
    .meni__jos,
    .meni__gore {
        transition: none;
    }

    .meni__popis--skok {
        animation: none;
    }
}

/* ── Zaglavlje (samo na meniju) ───────────────────────────────────────── */
/* Kao u maketi: ravna svijetla pozadina, jezik lijevo, ime lokala u sredini,
   stol desno, oboje kao bijele pilule. :has jer zaglavlje je u
   customer_base.html, izvan bloka ove stranice. */
.kiosk-container:has(.meni, .potvrda) .kiosk-header {
    background: #fceadf;
    box-shadow: none;
    padding: 12px 16px;
}

.kiosk-container:has(.meni, .potvrda) .kiosk-header::before {
    display: none;
}

/* partials/header_logo.html: logo, a bez njega 🍽️ + ime. */
.kiosk-container:has(.meni, .potvrda) .header-center-content {
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

/* 54px u traci koja ima mjesta za 40: negativna margina (-7px gore i dolje)
   pusti logo u padding zaglavlja (12px), pa traka ostane iste visine. */
.kiosk-container:has(.meni, .potvrda) .header-center-logo {
    display: block;
    height: 54px;
    margin: -7px 0;
    width: auto;
    max-width: 46vw;
    object-fit: contain;
}

.kiosk-container:has(.meni, .potvrda) .header-center-text {
    max-width: 40vw;
    font-size: 16px;
    font-weight: 700;
    color: #1f2d3d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kiosk-container:has(.meni, .potvrda) .lang-menu__toggle,
.kiosk-container:has(.meni, .potvrda) .table-chip {
    height: 36px;
    padding: 0 12px;
    border: 1px solid #f0c3a8;
    border-radius: 18px;
    background: #fff;
    box-shadow: none;
}

/* ── Donja traka ──────────────────────────────────────────────────────── */
/* Bijela traka preko cijele širine, kao u maketi. left:50% + translateX(-50%)
   ostaje iz floating_cart_button.css: animacije ulaska i podsjetnika rade s
   tim transformom, s left:0 bi traka odskočila u stranu. */
#floating-cart-button.donja-traka {
    bottom: 0;
    width: 100%;
    max-width: none;
    background: #fff;
    border-top: 1px solid #e6e8eb;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    box-sizing: border-box;
}

#floating-cart-button.donja-traka.ima-stavke {
    display: flex;
    gap: 10px;
}

.donja-traka__pregled,
.donja-traka__naruci {
    height: 52px;
    border-radius: 14px;
    font: inherit;
    cursor: pointer;
}

.donja-traka__pregled {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    padding: 0 16px;
    background: #fff;
    color: #1f2d3d;
    border: 1px solid #d5d9de;
    font-size: 15px;
    font-weight: 600;
}

/* .floating-cart-icon (floating_cart_button.css) je kvadrat 48×48 za staru
   ikonu košarice — ovdje je samo broj u retku teksta. */
.donja-traka__pregled .floating-cart-icon {
    display: inline;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    padding: 0;
    font-size: inherit;
}

.donja-traka__forma {
    flex: 1;
    display: flex;
}

.donja-traka__naruci {
    flex: 1;
    border: none;
    background: #c2410c;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.donja-traka__naruci:active {
    background: #9a3412;
}

.donja-traka__naruci:disabled {
    opacity: .7;
}

.donja-traka__naruci .floating-cart-price {
    font-size: inherit;
    font-weight: inherit;
}

/* Prazno: samo sivi tekst, bez okvira. */
#floating-cart-button.donja-traka .floating-cart-empty {
    height: 52px;
    border: none;
    background: none;
    box-shadow: none;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: #5b6672;
}

/* ── Košarica u sheetu ────────────────────────────────────────────────── */
.kosarica-sheet__zaglavlje {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #e6e8eb;
}

.kosarica-sheet__zaglavlje h2 {
    font-size: 17px;
    font-weight: 700;
    color: #1f2d3d;
    margin: 0;
}

.kosarica-sheet__zatvori {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #f1f3f5;
    font-size: 18px;
    cursor: pointer;
}

.kosarica-sheet__body {
    padding: 4px 16px calc(16px + env(safe-area-inset-bottom));
}

/* Redovi bez slika: naziv i dodaci lijevo, − n + desno. */
.kosarica-red {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e6e8eb;
}

.kosarica-red__tekst {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kosarica-red__naziv {
    font-size: 15px;
    font-weight: 600;
    color: #1f2d3d;
}

.kosarica-red__dodaci {
    font-size: 13px;
    color: #5b6672;
}

.kosarica-red__cijena {
    font-size: 14px;
    font-weight: 700;
    color: #c2410c;
}

.kosarica-ukupno {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 700;
    color: #1f2d3d;
}

.kosarica-sheet .order-note {
    margin-bottom: 12px;
}

.kosarica-sheet .order-note summary {
    cursor: pointer;
    color: #c2410c;
    font-weight: 600;
    font-size: 14px;
    padding: 4px 0 8px;
}

.kosarica-sheet .order-note textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d5d9de;
    border-radius: 12px;
    font: inherit;
    font-size: 15px;
    resize: vertical;
}

/* Natrag lijevo, Naruči desno i šire — kao donja traka. */
.kosarica-gumbi {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 10px;
    padding-top: 8px;
    background: #fff;
}

.kosarica-gumbi__natrag,
.kosarica-gumbi__naruci {
    height: 52px;
    border-radius: 14px;
    font: inherit;
    cursor: pointer;
}

.kosarica-gumbi__natrag {
    flex: 0 0 auto;
    padding: 0 18px;
    background: #fff;
    color: #1f2d3d;
    border: 1px solid #d5d9de;
    font-size: 15px;
    font-weight: 600;
}

.kosarica-gumbi__naruci {
    flex: 1;
    border: none;
    background: #c2410c;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.kosarica-gumbi__naruci:disabled {
    opacity: .7;
}

.current-order-empty .kosarica-gumbi__natrag {
    margin-top: 12px;
}