*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
  scroll-padding-top: 20px;
}

body{position: relative;}

@font-face{
  font-family: "Inter Black";
  src: url("/fonts/Inter-Black.ttf") format("truetype");
}

@font-face{
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.ttf") format("truetype");
}

@font-face{
  font-family: "Poppins";
  src: url("/fonts/Poppins-Regular.ttf") format("truetype");
}

h1, h2, h3, h4, h5, h6, a, button{font-family: Inter, sans-serif;}

div, p, b, strong, td, label, input, textarea, select{font-family: Poppins, sans-serif;}

.container{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.bg-white{background-color:#fff;}
.bg-grey{background-color:#f2f5f5;}
.navbar-shadow{box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;}
.padding-left-right{padding:0 20px;}

/* Checkout step indicator (#koraci) je zamenjen deljenim partial-om
   shop/_checkout_steps.phtml (.steps) koji se renderuje direktno u svakom koraku.
   Stilovi za novi stepper se nalaze u redizajn/checkout-common.css. */

/* ============ Shop "balon" (popup poruka) ============
   Marketing dizajn: error-popup.png (source of truth: hostingshopredizajn/hosting —
   user-data.php sekcija .error + user-data.css). Ovde je prenesen u shop klase
   .shop-balon* (ime ".error" izbegnuto jer ga stare shop poruke već koriste).
   JS koji gradi balon: /js/shop-balon.js (funkcija showBalon).
   z-index 9999 — balon mora biti iznad login modala (.login = 10/20), jer se
   može prikazati dok je modal otvoren (npr. "Molimo ulogujte se..."). */
.shop-balon{
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
}

.shop-balon.hidden{display: none;}

.shop-balon-card{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  width: 450px;
  /* Dizajn ima fiksnu sirinu 450px; max-width je samo zastita od
     prelijevanja na veoma uskim ekranima. */
  max-width: calc(100vw - 40px);
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-sizing: border-box;
}

.shop-balon-ikon{
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
}

.shop-balon-ikon svg{
  display: block;
}

.shop-balon-naslov,
.shop-balon-poruka{
  font-size: 16px;
  text-align: center;
  margin: 0;
}

.shop-balon-dugme{
  background-color: #c6168d;
  color: #fff;
  padding: 10px 30px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

/* Subtilan hover — marketing staticni dizajn nema hover stanje,
   ali ostali dugmad u shop-u ga imaju (konzistentnost). */
.shop-balon-dugme:hover{
  background-color: #a81278;
}

@media (max-width: 500px) {
  .shop-balon-card{
    width: 250px;
  }

  .shop-balon-poruka{
    font-size: 14px;
  }
}