/* GrowRent — kalendarz wypożyczenia na karcie produktu. Jeden renderer dla sklepu i podglądu w panelu.
   Preset = zestaw tokenów na .growrent[data-preset]; sklep może nadpisać --accent i --grn-radius (inline).
   Font i --accent dziedziczone z szablonu (RWD i Storefront). Ruch tylko transform/opacity i kolory,
   wyłączony przy prefers-reduced-motion. Bez position: fixed poza dolnym arkuszem B na telefonie. */
.growrent,.growrent *,.growrent *::before,.growrent *::after{box-sizing:border-box}
.growrent{
  --accent:inherit;
  --grn-accent:var(--accent, #1c1917);
  --grn-on-accent:#fff;
  --grn-ink:#1c1917;
  --grn-text:#44403c;
  --grn-muted:#57534e;
  --grn-line:#d6d3d1;
  --grn-hairline:#e7e5e4;
  --grn-surface:#fff;
  --grn-off:#5c5854;
  --grn-danger:#b42318;
  --grn-danger-bg:#fef3f2;
  --grn-danger-line:#fecdca;
  --grn-warn:#92400e;
  --grn-warn-bg:#fffbeb;
  --grn-warn-line:#fde68a;
  --grn-tint:color-mix(in srgb, var(--grn-accent) 7%, #fff);
  --grn-tint-line:color-mix(in srgb, var(--grn-accent) 30%, #fff);
  --grn-hover-bg:color-mix(in srgb, var(--grn-accent) 10%, #fff);
  --grn-ring:var(--grn-accent);
  --grn-max:640px;
  --grn-dur:180ms;
  --grn-ease:cubic-bezier(.2,.7,.2,1);
  position:relative;
  max-width:100%;
  color:var(--grn-ink);
  font-family:inherit;
  font-size:14px;
  line-height:1.45;
  font-weight:400;
  text-align:left;
  container-type:inline-size;
}
@supports not (color:color-mix(in srgb, red, blue)){
  .growrent{--grn-tint:#f5f5f4;--grn-tint-line:#d6d3d1;--grn-hover-bg:#f5f5f4}
  .growrent[data-preset]{--grn-range-bg:#e7e5e4}
}

/* ── Tokeny presetów (tabela z briefu) ─────────────────────────────────────── */
.growrent[data-preset="a"]{
  --grn-day-size:40px;
  --grn-range-bg:color-mix(in srgb, var(--grn-accent) 18%, #fff);
  --grn-edge-bg:var(--grn-accent);
  --grn-disabled:#c8c8c8;
  --grn-radius:8px;
  --grn-months:2;
  --grn-summary-bg:#f7f7f7;
  --grn-font:500 14px inherit;
  --grn-day-weight:500;
}
.growrent[data-preset="b"]{
  --grn-day-size:36px;
  --grn-range-bg:color-mix(in srgb, var(--grn-accent) 18%, #fff);
  --grn-edge-bg:var(--grn-accent);
  --grn-disabled:#c8c8c8;
  --grn-radius:6px;
  --grn-months:1;
  --grn-summary-bg:transparent;
  --grn-font:400 14px inherit;
  --grn-day-weight:400;
}
.growrent[data-preset="c"]{
  --grn-day-size:36px;
  --grn-range-bg:color-mix(in srgb, var(--grn-accent) 18%, #fff);
  --grn-edge-bg:var(--grn-accent);
  --grn-disabled:#c8c8c8;
  --grn-radius:12px;
  --grn-months:1;
  --grn-summary-bg:#f7f7f7;
  --grn-chip-h:48px;
  --grn-font:600 14px inherit;
  --grn-day-weight:600;
}

.growrent button{font-family:inherit;-webkit-tap-highlight-color:transparent}
.grn-chips,.grn-fields,.grn-summary,.grn-note,.grn-cart,.grn-tariff,.grn-limits,.grn-deposit,.grn-free,.grn-qty{max-width:var(--grn-max)}
.growrent p{margin:0}
.grn-ico{display:block;flex:none}

/* ── C: kroki i pakiety ─────────────────────────────────────────────────────── */
.grn-step{display:none}
.growrent[data-preset="c"] .grn-step{
  display:flex;align-items:center;gap:8px;margin:0 0 8px;
  color:var(--grn-ink);font-size:14px;font-weight:600;
}
.growrent[data-preset="c"] .grn-step::before{
  content:attr(data-step);
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:22px;height:22px;border-radius:50%;
  background:var(--grn-ink);color:#fff;font-size:12px;font-weight:600;
}
.growrent[data-preset="c"] .grn-step[data-step="2"]{margin-top:16px}
.grn-chips{display:none}
.growrent[data-preset="c"] .grn-chips{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:8px}
/* Preset C nosi cennik na kafelkach; osobna linia taryfy powielałaby te same kwoty. */
.growrent[data-preset="c"] .grn-tariff{display:none}
.grn-chip{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;
  min-width:0;min-height:var(--grn-chip-h, 48px);padding:9px 12px;
  border:1px solid var(--grn-line);border-radius:var(--grn-radius);
  background:var(--grn-surface);color:var(--grn-ink);
  text-align:left;cursor:pointer;
}
.grn-chip__name{font-size:15px;font-weight:600;line-height:1.2}
.grn-chip__sub{color:var(--grn-muted);font-size:12px;font-weight:400;line-height:1.25}
.grn-chip[aria-pressed="true"]{
  border-color:var(--grn-edge-bg);
  background:var(--grn-tint);
  box-shadow:inset 0 0 0 1px var(--grn-edge-bg);
}

/* ── B: pola od–do ─────────────────────────────────────────────────────────── */
.grn-fields{display:none}
.growrent[data-preset="b"] .grn-fields{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.grn-field{display:flex;flex-direction:column;gap:4px;flex:1 1 140px;min-width:0;max-width:200px}
.grn-field__label{color:var(--grn-text);font-size:13px;font-weight:500}
.grn-field__box{position:relative;display:block}
.grn-field__box .grn-ico{position:absolute;left:12px;top:50%;margin-top:-8px;color:var(--grn-muted);pointer-events:none}
.grn-input{
  display:block;width:100%;height:44px;padding:0 10px 0 36px;
  border:1px solid var(--grn-line);border-radius:var(--grn-radius);
  background:var(--grn-surface);color:var(--grn-ink);
  font:inherit;font-size:15px;font-variant-numeric:tabular-nums;cursor:pointer;
}
.grn-input::placeholder{color:var(--grn-muted);opacity:1}
@media (hover:hover){.grn-input:hover{border-color:#a8a29e}}
.grn-open{
  height:44px;padding:0 14px;flex:none;
  border:1px solid var(--grn-ink);border-radius:var(--grn-radius);
  background:var(--grn-surface);color:var(--grn-ink);
  font-size:14px;font-weight:600;cursor:pointer;
}
.grn-open[aria-expanded="true"]{background:var(--grn-ink);color:#fff}

/* ── Kalendarz ─────────────────────────────────────────────────────────────── */
.grn-pop{display:block}
.grn-sheet-head{display:none}
.growrent[data-preset="b"] .grn-pop{
  display:none;position:relative;z-index:1;margin-top:8px;width:max-content;max-width:100%;
  padding:14px 16px 12px;background:var(--grn-surface);
  border:1px solid var(--grn-hairline);border-radius:calc(var(--grn-radius) + 6px);
  box-shadow:0 2px 6px rgba(28,25,23,.06),0 14px 32px -12px rgba(28,25,23,.22);
}
.growrent[data-preset="b"] .grn-pop[data-open="1"]{display:block}
.grn-months{display:flex;gap:24px;align-items:flex-start}
.grn-month{min-width:0;flex:0 1 auto}
.growrent[data-preset="a"] .grn-month + .grn-month{padding-left:24px;border-left:1px solid var(--grn-hairline)}
.growrent[data-preset="b"] .grn-month + .grn-month,
.growrent[data-preset="c"] .grn-month + .grn-month{display:none}
.grn-nav{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;gap:8px;margin-bottom:6px}
.grn-mtitle{text-align:center;font-size:15px;font-weight:600;line-height:1.2;color:var(--grn-ink)}
.grn-mtitle::first-letter{text-transform:uppercase}
.grn-shift{
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0;
  border:1px solid var(--grn-hairline);border-radius:var(--grn-radius);
  background:var(--grn-surface);color:var(--grn-ink);cursor:pointer;
}
.grn-shift svg{display:block}
.grn-grid{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:repeat(7, minmax(0, var(--grn-day-size)));
  row-gap:4px;column-gap:0;width:100%;max-width:calc(7 * var(--grn-day-size));
}
.grn-dow{height:28px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;color:var(--grn-muted)}
.grn-pad{height:var(--grn-day-size)}
.grn-day{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:var(--grn-day-size);padding:0;
  border:0;border-radius:var(--grn-radius);background:transparent;
  color:var(--grn-ink);font-size:14px;font-weight:var(--grn-day-weight, 500);
  font-variant-numeric:tabular-nums;line-height:1;cursor:pointer;
}
.grn-day.grn-in{background:var(--grn-range-bg);border-radius:0}
.grn-day.grn-start,.grn-day.grn-end{background:var(--grn-edge-bg);color:var(--grn-on-accent)}
/* Zakres jako jedna wstęga: połówka tła pod pierwszym i ostatnim dniem. */
.grn-day.grn-start:has(+ .grn-in)::before,.grn-day.grn-start:has(+ .grn-end)::before,
.grn-in + .grn-day.grn-end::before,.grn-start + .grn-day.grn-end::before{
  content:"";position:absolute;top:0;bottom:0;z-index:-1;background:var(--grn-range-bg);
}
.grn-day.grn-start::before{left:50%;right:0}
.grn-day.grn-end::before{left:0;right:50%}
/* Wstęga zaokrąglona na krawędziach tygodnia; bez połówki poza wierszem. */
.grn-day.grn-in[data-dow="1"]{border-radius:var(--grn-radius) 0 0 var(--grn-radius)}
.grn-day.grn-in[data-dow="7"]{border-radius:0 var(--grn-radius) var(--grn-radius) 0}
.grn-day.grn-end[data-dow="1"]::before,.grn-day.grn-start[data-dow="7"]::before{content:none}
.grn-day.grn-off{
  color:var(--grn-off);
  text-decoration:line-through;
  text-decoration-color:var(--grn-disabled);
  text-decoration-thickness:1.5px;
  cursor:not-allowed;
}
/* Zajęty dzień wewnątrz wybranego zakresu: konflikt widać od razu. */
.grn-day.grn-in.grn-off{background:var(--grn-danger-bg);color:var(--grn-danger);text-decoration-color:currentColor}
.grn-day.grn-today:not(.grn-start):not(.grn-end)::after{
  content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor;
}
@media (hover:hover){
  .grn-day:not(:disabled):not(.grn-start):not(.grn-end):not(.grn-in):hover{background:var(--grn-hover-bg);box-shadow:inset 0 0 0 1px var(--grn-tint-line)}
  .grn-day.grn-in:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--grn-edge-bg)}
  .grn-shift:hover{border-color:var(--grn-line);background:#fafaf9}
  .grn-chip:not([aria-pressed="true"]):hover{border-color:var(--grn-ink)}
  .grn-open:not([aria-expanded="true"]):hover{background:#f5f5f4}
}
.growrent :is(button,input):focus-visible{outline:2px solid var(--grn-ring);outline-offset:2px}
@media (hover:hover){.grn-clear:hover{color:var(--grn-ink)}}
.grn-day:focus-visible{z-index:1}
.grn-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;color:var(--grn-muted);font-size:12px}
.grn-key{display:inline-flex;align-items:center;gap:6px}
.grn-key::before{content:"";width:12px;height:12px;border-radius:3px;flex:none}
.grn-key--pick::before{background:var(--grn-edge-bg)}
.grn-key--off::before{
  content:"7";width:auto;height:auto;border-radius:0;
  color:var(--grn-off);font-weight:500;text-decoration:line-through;text-decoration-color:var(--grn-disabled);text-decoration-thickness:1.5px;
}

/* ── Podsumowanie: cena albo powód, dlaczego termin nie przejdzie ──────────── */
.grn-summary{
  display:flex;align-items:center;gap:10px;
  margin-top:14px;padding:11px 14px;min-height:46px;
  border:1px solid transparent;border-radius:var(--grn-radius);
  background:var(--grn-summary-bg);color:var(--grn-text);font-size:14px;
}
.grn-summary::before{content:none;flex:none}
.grn-summary[data-tone="ok"]{
  background:var(--grn-tint);border-color:var(--grn-tint-line);
  color:var(--grn-ink);font-size:16px;font-weight:600;
}
.grn-summary[data-tone="ok"]::before{
  content:"";width:20px;height:20px;border-radius:50%;
  background:var(--grn-edge-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center/12px 12px;
}
.grn-summary[data-tone="error"]{
  background:var(--grn-danger-bg);border-color:var(--grn-danger-line);color:var(--grn-danger);font-weight:500;
}
.grn-summary[data-tone="error"]::before{
  content:"!";display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:var(--grn-danger);color:#fff;font-size:13px;font-weight:700;line-height:1;
}
.growrent[data-preset="a"] .grn-summary[data-tone="idle"]{border-color:var(--grn-hairline)}
/* B: bez pudełka, wiersz pod polami. */
.growrent[data-preset="b"] .grn-summary{
  padding:12px 0 0;min-height:0;border:0;border-top:1px solid var(--grn-hairline);border-radius:0;background:transparent;
}
.growrent[data-preset="b"] .grn-summary[data-tone="ok"]{color:var(--grn-ink)}
/* C: karta z akcentem po lewej. */
.growrent[data-preset="c"] .grn-summary{border-color:var(--grn-hairline);background:var(--grn-surface);box-shadow:inset 4px 0 0 var(--grn-line);padding-left:18px}
.growrent[data-preset="c"] .grn-summary[data-tone="ok"]{border-color:var(--grn-tint-line);background:var(--grn-tint);box-shadow:inset 4px 0 0 var(--grn-edge-bg)}
.growrent[data-preset="c"] .grn-summary[data-tone="error"]{border-color:var(--grn-danger-line);background:var(--grn-danger-bg);box-shadow:inset 4px 0 0 var(--grn-danger)}

.grn-note{margin-top:8px;color:var(--grn-muted);font-size:13px;line-height:1.45}
/* Cennik, limity i kaucja przed wyborem terminu (grok): jedna cicha grupa nad kalendarzem. */
.grn-tariff{margin:10px 0 2px;color:var(--grn-ink);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.grn-limits,.grn-deposit{margin:0;color:var(--grn-muted);font-size:13px;line-height:1.45}
.grn-deposit{margin-bottom:12px}
.grn-free[hidden],.grn-clear[hidden]{display:none!important}
.grn-free{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:var(--grn-ink);font-size:13px;font-weight:500}
.grn-free::before{content:"";width:8px;height:8px;border-radius:50%;background:#15803d}
.grn-qty{margin-top:10px;color:var(--grn-text);font-size:14px}
.grn-qty label{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grn-qty-input{width:5rem;height:40px;padding:0 10px;border:1px solid var(--grn-line);border-radius:var(--grn-radius);background:var(--grn-surface);color:var(--grn-ink);font:inherit;font-size:15px;font-variant-numeric:tabular-nums}
.grn-qty-input:disabled{background:#f5f5f4;color:var(--grn-muted)}
.grn-clear{min-height:32px;margin-top:6px;padding:0;border:0;background:transparent;color:var(--grn-text);font-size:13px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
/* Podpowiedź przycisku „Do koszyka” (aria-describedby) powtarza podsumowanie: zostaje dla czytnika. */
.grn-hint{
  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;
}

/* ── Koszyk: dodano albo blokada wygasła ───────────────────────────────────── */
.grn-cart{
  margin-top:12px;padding:12px 14px;
  border:1px solid var(--grn-warn-line);border-radius:var(--grn-radius);
  background:var(--grn-warn-bg);color:var(--grn-warn);font-weight:500;
}
.grn-cart:not(:has(p))::before{content:"Koszyk: ";font-weight:600}
.grn-cart:has(p){border-color:var(--grn-hairline);background:var(--grn-surface);color:var(--grn-text);font-weight:400}
.grn-cart p{margin:0;font-size:13px;color:var(--grn-muted);overflow-wrap:anywhere}
.grn-cart p:first-child{
  display:flex;align-items:center;gap:8px;margin-bottom:6px;color:var(--grn-ink);font-size:14px;font-weight:600;
}
.grn-cart p:first-child::before{
  content:"";width:18px;height:18px;flex:none;border-radius:50%;
  background:var(--grn-edge-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center/11px 11px;
}
.grn-cart p:nth-child(2){color:var(--grn-ink);font-size:14px;font-weight:500}

/* ── Wąska kolumna i telefon ───────────────────────────────────────────────── */
@container (max-width:680px){
  .grn-month + .grn-month{display:none}
  .growrent[data-preset="a"] .grn-month + .grn-month{display:none}
}
@container (max-width:480px){
  .grn-field{max-width:none}
  .growrent[data-preset="b"] .grn-open{flex:1 1 100%}
}
@container (max-width:360px){
  .growrent[data-preset="c"] .grn-chip{padding:8px 9px}
  .growrent[data-preset="c"] .grn-chip__name{font-size:14px}
}
@media (max-width:720px){
  .growrent[data-preset="a"],
  .growrent[data-preset="b"],
  .growrent[data-preset="c"]{--grn-day-size:44px}
  .grn-month + .grn-month{display:none}
  .grn-shift{width:40px;height:40px}
  .grn-nav{grid-template-columns:40px minmax(0,1fr) 40px}
  .growrent[data-preset="b"] .grn-pop[data-open="1"]{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:1000;width:auto;max-height:85vh;overflow:auto;
    border:0;border-radius:16px 16px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -1px 0 rgba(28,25,23,.08),0 -16px 40px rgba(28,25,23,.22);
  }
  .growrent[data-preset="b"] .grn-pop[data-open="1"] .grn-months{justify-content:center}
  .growrent[data-preset="b"] .grn-pop[data-open="1"] .grn-sheet-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin:0 -16px 10px;padding:8px 16px 10px;border-bottom:1px solid var(--grn-hairline);
  }
  .grn-sheet-title{font-size:16px;font-weight:600}
  .grn-done{
    min-height:44px;padding:0 16px;border:0;border-radius:999px;
    background:var(--grn-edge-bg);color:var(--grn-on-accent);font-size:15px;font-weight:600;cursor:pointer;
  }
}

/* ── Ruch: krótkie wejścia, tylko gdy użytkownik go nie wyłączył ────────────── */
@media (prefers-reduced-motion:no-preference){
  .grn-day,.grn-chip,.grn-shift,.grn-open,.grn-input{
    transition:background-color var(--grn-dur) var(--grn-ease),color var(--grn-dur) var(--grn-ease),
      border-color var(--grn-dur) var(--grn-ease),box-shadow var(--grn-dur) var(--grn-ease),transform 120ms var(--grn-ease);
  }
  .grn-day:not(:disabled):active,.grn-chip:active,.grn-shift:active{transform:scale(.94)}
  .grn-summary[data-tone="ok"]{animation:grn-rise 240ms var(--grn-ease)}
  .grn-summary[data-tone="error"]{animation:grn-fade 200ms var(--grn-ease)}
  .grn-cart{animation:grn-rise 260ms var(--grn-ease)}
  .growrent[data-preset="b"] .grn-pop[data-open="1"]{animation:grn-pop 200ms var(--grn-ease)}
}
@media (prefers-reduced-motion:no-preference) and (max-width:720px){
  .growrent[data-preset="b"] .grn-pop[data-open="1"]{animation:grn-sheet 260ms var(--grn-ease)}
}
@keyframes grn-rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes grn-fade{from{opacity:0}to{opacity:1}}
@keyframes grn-pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes grn-sheet{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .growrent *,.growrent *::before,.growrent *::after{transition:none!important;animation:none!important}
}
@media (forced-colors:active){
  .grn-day.grn-start,.grn-day.grn-end,.grn-chip[aria-pressed="true"]{outline:2px solid Highlight;forced-color-adjust:none}
  .grn-summary,.grn-cart{border:1px solid CanvasText}
}