/* SVB Category Pills - frontend styles */

.svbcp-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 28px 0;
    padding: 0;

    /* Safety - ako bi neki theme stavio pills u flex kontejner, ovo forsira
       da pills uzmu pun red i ne dele red sa drugim elementima. */
    flex: 0 0 100%;
    clear: both;
}

.svbcp-heading {
    /* Section label iznad pills reda - kao "Alla Kategorier" na partykungen. */
    margin: 0 0 12px 0;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: #000;
}

.svbcp-row {
    /* Drži scroller + strelice. position: relative je tu da strelice
       (position: absolute) centriraju vertikalno samo na scroller,
       a ne na celokupan wrap koji uključuje i heading. */
    position: relative;
}

.svbcp-scroller {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /* KLJUČNO za mobile: eksplicitno dozvoljava horizontal pan gest.
       Bez ovoga neki browseri (i xStore parent stilovi) mogu da blokiraju
       horizontalni swipe ako prvo registruju vertikalni gest. */
    touch-action: pan-x;

    padding: 4px 0;

    /* Sakrij scrollbar - pills imaju strelice na desktopu i prirodan swipe na mobile. */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
}
.svbcp-scroller::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari */
}

/* ----- Fade gradient samo na desnoj ivici ----- */
/* Asimetricni design: fade postoji SAMO na desnoj strani kao discovery hint
   ("ima jos sadrzaja desno, skroluj"). Levi fade je namerno uklonjen - kada
   korisnik vec skroluje desno, zna da moze da se vrati nazad (strelica + sam
   gest), pa levi fade postaje vizuelni sum bez funkcionalne vrednosti.

   JS dodaje klasu svbcp-has-right kada postoji skriveni sadrzaj desno.
   Sirina fade-a je 32px (10% manje od originalnih 36px) - dovoljno za
   vizuelni signal, ali bez gutanja sadrzaja zadnjeg pill/tile-a. */
.svbcp-wrap.svbcp-has-right .svbcp-scroller {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
}

.svbcp-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: #ececec;
    border: none;
    border-radius: 999px;
    color: #000;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.svbcp-pill:hover,
.svbcp-pill:focus {
    background: #e0e0e0;
    color: #000;
    text-decoration: none;
    outline: none;
}

.svbcp-pill:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

.svbcp-pill-name {
    font-weight: 600;
}

.svbcp-pill-count {
    /* Badge bez border-a - kontrast definiše bela pozadina protiv sivog pill-a. */
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    background: #fff;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #000;
    line-height: 1.4;
}
.svbcp-pill:hover .svbcp-pill-count,
.svbcp-pill:focus .svbcp-pill-count {
    background: #fff;
}

/* ============================================================
 * IMAGE TILES MODE (.svbcp-wrap--tiles)
 * ============================================================
 * Aktivira se per-category preko term meta `svbcp_display_style = tiles`.
 * Alternativa pills-ima: slika 100px sa rounded corners + ime ispod,
 * kao Walmart subcategory navigation. Koristi isti scroller, strelice,
 * fade gradient - menja se samo template item-a.
 */

.svbcp-tile {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 110px;
    gap: 8px;
    text-decoration: none;
    color: #000;
}

.svbcp-tile:hover,
.svbcp-tile:focus {
    text-decoration: none;
    color: #000;
    outline: none;
}

.svbcp-tile-image {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    overflow: hidden;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.svbcp-tile:hover .svbcp-tile-image,
.svbcp-tile:focus .svbcp-tile-image {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.svbcp-tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Fallback bez slike - inicijal slova u sivom kvadratu. */
.svbcp-tile-image--placeholder {
    background: #ececec;
}
.svbcp-tile-initial {
    font-size: 36px;
    font-weight: 700;
    color: #999;
    line-height: 1;
}

.svbcp-tile-name {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    color: #000;
    /* Maks 2 reda sa ellipsis ako je ime predugačko. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.svbcp-tile:hover .svbcp-tile-name,
.svbcp-tile:focus .svbcp-tile-name {
    color: #000;
}

/* Veći gap između tile-ova nego pills-a (slike su veće, treba im više vazduha). */
.svbcp-wrap--tiles .svbcp-scroller {
    gap: 16px;
}

/* Mobile (ispod desktop breakpoint-a 1024px): tešnji gap između tile-ova.
   Slike su 100px - na uskom mobilnom viewport-u 16px gap troši previše
   horizontalnog prostora i daje samo ~2-3 vidljiva tile-a po redu.
   9px daje gušći raspored bez da tile-ovi izgledaju zalepljeni. */
@media (max-width: 1023px) {
    .svbcp-wrap--tiles .svbcp-scroller {
        gap: 9px;
    }
}

/* ----- Strelice (desktop only) ----- */

.svbcp-arrow {
    display: none;                  /* default skriveno; JS pali kada ima overflow */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: #bd3452;            /* SB brand pink */
    border: none;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    transition: background 0.15s ease, box-shadow 0.15s ease;

    /* Flex centering za glyph (‹ / ›) - precizniji od
       line-height alignment-a jer ovi entiteti imaju manju visinu od
       standardnih glifova, pa bi sa pukim line-height bili optički
       gornje pomereni. Display je `none` po defaultu pa flex properties
       ne važe; media query niže overrideje na `display: flex` da
       centriranje stupi na snagu. */
    align-items: center;
    justify-content: center;
}
.svbcp-arrow:hover {
    background: #a32a46;            /* ~12% tamniji od bd3452 */
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}
.svbcp-arrow-left  { left: -10px; }
.svbcp-arrow-right { right: -10px; }

/* Strelice se prikazuju samo na desktopu i samo kada JS postavi data-visible="true".
   Display je `flex` (ne `block`) da align-items/justify-content centriraju glyph. */
@media (min-width: 1024px) {
    .svbcp-arrow[data-visible="true"] {
        display: flex;
    }
}