/* ============================================================
   VIPMAR · Przygotuj się do podróży — scoped pod .vipmart-trip
   Tokeny i konwencje spójne z .vipmart-guide / .vipmart-faq.
   ============================================================ */
.vipmart-trip{
  --orange:#F37021; --orange-deep:#D75A0E; --orange-soft:rgba(243,112,33,.10);
  --heading:#14213D; --body:rgba(20,33,61,.68); --eyebrow:#F37021; --panel-invert:#14213D;
  --card-bg:#FFFFFF; --card-line:rgba(20,33,61,.09); --card-title:#14213D; --card-body:rgba(20,33,61,.66);
  --icon-bg:rgba(243,112,33,.10); --icon-fg:#F37021;
  --card-shadow:0 2px 4px rgba(11,22,40,.04); --card-hover:0 28px 60px -30px rgba(11,22,40,.35);
  --divider:rgba(20,33,61,.10); --index:rgba(20,33,61,.24); --chip-bg:rgba(20,33,61,.05);
  --field-bg:#FFFFFF; --field-line:rgba(20,33,61,.14);
  --good:#1E7A54; --good-bg:rgba(30,122,84,.08); --warn:#B4451C; --warn-bg:rgba(180,69,28,.07);
}
[data-bs-theme="dark"] .vipmart-trip{
  --heading:#FFFFFF; --body:rgba(255,255,255,.68); --panel-invert:#0B1628;
  --card-bg:rgba(255,255,255,.035); --card-line:rgba(255,255,255,.10); --card-title:#FFFFFF; --card-body:rgba(255,255,255,.66);
  --icon-bg:rgba(243,112,33,.18); --card-shadow:none; --card-hover:0 28px 60px -28px rgba(0,0,0,.9);
  --divider:rgba(255,255,255,.12); --index:rgba(255,255,255,.26); --chip-bg:rgba(255,255,255,.06);
  --field-bg:rgba(255,255,255,.04); --field-line:rgba(255,255,255,.14);
  --good:#5BC49A; --good-bg:rgba(91,196,154,.12); --warn:#F09070; --warn-bg:rgba(240,144,112,.12);
}
.vipmart-trip{max-width:1180px;margin-inline:auto}
.vipmart-trip section{margin-bottom:88px}
.vipmart-trip section:last-child{margin-bottom:0}

