/* ============================================================
   extras-hotres.css — widget rezerwacji HotRes + jQuery UI datepicker
   Korzysta z tokenów zdefiniowanych w base.css (kolory, fonty, spacing).
   ============================================================ */

/* ===== HotresChooser — kontener formularza ===== */
.hotresChooser {
  background: rgba(0, 0, 0, 0.45) !important;
  box-sizing: border-box !important;
  padding: var(--space-4) !important;
  border-radius: 0 !important;
  max-width: 800px !important;
  margin: auto !important;
  font-family: var(--font-body) !important;
}

.hotresChooser:after {
  content: '' !important;
  display: block !important;
  clear: both !important;
}

.hotresChooser div {
  float: left !important;
  margin: 0 !important;
  padding: var(--space-1) !important;
  width: 33% !important;
  box-sizing: border-box !important;
}

/* Pola wyboru — translucent z jasnym tekstem (na ciemnym tle hero) */
.hotresChooser div input {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  background-image: none !important;
  background-color: #fff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  color: #000 !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: 48px !important;
  line-height: 48px !important;
  border-radius: 0 !important;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease !important;
}

.hotresChooser div input::placeholder {
  color: rgba(0, 0, 0, 0.6) !important;
}

.hotresChooser div input:hover,
.hotresChooser div input:focus {
  border-color: var(--color-accent) !important;
  color: var(--color-accent-soft) !important;
  outline: none !important;
}

/* Stan zaznaczenia (po wyborze daty/wartości) — wypełnione akcentem */
.hotresInputSelected {
  background: var(--color-bg) !important;
  color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

/* Przycisk submit — primary CTA w kolorze akcentu */
.hotresChooser div button {
  border-radius: 0 !important;
  border: 1px solid var(--color-accent) !important;
  background: var(--color-accent) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  color: var(--color-text-invert) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: 48px !important;
  line-height: 48px !important;
  font-weight: 500 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  overflow: hidden !important;
}

.hotresChooser div button:hover {
  background: transparent !important;
  color: var(--color-accent) !important;
}
#hotresClose img {display:inline;}
/* Smartfony — 2 kolumny + ostatni element pełnej szerokości */
@media only screen and (max-width: 40em) {
  .hotresChooser { padding: var(--space-1) !important; }
  .hotresChooser div { width: 50% !important; }
  .hotresChooser div:last-child { width: 100% !important; }
}


/* ============================================================
   jQuery UI Datepicker — popup kalendarza
   ============================================================ */

.ui-datepicker {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  padding: var(--space-4) !important;
  font-family: var(--font-body) !important;
  border: 1px solid var(--color-line) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important; 
}

.ui-datepicker * {
  font-size: var(--fs-sm) !important;
}

.ui-datepicker-month,
.ui-datepicker-year {
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-wide) !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
}

/* Stany disabled (przeszłe daty) */
.ui-state-disabled {
  color: var(--color-text-muted) !important;
  font-weight: normal !important;
  opacity: 0.5 !important;
}

/* ===== Header z miesiącem i strzałkami nawigacji ===== */

.ui-datepicker .ui-datepicker-header {
  margin-bottom: var(--space-3) !important;
  text-align: center !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-2) !important;
}

.ui-datepicker .ui-datepicker-title {
  font-family: var(--font-display) !important;
  font-size: var(--fs-lg) !important;
  font-weight: 400 !important;
  height: 36px !important;
  line-height: 36px !important;
  flex: 1 !important;
  text-align: center !important;
}

/* Strzałki nawigacji — kwadraty z border, hover akcent */
.ui-datepicker-prev,
.ui-datepicker-next {
  cursor: pointer !important;
}

.ui-datepicker-prev::before,
.ui-datepicker-next::before {
  color: var(--color-text-soft) !important;
  font-size: 1.25rem !important;
  background: transparent !important;
  border: 1px solid var(--color-line) !important;
  border-radius: 0 !important;
  height: 36px !important;
  width: 36px !important;
  line-height: 34px !important;
  text-align: center !important;
  font-weight: 400 !important;
  display: block !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}

.ui-datepicker-prev::before { content: '\2039' !important; }
.ui-datepicker-next::before { content: '\203A' !important; }

.ui-datepicker .ui-datepicker-prev:hover::before,
.ui-datepicker .ui-datepicker-next:hover::before {
  color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

/* Ukryj domyślne ikony jQuery UI */
.ui-icon { display: none !important; }


/* ===== Tabela kalendarza ===== */

.ui-datepicker .ui-datepicker-calendar {
  table-layout: fixed !important;
  max-width: 400px !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

.ui-datepicker .ui-datepicker-calendar th,
.ui-datepicker .ui-datepicker-calendar td {
  text-align: center !important;
  padding: var(--space-2) var(--space-2) !important;
  color: var(--color-text) !important;
  border: none !important;
  transition: background-color 0.15s ease !important;
}

/* Nagłówki dni tygodnia */
.ui-datepicker .ui-datepicker-calendar th {
  color: var(--color-text-muted) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-wider) !important;
  padding-bottom: var(--space-3) !important;
}

/* Linki dni — całe komórki klikalne */
.ui-datepicker a,
.ui-datepicker a:hover {
  text-decoration: none !important;
}

.ui-datepicker .ui-datepicker-calendar td a {
  text-decoration: none !important;
  color: var(--color-text) !important;
  font-weight: 400 !important;
  display: block !important;
  padding: var(--space-2) !important;
  border-radius: 0 !important;
  transition: color 0.2s ease !important;
}

/* Hover na komórce dnia — tło akcent */
.ui-datepicker .ui-datepicker-calendar td:hover {
  background: var(--color-bg-soft) !important;
  cursor: pointer !important;
}

.ui-datepicker .ui-datepicker-calendar td:hover a,
.ui-datepicker a:hover {
  color: var(--color-accent) !important;
}

/* Dzień bieżący / wybrany */
.ui-datepicker .ui-datepicker-current-day {
  background: var(--color-accent) !important;
}

.ui-datepicker .ui-datepicker-current-day a,
.ui-datepicker-current-day a {
  color: var(--color-text-invert) !important;
  font-weight: 500 !important;
}

/* Komórki niewybierane (poza zakresem) — bez hovera */
.ui-datepicker .ui-datepicker-calendar .ui-datepicker-unselectable:hover {
  background-color: transparent !important;
  color: var(--color-text-muted) !important;
  cursor: default !important;
}

/* Highlight zakresu dat (opcja: between-date) */
.dp-highlight,
.between-date {
  background: var(--color-bg-soft) !important;
  color: var(--color-text) !important;
}

/* Container widget — niewidoczny dopóki JS go nie pokaże */
.ui-widget-content {
  display: none;
  margin-left: 0 !important;
  z-index: 9999999 !important;
}