/* Vodlix dynamic plan picker — shared styles.
 *
 * Extends the vocabulary the DS compare pages already use (.calcwrap,
 * .calcform, .calccard, .calc-verdict) rather than inventing a second one, so
 * a page that adopts the picker keeps the look it already had. Every colour is
 * a DS token with a fallback, so this file also renders on a page that has not
 * finished its DS migration.
 */
/* The wrapper is the query container. A container query cannot match the
   element that declares the container, so .vpick's own two-column rule has to
   be answered by something above it — that was the bug that shipped the form
   full-width on desktop. */
.vpick-wrap { container-type: inline-size; }
.vpick { display: grid; gap: 18px; align-items: start; }
@container (min-width: 900px) {
  .vpick { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; }
}
/* Fallback for a page that drops the wrapper. */
@supports not (container-type: inline-size) {
  @media (min-width: 900px) {
    .vpick { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; }
  }
}

.vpick__form {
  display: grid; gap: 14px; padding: 20px; min-width: 0;
  background: var(--surface, #fff); border: 1px solid var(--line, #e6e6ea);
  border-radius: var(--r-card, 16px);
}
.vpick__form label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 13.5px; font-weight: 600;
}
.vpick__form label b { font-variant-numeric: var(--num, tabular-nums); }
.vpick__form input[type="number"] {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--ink, #14141a);
  background: var(--bg, #fbfbfc); border: 1px solid var(--line, #e6e6ea);
  border-radius: 10px;
}
/* A 5px track with a 20px thumb is not a tap target. 24px of grabbable height
   at every width; the ds-polish survey measured the old sliders at 5px.
   The DS resets inputs with appearance:none, which also erases the native
   track, so track and thumb are drawn explicitly rather than left to
   accent-color. */
.vpick__form input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 24px; padding: 0; margin: 0;
  background: transparent; border: 0; accent-color: var(--brand, #E61D2C);
  cursor: pointer;
}
.vpick__form input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: var(--line, #e6e6ea);
}
.vpick__form input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px; background: var(--line, #e6e6ea);
}
.vpick__form input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
  background: var(--brand, #E61D2C); border: 2px solid var(--surface, #fff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
}
.vpick__form input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand, #E61D2C); border: 2px solid var(--surface, #fff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
}
.vpick__form input[type="range"]:focus-visible {
  outline: 2px solid var(--brand, #E61D2C); outline-offset: 3px;
}

/* What you need. These drive the plan choice, so they are the control that
   matters most on the card — not a footnote under the slider. */
.vpick__needs { display: grid; gap: 8px; }
.vpick__needs > span {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint, #71717c);
}
.vpick__checks { display: flex; flex-wrap: wrap; gap: 8px; }
.vpick__check {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 13px; min-height: 40px; font-size: 13px; font-weight: 500;
  background: var(--bg, #fbfbfc); border: 1px solid var(--line, #e6e6ea);
  border-radius: 999px;
}
.vpick__check input { width: auto; margin: 0; accent-color: var(--brand, #E61D2C); }
.vpick__check:has(input:checked) {
  border-color: var(--brand, #E61D2C); background: var(--brand-tint, #fdeceb);
  color: var(--accent-ink, #8a2b2c);
}

.vpick__res { display: grid; gap: 14px; min-width: 0; }
.vpick__cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
@container (min-width: 520px) { .vpick__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.vpick__card {
  border: 1px solid var(--line, #e6e6ea); border-radius: var(--r-card, 16px);
  background: var(--surface, #fff); padding: 18px 16px; text-align: center; min-width: 0;
}
.vpick__card--us { border-color: var(--brand, #E61D2C); background: var(--brand-tint, #fdeceb); }
.vpick__card small {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint, #71717c); margin-bottom: 6px;
}
.vpick__card--us small { color: var(--accent-ink, #8a2b2c); }
.vpick__card b {
  display: block; font-size: 28px; font-weight: 700; line-height: 1;
  letter-spacing: var(--h-tracking, -.01em); font-variant-numeric: var(--num, tabular-nums);
}
.vpick__card b span { font-size: 13px; font-weight: 500; color: var(--faint, #71717c); letter-spacing: 0; }
.vpick__card p { font-size: 12px; color: var(--faint, #71717c); margin-top: 8px; line-height: 1.45; }
/* A quote-only tier gets no invented number and no false precision. */
.vpick__card.is-quote b { font-size: 20px; color: var(--faint, #71717c); }

.vpick__plan {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent-ink, #8a2b2c); margin-bottom: 8px;
}

.vpick__verdict {
  background: var(--banner-bg, #14141a); color: var(--banner-ink, #f4f4f6);
  border-radius: var(--r-card, 16px); padding: 16px 18px; text-align: center;
  font-size: 14px; font-weight: 600; line-height: 1.55;
}
.vpick__verdict strong { color: #fff; }
.vpick__verdict .calc-save { color: #7CFFB2; }
.vpick__verdict a { color: #fff; text-decoration: underline; }

.vpick__note {
  font-size: 12px; color: var(--faint, #71717c); line-height: 1.6;
  margin-top: 14px; max-width: 80ch;
}
.vpick__note a { color: var(--sub, #55555f); }

/* Phones: a thumb needs 44px (owner, 2026-09-10: mobile 100%). The input
   box grows; the 6px track stays centred in it and the thumb's -8px offset
   still lands on the track. The pill checkboxes grow from 40 to 44 too.
   Last in the file on purpose: same specificity as .vpick__check above. */
@media (max-width: 859px) {
  .vpick__form input[type="range"] { height: 44px; }
  .vpick__check { min-height: 44px; }
}