/*
 * Stran "Izpostavitev oglasov" (page-top-si.php, promote-mockups-functions.php): ponazoritve.
 * Osnova (.bzm, .bzm-art, --u, kartica, iskalno polje, izpostavljen oglas, seznam) je v
 * css/business-mockups.css; mere so v enotah izvirnih slik (--u = 1/1080 širine, uvod 1/1024).
 */

/* Telefon: ponazoritve čez celo širino stolpca, sicer je besedilo v njih predrobno */
@media only screen and (max-width: 768px) {
  .element-ogl .bzm.bzp {
    width: 100%;
    margin: 20px 0;
  }
}

/* Značka Premium v merilu ponazoritve: kot .top-oglas.premium-badge v style-child.css */
.bzp-pill {
  display: inline-flex;
  align-items: center;
  flex: none;
  background: rgba(17, 17, 17, .78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, .14), 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .18);
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.bzp-gem {
  flex: none;
  fill: #f9be01;
}

.bzp-pill-feat {
  height: calc(46 * var(--u));
  gap: calc(8 * var(--u));
  padding: 0 calc(22 * var(--u)) 0 calc(16 * var(--u));
  font-size: calc(22 * var(--u));
}

.bzp-pill-feat .bzp-gem {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
}

.bzp-pill-card {
  position: absolute;
  left: calc(8 * var(--u));
  top: calc(8 * var(--u));
  height: calc(24 * var(--u));
  gap: calc(4 * var(--u));
  padding: 0 calc(9 * var(--u)) 0 calc(7 * var(--u));
  font-size: calc(12 * var(--u));
}

.bzp-pill-card .bzp-gem {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}

/* Uvod: kartica oglasa z oznako Premium oglas namesto gumba do trgovine */
.bzm-intro .bzp-intro-btn {
  gap: calc(10 * var(--u));
  background: #151515;
  font-weight: 600;
}

.bzp-intro-btn .bzp-gem {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
}

/* Iskanje: izpostavljen oglas nad rednimi zadetki */
.bzm .bzp-search-feat {
  border: calc(3 * var(--u)) solid #000;
}

/* Vstopna stran: vrtiljak Premium oglasov nad zadnjimi oglasi */
.bzp-home-card {
  left: calc(55 * var(--u));
  top: calc(30 * var(--u));
  width: calc(970 * var(--u));
  height: calc(1100 * var(--u));
}

.element-ogl .bzm .bzp-home-logo {
  left: calc(108 * var(--u));
  top: calc(57 * var(--u));
  width: calc(90 * var(--u));
  height: calc(90 * var(--u));
}

.element-ogl .bzm .bzp-home-hero {
  position: absolute;
  left: calc(108 * var(--u));
  top: calc(180 * var(--u));
  width: calc(864 * var(--u));
  height: calc(300 * var(--u));
  object-fit: cover;
  border-radius: calc(10 * var(--u));
}

.bzp-home-h {
  position: absolute;
  left: calc(108 * var(--u));
  font-size: calc(26 * var(--u));
  font-weight: 700;
  white-space: nowrap;
}

.bzp-home-h1 {
  top: calc(515 * var(--u));
}

.bzp-home-h2 {
  top: calc(800 * var(--u));
  color: #c9d1db;
}

.bzm .bzp-home-row {
  position: absolute;
  left: calc(108 * var(--u));
  display: flex;
  gap: calc(23 * var(--u));
}

.bzp-home-row1 {
  top: calc(569 * var(--u));
}

.bzp-home-row2 {
  top: calc(845 * var(--u));
}

.bzm .bzp-home-row li {
  width: calc(198 * var(--u));
  min-width: 0;
}

.bzp-home-media {
  position: relative;
  display: block;
}

.element-ogl .bzm .bzp-home-media img {
  width: calc(198 * var(--u));
  height: calc(157 * var(--u));
  object-fit: cover;
  border-radius: calc(8 * var(--u));
}

