/* FABLE — stran »Izpostavitev oglasov« V1 (page-top-si.php, p87; v produkciji od 2. 11. 2026). Gradniki strani O nas V1
   (css/thatbike.css, css/thatbike-v1.css, css/onas-v1.css); tu so samo deli te strani (.tp-*). Barve po CGP thatbike:
   Ink #0A0A0A, Paper, sivine, lime samo kot signal (oznaka Premium, poudarjena cena, odgovor prodajalca). */

/* ---------- oznaka Premium: kot na vseh straneh (css/dark-mode.css .top-oglas.premium-badge) ---------- */
.tb .tp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 9px;
  border-radius: 100px;
  background: rgba(10, 10, 10, .82);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
  white-space: nowrap;
}

.tb .tp-badge::before {
  content: "";
  flex: 0 0 auto;
  height: 11px;
  aspect-ratio: 55.76 / 52;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55.76 52'%3E%3Cpath d='M51.76 4 L4 48 L4 4 Z' fill='%23D4FF3A' stroke='%23D4FF3A' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- uvod ---------- */
.tb .tp-hero-h1 {
  margin: 0;
  font-family: var(--tb-display);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.034em;
  color: #fff;
  text-wrap: balance;
}

.tb .tp-hero-h1 + .ab-hero-p { margin-top: 24px; }

.tb .tp-hero-actions .ab-out {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.tb .tp-hero-actions .ab-end-btn { white-space: nowrap; }

.tb .tp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: 36px;
}

/* oglas Premium pred dvema rednima oglasoma (sivi obrisi zadaj): »izstopite iz množice« */
.tb .tp-hero-vis {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 12px 0;
}

.tb .tp-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(300px, 80%);
  height: 86%;
  border-radius: 18px;
  background: #1C1C1C;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.tb .tp-ghost-1 { transform: translate(-92%, -50%) rotate(-8deg); }
.tb .tp-ghost-2 { transform: translate(-8%, -50%) rotate(7deg); }

.tb .tp-card {
  z-index: 1;
  box-shadow: 0 0 0 4px #D4FF3A, 0 24px 60px rgba(0, 0, 0, .55);
}

.tb .tp-media {
  position: relative;
  margin-top: 0;
}

.tb .tp-media .tp-badge {
  position: absolute;
  top: 12px;
  left: 12px;
}

/* ---------- zakaj Premium: samo naslov nad pasom predstavitev ---------- */
.tb .tp-why { padding-bottom: 72px; text-align: center; }
.tb .tp-why .tb-p { max-width: 40em; display: block; margin-left: auto; margin-right: auto; }

/* ---------- plošče: skupne kartice ---------- */
.tb .tp-how .tb-tile-vis {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tb .tp-how img { mix-blend-mode: multiply; }

/* brez preliva mozaika s strani O nas (velja za prvo ploščo) */
.tb .tp-how .tb-tile-a .tb-tile-vis::after { display: none; }

/* iskanje: zadetki, prvi je Premium (večji, bel, obroba Volt Lime), redni so zbledeli */
.tb .tp-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 78%;
}

.tb .tp-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 11px 16px;
  border-radius: 12px;
  background: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  color: #0A0A0A;
}

.tb .tp-search svg { width: 18px; height: 18px; color: #767676; }

.tb .tp-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: 14px;
  background: #FFFFFF;
  color: #0A0A0A;
  opacity: .5;
}

.tb .tp-row.is-top {
  position: relative;
  z-index: 1;
  padding: 14px;
  opacity: 1;
  transform: scale(1.06);
  box-shadow: 0 0 0 3px #D4FF3A, 0 24px 40px -12px rgba(0, 0, 0, .6);
}

