/* Okno rezerwacji – wspólne dla strony www (rezerwacja klienta) i panelu (nowa rezerwacja / edycja):
   numerowane segmenty, kalendarz zakresu dat, limit kilometrów, kierowcy, usługi, tabela pakietów ochrony,
   podsumowanie z kwotą na przewijanych cyfrach. Układ samego okna (szerokość, kolumny) – www.css i app.css. */
.extras { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 16px; }
.summary { background: var(--primary-50); border: 1px solid var(--primary-100); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; }
.summary:empty { display: none; }
/* rezerwacja: tabela pakietów w białym kontenerze jak na stronie – ramka najwyższego pakietu wychodzi poza niego */
.book-ins .ins-name { font-size: 23px; }
.book-ins .ins-col.top .ins-name { font-size: 25px; }
.book-ins { border: 1px solid var(--border); border-radius: 16px; background: #fff; padding: 14px 12px; margin: 10px 0; box-shadow: var(--shadow-sm); }
.sum-old { color: var(--muted); font-weight: 500; font-size: 14px; }
/* termin najmu – kalendarz zakresu dat */
.drp { position: relative; }
.drp-fields { display: flex; align-items: stretch; flex-wrap: wrap; gap: 10px; }
.drp-group { display: flex; flex: 1 1 260px; min-width: 0; border: 1.5px solid var(--border-strong); border-radius: 14px; background: #fff; overflow: hidden;
  transition: border-color .15s, box-shadow .15s; }
.drp-group:focus-within, .drp-group:has(.drp-field.on) { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-50); }
.drp-field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--text); }
.drp-field .ic { width: 22px; height: 22px; color: var(--primary); flex: none; }
.drp-field small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.drp-field b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drp-time { flex: none; width: auto; min-height: 0; border: 0; border-left: 1px solid var(--border); border-radius: 0; padding: 0 30px 0 12px; font-weight: 700; background-color: var(--surface-2); }
.drp-time:focus { box-shadow: none; }
.drp-days { align-self: center; padding: 6px 14px; border-radius: 999px; background: var(--primary-50); color: var(--primary-700); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.drp-days.hidden { display: none; }
.drp-pop { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: min(680px, 100%); padding: 16px 18px 14px; background: #fff;
  border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 60px rgba(16, 42, 80, .22); }
.drp-pop.hidden { display: none; }
.drp-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.drp-hint { font-weight: 700; color: var(--primary-700); font-size: 14px; }
.drp-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--text); }
.drp-arrow:hover:not(:disabled) { background: var(--primary-50); border-color: var(--primary-100); color: var(--primary); }
.drp-arrow:disabled { opacity: .35; cursor: default; }
.drp-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.drp-mtitle { text-align: center; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.drp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.drp-wd { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; padding: 4px 0 6px; }
.drp-cell { height: 40px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; border-radius: 10px; position: relative; }
.drp-cell.blank { cursor: default; }
.drp-cell:hover:not(:disabled):not(.start):not(.end) { background: var(--primary-50); color: var(--primary-700); }
.drp-cell.today { box-shadow: inset 0 0 0 1.5px var(--primary-200); }
.drp-cell.past { color: #c3cbd6; cursor: default; }
.drp-cell.busy { color: #c3cbd6; text-decoration: line-through; cursor: not-allowed; }
.drp-cell.in, .drp-cell.preview { background: var(--primary-50); color: var(--primary-700); border-radius: 0; }
.drp-cell.preview { background: color-mix(in srgb, var(--primary) 6%, #fff); }
.drp-cell.start, .drp-cell.end { background: var(--primary); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 35%, transparent); z-index: 1; }
.drp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.drp-sum { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
@media (max-width: 640px) {
  .drp-pop { width: 100%; padding: 12px; }
  .drp-months { grid-template-columns: minmax(0, 1fr); }
  .drp-months .drp-month + .drp-month { display: none; }
  .drp-cell { height: 38px; }
}
.extra-sub { display: block; font-size: 12.5px; margin-top: 2px; }
.loc-addr { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.loc-addr:empty { display: none; }
/* segment „Kierowcy”: kierowca podstawowy i dodatkowi, przy każdym pole „poniżej X lat” (dopłata za dobę) */
.drv-box { display: flex; flex-direction: column; gap: 12px; }
.drv-list { display: flex; flex-direction: column; gap: 8px; }
.drv-list:empty { display: none; }
.drv-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.drv-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.drv-name > .ic { width: 20px; height: 20px; color: var(--primary); flex: none; }
.drv-name small { display: block; font-size: 12.5px; color: var(--muted); }
.drv-young { margin: 0; }
/* zastrzeżenie „model lub podobny” na samym dole formularza */
.book-similar { margin: 4px 0 0; padding-top: 12px; border-top: 1px dashed var(--border); }
.book-float-card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 16px 18px 18px; box-shadow: 0 16px 40px rgba(16, 42, 80, .12); }
.book-float-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 1.05rem; }
.book-float-h .ic { width: 20px; height: 20px; color: var(--primary); }
.book-float .summary { font-size: 13.5px; }
.book-float .summary.hidden { display: none; }
.sum-lines { display: flex; flex-direction: column; gap: 4px; }
.sum-lines:empty { display: none; }
.sum-lines .row > span:first-child { min-width: 0; }
.sum-lines .row > span:last-child { white-space: nowrap; }
/* „Razem do zapłaty”: napis u góry, duża kwota pod nim (cyfry na przewijanych bębenkach) */
.sum-total-box { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 4px; padding-top: 10px; border-top: 1px solid var(--primary-200); }
.sum-total-label { font-size: 13px; font-weight: 700; color: var(--text-2); }
.sum-total-amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: 30px; font-weight: 800; color: var(--navy); line-height: 1.15; }
.sum-total-amt .sum-old { font-size: 15px; font-weight: 500; }
.sum-total-amt .sum-old.hidden { display: none; }
.odo { display: inline-flex; font-variant-numeric: tabular-nums; }
.odo-d { display: inline-block; height: 1.15em; overflow: hidden; }
.odo-s { display: flex; flex-direction: column; transition: transform .7s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.odo-s > span, .odo-c { display: block; height: 1.15em; line-height: 1.15em; text-align: center; }
/* limit kilometrów i kaucja – drobniej, w jednej linii */
.sum-meta { font-size: 12.5px; color: var(--muted); }
/* rabat za rezerwację online – zielona pastylka */
.sum-promo { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--success-50); color: #0b7a3e; font-weight: 700;
  box-shadow: inset 0 0 0 1px #b7e3c6; }
.book-float-act { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.book-float-act .form-error { margin: 0; }
.book-float-act .book-similar { margin: 0; padding-top: 10px; }
/* modal rezerwacji: numerowane segmenty (termin, limit km, pakiet ochrony, kierowcy, usługi, wyjazd za granicę, podsumowanie, dane) */
.book-form { gap: 14px; }
.book-seg { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 16px 18px 18px; box-shadow: var(--shadow-sm); min-width: 0; }
.book-seg-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.05rem; line-height: 1.3; }
.book-seg-h > .ic { width: 20px; height: 20px; color: var(--primary); flex: none; }
.book-seg-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, var(--primary), var(--primary-700)); color: #fff; font-size: 13px; font-weight: 800; }
.book-seg-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.book-seg-body > [data-avail]:empty { display: none; }
.book-sum-empty { margin: 0; }
@media (max-width: 520px) { .book-seg { padding: 14px 14px 16px; border-radius: 14px; } }
/* modal rezerwacji: limit kilometrów – limit z dób najmu, pakiet dodatkowych km i łączna liczba km do wykorzystania */
.km-box { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.km-box > div:empty { display: none; }
.km-row { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.km-row > span { min-width: 0; font-weight: 600; }
.km-row small { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.km-row b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.km-pkg-row select { flex: 1 1 260px; max-width: 380px; }
.km-total { padding-top: 10px; border-top: 1px dashed var(--border); font-size: 1.05rem; }
.km-total b { color: var(--primary); font-size: 1.15rem; }
.km-note { font-size: 13px; color: var(--muted); }
.km-note:empty { display: none; }
.km-free { display: flex; align-items: center; gap: 8px; }
.km-free .ic { width: 20px; height: 20px; flex: none; color: var(--success, var(--primary)); }