/*
 * overrides.css — surgical fixes layered ON TOP of polovni-udzbenici.webflow.css
 * bez diranja Webflow-ovih pravila. Učitava se POSLE webflow CSS-a u layout-u,
 * pa pobedjuje u kaskadnom pravilu (ista specifičnost, kasniji izvor).
 *
 * Kontekst: filter sidebar na /pretraga-udzbenika i /(osnovna|srednja)-skola/[razred]
 *  - Desktop bug (4705-4711 u webflow.css): sidebar je `position: sticky; top: 180px`
 *    bez svoje max-height/overflow. Na laptop-ima sa visinom < 900px donji deo
 *    (Predmet lista + Resetuj filtere) izlazi van viewport-a i ne može da se
 *    doseže — sticky prati scroll, pa scroll stranice ne pomaže.
 *  - Mobile UX: sidebar staje nad book grid-om punih ~600+ visine sa svim
 *    izdavačima i predmetima → kupac mora da skroluje par ekrana pre nego što
 *    vidi knjige. Knjige treba da budu odmah dostupne; filteri u collapse-u.
 *
 * Markup pattern (RazredListing.tsx, pretraga-udzbenika/page.tsx):
 *   <div className="filter-section">
 *     <input id="X" type="checkbox" className="filter-toggle" />
 *     <label htmlFor="X" className="filter-summary">...title...</label>
 *     <div className="filter-body">...wraper-filter...</div>
 *   </div>
 *
 * Pure CSS toggle preko :checked pseudo-klase. Bez JS-a, bez FOUC-a, bez
 * dependency-ja na <details> shadow-DOM ponašanje koje CSS ne može pouzdano
 * da override-uje.
 *
 * Default state: ZATVORENO (input nije checked) → body skriven na mobilnom.
 * Na desktopu CSS forsira body kao vidljiv i sakriva label (toggle).
 */

/* ========== Skrivanje samog input checkbox-a (kontroler, nikad vidljiv) ========== */
.filter-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ========== DESKTOP (≥992px): self-scrolling sticky sidebar + filteri uvek otvoreni ========== */
@media (min-width: 992px) {
  /* Kontejner: ograniči visinu na viewport pa interno skroluj. */
  .single-sidebar-item.mb40.bg-white {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    /* Glatki scroll na touchpad-u + mesto za scrollbar */
    scrollbar-width: thin;
    scrollbar-gutter: stable;
  }

  /* Ukloni unutrašnje scroll bokse — sve teče u jednom sidebar scroll-u.
     Nested scroll (sidebar scroll + .wraper-filter scroll) je loš UX. */
  .wraper-filter {
    max-height: none;
    overflow: visible;
  }
  .kategorija {
    max-height: none;
    overflow: visible;
  }

  /* Label (toggle) je sakriven — title je već unutar njega kao plain blok ali
     bez dodatnih affordance-a (chevron, click cursor). Title se prikazuje kroz
     label-ov sadržaj koji je strukturom isti kao stari sidebar-title-wrap. */
  .filter-summary {
    cursor: default;
    pointer-events: none;
    display: block;
    padding: 0;
    margin: 0;
    border-bottom: none;
  }
  /* Bez chevron-a na desktopu */
  .filter-summary::after {
    content: none !important;
  }

  /* Filter body je uvek vidljiv na desktopu — bez obzira na :checked stanje */
  .filter-body {
    display: block;
  }
}

/* ========== MOBILE (<992px): collapsible filter groups ========== */
@media (max-width: 991px) {
  /* Label je tap-friendly red sa naslovom + chevron */
  .filter-summary {
    cursor: pointer;
    padding: 14px 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    user-select: none;
    border-bottom: 1px solid #e5e7eb;
  }

  /* Custom chevron desno */
  .filter-summary::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid #07294d;
    border-bottom: 2px solid #07294d;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-right: 4px;
    margin-top: -3px;
  }
  /* Otvoreno stanje: chevron rotira nadole */
  .filter-toggle:checked ~ .filter-summary::after {
    transform: rotate(225deg);
    margin-top: 3px;
  }

  /* Title block u label-u: levo, popuni preostali prostor */
  .filter-summary .sidebar-title-wrap {
    margin: 0;
    flex: 1 1 auto;
  }

  /* Default: filter body skriven; samo kad je input checked, prikazan */
  .filter-body {
    display: none;
  }
  .filter-toggle:checked ~ .filter-body {
    display: block;
  }

  /* Wraper-filter na mobilnom (kad je otvoren) dobija svoju max-height + scroll,
     da ekstremno duge liste (100+ predmeta) ne otvore ekran u beskonačnost */
  .filter-toggle:checked ~ .filter-body .wraper-filter {
    max-height: 320px;
    overflow: auto;
    padding-top: 8px;
    padding-bottom: 4px;
  }

  /* Skloni sticky na mobilnom — sidebar je u normalnom flow-u nad grid-om. */
  .single-sidebar-item.mb40.bg-white {
    position: static;
    top: auto;
  }

  /* Reset filtere dugme dobija prostora od poslednjeg collapse-a */
  .single-sidebar-item.mb40.bg-white .clear-filter {
    margin-top: 16px;
  }
}

/* ========== Header search ikona — discovery label "Pretraga" ========== */
/* Default je samo mala lupa pa korisnici nisu znali da je klikabilna.
   Tekst ide kao child od <li.search-icon> i toggluje sa lupom kroz Webflow IX2
   (parent <li> animira opacity, pa cela grupa svetli/tamni zajedno). */
.search-icon-label {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: inherit;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}

