/* pricing page extras — loaded via jbl_page_start 'styles' opt on /cenik/ + /en/pricing/.
   Only what main.css genuinely lacks: table sub-notes, savings/best-value pills,
   the crossed-out anchor price, checkmark list. */

.price-table-wrap { overflow-x: auto; }
.table-plain th[scope="row"] { vertical-align: top; }

/* On a phone the specification tables were wider than the screen — the speaker's
   "Povezljivost in vhodi" card overflowed by 103 px in Slovenian and 55 px in English,
   because the label column claimed ~200 px and the values contain unbreakable runs like
   "5–11 V/2,7 A". The wrapper scrolls, but nothing says so, so the values read as cut
   off on the page whose own intro says "preveri številke, preden rezerviraš".
   Capping the label column and letting long runs break removes the overflow entirely
   (measured 103 -> 0 and 55 -> 0 at 390 px) and leaves the pricing table unchanged. */
@media (max-width: 480px) {
  .table-plain th[scope="row"] { width: 40%; }
  .table-plain th[scope="row"],
  .table-plain td { overflow-wrap: anywhere; }
}
.price-note {
  display: block;
  font-weight: 400;
  font-size: .85rem;
  color: var(--muted);
  margin-top: .1rem;
}
.price-cell { text-align: right; white-space: nowrap; }
/* Narrow screens: let the cell wrap so the savings pill drops under the price
   instead of pushing the table into a sideways scroll that clips the pills
   (the pills carry the savings story — they must never hide off-screen). */
@media (max-width: 620px) {
  .price-cell { white-space: normal; }
}

/* savings badge ("−20 %") + best-value badge on the week package row */
.tag-save,
.tag-best {
  display: inline-block;
  vertical-align: middle;
  margin-left: .4rem;
  padding: .05rem .55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag-save { color: var(--ok); }
.tag-best { color: var(--accent-deep); }

/* crossed-out "days × base" reference next to the week package price */
.price-was {
  color: var(--muted);
  font-weight: 400;
  font-size: .9em;
  margin-right: .25rem;
}

/* quiet highlight for the best-value row */
.tier-best th,
.tier-best td {
  background: color-mix(in srgb, var(--accent-2) 7%, transparent);
}

.list-check { list-style: none; margin: 0 0 1em; padding: 0; }
.list-check li { position: relative; padding-left: 1.6em; margin-bottom: .5em; }
.list-check li::before {
  content: '\2713';
  position: absolute;
  left: .1em;
  color: var(--ok);
  font-weight: 700;
}

/* ---------- researched candidates (not on offer) ----------
   Deliberately quieter than the rental cards above: no photograph, no price,
   no call to action. The state label reads as "not offered", and its muted
   treatment must not be mistaken for the calendar's "booked" pink. */
.cand-grid {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cand-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  background: none;
  box-shadow: none;
  border: 1px dashed var(--line);
}
.cand-state {
  align-self: flex-start;
  margin: 0 0 .3rem;
  padding: .18em .6em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cand-name { margin: 0; font-size: 1.05rem; }
.cand-kind { margin: 0; color: var(--muted); font-size: .85rem; }
.cand-desc { margin: .4rem 0 0; }
.cand-specs,
.cand-source { margin: .3rem 0 0; color: var(--muted); font-size: .85rem; }
.cand-source { margin-top: auto; padding-top: .5rem; }
.cand-label { font-weight: 600; }
.cand-note { margin: 1.1rem 0 0; color: var(--muted); max-width: 68ch; }