/* ==========================================================================
   LEASING360 — style własnych widgetów Elementora
   Uzupełniają design system z motywu (leasing360.css).
   Ten plik zawiera wyłącznie reguły, których nie ma w motywie — dzięki temu
   wtyczka działa też przy innym motywie, choć wtedy bez pełnego brandingu.
   ========================================================================== */

/* Fallbacki tokenów — działają, gdy motyw potomny NIE jest aktywny.
   Ten plik jest kolejkowany z priorytetem 10, a design system motywu z 20,
   więc przy aktywnym motywie potomnym poniższe wartości są nadpisywane.
   UWAGA: nie zapisuj tego jako `--x: var(--x, wartość)` — self-reference
   tworzy cykl i unieważnia zmienną (invalid at computed-value time). */
:root {
  --l360-brand:     #0C25EC;
  --l360-ink:       #0A121F;
  --l360-muted-fg:  #545E6F;
  --l360-border:    #DCE6F2;
  --l360-white:     #FFFFFF;
}

/* Siatki widgetów (gap/kolumny nadpisywane z panelu Elementora) */
.l360-quotes,
.l360-cases {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .l360-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l360-cases  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
  .l360-quotes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Widok w edytorze Elementora: nie animuj wejścia, żeby elementy były widoczne */
.elementor-editor-active .l360-reveal,
.elementor-editor-preview .l360-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Marquee w edytorze — zatrzymaj, żeby nie rozpraszało przy pracy */
.elementor-editor-active .l360-marquee__track {
  animation-play-state: paused;
}

/* Placeholder dla pustej siatki aut w edytorze */
.elementor-editor-active .l360-cars:empty::before {
  content: "Dodaj samochody w: Flota360 → Dodaj samochód";
  display: block;
  padding: 24px;
  border: 1px dashed var(--l360-border);
  border-radius: 16px;
  color: var(--l360-muted-fg);
  font-size: 14px;
}