/* Search trigger je <button> element (HeaderInteractive renderuje
   <button className="header-top-search-icon w-embed">). Browser default
   na <button> je svetlo-siv background (rgb 240,240,240) + 1px solid border.
   Webflow .header-top-search-icon CSS setuje samo width/height/cursor —
   ne resetuje button chrome. Na tamno-navy top-bar pozadini (#07294d), siv
   button background izgleda kao "polu-bela kocka oko bele lupe" (Marko-vo
   opažanje). Reset → čista bela lupa na navy → kontrast očigledan.
   Padding/hover daje tap-friendly affordance bez pomeranja layouta — margin
   negativan toliko koliko padding, pa box ne raste vidljivo. */
.header-top-search-icon {
  /* Webflow inline width/height od 16px/28px nadjačavamo da bismo dali button-u
     pravu tap-zonu — sam SVG ostaje 20/22px ali wrapper raste preko padding-a.
     !important jer Webflow .header-top-search-icon ima direktnu specifičnost
     na width/height. */
  width: auto !important;
  height: auto !important;
  background: transparent;
  border: 0;
  padding: 8px;
  margin: -8px;
  color: #fff;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.header-top-search-icon:hover,
.header-top-search-icon:focus-visible {
  background-color: rgba(255, 255, 255, 0.14);
}
.header-top-search-icon[aria-expanded='true'] {
  background-color: rgba(255, 255, 255, 0.2);
}
.header-top-search-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
@media (max-width: 767px) {
  .header-top-search-icon svg {
    width: 22px;
    height: 22px;
  }
}

/* X dugme (.remove-search-icon) je u Webflow CSS `position: absolute` bez
   eksplicitnog top/left/right. Sa novim "Pretraga" tekstom, default top-left
   pozicija pada negde na sredinu teksta a `right: 0` ide na kraj teksta —
   oba scenarija = X overlay-uje preko slova. Pribiti ga ZA POZICIJU MALE LUPE
   (levi ivici <li>-a) tako da X vizuelno **zamenjuje lupu** kad je search
   otvoren, a tekst "Pretraga" ostaje pored. */
.action-list-item.search-icon .remove-search-icon {
  top: 50%;
  left: 0;
  right: auto;
  transform: translateY(-50%);
}

/* Mobile (≤767px): manje prostora u top baru, sakrij tekst — ostaje samo ikona.
   Mobile trigger u SearchTypeahead.tsx i dalje radi (pojavljuje se na <=768px). */
@media (max-width: 767px) {
  .search-icon-label {
    display: none;
  }
}

/* ========== Search overlay — uklanja liniju ispod velike lupe ========== */
/* .search-button (Webflow CSS:1314-1325) ima border-bottom: 2px solid #333
   čisto da bi se vizuelno spojio sa input-ovom donjom linijom. Sa novim
   typeahead UI-em ta linija pravi vidljiv "step" ispod ikonice lupe. */
.search-button {
  border-bottom: 0 !important;
}

/* Mobile: sakrij submit dugme `.search-button`.
   Webflow CSS renderuje ga sa `background-image: magnifying-glass.svg` (plava
   navy lupa, polovni-udzbenici.webflow.css:1314-1325). Na mobile-u to se
   pojavljuje pored input-a u istom flex row-u — izgleda kao "mini plava
   lupa iznad search polja" (Marko-vo opažanje). Pretraga radi preko Enter
   i preko "Prikaži svih X rezultata" linka u typeahead dropdown-u, pa je
   dugme overhead. Na desktopu ostaje kao klikabilan submit affordance. */
@media (max-width: 767px) {
  .search-content .search-button {
    display: none;
  }
}

/* ========== Focus-visible — vraća vidljive focus state-ove (WCAG 2.1 SC 2.4.7) ========== */
/*
 * Webflow je na više mesta uklonio outline:
 *   normalize.css:87 (generic), webflow.css:343 (.w-input/.w-select),
 *   :1091 (.w-dropdown-toggle), :1121 (.w-dropdown-link),
 *   :1666 (.w-nav-button), :1751 (.w-tab-link),
 *   plus svi .w-commerce-* checkout inputi u polovni-udzbenici.webflow.css.
 *
 * Bez vidljivog fokus indikatora, keyboard korisnici (i screen reader-i koji
 * prate caret) ne mogu da koriste sajt — fail SC 2.4.7. Ovo je i a11y i UX
 * problem (tab-tab-tab-Enter workflow je standard za mnogo kupaca).
 *
 * Strategija:
 *   - Mouse fokus (`:focus:not(:focus-visible)`) — outline: none. Modern UX
 *     ne pokazuje "lepljivi" outline za miš; mouse korisnici biraju klikom,
 *     ne tabovanjem.
 *   - Tastatura / programatski fokus (`:focus-visible`) — outline u brand
 *     zelenoj, 2px solid, offset 2px. Browser pokreće `:focus-visible` na
 *     Tab navigaciju, programatski `.focus()` poziv, i screen reader naviga-
 *     ciju — sve a11y use case-ove.
 *
 * Layout impact: outline ne zauzima box prostor → bez CLS-a / reflow-a.
 * Outline sledi border-radius u Chrome 94+ / Safari 16.4+ / Firefox 88+
 * (2026 baseline) → pill dugmad imaju pill-shaped outline.
 *
 * Specifity: overrides.css je load-ovan POSLEDNJI u (frontend) layout-u
 * (vidi src/app/(frontend)/layout.tsx:84). Pri jednakoj specifity sa
 * Webflow-ovim `.x:focus { outline: 0 }`, moj `.x:focus-visible` pobjeđuje
 * po kasnijem izvoru. (`:focus` i `:focus-visible` su odvojene pseudo-classe
 * — oba pravila apliciraju za isti property, kaskada bira moj.)
 *
 * Scope: SAMO (frontend) — admin (Payload) ima sopstveni focus stil,
 * dashboard (Tailwind) takođe. Ovaj fajl ih ne dotiče.
 *
 * Postojeći Webflow `:focus-visible` rules (`.fs-checkbox-5_button`,
 * `.radio_button.w--redirected-focus-visible`) imaju class-specific selektor
 * sa višom specifity od ovog generic-a — ostaju netaknuti (nije regression).
 */

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid rgb(12, 139, 81);
  outline-offset: 2px;
}