.vt-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--eyebrow);margin-bottom:14px}
.vt-eyebrow::before{content:"";width:28px;height:2px;background:var(--eyebrow);display:inline-block}
.vt-title{font-size:clamp(30px,3.8vw,48px);font-weight:700;letter-spacing:-.025em;line-height:1.06;color:var(--heading);margin:0 0 18px;text-wrap:balance}
.vt-title .accent{color:var(--orange)}
.vt-h2{font-size:clamp(26px,3vw,36px)}
.vt-lede{font-size:16px;line-height:1.65;color:var(--body);margin:0;max-width:640px;text-wrap:pretty}
.vt-center{text-align:center}
.vt-center .vt-eyebrow{justify-content:center}
.vt-center .vt-title,.vt-center .vt-lede{margin-inline:auto}
.vt-cta{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;text-decoration:none;padding:14px 28px;border-radius:999px;font-size:13.5px;font-weight:700;width:fit-content;transition:transform .15s,background .15s}
.vt-cta:hover{background:var(--orange-deep);color:#fff;transform:translateY(-2px)}
.vt-cta--ghost{background:transparent;border:1.5px solid rgba(255,255,255,.28);color:#fff}
.vt-cta--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* ── stepper 01–03 ────────────────────────────────────────── */
.vt-stepper{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:26px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.vt-stepper a,.vt-stepper span.vt-stepper__item{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;background:var(--chip-bg);color:var(--body);text-decoration:none;transition:color .15s,background .15s}
.vt-stepper a:hover{color:var(--heading)}
.vt-stepper .is-current{background:var(--orange);color:#fff}
.vt-stepper__n{font-variant-numeric:tabular-nums;opacity:.6}
.vt-stepper .is-current .vt-stepper__n{opacity:.85}
.vt-stepper__sep{color:var(--index)}

/* ── 1. Hero ──────────────────────────────────────────────── */
.vt-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:1px;background:var(--card-line);border:1px solid var(--card-line);border-radius:20px;overflow:hidden}
.vt-hero__main{background:var(--card-bg);padding:44px 40px}
.vt-hero__aside{background:var(--panel-invert);color:#fff;padding:34px;display:flex;flex-direction:column;gap:18px;justify-content:center}
.vt-hero__akicker{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.vt-hero__arow{display:flex;align-items:flex-start;gap:14px}
.vt-hero__aicon{width:44px;height:44px;border-radius:13px;background:rgba(243,112,33,.18);color:var(--orange);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.vt-hero__aicon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vt-hero__alabel{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 4px}
.vt-hero__avalue{font-size:17px;font-weight:700;color:#fff;text-decoration:none;line-height:1.4;display:block}
a.vt-hero__avalue:hover{color:var(--orange)}
.vt-hero__anote{font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.6);margin:0;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.vt-hero__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.vt-pill{display:inline-flex;align-items:center;gap:8px;background:var(--chip-bg);color:var(--body);border-radius:999px;padding:9px 16px;font-size:12.5px;font-weight:700}
.vt-pill svg{width:15px;height:15px;stroke:var(--orange);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:991.98px){.vt-hero{grid-template-columns:1fr}.vt-hero__main{padding:34px 26px}}

/* ── 2. Plan przed wyjazdem (timeline) ────────────────────── */
.vt-plan{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;position:relative}
.vt-plan::before{content:"";position:absolute;left:5%;right:5%;top:26px;border-top:2px dashed var(--divider);display:none}
@media(min-width:992px){.vt-plan::before{display:block}}
@media(max-width:1199.98px){.vt-plan{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}}
@media(max-width:767.98px){.vt-plan{grid-template-columns:1fr}}

/* ── 3. Interaktywna checklista ───────────────────────────── */
.vt-checkhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.vt-progress{flex:0 0 300px;max-width:100%}
.vt-progress__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--index);margin-bottom:8px}
.vt-progress__count{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--heading);font-variant-numeric:tabular-nums}
.vt-progress__track{height:6px;border-radius:999px;background:var(--chip-bg);overflow:hidden}
.vt-progress__bar{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--orange-deep));transition:width .3s}
.vt-progress__reset{margin-top:10px;background:transparent;border:0;padding:0;color:var(--orange);font:800 11px/1 inherit;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.vt-bags{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.vt-bag{background:var(--card-bg);border:1px solid var(--card-line);border-radius:18px;padding:26px 24px;box-shadow:var(--card-shadow)}
.vt-bag__icon{width:44px;height:44px;border-radius:12px;background:var(--icon-bg);color:var(--icon-fg);display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px}
.vt-bag__icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vt-bag h3{font-size:16px;font-weight:700;color:var(--card-title);margin:0 0 4px}
.vt-bag__note{font-size:12.5px;line-height:1.5;color:var(--card-body);margin:0 0 16px}
.vt-bag ul{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--divider);display:grid;gap:2px}
.vt-tick{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;line-height:1.5;color:var(--card-body);cursor:pointer;padding:6px 0;user-select:none}
.vt-tick input{appearance:none;width:19px;height:19px;flex:0 0 auto;margin-top:1px;border:1.5px solid var(--field-line);border-radius:6px;background:var(--field-bg);cursor:pointer;position:relative;transition:background .15s,border-color .15s}
.vt-tick input:checked{background:var(--orange);border-color:var(--orange)}
.vt-tick input:checked::after{content:"";position:absolute;left:5px;top:2px;width:6px;height:10px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(40deg)}
.vt-tick input:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.vt-tick input:checked+span{color:var(--index);text-decoration:line-through}
@media(max-width:1199.98px){.vt-bags{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575.98px){.vt-bags{grid-template-columns:1fr}}

/* ── 4. Dokumenty ─────────────────────────────────────────── */
.vt-docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--card-line);border:1px solid var(--card-line);border-radius:20px;overflow:hidden}
.vt-doc{background:var(--card-bg);padding:28px 26px}
.vt-doc__tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;border-radius:999px;padding:5px 11px;margin-bottom:14px}
.vt-doc__tag--must{background:var(--orange);color:#fff}
.vt-doc__tag--rec{background:var(--chip-bg);color:var(--body)}
.vt-doc h3{font-size:16px;font-weight:700;color:var(--card-title);margin:0 0 8px}
.vt-doc p{font-size:13.5px;line-height:1.6;color:var(--card-body);margin:0}
.vt-doc p+p{margin-top:8px}
@media(max-width:991.98px){.vt-docs{grid-template-columns:1fr}}

/* ── 5. Bagaż: wolno / nie wolno ──────────────────────────── */
.vt-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.vt-rules{background:var(--card-bg);border:1px solid var(--card-line);border-radius:18px;padding:28px 26px;box-shadow:var(--card-shadow)}
.vt-rules__head{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--divider)}
.vt-rules__badge{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.vt-rules__badge svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vt-rules--yes .vt-rules__badge{background:var(--good-bg);color:var(--good)}
.vt-rules--no .vt-rules__badge{background:var(--warn-bg);color:var(--warn)}
.vt-rules__head h3{font-size:17px;font-weight:700;color:var(--card-title);margin:0}
.vt-rules ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.vt-rules li{display:flex;gap:11px;font-size:13.5px;line-height:1.55;color:var(--card-body)}
.vt-rules li::before{content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto;margin-top:7px}
.vt-rules--yes li::before{background:var(--good)}
.vt-rules--no li::before{background:var(--warn)}
.vt-rules b{color:var(--card-title);font-weight:700}
.vt-limits{margin-top:26px;background:var(--field-bg);border:1px solid var(--field-line);border-radius:18px;overflow:hidden}
.vt-limits__bar{padding:14px 22px;border-bottom:1px solid var(--divider);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--index)}
.vt-limits__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.vt-limit{padding:22px;border-right:1px solid var(--divider)}
.vt-limit:last-child{border-right:0}
.vt-limit__v{font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--heading);font-variant-numeric:tabular-nums;display:block;margin-bottom:4px}
.vt-limit__k{font-size:12.5px;line-height:1.5;color:var(--card-body)}
.vt-limits__foot{padding:14px 22px;border-top:1px solid var(--divider);font-size:12.5px;line-height:1.55;color:var(--card-body)}
@media(max-width:991.98px){.vt-split{grid-template-columns:1fr}.vt-limits__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vt-limit:nth-child(2){border-right:0}.vt-limit:nth-child(1),.vt-limit:nth-child(2){border-bottom:1px solid var(--divider)}}
@media(max-width:575.98px){.vt-limits__grid{grid-template-columns:1fr}.vt-limit{border-right:0;border-bottom:1px solid var(--divider)}}