.bzp-home-row b, .bzp-home-row i {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bzp-home-row b {
  margin-top: calc(11 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 700;
}

.bzp-home-row i {
  margin-top: calc(4 * var(--u));
  font-size: calc(15 * var(--u));
}

.bzp-home-row2 b, .bzp-home-row2 i {
  color: #c9d1db;
}

/* Povpraševanja kupcev: oblački sporočil */
.element-ogl .bzm .bzp-chat-avatar {
  position: absolute;
  width: calc(146 * var(--u));
  height: calc(146 * var(--u));
  object-fit: cover;
  border-radius: 50%;
}

.element-ogl .bzm .bzp-chat-a1 { left: calc(95 * var(--u)); top: calc(249 * var(--u)); }
.element-ogl .bzm .bzp-chat-a2 { left: calc(839 * var(--u)); top: calc(467 * var(--u)); }
.element-ogl .bzm .bzp-chat-a3 { left: calc(95 * var(--u)); top: calc(685 * var(--u)); }

.bzp-chat-bubble {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(60 * var(--u));
  background: #42a1fb;
  border-radius: calc(90 * var(--u));
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: calc(36 * var(--u));
  line-height: 1.35;
  text-align: center;
}

.bzp-chat-bubble span {
  text-wrap: balance;
}

.bzp-chat-bubble::after {
  content: '';
  position: absolute;
  bottom: calc(-16 * var(--u));
  width: calc(54 * var(--u));
  height: calc(46 * var(--u));
  background: #42a1fb;
}

.bzp-chat-b1, .bzp-chat-b3 {
  left: calc(275 * var(--u));
  width: calc(710 * var(--u));
  height: calc(190 * var(--u));
}

.bzp-chat-b1 {
  top: calc(196 * var(--u));
  transform: rotate(-3deg);
}

.bzp-chat-b3 {
  top: calc(692 * var(--u));
  transform: rotate(3deg);
}

.bzp-chat-b1::after, .bzp-chat-b3::after {
  left: calc(4 * var(--u));
  clip-path: polygon(0 100%, 45% 0, 100% 40%);
}

.bzp-chat-b2 {
  left: calc(95 * var(--u));
  top: calc(460 * var(--u));
  width: calc(710 * var(--u));
  height: calc(160 * var(--u));
}

.bzp-chat-b2::after {
  right: calc(4 * var(--u));
  clip-path: polygon(100% 100%, 55% 0, 0 40%);
}

/* Moji oglasi: oglas z gumbom za izpostavitev */
.bzp-dash-card {
  left: calc(185 * var(--u));
  top: calc(108 * var(--u));
  width: calc(715 * var(--u));
  height: calc(930 * var(--u));
}

.element-ogl .bzm .bzp-dash-logo {
  left: calc(238 * var(--u));
  top: calc(152 * var(--u));
  width: calc(90 * var(--u));
  height: calc(90 * var(--u));
}

.bzp-dash-search {
  left: calc(373 * var(--u));
  top: calc(162 * var(--u));
  width: calc(435 * var(--u));
  height: calc(70 * var(--u));
}

.bzp-ghost {
  position: absolute;
  left: calc(212 * var(--u));
  width: calc(658 * var(--u));
  height: calc(90 * var(--u));
  background: #e1e5ea;
  border-radius: calc(6 * var(--u));
}

.bzp-ghost-1 { top: calc(286 * var(--u)); }
.bzp-ghost-2 { top: calc(697 * var(--u)); }
.bzp-ghost-3 { top: calc(803 * var(--u)); }
.bzp-ghost-4 { top: calc(908 * var(--u)); }

.bzp-dash-feat {
  left: calc(108 * var(--u));
  top: calc(401 * var(--u));
  width: calc(862 * var(--u));
  height: calc(272 * var(--u));
  padding-left: calc(22 * var(--u));
}

.bzp-actions {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--u));
  margin-top: calc(12 * var(--u));
}

.bzp-act {
  display: inline-flex;
  align-items: center;
  height: calc(44 * var(--u));
  padding: 0 calc(26 * var(--u));
  background: #b3b3b3;
  border-radius: 999px;
  color: #fff;
  font-size: calc(18 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
}

.bzp-act-main {
  height: calc(78 * var(--u));
  background: #000;
  font-size: calc(21 * var(--u));
}