/* Class-specific overrides za Webflow elemente sa eksplicitnim outline:0.
   Iako overrides.css ide posle u kaskadi, eksplicitno match-ujemo da budemo
   sigurni u kompleksnim cascade scenarima (i da budućim dev-ima bude jasno
   gde se vraća šta). */
.w-input:focus-visible,
.w-select:focus-visible,
.w-dropdown-toggle:focus-visible,
.w-dropdown-link:focus-visible,
.w-nav-button:focus-visible,
.w-tab-link:focus-visible,
.w-button:focus-visible,
.search-input:focus-visible,
.search-button:focus-visible,
.button-primary:focus-visible,
.button-outline:focus-visible,
.cart-link-button:focus-visible,
.close-button:focus-visible,
.add-to-cart:focus-visible,
.add-to-cart-2:focus-visible,
.clear-filter:focus-visible,
.filter-checkbox:focus-visible,
.quantity-input:focus-visible,
.cart-quantity:focus-visible {
  outline: 2px solid rgb(12, 139, 81);
  outline-offset: 2px;
}

/* Pill-shaped dugmad (border-radius: 50px) — outline već sledi radius na
   modernim browser-ima, ali offset malo veći da se "ne lepi" za rounded ivicu. */
.button-primary:focus-visible,
.cart-link-button:focus-visible {
  outline-offset: 3px;
}

/* Filter checkbox link (custom checkbox sa w-checkbox-input span-om) —
   target je sam <a> link, pa offset 1px da outline ne presečemo sa
   "checkbox" pravougaonikom sa leve strane. */
.filter-checkbox:focus-visible {
  outline-offset: 1px;
  border-radius: 4px;
}

/*
 * Mobile nav overlay & burger.
 *
 * Bez webflow.js, .w-nav-overlay je position:absolute, top:100%, overflow:hidden,
 * height:0 — sadržaj se ne vidi iako framer-motion animira opacity. Overrides:
 *   - overlay: position fixed iz top-bar visine do dna ekrana, beli background,
 *     scrollable, overflow vidljiv. Sadržaj (motion.nav) sad ima prostor za render.
 *   - menu: full-width inside overlay sa padding-om i scroll-om kad je sadržaj
 *     duži od viewporta (Kontakt link padne tačno ispod 667px bez ovoga, plus
 *     dropdown listings dodaju ~14 stavki kad se otvore).
 *
 * Burger button color states:
 *   Closed (default Webflow): rgb(240, 240, 240) svetlo siv. Polepšano na
 *     transparent — sliva se sa header pozadinom, izgleda čisto.
 *   Open: svetlo brand-green tint (0.1 alpha) — vizuelni feedback da je akcija
 *     aktivna. Plus burger ikona menja boju na primary green.
 */
/*
 * Dropdown toggle background reset.
 *
 * `.dropdown-toggle` je <button> element (HeaderDropdown.tsx renderuje
 * <button type="button">). Browser default na button je svetlo siv
 * background (rgb 240,240,240). Webflow CSS ne reset-uje to → ostaje
 * vidljiv background na "Osnovna škola" / "Srednja škola" stavkama.
 */
.dropdown-toggle.w-dropdown-toggle {
  background-color: transparent !important;
  border: 0;
}

