/* BestBuy konfigurator (docs/modules/bestbuy, N5); main.css se ne menja.
   Boje sajta: teget #1b2e3f, primarna #1764a7 (hover #0f497b), ivica polja #c2d4e5, svetla pozadina #f4f6f7.
   Kartice felni i guma koriste klase liste proizvoda (.product-wrapper, .product-title, .brand-image, .product-img,
   .product-price .price/.old iz main.css); ovde su samo izmene visine i rasporeda. */

.bb-app { position: relative; margin: 1rem 0 2rem; }
.bb-app.bb-loading { opacity: .6; pointer-events: none; }

/* Traka koraka: aktivni korak je teget */
.bb-steps { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 .75rem; counter-reset: none; }
.bb-step-item { flex: 1 1 0; min-width: 80px; padding: .5rem; border-bottom: 3px solid #c2d4e5; color: #6c757d; font-size: .9rem; }
.bb-step-item.done { border-color: #1764a7; color: #1b2e3f; }
.bb-step-item.active { border-color: #1b2e3f; color: #1b2e3f; font-weight: 700; }
.bb-step-no { display: inline-block; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; text-align: center; border-radius: 50%; background: #e9ecef; margin-right: .25rem; }
.bb-step-item.active .bb-step-no { background: #1b2e3f; color: #fff; }

.bb-summary { margin-bottom: 1rem; min-height: 1.25rem; }
.bb-step-title { font-size: 1.35rem; margin-bottom: 1rem; }
.bb-body:focus { outline: none; }
.bb-hidden { display: none !important; }

/* Sezona i kartica vozila (korak 1 i 2) */
.bb-seasons { display: grid; grid-template-columns: 1fr; gap: .75rem; border: 0; padding: 0; margin: 0 0 1rem; }
@media (min-width: 768px) { .bb-seasons { grid-template-columns: 1fr 1fr; } }
.bb-season, .bb-vehicle { display: flex; gap: .75rem; align-items: center; min-height: 72px; padding: .75rem 1rem; margin: 0; border: 2px solid #c2d4e5; background: #fff; cursor: pointer; }
.bb-vehicle { cursor: default; }
.bb-season:hover { border-color: #1764a7; }
.bb-season.active { border-color: #1b2e3f; box-shadow: 0 0 0 1px #1b2e3f; }
.bb-vehicle-img { max-width: 160px; height: auto; }

/* Izbor kartice: radio je sakriven, ali ostaje u tab redosledu; fokus se vidi na celoj kartici */
.bb-card { position: relative; }
.bb-card input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bb-season input[type=radio] { position: static; opacity: 1; width: auto; height: auto; }
.bb-card:focus-within { outline: 3px solid #1764a7; outline-offset: 2px; }

/* Kartice felni i guma: lista proizvoda sajta, ali niza (bez 615 px visine) */
.bb-item { display: flex; }
.bb-app .product-wrapper.bb-card { display: flex; flex-direction: column; width: 100%; height: auto; margin: 0; border: 2px solid #c2d4e5; cursor: pointer; }
.bb-app .product-wrapper.bb-card:hover { border-color: #1764a7; }
.bb-app .product-wrapper.bb-card.active { border-color: #1b2e3f; box-shadow: 0 0 0 1px #1b2e3f; background: #f4f6f7; }
.bb-app .product-wrapper.bb-card.active::after { content: "\2713  Izabrano"; position: absolute; top: 0; right: 0; padding: 2px 10px; background: #1b2e3f; color: #fff; font-size: .75rem; font-weight: 900; text-transform: uppercase; }

.bb-app .product-wrapper .product-title { height: auto; padding: .5rem .75rem 0; }
.bb-app .product-wrapper .brand-image { height: 32px; width: 130px; }
.bb-app .product-wrapper.active .brand-image { opacity: 1; filter: none; }
.bb-brand-text { display: block; font-size: .9rem; font-weight: 900; line-height: 32px; text-transform: uppercase; }
.bb-app .product-wrapper .product-title .name { margin-top: .25rem; }
.bb-app .product-wrapper .product-title .name h3 { font-size: 1.05rem; line-height: 1.25; margin: 0 0 .15rem; overflow-wrap: anywhere; }
.bb-app .product-wrapper .product-title .name p { font-size: .875rem; font-weight: 400; overflow-wrap: anywhere; }
.bb-tags span { display: block; font-size: .8125rem; font-weight: 400; color: #1b2e3f; }
.bb-app .product-wrapper .product-img .image { height: 130px; margin: .25rem 0; }
.bb-app .product-wrapper .product-price { height: auto; margin-top: auto; padding: .5rem .75rem .75rem; }
.bb-app .product-wrapper .product-price .price { font-size: 1.25rem; }
.bb-app .product-wrapper .product-price .old { font-size: 1rem; }
.bb-sub { margin-top: .25rem; font-size: .875rem; }

/* Telefon: slika levo, naziv desno, cena ispod (kartica oko 190 px umesto 330 px) */
@media (max-width: 575.98px) {
    .bb-app .product-wrapper.bb-card { display: grid; grid-template-columns: 104px 1fr; grid-template-areas: "img title" "price price"; column-gap: .5rem; align-items: center; }
    .bb-app .product-wrapper .product-img { grid-area: img; padding-left: .5rem; }
    .bb-app .product-wrapper .product-img .image { height: 96px; }
    .bb-app .product-wrapper .product-title { grid-area: title; align-items: flex-start !important; text-align: left; padding-top: .75rem; }
    .bb-app .product-wrapper .brand-image { align-self: flex-start !important; }
    .bb-app .product-wrapper .product-price { grid-area: price; text-align: left !important; border-top: 1px solid #c2d4e5; }
}

/* Filteri i polja: padajuce liste kao u pretrazi guma (SumoSelect desktop, nativni select telefon) */
.bb-app .page-form { margin-top: .5rem; margin-bottom: .5rem; }
.bb-app .form-group { margin-bottom: 1.25rem; }
.bb-app .form-group > label { font-weight: 700; font-size: .875rem; color: #1b2e3f; margin-bottom: .35rem; }
.bb-app .SumoSelect.disabled > .CaptionCont { border: 1px solid #e3e8ed; background: #f4f6f7; }
.bb-chips .btn { margin: 0 .25rem .5rem 0; min-height: 44px; padding-left: 1.25rem; padding-right: 1.25rem; }

/* Sekundarno dugme = .btn-light sajta (belo, teget tekst, na hover teget) sa tegetnom ivicom */
.bb-app .btn.bb-btn-secondary, .bb-app .bb-more { border-color: #1b2e3f !important; min-height: 48px; }

/* Navigacija; na telefonu lepljiva traka dole */
.bb-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.bb-nav .bb-next { min-width: 160px; min-height: 48px; }
@media (max-width: 767.98px) {
    .bb-app { padding-bottom: 72px; }
    .bb-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; margin: 0; padding: .5rem 1rem; background: #fff; box-shadow: 0 -2px 8px rgba(0, 0, 0, .12); }
    .bb-step-item { font-size: 0; min-width: 0; }
    .bb-step-item .bb-step-no { font-size: .85rem; }
    .bb-step-item.active { font-size: .85rem; }
}

/* Pregled: vozilo, felne, gume sa slikom (telefon: slika levo; od 768 px: slika iznad teksta) */
.bb-sumcard { height: 100%; align-items: center; padding: .75rem; border: 2px solid #c2d4e5; background: #fff; }
.bb-sumimg { flex: 0 0 96px; width: 96px; height: 96px; margin-right: .75rem; }
.bb-sumimg img { width: 100%; height: 100%; object-fit: contain; }
.bb-sumtext { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 768px) { .bb-sumimg { width: 100%; height: 130px; margin: 0 0 .5rem; } .bb-sumtext { text-align: center; } }
.bb-review td { vertical-align: middle; }
.bb-actions .btn { min-height: 44px; }
.bb-empty .btn-link { vertical-align: baseline; }

/* Sportske felne: polje iznad liste (okvir i pozadina kao ostala polja), oznaka na kartici, dugmad prozora */
.bb-sport-box { margin: 0 0 1rem; padding: .75rem 1rem; border: 1px solid #c2d4e5; background: #f4f6f7; }
.bb-sport-box .custom-control-label { cursor: pointer; font-weight: 700; padding: .15rem 0; }
.bb-sport-box .custom-control { min-height: 2rem; }
.bb-sport-box .custom-control-input:disabled ~ .custom-control-label { cursor: not-allowed; }
.bb-badge-sport { position: absolute; top: 0; left: 0; z-index: 1; padding: 2px 10px; background: #1764a7; color: #fff; font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.bb-sport-footer .btn { min-height: 48px; }
@media (max-width: 575.98px) {
    /* dugmad pune sirine; primarno gore (u HTML-u je "Odustani" prvo, column-reverse okrece redosled) */
    .bb-sport-footer { flex-direction: column-reverse; align-items: stretch; }
    .bb-sport-footer .btn { width: 100%; margin: .25rem 0; }
}
/* Dugme "Dalje" ispod izabrane kartice (kolona je flex: kartica i dugme jedno ispod drugog) */
.bb-item { flex-direction: column; }
.bb-card-next { flex: 0 0 auto; min-height: 44px; font-weight: 700; }
.bb-item > .bb-card { flex: 1 1 auto; }