.tb .tp-row-media {
  flex: 0 0 28%;
  border-radius: 9px;
  overflow: hidden;
  background: linear-gradient(180deg, #F2F2F3 0%, #DCDCDF 100%);
}

.tb .tp-row-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.tb .tp-row-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.tb .tp-row-body .tp-badge { margin-bottom: 4px; font-size: 11.5px; padding: 3px 9px 3px 8px; }
.tb .tp-row-body .tp-badge::before { height: 9px; }

.tb .tp-row-t { font-size: 15px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tb .tp-row-p { font-size: 15px; font-weight: 600; }
.tb .tp-row-w { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #767676; }
.tb .tp-row-w .tb-flag { width: 14px; height: 14px; }

/* domača stran: brskalnik v malem, pas Premium oglasov svetel, najnovejši oglasi zbledeli */
.tb .tp-home {
  display: flex;
  flex-direction: column;
  width: 84%;
  padding: 16px 16px 20px;
  border-radius: 14px;
  background: #FFFFFF;
  color: #0A0A0A;
  box-shadow: 0 30px 50px -16px rgba(0, 0, 0, .7);
}

.tb .tp-home-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ececf0;
}

.tb .tp-home-logo { width: 72px; height: auto; margin-right: auto; mix-blend-mode: normal; }
.tb .tp-home-bar i { width: 18px; height: 6px; border-radius: 3px; background: #E4E4E7; }

.tb .tp-home-h {
  margin: 14px 0 8px;
  font-size: 14px;
  font-weight: 700;
}

.tb .tp-home-h-new { opacity: .35; }

.tb .tp-home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tb .tp-home-grid.is-top {
  margin: 0 -8px;
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 0 0 3px #D4FF3A;
}

.tb .tp-home-grid.is-new { opacity: .35; }

.tb .tp-home-card { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.tb .tp-home-media {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #F2F2F3 0%, #DCDCDF 100%);
}

.tb .tp-home-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.tb .tp-home-media .tp-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  gap: 4px;
  padding: 2px 7px 2px 6px;
  font-size: 10px;
}

.tb .tp-home-media .tp-badge::before { height: 7px; }

.tb .tp-home-p { font-size: 13px; font-weight: 700; }
.tb .tp-home-line { display: block; height: 6px; width: 80%; border-radius: 3px; background: #E4E4E7; }
.tb .tp-home-line-s { width: 50%; }

/* pogovor: sporočila petih različnih kupcev, razmetana levo in desno z rahlimi zasuki, kot da so pravkar prileteli
   (Luka 2. 11.); na desni je začetnica desno od oblačka. Zadnji dve sta neprebrani (pika Volt Lime). */
.tb .tp-chat {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 86%;
}

.tb .tp-msg {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 78%;
}

.tb .tp-msg:nth-child(1) { align-self: flex-start; margin-left: 2%;  transform: rotate(-4deg); }
.tb .tp-msg:nth-child(2) { align-self: flex-end;   margin-right: 0;  transform: rotate(3deg); }
.tb .tp-msg:nth-child(3) { align-self: flex-start; margin-left: 18%; transform: rotate(4deg); }
.tb .tp-msg:nth-child(4) { align-self: flex-end;   margin-right: 8%; transform: rotate(-4deg); }
.tb .tp-msg:nth-child(5) { align-self: flex-start; margin-left: 6%;  transform: rotate(-3deg); }

.tb .tp-msg:nth-child(even) { flex-direction: row-reverse; }

.tb .tp-msg > span {
  padding: 12px 16px;
  border-radius: 18px 18px 18px 6px;
  background: #FFFFFF;
  color: #0A0A0A;
  font-size: 15px;
  line-height: 1.4;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5);
}

.tb .tp-msg:nth-child(even) > span { border-radius: 18px 18px 6px 18px; }

/* portreti kolesarjev s stare strani; zrcaljena slika za drugega kupca z isto fotografijo */
.tb .tp-ava {
  display: block;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #D9D9D9;
}

.tb .tp-ava-alt { transform: scaleX(-1); }

/* ---------- koraki: tri kartice s številko ---------- */
.tb .tp-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-left: 0;
}

.tb .tp-steps .ab-do-card { position: relative; }

.tb .tp-step-n {
  display: block;
  margin-bottom: 20px;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--tb-line);
}

/* ---------- cenik: kartice, najdaljše trajanje temno ---------- */
.tb .tp-prices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}

.tb .tp-price {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 36px 28px 32px;
  border-radius: 16px;
  background: var(--tb-card);
  box-shadow: inset 0 0 0 1px var(--tb-line);
  color: var(--tb-ink);
}

.tb .tp-price-d { font-size: 18px; font-weight: 600; color: var(--tb-body); }
.tb .tp-price-p { margin-top: 6px; font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.tb .tp-price-u { margin-top: 8px; font-size: 15px; color: var(--tb-muted); }

.tb .tp-price.is-best {
  background: #0A0A0A;
  box-shadow: none;
  color: #FFFFFF;
}

.tb .tp-price.is-best .tp-price-d { color: #FFFFFF; }
.tb .tp-price.is-best .tp-price-u { color: #A1A1AA; }

.tb .tp-price-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 11px;
  border-radius: 100px;
  background: #D4FF3A;
  font-size: 13px;
  font-weight: 700;
  color: #0A0A0A;
}


/* ---------- temni način: plošče in kartice ostanejo enake (kot na strani O nas) ---------- */
html[data-theme="dark"] .tb .tp-price.is-best { background: #000000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }

/* ---------- mobilno ---------- */
@media (max-width: 900px) {
  .tb .tp-hero-actions { justify-content: center; }
  .tb .tp-hero-vis { padding: 0 0 8px; }
  .tb .tp-steps { grid-template-columns: 1fr; }
  .tb .tp-prices { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .tb .tp-price { padding: 28px 24px 26px; }
  .tb .tp-price-p { font-size: 40px; }
  .tb .tp-why { padding-bottom: 48px; }
}

@media (max-width: 760px) {
  .tb .tp-results { width: 86%; gap: 6px; }
  .tb .tp-row:last-child { display: none; }   /* četrti zadetek na kvadratni plošči odreže iskalno polje */
  .tb .tp-search { padding: 9px 12px; font-size: 13px; }
  .tb .tp-row { gap: 10px; padding: 7px; }
  .tb .tp-row.is-top { padding: 10px; }
  .tb .tp-row-t, .tb .tp-row-p { font-size: 13px; }
  .tb .tp-row-w { font-size: 11.5px; }
  .tb .tp-home { width: 90%; padding: 12px 12px 14px; }
  .tb .tp-home-h { margin: 10px 0 6px; font-size: 12px; }
  .tb .tp-home-media .tp-badge { font-size: 0; gap: 0; padding: 4px; }
  .tb .tp-home-p { font-size: 11px; }
  .tb .tp-chat { width: 92%; gap: 10px; }
  .tb .tp-msg { max-width: 82%; }
  .tb .tp-msg > span { padding: 9px 12px; font-size: 13px; }
  .tb .tp-ava { width: 26px; height: 26px; }
}

@media (max-width: 560px) {
  .tb .tp-hero-actions .ab-end-btn { width: 100%; justify-content: center; }
}