@media screen and (max-width: 991px) {
  /*
   * Overlay: pun ekran od dna nav-bar-a do dna prozora. `--mobile-nav-top`
   * CSS var setuje HeaderInteractive useEffect-om iz `.header-area`
   * boundingClientRect — pa overlay tačno počinje ispod fluid-visine
   * header-a (top-bar često nestaje na <767px, nav-bar može da bude
   * 50-90px). Fallback 87px za prvi paint pre JS mount-a.
   */
  .w-nav-overlay {
    position: fixed !important;
    top: var(--mobile-nav-top, 87px);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto !important;
    overflow: visible !important;
    background-color: #fff;
    z-index: 999;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  }
  /*
   * Nav menu: kompaktan vertikalni stack umesto Webflow default-a (gap 25px,
   * padding 25px/0 po linku = 50+13 = 63px po stavki, presporo i razvučeno).
   * Razdelnik (border-bottom hairline) jasno odvaja stavke.
   */
  .w-nav-overlay .w-nav-menu {
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: #fff;
  }
  .w-nav-overlay .header-navigation-list {
    gap: 0 !important;
    padding: 8px 24px 32px !important;
    margin: 0 !important;
    align-items: stretch !important;
  }
  .w-nav-overlay .navigation-list-item {
    padding: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .w-nav-overlay .navigation-list-item:last-child {
    border-bottom: none;
  }
  .w-nav-overlay .nav-link {
    padding: 14px 0 !important;
    display: block;
    text-align: left;
  }
  .w-nav-overlay .nav-link-dropdown {
    padding: 0 !important;
  }
  .w-nav-overlay .dropdown-toggle {
    padding: 14px 0 !important;
    width: 100%;
  }

  /* Burger button transparent po default-u (umesto Webflow svetlo sivog).
     Hover/focus daju suptilno isticanje, open daje zeleni tint. */
  .menu-button {
    background-color: transparent !important;
    border: 0;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .menu-button:hover,
  .menu-button:focus-visible {
    background-color: rgba(12, 139, 81, 0.08) !important;
  }
  .menu-button.w--open {
    background-color: rgba(12, 139, 81, 0.12) !important;
    color: rgb(12, 139, 81) !important;
  }
  .menu-button.w--open .mobile-menu-icon-bar {
    color: rgb(12, 139, 81);
  }

  /*
   * Mobile dropdown — inline (accordion) expand umesto absolute popup-a.
   *
   * Webflow base (webflow.css:1104): `.w-dropdown-list { position: absolute }`.
   * Plus polovni-udzbenici.webflow.css:1431-1444 daje listi `width: 240px`,
   * `border-bottom: 4px solid #0c8b51`, i `.w--open { top: 54px; left: 10px }`.
   * Na mobile breakpointu (linija 7647) preusmerava na `left: -78px`.
   *
   * Posledica unutar mobile overlay-a: kad se "Osnovna škola" otvori, lista
   * lebdi iznad nav-a, pomerena 78px ulevo, fiksne širine 240px, sa zelenom
   * trakom na dnu — pa "Srednja škola" link ostaje vidljiv ispod nje (provida).
   *
   * Fix: u .w-nav-overlay kontekstu pretvori popup u accordion. Static
   * position, full-width, bez senke/border-decoration/fiksne širine — lista
   * gura nav linkove dole prirodno, klikabilan tap-target po stavci.
   */
  .w-nav-overlay .nav-link-dropdown .dropdown-menu-list.w-dropdown-list {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0;
    box-shadow: none !important;
    border: 0 !important;
    background-color: transparent;
    padding: 0 !important;
  }
  /*
   * w-dyn-item nasleđuje globalni `li { display:flex; justify-content:center;
   * padding-left:10px }` (webflow base list reset) — to centrira link
   * horizontalno i ostavlja 10px praznine levo. Vraćamo na blok-level stavke
   * sa konzistentnim levim oslanjanjem.
   */
  .w-nav-overlay .nav-link-dropdown .w-dyn-items {
    margin: 4px 0 8px;
    padding: 0;
  }
  .w-nav-overlay .nav-link-dropdown .w-dyn-item {
    display: block;
    padding: 0;
    margin: 0;
    background-image: none;
  }
  /*
   * Linkovi: levo poravnati (override webflow.css:1080 + mobile :7652 right-align),
   * uvučeni 16px da vizuelno "spadaju" pod parent ("Osnovna škola"), sa diskretnom
   * levom trakom koja se boji na hover/current.
   */
  .w-nav-overlay .nav-link-dropdown .dropdown-menu-link.w-dropdown-link {
    text-align: left !important;
    padding: 12px 0 12px 16px !important;
    display: block;
    font-size: 15px;
    color: #393939;
    border-left: 2px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
    white-space: normal;
  }
  .w-nav-overlay .nav-link-dropdown .dropdown-menu-link.w-dropdown-link:hover,
  .w-nav-overlay .nav-link-dropdown .dropdown-menu-link.w--current {
    color: rgb(12, 139, 81);
    border-left-color: rgb(12, 139, 81);
  }
  /*
   * Toggle row: label levo, arrow desno, oba na istoj liniji. Strelica rotira
   * kad je dropdown otvoren — vizuelni indikator stanja (Webflow IX2 je radio
   * 180° rotaciju na isti event; ovde preko `.w--open` klase koju emituje
   * HeaderDropdown).
   */
  .w-nav-overlay .nav-link-dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
  .w-nav-overlay .nav-link-dropdown .menu-dropdown-arrow-icon {
    transition: transform 0.2s ease;
    margin: 0;
  }
  .w-nav-overlay
    .nav-link-dropdown
    .dropdown-toggle.w-dropdown-toggle.w--open
    .menu-dropdown-arrow-icon {
    transform: rotate(180deg);
  }
}

/* ========== Globalni <li> green-square decoration — uklanjanje ==========
 *
 * Webflow base (polovni-udzbenici.webflow.css:1065-1080) postavlja
 * `background-image: url('../images/list-icon.png')` (zelena 6×6 kocka) na
 * SVAKI <li>, plus `padding-left:10px` za prostor pod ikonicom. Vizuelno se
 * pojavljuje na:
 *   - book grid stavkama (.course-grid-item)
 *   - dropdown items (.w-dyn-item) u Osnovna/Srednja meniju
 *   - footer listama, kategorije listama, itd.
 * To je "Webflow Style Guide" dekoracija koja je u praksi suvišna — naročito
 * na book grid-u i meniju gde dodaje šum.
 *
 * Filter UI nije pogođen — kategorije/checkbox markup je na <div>-ovima
 * (RazredListing.tsx:190), pa .w-checkbox-input zelena indikacija (aktivni
 * filter) i .heading-bullet pored "Izdavač"/"Predmet" naslova ostaju netaknuti.
 *
 * Klase koje su već imale `background-image: none` (.navigation-list-item,
 * .action-list-item, .menu-dropdown-arrow-icon i sl.) ne menjaju ponašanje —
 * !important ide preko fragmenta koji bi inače mogao da se vrati iz nasleđenog
 * pravila u nekim kontekstima.
 */
li {
  background-image: none !important;
}

/* ========== Add-to-cart dugmad — unified hover/active/focus jezik ==========
 *
 * Dve veličine dele isti vizuelni interaction model:
 *   - .add-to-cart      (BookCard grid, kompaktan pill sa ikonom)
 *   - .add-to-cart-2    (book detail page, primarni CTA sa quantity input-om)
 *
 * Webflow base hover na .add-to-cart je bio bug: setuje text+border na green
 * ALI bg ostaje green (polovni-udzbenici.webflow.css:2012-2018) → tekst
 * postaje nevidljiv pri hover-u. Detail .add-to-cart-2 radi (bg→secondary navy)
 * ali drugačiji jezik = nekonzistentno.
 *
 * Unified spec:
 *   Default:   green bg, white text, transparent border
 *   Hover:     WHITE bg, GREEN text, GREEN border (filled→outlined inverzija)
 *              + lift -2px + soft green shadow
 *   Active:    scale 0.98, shadow nestane (taktilni press feedback)
 *   Focus-vis: koristi postojeće `:focus-visible` pravilo iznad (linija ~244,
 *              2px solid green outline, offset 3) — dodatno triggeruje hover
 *              vizualizaciju za vizuelni paritet sa miš hover-om.
 *
 * Cart ikona (.icon, mali pill unutar small dugmeta) već ima sopstvenu :hover
 * inverziju u Webflow CSS-u (linija 3836: bg→green, SVG→white_cart.svg). Pri
 * parent :hover, child :hover takođe fires. Eksplicitno ponavljamo iste promene
 * za parent :focus-visible kontekst (keyboard fokus ne propagira na child :hover).
 *
 * Box-sizing border-box je global (webflow.css:40-44), pa dodavanje 2px border-a
 * na .add-to-cart-2 (koji ga nema u baznom pravilu) ne pomera padding/layout.
 */
.add-to-cart,
.add-to-cart-2 {
  background-color: rgb(12, 139, 81);
  color: #fff;
  border: 2px solid transparent;
  white-space: nowrap;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease;
}

/*
 * Small varijanta (BookCard grid). Webflow base (linija 2004) postavlja
 * `padding: 10px 5px` što je usko za "U korpu" tekst + 32px circular ikonu —
 * pri tesnoj sirini grid kolone tekst se prelomi na "U / korpu" jer nema dovoljno
 * mesta. flex-wrap je nowrap, ali content unutar `.link-text-copy` div-a koji
 * je `display: block` (line 6495) wrap-uje. Fix: `white-space: nowrap` na sam
 * tekst + horizontalni padding/gap koji daje vizuelni ritam.
 *
 * `gap: 8px` (flex gap) zamenjuje grid-column-gap iz Webflow baze (4px) za malo
 * vise vazduha izmedju teksta i ikone — vizuelno cistije.
 */
.add-to-cart {
  padding: 6px 8px 6px 16px;
  gap: 8px;
}
.add-to-cart .link-text-copy {
  white-space: nowrap;
}

/*
 * BookCard cena + "U korpu" red. `.course-rate-action-block` (Webflow CSS:3272)
 * koristi `justify-content: space-between` koji rasporedjuje slobodan prostor
 * IZMEDJU stavki — ali samo ako ga ima. Kad cena ("1.500 RSD") + dugme
 * ("U korpu" + 32px ikona) zauzmu skoro celu sirinu kartice (~290px u
 * 4-kolonskom grid-u na laptopu), space-between ostavlja 0px medju njima —
 * dugme se vizuelno "lepi" za cenu.
 *
 * `gap: 16px` garantuje MINIMUM razmaka i kad content ispuni red. Kad ima
 * vise mesta, space-between i dalje rasporedjuje viska prostora.
 */
.course-rate-action-block {
  gap: 16px;
}

.add-to-cart:hover,
.add-to-cart:focus-visible,
.add-to-cart-2:hover,
.add-to-cart-2:focus-visible {
  background-color: #fff;
  color: rgb(12, 139, 81);
  border-color: rgb(12, 139, 81);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(12, 139, 81, 0.22);
}

/* link-text-copy (Webflow CSS:6491-6496) hardkoduje color:white. Inverzija na
   parent hover/focus-visible — !important da pobedi specifičnost klas-pravila
   u kasnijem load-order kontekstu. */
.add-to-cart:hover .link-text-copy,
.add-to-cart:focus-visible .link-text-copy {
  color: rgb(12, 139, 81) !important;
}

/* Ikona prati parent button state — :hover već radi iz Webflow CSS-a, dodajemo
   :focus-visible da keyboard fokus dobije isti vizual. */
.add-to-cart:hover .icon,
.add-to-cart:focus-visible .icon {
  background-color: rgb(12, 139, 81);
  background-image: url('/images/white_cart.svg');
  background-size: auto;
}

/* Active (pressed) — brza tranzicija (80ms) i lift→0 + scale 0.98 daje
   prirodno "kliknulo" osećanje. Senka nestane pri pritisku da se reflektuje
   smanjenje vizuelne "elevacije" tokom taktilnog kontakta. */
.add-to-cart:active,
.add-to-cart-2:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
  transition-duration: 80ms;
}

/* Disabled state — rezervisano za future async stanja (npr. out-of-stock check). */
.add-to-cart:disabled,
.add-to-cart-2:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========== Cookie banner LCP fix ==========
 *
 * Banner se uvek SSR-renderuje (vidi CookieBanner.tsx) tako da je u prvom paint-u.
 * Inline skript u layout.tsx pre body-ja setuje html[data-consent="pending|granted|denied"]
 * iz localStorage-a. Kad je granted/denied → CSS sakrije banner pre paint-a, dakle:
 *  - Vraćeni posetioci (consent već postavljen): banner = display:none od frame 1.
 *  - Prvi posetioci (pending): banner = vidljiv, ali ne kasni — paint-uje se zajedno
 *    sa ostatkom strane → hero/headline preuzima LCP umesto banner-a.
 *
 * Lighthouse mobile audit (2026-05-11) pre fix-a: banner je LCP element sa 6-7s
 * render delay-om, perf score 69-70 na home + detail. !important je nužan jer
 * inline style="display:flex" na <section> ima specifičnost vise od attribute selector-a.
 */
html:not([data-consent="pending"]) [data-cookie-banner] {
  display: none !important;
}

/* ========== Testimonial slider arrows — button chrome reset & out-of-content pozicija ==========
 *
 * Slider arrows su <button> elementi (Slider.tsx) — browser default daje im
 * `rgb(240, 240, 240)` background koji na svetlim sekcijama izgleda kao
 * "ispranu krem" oko strelice. Reset background/border/padding čisti to.
 *
 * Pozicija: Webflow original ih stavlja na `inset: auto X 0 auto` (bottom-right
 * unutar slidera) — to ih overlay-uje preko poslednje reči testimonijala.
 * Pomeramo `bottom: -50px` da ispadnu ispod slidera. `.testimonial-slider-wrap`
 * ima `overflow: visible` pa se vide; `.testimonial-with-slider-section` ima
 * `padding-bottom: 100px` pa imamo prostora ispod bez kolizije sa Newsletter
 * sekcijom.
 */
.testimonial-left-arrow,
.testimonial-right-arrow {
  background: transparent;
  border: 0;
  padding: 0;
  bottom: -50px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  overflow: visible;
  color: #393939;
  transition: color 0.2s ease;
  border-radius: 50%;
}

.testimonial-left-arrow:hover,
.testimonial-right-arrow:hover {
  color: #0c8b51;
}

/* Inner wrapper od Slider.tsx (`.long-arrow-left/right` div) — Webflow ima
   width:52px height:19px line-height:1px koje smetaju kvadratnom 24x24
   chevron+line SVG-u. Resetujemo. */
.testimonial-left-arrow .long-arrow-left,
.testimonial-right-arrow .long-arrow-right {
  width: 24px;
  height: 24px;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: none;
}

/* SVG: kvadratni 24x24, fiksna veličina da ne zavisi od font-size: 40px
   nasleđenog iz .w-slider-arrow-left. */
.testimonial-left-arrow svg,
.testimonial-right-arrow svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Pozicioniranje: original Webflow inset stavlja levu strelicu na right:70px
   (=52+18 gap za stari 52px wide arrow). Sa novom 32x32 strelicom prilagođavamo
   na right:44px (=32+12 gap) da budu uže grupisane. */
.testimonial-left-arrow {
  right: 44px;
}

/* ========== /udzbenik/[slug] detail page layout polish ==========
 *
 * Sa uklanjanjem sidebar-a (related books prebačene u donju slider sekciju),
 * .product-details-with-sidebar je ostao samo wrapper sa flex display ali sa
 * jednim child-om — što daje neravnotežu na širokim ekranima jer content
 * raste na 100% bez gornje granice. Centriramo + ograničavamo na 1100px za
 * readable line-length (CLAUDE.md UX rule line-length 65-75 chars).
 *
 * Vertical rhythm: Webflow defalut 100px section padding je preraskošno za
 * detail page (book + buy box je relativno mali sadržaj). 56px daje tighter
 * feel, ide kroz Apple-Bauer rhythm guideline.
 *
 * Image column: sticky na desktop (≥992px) — kad korisnik skroluje da čita
 * opis/specs, slika ostaje vidljiva (klasičan e-commerce UX pattern). 380px
 * fixed width sa book aspect ratio daje veću "hero" sliku nego Webflow 300px.
 */
.product-details-section {
  padding-top: 48px !important;
  padding-bottom: 56px !important;
}

.product-details-with-sidebar {
  display: block !important;
  max-width: 1100px;
  margin: 0 auto;
}

.product-details-content-wrap {
  grid-column-gap: 56px !important;
}

/* Desktop (≥992px): centriraj info tekst vertikalno sa slikom.
   align-items: center na flex containeru centrira oba child-a vertikalno
   prema visini višeg — ako je content kraći od slike, content seda u
   sredinu visine slike (pa je naslov+cena+CTA na sredini slike vertikalno). */
@media (min-width: 992px) {
  .product-details-content-wrap {
    align-items: center !important;
  }
  .product-thumb-block {
    flex: 0 0 380px !important;
    position: sticky;
    top: 100px;
    align-self: flex-start;
  }
}

.product-content-wrap .product-title h1 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 12px;
}

