/*
  DemoShop — PWA sloj (offline traka + instalacija).

  Sve je ADITIVNO i vezano za klase koje postoje samo u PWA kontekstu.
  Kada je veza u redu i aplikacija nije instalabilna, nijedno pravilo
  odavde ne utice na prihvaceni V120.12.5 izgled.
*/

/* ---------------- offline traka ---------------- */
.pwa-offline-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #12303a;
  color: #fff;
  font-size: .92rem;
  line-height: 1.4;
  box-shadow: 0 -4px 18px rgba(18, 48, 58, .28);
}
.pwa-offline-banner[hidden] { display: none; }

.pwa-offline-dot {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ff6b6b;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, .25);
}

/*
  Kada nema mreze, brojevi koji su ostali na ekranu od ranije NE SMEJU da
  izgledaju kao aktuelna istina. Prigusuju se i dobijaju eksplicitnu
  napomenu — nijedna cena se ne brise (to bi delovalo kao kvar), ali se
  jasno oznacava da nije potvrdjena.
*/
body.is-offline #price,
body.is-offline #priceWithVat,
body.is-offline .cart-item-price,
body.is-offline .cart-summary,
body.is-offline .cell-price,
body.is-offline .card-price,
body.is-offline .card-price-vat {
  opacity: .45;
  filter: grayscale(1);
}

body.is-offline #price::after {
  content: " · nije aktuelno";
  font-size: .72em;
  font-weight: 600;
  color: #b23b3b;
  white-space: nowrap;
}

body.is-offline #priceQualifier {
  color: #b23b3b;
}

/* traka zauzima dno ekrana — sadrzaj ne sme da zavrsi ispod nje */
body.is-offline { padding-bottom: 64px; }

/* ---------------- instalacija ---------------- */
.pwa-install-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 24px);
  padding: 8px 10px 8px 14px;
  background: #fff;
  border: 1px solid #d7e7e6;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(18, 48, 58, .16);
  font-size: .92rem;
}

/* offline traka ima prednost na dnu ekrana */
body.is-offline .pwa-install-bar { bottom: 78px; }

.pwa-install-action {
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  background: #21b5c9;
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.pwa-install-action:hover { background: #168fa4; }

.pwa-install-close {
  border: 0;
  background: transparent;
  color: #5b7683;
  font-size: 1.25rem;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}
.pwa-install-close:hover { color: #12303a; }

.pwa-install-hint { padding: 10px 8px 10px 14px; color: #12303a; }
.pwa-install-hint span { line-height: 1.35; }

@media (max-width: 420px) {
  .pwa-install-bar { left: 12px; right: 12px; transform: none; max-width: none; justify-content: space-between; }
}

/* ---------------- footer: DemoShop aplikacija ---------------- */
/*
  Vidljivost iskljucivo preko KLASE, nikad preko `hidden` atributa:
  autorska display pravila pobedjuju UA [hidden], pa bi se sekcija mogla
  prikazati i onda kada instalacija nije moguca. Osnovno stanje je
  skriveno; pwa.js dodaje .is-available tek kada dugme stvarno moze
  nesto da uradi. Time mrtvog dugmeta nema ni u jednom pregledacu.
*/
.footer-app { display: none; }

.footer-app.is-available {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 30px;
  padding-top: 22px;
  padding-bottom: 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.footer-app-copy { min-width: 0; }

/* ista tipografija kao ostali footer naslovi */
.footer-app-copy h2 {
  margin: 0 0 6px;
  color: #f8fbfa;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.footer-app-copy p {
  margin: 0;
  color: #aebdb9;
  font-size: 12px;
  line-height: 1.65;
}

.footer-app-action {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
}

.footer-app-button {
  border: 1px solid rgba(124, 224, 209, .45);
  border-radius: 999px;
  padding: 10px 20px;
  background: transparent;
  color: #7ce0d1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
  white-space: nowrap;
}
.footer-app-button:hover {
  border-color: #91e668;
  background: rgba(124, 224, 209, .08);
  color: #91e668;
}

.footer-app-hint {
  margin: 0;
  max-width: 320px;
  color: #aebdb9;
  font-size: 11.5px;
  line-height: 1.6;
}
.footer-app-hint[hidden] { display: none; }

@media (max-width: 650px) {
  .footer-app.is-available { align-items: flex-start; flex-direction: column; gap: 14px; }
  .footer-app-button { width: 100%; }
  .footer-app-hint { max-width: none; }
}