/* ============================================================================
   WYPOŻYCZALNIA SPRZĘTU

   Karty sprzętu, formularz, checkbox zgody i ekran potwierdzenia to te same
   klasy co w kreatorze rezerwacji (`.service`, `.field`, `.field-row`,
   `.field-hint`, `.field-checkbox`, `.consent`, `.confirmation`, `.summary` —
   wszystkie w `booking.css`, który jest na tej stronie i tak zawsze wczytany).
   Tu leży wyłącznie to, czego tamten arkusz nie ma: rama sekcji, blok
   warunków wypożyczenia i wariant awaryjny bez backendu.
   ============================================================================ */

.rentals {
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--s-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
}

.rentals__body {
  padding: clamp(var(--sp-6), 4vw, var(--sp-9));
}

/* Warunki wypożyczenia (próg cenowy, elektrody) i wyjście na telefon w sprawie
   wyższego modelu. Przycisk NIE może stać w karcie sprzętu - karta jest sama
   w sobie `<button>`, a zagnieżdżanie w niej odnośnika daje niepoprawny HTML
   i psuje klikanie obu elementów. */
.rentals__terms {
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--s-line);
}

/* `.form` jest siatką, więc przycisk domyślnie rozciąga się na całą jej
   szerokość (34rem). Na telefonie to zaleta - duży cel dotykowy. Na szerokim
   ekranie 544-pikselowy przycisk „Wyślij zapytanie” wyłamuje się z reszty
   strony, gdzie przyciski mają szerokość swojej treści. */
@media (min-width: 481px) {
  #rental-submit {
    justify-self: start;
  }
}

/* ----------------------------------------------------------------------------
   Awaria backendu — ten sam wzorzec co `.booking__fallback`, osobna klasa,
   bo to niezależny moduł JS z własnym przełącznikiem stanu.
   ---------------------------------------------------------------------------- */
.rentals__fallback {
  display: none;
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
}
.rentals.is-offline .rentals__fallback {
  display: block;
}
.rentals.is-offline .rentals__body {
  display: none;
}

/* ----------------------------------------------------------------------------
   Podsumowanie wybranego terminu pod kalendarzem

   Kalendarz pokazuje wybór kolorem, ale sam kolor to za mało: `aria-live`
   czyta tę linijkę na głos, a osoba, która kliknęła jeden dzień, dostaje
   wprost informację, że brakuje drugiego.
   ---------------------------------------------------------------------------- */
.rental-dates {
  margin-top: var(--sp-3);
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}