.product-price-block {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 16px 20px;
  background-color: #f6f7fb;
  border-radius: 10px;
  border-left: 3px solid #0c8b51;
}

.quantity-button-wrapper {
  margin-bottom: 20px;
}

/* ========== Related books slider (/udzbenik/[slug] bottom) ==========
 *
 * Donja sekcija "Možda vam se svidi" — shared Slider sa BookCard child-evima.
 * Responsive 4/3/2/1 kartice per-view kroz CSS varijablu --related-slide-basis.
 * vars cascade kroz parent na slide-ove, media query menja vrednost po
 * breakpoint-u → flex-basis prati bez JS-a.
 *
 * UX/UI principi:
 *   - BELE kartice na light gray (#f6f7fb) section bg = jasna separacija,
 *     "elevated" affordance (klasični e-commerce pattern).
 *   - Hover lift -4px + brand-green shadow tint = taktilni feedback i poziv
 *     na akciju (Apple HIG hover state guideline).
 *   - Brand-green filled arrows kao primary akciona dugmad — vizuelni anchor
 *     i poziv na exploration.
 *   - Section heading hijerarhija: zelena label (eyebrow) → navy H2 title =
 *     pre-attentional čitanje (Gestalt visual hierarchy).
 */
.related-books-section {
  padding-top: 72px;
  padding-bottom: 96px;
  /* Veoma blaga off-white nijansa — kartice su PURE white pa ova suptilna
     razlika daje nežno razdvajanje bez teške trake. Webflow body bg je #fff. */
  background-color: #fafbfc;
}

