/* ==========================================================================
   Wspólne komponenty używane na wielu podstronach (ładowane globalnie w
   base.html). Każdy komponent ma tu jedną definicję — nie kopiujemy ich do
   arkuszy aplikacji (listing.css / attractions.css / detail.css).
   ========================================================================== */

/* --- Dolny pasek ceny i "Kup bilet" na stronach szczegółów (mobile) ---
   components/mobile_booking_bar.html. Na desktopie tę rolę pełni
   .booking-card w sidebarze, który na mobile jest ukryty. */
.mobile-booking-bar { display: none; }

@media (max-width: 768px) {
  .mobile-booking-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--card, #fff);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px -12px rgba(15, 23, 42, 0.18);
  }
  .mobile-booking-bar-price {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mobile-booking-bar .muted-label {
    font-size: 12px;
    color: var(--muted-fg);
  }
  .mobile-booking-bar .booking-card-price {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-booking-bar .btn {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 22px;
    font-size: 15px;
    font-weight: 600;
  }
  /* Pasek jest fixed, więc rezerwujemy pod nim miejsce na końcu strony. */
  body:has(.mobile-booking-bar) {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }
}

/* --- Rezerwacje na stronach szczegółów: drugi przycisk w karcie i karta
   właściciela (reservations/partials/owner_card.html) --- */
.booking-card .btn.full + .btn.full { margin-top: 8px; }
.owner-card--reservations .owner-metrics { margin-bottom: 12px; }
.owner-card--reservations .owner-metric--alert strong { color: var(--accent); }

/* --- Strona szczegółów: galeria bez zdjęć ---
   Spokojny pusty stan (tło papieru + ikona) zamiast dużego szarego bloku. */
.detail-gallery:has(.detail-gallery-empty) {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: 220px;
}
.detail-gallery-empty {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border-radius: inherit;
  background-color: var(--muted);
  background-image: repeating-linear-gradient(135deg, transparent 0 16px, rgba(15, 23, 42, 0.035) 16px 17px);
  color: var(--muted-fg);
  font-size: 14px;
  text-align: center;
}
.detail-gallery-empty svg { width: 40px; height: 40px; opacity: 0.7; }
@media (max-width: 768px) {
  .detail-gallery:has(.detail-gallery-empty) { height: 160px; }
}

/* --- Wydarzenie: "Wybieram się / Idę!" obok licznika uczestników ---
   (dawniej schowane w menu "Więcej"). Stan aktywny przełącza JS na stronie
   (klasa .action-btn--active, jak wcześniej). */
.attend-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--card);
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.attend-btn:hover { border-color: var(--primary); color: var(--primary); }
.attend-btn .action-btn-ico,
.attend-btn.action-btn--active .action-btn-ico {
  display: inline-flex;
  width: auto;
  height: auto;
  background: none;
  color: inherit;
}
.attend-btn.action-btn--active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-fg);
}

/* --- Ikony liniowe w tekście przycisków (zamiast emoji) --- */
.ui-ico {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: -2px;
}
.delete-dialog-icon svg { color: var(--destructive); }

/* Większy obszar dotyku dla "✕" w chipach aktywnych filtrów */
.applied-filter-remove {
  position: relative;
}
.applied-filter-remove::before {
  content: '';
  position: absolute;
  inset: -10px -8px;
}

/* Reklama wstawiona między wyniki listy (components.js) — w siatce zajmuje
   pełny wiersz i jest niższa niż wersja nad wynikami. */
.listing-ad.listing-ad--inline {
  grid-column: 1 / -1;
  margin: 0;
}
.listing-ad.listing-ad--inline img { height: 220px; }

/* Gwiazdki w oknie "Dodaj recenzję" (SVG zamiast Font Awesome) */
.review-star-icons { display: inline-flex; gap: 2px; }
.review-star-icons svg { width: 16px; height: 16px; }

/* --- Pola formularzy z klasami DaisyUI (widgety w forms.py: "input
   input-bordered w-full", "select select-bordered", "textarea
   textarea-bordered", "checkbox", "file-input") ---
   DaisyUI nie jest ładowane, więc bez tych reguł pola renderowały się jako
   surowe kontrolki przeglądarki tam, gdzie strona nie nadpisywała ich sama.
   Wygląd = .form-control z base.css. Warianty *-bordered nie kolidują z
   żadną klasą projektu, więc mogą być globalne. */
:is(.input.input-bordered, .select.select-bordered, .textarea.textarea-bordered, .file-input.file-input-bordered) {
  display: block;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  transition: border-color var(--transition), box-shadow var(--transition);
}
:is(.input.input-bordered, .select.select-bordered, .textarea.textarea-bordered, .file-input.file-input-bordered):focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
:is(.input, .select, .textarea, .file-input).w-full { width: 100%; }
.textarea.textarea-bordered { min-height: 100px; resize: vertical; }
.select.select-bordered {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f5a53' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.file-input.file-input-bordered { padding: 8px 10px; }
.checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}