/* ── 6. W drodze ──────────────────────────────────────────── */
.vt-ride{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.vt-card{background:var(--card-bg);border:1px solid var(--card-line);border-radius:16px;padding:26px 24px;box-shadow:var(--card-shadow);transition:transform .3s,box-shadow .3s}
.vt-card:hover{transform:translateY(-5px);box-shadow:var(--card-hover)}
.vt-card__icon{width:44px;height:44px;border-radius:12px;background:var(--icon-bg);color:var(--icon-fg);display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px}
.vt-card__icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vt-card h3{font-size:15.5px;font-weight:700;color:var(--card-title);margin:0 0 8px}
.vt-card p{font-size:13.5px;line-height:1.6;color:var(--card-body);margin:0}
.vt-card a{color:var(--orange);font-weight:700;text-decoration:none}
@media(max-width:991.98px){.vt-ride{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575.98px){.vt-ride{grid-template-columns:1fr}}

/* ── 7. Niezbędnik: Niemcy ────────────────────────────────── */
.vt-know{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--card-line);border:1px solid var(--card-line);border-radius:20px;overflow:hidden}
.vt-know__cell{background:var(--card-bg);padding:28px 26px}
.vt-know__k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin:0 0 10px}
.vt-know__cell h3{font-size:16px;font-weight:700;color:var(--card-title);margin:0 0 8px;letter-spacing:-.01em}
.vt-know__cell p{font-size:13.5px;line-height:1.6;color:var(--card-body);margin:0}
.vt-know__cell p+p{margin-top:8px}
.vt-know__cell b{color:var(--card-title)}
@media(max-width:991.98px){.vt-know{grid-template-columns:1fr}}

/* numery alarmowe */
.vt-sos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:22px}
.vt-sos__item{background:var(--panel-invert);color:#fff;border-radius:16px;padding:24px}
.vt-sos__num{font-size:30px;font-weight:700;letter-spacing:-.03em;color:#fff;text-decoration:none;display:block;margin-bottom:6px;font-variant-numeric:tabular-nums}
a.vt-sos__num:hover{color:var(--orange)}
.vt-sos__lab{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.62)}
@media(max-width:767.98px){.vt-sos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── 8. Rozmówki ──────────────────────────────────────────── */
.vt-phrases{border:1px solid var(--card-line);border-radius:20px;overflow:hidden;background:var(--card-bg)}
.vt-phrases table{width:100%;border-collapse:collapse}
.vt-phrases th{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--index);text-align:left;padding:16px 22px;border-bottom:1px solid var(--divider);background:var(--chip-bg)}
.vt-phrases td{padding:15px 22px;border-bottom:1px solid var(--divider);font-size:14px;line-height:1.5;color:var(--card-body);vertical-align:top}
.vt-phrases tr:last-child td{border-bottom:0}
.vt-phrases td.de{font-weight:700;color:var(--card-title)}
.vt-phrases td.say{font:400 13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--index)}
@media(max-width:767.98px){.vt-phrases th:nth-child(3),.vt-phrases td.say{display:none}.vt-phrases td,.vt-phrases th{padding:13px 16px}}