.related-books-title-wrap {
  margin-bottom: 48px;
  text-align: center;
}

.related-books-heading {
  display: inline-block;
}

.related-books-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0c8b51;
  margin-bottom: 10px;
}

.related-books-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  color: #07294d;
  font-weight: 700;
  margin: 0;
}

.related-books-slider-wrap {
  position: relative;
}

.related-books-slider {
  --related-slide-basis: 100%;
  --related-slide-gap: 20px;
  position: relative;
}

/* Webflow base .w-slider ima height: 300px + .w-slider-mask height: 100% —
   to ograničava layout. Override-ujemo da slider raste sa content-om i da
   flex stretch radi (svaki slide visine = max-content visine). */
/* Slider container — auto height + padding-bottom za prostor strelicama.
   Arrows su position: absolute relativno na slider (Webflow .w-slider ima
   position: relative). Sa padding-bottom: 80 strelice sede ispod slides.
   Mask je samo iznad padding-a (ne ulazi u padding zone).

   `background: transparent` ubija Webflow .w-slider { background: #dddddd }
   (webflow.css:926) — "krem ispran" pravougaonik iza slajdova. */
.related-books-slider {
  height: auto !important;
  padding-bottom: 80px;
  background: transparent !important;
}

/* Mask: clip-uj samo horizontalno (Embla off-screen slides), dozvoli vertikalni
   overflow da hover lift -6px ne odseče vrh kartice. */
.related-books-slider-mask {
  height: auto !important;
  white-space: normal;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-top: -12px;
  margin-bottom: -12px;
}

/* Forsiraj jednake visine — explicit align-items: stretch na Embla container-u
   da svi slide-ovi imaju visinu = najveći. */
.related-books-slider-mask > div {
  align-items: stretch !important;
}

/* Override Webflow .w-slide { height: 100% } koji u flex kontextu kolapsira
   na content height. height: auto + align-self: stretch + min-height na
   container-u zaobilazi to. */
.related-books-slide {
  padding-right: var(--related-slide-gap);
  box-sizing: border-box;
  display: flex;
  height: auto !important;
  align-self: stretch !important;
}

.related-books-slide:last-child {
  padding-right: 0;
}

/* Kartica wrapper — bela pozadina sa border-om i soft shadow.
   Border #eef0f4 + shadow daje "elevated" osećaj na white sekciji.
   Hover: -6px lift + jača senka. `height: 100%` osigurava da sve kartice
   imaju istu visinu u svom redu (varying title length). */
.related-books-slide-inner {
  flex: 1 1 auto;
  width: 100%;
  background-color: #fff;
  border: 1px solid #eef0f4;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(7, 41, 77, 0.04);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.related-books-slide-inner:hover {
  transform: translateY(-6px);
  border-color: rgba(12, 139, 81, 0.2);
  box-shadow: 0 18px 36px rgba(12, 139, 81, 0.14), 0 6px 12px rgba(7, 41, 77, 0.06);
}

/* BookCard fill — sve kartice JEDNAKE VISINE preko flex-column + flex-grow:1
   na course-content. Tako naslov varira u broju linija ali price+CTA blok
   ostaje na bottom-u kartice (margin-top: auto pushuje ga dole). Vizuelno
   sve kartice završavaju na istoj y-koordinati. */
.related-books-slide-inner .book-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
  box-shadow: none;
  border: 0;
}

.related-books-slide-inner .course-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 18px 20px;
}

/* Price + action block push to bottom — sve kartice imaju CTA na istoj
   apsolutnoj poziciji bez obzira na dužinu naslova. */
.related-books-slide-inner .course-rate-action-block {
  margin-top: auto;
  padding-top: 16px;
}

/* Skrij Webflow "#" hash decorator kad nema kategorije — kad je
   .course-cate prazan, sibling .course-cate-label "#" izgleda visi sam. */
.related-books-slide-inner .course-cate-link:has(.course-cate:empty) {
  display: none;
}

/* Course-thumb (BookCard image wrapper) — BELA pozadina (matching kartica),
   image centrirana sa fixed height da sve slike imaju iste dimenzije. */
.related-books-slide-inner .course-thumb {
  background-color: #fff;
  padding: 20px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.related-books-slide-inner .course-thumb img,
.related-books-slide-inner .course-thumb .book-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: auto !important;
  height: 200px !important;
  object-fit: contain !important;
}

/* Arrows: bottom-center pozicija ispod slidera, centrirane horizontalno.
   Brand-green filled circle 48×48, hover invertuje na belu sa zelenim ikon-om. */