/* ── 9. CTA ───────────────────────────────────────────────── */
.vt-banner{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--panel-invert) 0%,#0B1628 100%);border-radius:24px;padding:52px 40px;text-align:center;color:#fff}
.vt-banner__kicker{position:relative;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.vt-banner h2{position:relative;font-size:clamp(26px,3.4vw,36px);font-weight:700;letter-spacing:-.02em;color:#fff;margin:0 0 14px}
.vt-banner p{position:relative;font-size:15px;color:rgba(255,255,255,.7);max-width:560px;margin:0 auto 26px}
.vt-banner__actions{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.vt-banner .vt-cta{box-shadow:0 14px 30px -12px rgba(243,112,33,.6)}
.vt-final{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--orange-soft);border:1px solid var(--card-line);border-radius:20px;padding:30px 36px}
.vt-final h2{font-size:20px;font-weight:700;color:var(--heading);margin:0 0 6px}
.vt-final p{font-size:14px;color:var(--body);margin:0}
.vt-final__btn{display:inline-flex;align-items:center;gap:8px;background:var(--panel-invert);color:#fff;text-decoration:none;padding:14px 26px;border-radius:999px;font-size:13.5px;font-weight:700;flex:0 0 auto;transition:transform .15s}
.vt-final__btn:hover{color:#fff;transform:translateY(-2px)}

.vipmart-trip a{color:var(--orange,#F37021)}
.vipmart-trip a:hover{color:var(--orange-deep,#D75A0E)}
@media(prefers-reduced-motion:reduce){.vt-card,.vt-cta,.vt-final__btn,.vt-progress__bar{transition:none}}

.vt-progress__reset:focus-visible,
.vt-tick input:focus-visible,
.vipmart-trip a:focus-visible {
  outline: 3px solid rgba(243,112,33,.45);
  outline-offset: 3px;
}

/* == Pasy tla sekcji (tylko podstrona "Podroz") =====================
   Cala strona lezala na jednym, jednolitym tle i sekcje zlewaly sie w ciag.
   Teraz kazda sekcja jest osobnym pasem przez cala szerokosc ekranu, a tla
   zmieniaja sie na przemian, tak jak na stronie glownej.

   Osobna klasa .vipmart-trip--bands, bo ten sam arkusz obsluguje takze
   podstrone /wyjazd, ktorej nie ruszamy.
   Kolory i wciecia biora sie z tokenow .vm (te same co na stronie glownej),
   wiec szerokosc tresci zostaje dokladnie taka jak dotad.
   ================================================================== */

.vipmart-trip--bands { max-width: none; margin-inline: 0; }

.vipmart-trip--bands > section {
  margin-bottom: 0;
  padding-block: clamp(40px, 4vw, 64px);
  padding-inline: var(--vm-pad-x);
  background: var(--vm-white);
}

/* Tresc sekcji zostaje wysrodkowana w tej samej szerokosci co wczesniej. */
.vipmart-trip--bands > section > * {
  max-width: calc(var(--vm-container) - (2 * var(--vm-pad-x)));
  margin-inline: auto;
}

.vipmart-trip--bands > section.vt-band--light { background: var(--vm-off-white); }

/* Menu jest przyklejone do gory ekranu i niczego pod soba nie odsuwa, wiec
   pierwsza sekcja musi sama zrobic sobie miejsce. Bez tego pasek "01 Rezerwuj
   -> 02 Przygotuj sie" chowal sie pod belka menu.
   Wysokosc belki: 72 px do 991 px szerokosci, 88 px powyzej. */
.vipmart-trip--bands > section:first-of-type {
  padding-top: calc(72px + clamp(40px, 4vw, 64px));
}

@media (min-width: 992px) {
  .vipmart-trip--bands > section:first-of-type {
    padding-top: calc(88px + clamp(40px, 4vw, 64px));
  }
}

/* == Spojnosc ze strona glowna =======================================
   Regula ".vipmart-trip a" (wyzej w tym pliku) daje WSZYSTKIM odnosnikom
   kolor pomaranczowy. Lapie przez to takze przyciski, przez co napis
   "Zadzwon" byl pomaranczowy na pomaranczowym tle, czyli niewidoczny.
   Ponizsze reguly maja wyzsza sile i przywracaja wlasciwe kolory.
   Przy okazji przyciski dostaja wyglad ze strony glownej: promien 10 px,
   waga 600, rozmiar 15 px. Wczesniej byly pelnymi pigulkami (999 px),
   grubsze i mniejsze.
   ==================================================================== */

.vipmart-trip .vt-cta,
.vipmart-trip .vt-final__btn {
  padding: 14px 30px;
  border-radius: 10px;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
}

.vipmart-trip a.vt-cta { background: var(--orange); color: #fff; }
.vipmart-trip a.vt-cta:hover { background: var(--orange-deep); color: #fff; }

.vipmart-trip a.vt-cta--ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .28);
}
.vipmart-trip a.vt-cta--ghost:hover {
  background: rgba(255, 255, 255, .1);
  border-color: #fff;
  color: #fff;
}

.vipmart-trip a.vt-final__btn { background: var(--panel-invert); color: #fff; }
.vipmart-trip a.vt-final__btn:hover { background: var(--panel-invert); color: #fff; }

/* Pasek krokow mieszal kolory: dwa odnosniki byly pomaranczowe (ta sama
   przyczyna co przyciski), a biezacy krok szary zamiast pomaranczowego,
   bo przebijala go regula o wyzszej sile. */
.vipmart-trip .vt-stepper a { color: var(--body); }
.vipmart-trip .vt-stepper a:hover { color: var(--heading); }
.vipmart-trip .vt-stepper .is-current { background: var(--orange); color: #fff; }
.vipmart-trip .vt-stepper .is-current .vt-stepper__n { color: #fff; }

/* Naglowki mialy wage 800 i interlinie 1,06. Na stronie glownej jest
   700 i 1,2, czyli lzej i z oddechem miedzy wierszami. */
.vipmart-trip .vt-title { font-weight: 700; line-height: 1.2; }

/* Kolumna z wymowa niemieckich zwrotow byla w kolorze o 24% krycia,
   czyli kontrast 1,6:1 przy normie 4,5:1. Praktycznie nie do przeczytania. */
.vipmart-trip .vt-phrases td.say { color: var(--body); }

/* == Zdjecia ==========================================================
   Podstrona nie miala ani jednego zdjecia. Pod naglowkiem stoi niski,
   szeroki pas z ujeciem katalogowym, a w sekcji o przejezdzie para zdjec
   po polowie szerokosci. Wygenerowane materialy trzymamy w malych
   miejscach, zgodnie z ustaleniem.
   ===================================================================== */

.vt-photo { margin: 0; }

.vt-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 20px;
}

.vt-photo figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--body);
}

/* Pas pod naglowkiem. Bylo 32:9 - kadr ucinal pol samochodu. 2:1 z kadrem od dolu: bus widac w calosci. */
.vt-photo--wide { margin-top: 26px; }
.vt-photo--wide img { aspect-ratio: 2 / 1; object-position: 50% 100%; }

/* Para zdjec: kazde zajmuje polowe szerokosci sekcji. */

@media (max-width: 767.98px) {
  .vt-photo--wide img { aspect-ratio: 16 / 10; }
}

/* == Podstrona "Przygotuj sie do podrozy" ================================ */

/* Baner "Cos jeszcze do ustalenia?": bez pomaranczowej poswiaty pod
   przyciskiem (na stronie glownej przyciski jej nie maja). Obrys drugiego
   przycisku cieniem, nie ramka: ramka 1,5 px zaokragla sie do 1 px. */
.vipmart-trip--bands .vt-banner .vt-cta:not(.vt-cta--ghost) { box-shadow: none; }
.vipmart-trip--bands a.vt-cta--ghost {
  border: 0;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .24);
}
.vipmart-trip--bands a.vt-cta--ghost:hover {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
}
/* Na telefonie numer lamal sie w przycisku na dwie linijki. */
.vipmart-trip--bands .vt-banner .vt-cta { white-space: nowrap; }
@media (max-width: 575.98px) {
  .vipmart-trip--bands .vt-banner { padding: 40px 22px; }
  .vipmart-trip--bands .vt-banner .vt-cta { width: 100%; justify-content: center; }
}

/* "Nie masz jeszcze rezerwacji?": brzoskwiniowe tlo nie wystepuje nigdzie
   indziej. Teraz piaskowe tlo pasow ze strony glownej. Odnosniki w tekscie
   granatowe z podkresleniem, bo pomarancz jest za jasny na tekst. */
.vipmart-trip--bands .vt-final {
  background: var(--vm-off-white);
  border-color: var(--card-line);
}
.vipmart-trip--bands .vt-final h2 { font-weight: 700; }
.vipmart-trip--bands .vt-final p a {
  color: var(--heading);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vipmart-trip--bands .vt-final p a:hover { color: var(--orange-deep); }

/* Listy w kafelkach (Podroz: "Zabierz spokojnie / Zostaw w domu",
   Wyjazd: "Pamietaj"): punkt listy byl ukladany jak rzad kolumn, wiec
   pogrubiony poczatek zdania i jego reszta stawaly obok siebie jako dwie
   osobne kolumny. Teraz to zwykly akapit z kropka z lewej strony.
   Dotyczy obu podstron. */
.vipmart-trip .vt-rules li {
  display: block;
  position: relative;
  padding-left: 17px;
}
.vipmart-trip--bands .vt-rules li { font-size: 14px; }
.vipmart-trip .vt-rules li::before {
  position: absolute;
  left: 0;
  top: 8px;
  margin: 0;
}
.vipmart-trip--bands .vt-rules b { font-weight: 600; }
.vipmart-trip--bands .vt-rules__head h3 { font-weight: 700; }

/* Progi alkoholu i tytoniu: napis w naglowku mial 24% krycia (nieczytelny),
   a na telefonie cztery liczby staly jedna pod druga jak cztery sekcje. */
.vipmart-trip--bands .vt-limits__bar { color: var(--body); }
.vipmart-trip--bands .vt-limit__v { font-weight: 700; }
@media (max-width: 575.98px) {
  .vipmart-trip--bands .vt-limits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vipmart-trip--bands .vt-limit { padding: 18px; border-bottom: 0; }
  .vipmart-trip--bands .vt-limit:nth-child(odd) { border-right: 1px solid var(--divider); }
  .vipmart-trip--bands .vt-limit:nth-child(-n+2) { border-bottom: 1px solid var(--divider); }
}

/* Mini-rozmowki. Naglowki kolumn mialy 24% krycia. Polski pogrubiony, bo
   po nim szuka sie zdania; niemiecki zwykly; wymowa kursywa w nawiasie
   kwadratowym, jak w slowniku. Na telefonie wymowa nie znika, tylko
   schodzi pod zdanie niemieckie. */
.vipmart-trip--bands .vt-phrases th { color: var(--heading); letter-spacing: .12em; }
.vipmart-trip--bands .vt-phrases td { color: var(--heading); }
.vipmart-trip--bands .vt-phrases td:first-child { font-weight: 600; }
.vipmart-trip--bands .vt-phrases td.de { font-weight: 400; }
.vipmart-trip--bands .vt-phrases td.say {
  font-family: inherit;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  color: var(--body);
}
.vipmart-trip--bands .vt-phrases td.say::before { content: "["; }
.vipmart-trip--bands .vt-phrases td.say::after { content: "]"; }
@media (max-width: 767.98px) {
  /* Na telefonie nie ma trzeciej kolumny, wiec zdanie o niej znika. */
  .vipmart-trip--bands .vt-phrases-hint { display: none; }
  .vipmart-trip--bands .vt-phrases tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-bottom: 1px solid var(--divider);
  }
  .vipmart-trip--bands .vt-phrases tbody tr:last-child { border-bottom: 0; }
  .vipmart-trip--bands .vt-phrases th:nth-child(3) { display: none; }
  .vipmart-trip--bands .vt-phrases td { border-bottom: 0; }
  .vipmart-trip--bands .vt-phrases td:first-child { grid-row: span 2; }
  .vipmart-trip--bands .vt-phrases td.de { padding-bottom: 2px; }
  .vipmart-trip--bands .vt-phrases td.say {
    display: block;
    grid-column: 2;
    padding-top: 0;
    font-size: 13px;
  }
}

/* Nadkreslenia sekcji jak na stronie glownej (.vm .vm-eyebrow): bez kreski
   z przodu, 14 px / 600 / 0,14em, ciemne na jasnym tle, biel 75% na ciemnym.
   Wczesniej: pomaranczowe, 12 px / 700 / 0,28em, z kreska. */
.vipmart-trip--bands .vt-eyebrow {
  gap: 0;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--vm-text);
}
.vipmart-trip--bands .vt-eyebrow::before { display: none; }
.vipmart-trip--bands .vt-banner__kicker {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .75);
}

/* Wymowa innym kolorem niz granat, zeby odroznic ja od zdania niemieckiego.
   Stalowy niebieski z rodziny granatu, kontrast 5,96:1 na bialym. */
.vipmart-trip--bands .vt-phrases td.say { color: #4A6491; }

/* Napis "Spakowane" nad licznikiem mial 24% krycia, jak wczesniej naglowek
   progow alkoholu. Teraz kolor zwyklego tekstu. */
.vipmart-trip--bands .vt-progress__row { color: var(--body); }

/* Nadkreslenie pomaranczowe tylko w sekcjach bez innego akcentu kolorystycznego
   (tak jak "Krok po kroku" na stronie glownej). */
.vipmart-trip--bands .vt-eyebrow--accent { color: var(--vm-orange); }

/* == Wyglad jak na stronie glownej =========================
   Typografia i przyciski wedlug systemu strony glownej (.vm w _home-ref.scss):
   naglowki 700 zamiast 800, H2 sekcji 43 px, naglowki w kartach 700,
   nadkreslenia 14 px / 600 / .14em bez kreski, male etykiety i pogrubienia 600,
   przyciski 15 px / 600 / promien 10 px bez poswiaty, obrys cieniem 1,5 px.
   Dolna sekcja na piaskowym tle zamiast brzoskwiniowego.
   ====================================================================== */
.vipmart-trip .vt-title { font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.vipmart-trip .vt-title.vt-h2 { font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.2; }
.vipmart-trip h2, .vipmart-trip h3 { font-weight: 700; }
.vipmart-trip h3 { letter-spacing: normal; }
.vipmart-trip b, .vipmart-trip strong { font-weight: 600; }

.vipmart-trip .vt-eyebrow:not(.vt-eyebrow--accent) {
  gap: 0;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: #1C1C1C;
}
.vipmart-trip .vt-eyebrow::before { display: none; }

.vipmart-trip .vt-hero__akicker { font-size: 12px; font-weight: 600; letter-spacing: .14em; }
.vipmart-trip .vt-hero__alabel { font-weight: 600; color: rgba(255, 255, 255, .6); }
.vipmart-trip .vt-hero__avalue { font-weight: 600; }
.vipmart-trip .vt-hero__anote { font-size: 13px; }

.vipmart-trip .vt-know__k,
.vipmart-trip .vt-doc__tag,
.vipmart-trip .vt-progress__row,
.vipmart-trip .vt-limits__bar,
.vipmart-trip .vt-pill { font-weight: 600; }
.vipmart-trip .vt-stepper a,
.vipmart-trip .vt-stepper span.vt-stepper__item { font-weight: 600; }

.vipmart-trip .vt-banner h2 { font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.vipmart-trip .vt-banner p { font-size: 16px; line-height: 1.65; }
.vipmart-trip .vt-banner__kicker { font-size: .875rem; font-weight: 600; letter-spacing: .14em; color: rgba(255, 255, 255, .75); }

.vipmart-trip .vt-cta,
.vipmart-trip .vt-final__btn {
  justify-content: center;
  padding: 14px 30px;
  border-radius: 10px;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.vipmart-trip .vt-banner .vt-cta:not(.vt-cta--ghost) { box-shadow: none; }
/* Obrys cieniem, nie ramka: ramka 1,5 px zaokragla sie do 1 px. Selektor
   z .vt-banner, bo regula poswiaty w banerze kasowala obrys. */
.vipmart-trip .vt-banner a.vt-cta--ghost,
.vipmart-trip a.vt-cta--ghost {
  background: transparent;
  border: 0;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .24);
}
.vipmart-trip .vt-banner a.vt-cta--ghost:hover,
.vipmart-trip a.vt-cta--ghost:hover {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
}

.vipmart-trip .vt-final { background: #F6F1E7; }
.vipmart-trip .vt-final h2 { font-weight: 700; }
.vipmart-trip .vt-final p a { color: #14213D; text-decoration: underline; text-underline-offset: 3px; }
.vipmart-trip .vt-final p a:hover { color: #D75A0E; }

@media (max-width: 575.98px) {
  .vipmart-trip .vt-banner { padding: 40px 22px; }
  .vipmart-trip .vt-banner .vt-cta { width: 100%; }
}
/* Duze liczby (0/20, progi, numery alarmowe) 700, drobne napisy 600. */
.vipmart-trip .vt-progress__count,
.vipmart-trip .vt-limit__v,
.vipmart-trip .vt-sos__num { font-weight: 700; }
.vipmart-trip .vt-phrases th,
.vipmart-trip .vt-progress__reset { font-weight: 600; }

/* == Uklad jak na stronie glownej ==========================
   Gora strony, kontener, marginesy boczne i rytm sekcji wedlug wspolnych
   wartosci podstron (zmienne --vm-* w resources/scss/pages/_subpages.scss).
   Okruszki stoja na samej gorze, nad paskiem krokow "01 -> 02 -> 03",
   128 px od gory strony (92 px na telefonie). Tresc zaczyna sie 72 px
   od lewej (20 px na telefonie), jak na stronie glownej.
   ====================================================================== */

/* Naglowki sekcji (obie podstrony): nadkreslenie -> naglowek 16 px,
   naglowek -> lead 20 px, lead -> tresc sekcji 32 px. Wczesniej 14 / 18
   i 40-44 px (z atrybutow style w szablonach, juz usunietych). */
.vipmart-trip .vt-eyebrow { margin-bottom: var(--vm-eyebrow-gap); }
.vipmart-trip .vt-title { margin-bottom: var(--vm-title-gap); }
.vipmart-trip .vt-center { margin-bottom: var(--vm-lede-gap); }
.vipmart-trip .vt-center > :last-child { margin-bottom: 0; }
.vipmart-trip .vt-checkhead { margin-bottom: var(--vm-lede-gap); }

/* Granatowy baner: ten sam rytm 16 / 20 / 32. Nadkreslenie w banerze
   przejmowalo przez pomylke styl akapitu (16 px i odstep 26 px), teraz
   14 px jak pozostale nadkreslenia. */
.vipmart-trip .vt-banner .vt-banner__kicker {
  max-width: none;
  margin: 0 0 var(--vm-eyebrow-gap);
  font-size: .875rem;
  line-height: 1.5;
}
.vipmart-trip .vt-banner h2 { margin-bottom: var(--vm-title-gap); }
.vipmart-trip .vt-banner p:not(.vt-banner__kicker) { margin-bottom: var(--vm-lede-gap); }

/* --- Podroz (/podroz): pasy tla na cala szerokosc ----------------------
   Pas ma pionowy oddech jak waskie sekcje strony glownej (80 px / 48 px),
   pierwszy pas zaczyna sie pod menu tak, by okruszki staly na wysokosci
   wspolnej dla wszystkich podstron, ostatni konczy sie pelnym odstepem
   przed stopka. */
.vipmart-trip--bands > section {
  padding-block: var(--vm-section-gap-sm);
  padding-inline: var(--vm-gutter);
}
.vipmart-trip--bands > section > * {
  max-width: calc(var(--vm-content-max) - (2 * var(--vm-gutter)));
}
.vipmart-trip--bands > section:first-of-type { padding-top: var(--vm-hero-top); }
/* Ostatni pas konczy sie jak kazdy pas (80 / 48 px), jak na stronie glownej. */

/* --- Przed wyjazdem (/wyjazd): jedno tlo, bez pasow --------------------
   Kontener Bootstrapa (.container) i odstepy pt-sm-3 / pt-md-4 / pt-lg-5
   zastapione kontenerem strony glownej. Odstepy Bootstrapa maja !important,
   dlatego tutaj tez trzeba go uzyc. Wczesniej gora strony chowala sie
   pod menu (32 px na komputerze, 64 px na telefonie). */
.vipmart-trip:not(.vipmart-trip--bands) {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--vm-content-max);
  margin-inline: auto;
  padding-inline: var(--vm-gutter);
  padding-top: var(--vm-hero-top) !important;
  padding-bottom: var(--vm-section-gap) !important;
}
.vipmart-trip:not(.vipmart-trip--bands) > section { margin-bottom: var(--vm-section-gap); }
.vipmart-trip:not(.vipmart-trip--bands) > section:last-child { margin-bottom: 0; }

/* == Pasy tla, karty i zdjecia == */
/* Pasek krokow "01 -> 02 -> 03" na telefonie w jednej linii: kroki
   nieaktywne pokazuja sam numer, biezacy numer i pelna nazwe. Nazwy
   ukryte tylko wizualnie (metoda clip), czytnik ekranu nadal je odczyta.
   Mniejsze odstepy, wezsze pigulki i mniejsze strzalki. Gdyby mimo to
   zabraklo miejsca (bardzo waskie ekrany), przewija sie sam pasek,
   nigdy cala strona. Na komputerze bez zmian. */
@media (max-width: 575.98px) {
  .vipmart-trip .vt-stepper {
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    letter-spacing: .01em;
  }
  .vipmart-trip .vt-stepper::-webkit-scrollbar { display: none; }
  .vipmart-trip .vt-stepper a,
  .vipmart-trip .vt-stepper span.vt-stepper__item {
    position: relative;
    flex: 0 0 auto;
    gap: 5px;
    padding: 8px 9px;
    white-space: nowrap;
  }
  .vipmart-trip .vt-stepper a:focus-visible { outline-offset: -3px; }
  .vipmart-trip .vt-stepper :is(a, .vt-stepper__item):not(.is-current) .vt-stepper__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .vipmart-trip .vt-stepper__sep {
    flex: 0 0 auto;
    font-size: 10px;
    letter-spacing: 0;
  }
}

/* /podroz: szerokie zdjecie busa - wiecej miejsca nad autem (gora auta
   dotykala gornej krawedzi ramki). */
.vipmart-trip .vt-photo--wide img { object-position: 50% 62%; }

/* /wyjazd, "Jak wyglada przejazd": kafelki w ukladzie 2 x 2. */
.vipmart-trip .vt-ride { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767.98px) {
  .vipmart-trip .vt-ride { grid-template-columns: minmax(0, 1fr); }
}

/* Niezbednik (20.10.2026): "Przydatne numery telefonow" jako jeden jasny
   blok zamiast czterech ciemnych kafelkow - numery w rzedzie oddzielone
   cienkimi liniami, pomaranczowa liczba (po najechaniu granatowa), opis pod spodem. Na telefonie numery
   jeden pod drugim, z linia miedzy nimi. */
.vipmart-trip .vt-sos__title {
  margin: 40px 0 0;
  color: #14213D;
  font-size: 1.125rem;
  font-weight: 700;
}
.vipmart-trip .vt-sos__title + .vt-sos { margin-top: 16px; }
.vipmart-trip .vt-sos {
  gap: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(20, 33, 61, .08);
  overflow: hidden;
}
.vipmart-trip .vt-sos__item {
  padding: 22px 24px;
  border-radius: 0;
  background: transparent;
  color: #14213D;
}
.vipmart-trip .vt-sos__item + .vt-sos__item { box-shadow: inset 1px 0 0 rgba(20, 33, 61, .1); }
.vipmart-trip .vt-sos__num {
  color: #F37021;
  font-size: 1.625rem;
  font-weight: 700;
  transition: color .3s cubic-bezier(.25, .46, .45, .94);
}
.vipmart-trip a.vt-sos__num:hover,
.vipmart-trip a.vt-sos__num:focus-visible { color: #14213D; }
.vipmart-trip .vt-sos__lab { color: rgba(20, 33, 61, .66); font-size: 13px; }
@media (max-width: 991.98px) {
  .vipmart-trip .vt-sos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vipmart-trip .vt-sos__item:nth-child(3) { box-shadow: inset 0 1px 0 rgba(20, 33, 61, .1); }
  .vipmart-trip .vt-sos__item:nth-child(4) { box-shadow: inset 1px 0 0 rgba(20, 33, 61, .1), inset 0 1px 0 rgba(20, 33, 61, .1); }
}
@media (max-width: 767.98px) {
  .vipmart-trip .vt-sos { grid-template-columns: minmax(0, 1fr); }
  .vipmart-trip .vt-sos__item { padding: 16px 20px; }
  .vipmart-trip .vt-sos__item + .vt-sos__item,
  .vipmart-trip .vt-sos__item:nth-child(4) { box-shadow: inset 0 1px 0 rgba(20, 33, 61, .1); }
  .vipmart-trip .vt-sos__num { font-size: 1.375rem; }
}