.related-books-arrow-left,
.related-books-arrow-right {
  position: absolute;
  top: auto;
  bottom: 0;
  width: 48px !important;
  height: 48px !important;
  background-color: #0c8b51;
  border: 1px solid #0c8b51;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 0;
  overflow: visible;
  padding: 0;
  margin: 0;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.related-books-arrow-left:hover,
.related-books-arrow-right:hover {
  background-color: #fff;
  color: #0c8b51;
  border-color: #0c8b51;
  box-shadow: 0 6px 18px rgba(12, 139, 81, 0.22);
}

.related-books-arrow-left:active,
.related-books-arrow-right:active {
  transform: scale(0.94);
}

/* Centriraj horizontalno — left arrow je 56px levo od centra, right 8px desno.
   48px width + 16px gap = 64px ukupna grupa, centrirana po middle slidera. */
.related-books-arrow-left {
  right: auto;
  left: 50%;
  margin-left: -56px;
}

.related-books-arrow-right {
  right: auto;
  left: 50%;
  margin-left: 8px;
}

.related-books-arrow-left .long-arrow-left,
.related-books-arrow-right .long-arrow-right {
  width: 20px;
  height: 20px;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: none;
}

.related-books-arrow-left svg,
.related-books-arrow-right svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* Mobile (<768): arrows 42×42, kompaktnije */
@media (max-width: 767px) {
  .related-books-arrow-left,
  .related-books-arrow-right {
    width: 42px !important;
    height: 42px !important;
  }
  .related-books-arrow-left {
    margin-left: -50px;
  }
  .related-books-section {
    padding-top: 48px;
    padding-bottom: 64px;
  }
  .related-books-slider-wrap {
    padding-bottom: 64px;
  }
}

/* Responsive slide width sa increased gap-om za vise "vazduha" izmedju kartica */
@media (min-width: 480px) {
  .related-books-slider {
    --related-slide-basis: 50%;
    --related-slide-gap: 20px;
  }
}

@media (min-width: 768px) {
  .related-books-slider {
    --related-slide-basis: 33.333%;
    --related-slide-gap: 28px;
  }
}

@media (min-width: 992px) {
  .related-books-slider {
    --related-slide-basis: 25%;
    --related-slide-gap: 32px;
  }
}

/* ========== Slider dots — vidljivost & styling ==========
 *
 * Webflow originalni dizajn (polovni-udzbenici.webflow.css:2944) hardkoduje
 * `.testimonial-slider-dot { display: none }` — original Webflow sajt je
 * koristio samo strelice + autoplay, bez vidljivih dots. Nakon Embla migracije
 * dots su sad funkcionalni indikator pozicije; korisnik mora moći da vidi
 * koja je trenutna kartica i da klikne na bilo koju.
 *
 * Strategija:
 *   - Display: flex (override Webflow display:none) sa centriranjem.
 *   - Pozicija: bottom-center (auto-margin slider-a) — strelice ostaju u
 *     donjem-desnom uglu (right:0 + right:70px), dots su centrirane u istom
 *     bottom redu. Horizontal overlap nije problem jer su strelice na desnoj
 *     50% širine slidera, dots su 30-50px ukupne širine na sredini.
 *   - Boja: gray-400 (#9ca3af) na svetlim pozadinama; brand-green (#0c8b51)
 *     za aktivni dot, +scale 1.15 za vizuelni emphasis.
 *
 * Scope: testimonial-slider-dot (home) + gallery-slider-dot (/o-nama,
 * /otkup-i-zamena-udzbenika). Slider komponenta uvek dodaje `.w-slider-nav`
 * i `.w-slider-dot` Webflow klase pored variant klase, pa stilovi padaju na
 * iste DOM elemente bez obzira na variant.
 */
.testimonial-slider-dot,
.gallery-slider-dot {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 14px;
  padding: 0;
  bottom: 0;
}

.testimonial-slider-dot .w-slider-dot,
.gallery-slider-dot .w-slider-dot {
  width: 10px;
  height: 10px;
  margin: 0;
  background-color: #9ca3af;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.testimonial-slider-dot .w-slider-dot:hover,
.gallery-slider-dot .w-slider-dot:hover {
  background-color: #6b7280;
}

.testimonial-slider-dot .w-slider-dot.w-active,
.gallery-slider-dot .w-slider-dot.w-active {
  background-color: #0c8b51;
  transform: scale(1.2);
}

/* ========== SkolaLanding — kompaktniji vertikalni ritam izmedju sekcija ==========
 *
 * Webflow base padding na ovim sekcijama (polovni-udzbenici.webflow.css:2491,
 * 3938, 6997, 7225) stvara prevelik prazni prostor u sekvenci
 * razred-grid → search → slider:
 *   ≥1280px: 140 + 170 = 310px gap razred→search, 120 + 170 = 290px search→slider
 *   default: 100 + 100 = 200px, 80 + 100 = 180px
 *
 * Scope: `.department-category-section` se pojavljuje SAMO na /osnovna-skola i
 * /srednja-skola (SkolaLanding.tsx). Home, o-nama, otkup ne sadrze tu klasu, pa
 * adjacent sibling selektori ovde NE dotiču ostale .gallery-section instance.
 *
 * Specifičnost: `.department-category-section + .gallery-section` (2 klase) pobedjuje
 * Webflow-ovo `.gallery-section` (1 klasa) bez !important, čak i u @media (min-width:
 * 1280px) bloku.
 */

/* Razred-grid → search */
.department-category-section:has(+ .gallery-section) {
  padding-bottom: 56px;
}
.department-category-section + .gallery-section {
  padding-top: 56px;
  padding-bottom: 56px;
}

/* Search → slider */
.gallery-section + .gallery-section {
  padding-top: 56px;
}

@media (max-width: 991px) {
  .department-category-section:has(+ .gallery-section) {
    padding-bottom: 40px;
  }
  .department-category-section + .gallery-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .gallery-section + .gallery-section {
    padding-top: 40px;
  }
}

@media (max-width: 767px) {
  .department-category-section:has(+ .gallery-section) {
    padding-bottom: 28px;
  }
  .department-category-section + .gallery-section {
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .gallery-section + .gallery-section {
    padding-top: 28px;
  }
}

/* `.serach-paragraf` ima mb:30px (webflow.css:6897). U novom kompaktnijem ritmu
   to je odnos koji izgleda previše labav prema search input-u; smanjujemo da
   paragraf "drži" search bliže sebi. */
.department-category-section + .gallery-section .serach-paragraf {
  margin-bottom: 20px;
}