/* ============================================================
   Kalendarz rezerwacji (/rozmowa) — własny widget na TidyCal API.
   Linkowany TYLKO z rozmowa.html. Reużywa tokenów z css/styles.css.
   ============================================================ */

.bcal {
  background: #fff;
  border: 1px solid rgba(26,41,66,0.12);
  border-radius: var(--radius-lg);
  padding: 22px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  min-height: 440px;
  /* Kontener zapytań: układ wnętrza zależy od szerokości SAMEGO widgetu, nie okna.
     Dodatkowo inline-size stabilizuje szerokość niezależnie od zawartości. */
  container: bcal / inline-size;
}

/* Stan startowy / fallback (widoczny w statycznym HTML, zanim wejdzie JS) */
.bcal__initial {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  min-height: 396px;
  color: var(--color-text-muted);
}

/* Układ: mobile = jedna kolumna (kalendarz, pod nim godziny). Desktop = dwie kolumny.
   min-width:0 pozwala wnętrzu się kurczyć, więc szerokość całego .bcal jest stała. */
.bcal__panes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.bcal__cal { min-width: 0; }
/* Mobile / wąski widget: jedna kolumna (kalendarz, pod nim godziny z separatorem). */
@container bcal (max-width: 499px) {
  .bcal__times { border-top: 1px solid rgba(26,41,66,0.1); padding-top: 16px; }
}
/* Szeroki widget: dwie kolumny (kalendarz | godziny). */
@container bcal (min-width: 500px) {
  .bcal__panes { grid-template-columns: minmax(0, 1fr) 190px; column-gap: 0; }
  .bcal__timeslist { grid-template-columns: 1fr; }
  /* Linia DOKŁADNIE pomiędzy kolumnami: gap 0, a odstęp robimy symetrycznym
     paddingiem po obu stronach (28px). Siatka dni kończy się 28px przed linią,
     a godziny zaczynają 28px za nią — kreska nie wchodzi w kolumnę ND. */
  .bcal__cal { padding-right: 28px; }
  .bcal__times { border-left: 1px solid rgba(26,41,66,0.12); padding-left: 28px; }
}

/* Nagłówek miesiąca */
.bcal__monthhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.bcal__monthname {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--color-navy);
  text-transform: capitalize;
}
.bcal__nav { display: flex; gap: 6px; }
.bcal__navbtn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(26,41,66,0.18);
  background: #fff;
  color: var(--color-navy);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bcal__navbtn:hover:not(:disabled) { background: rgba(26,41,66,0.05); }
.bcal__navbtn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Siatka dni */
/* minmax(0,1fr): kolumny mogą się kurczyć poniżej min-content komórki, więc siatka
   NIGDY nie wylewa się poza swoją kolumnę (to powodowało brak odstępu przy kresce). */
.bcal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bcal__dow {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  padding: 6px 0;
}
.bcal__day {
  aspect-ratio: 1 / 1;  /* kwadrat; wysokość = szerokość kolumny (1fr) */
  min-width: 0;         /* BEZ min-height: nie ma czego wymuszać, więc kratka = szerokość kolumny
                           i zawsze mieści się w siatce — gap 6px zostaje zachowany (PC i mobile) */
  border: 1px solid rgba(26,41,66,0.12); /* jednakowy, widoczny kontur dla KAŻDEGO dnia */
  border-radius: var(--radius-md);
  background: rgba(26,41,66,0.04);       /* jednakowy kafelek dla wszystkich; różni tekst, nie tło */
  color: var(--color-navy);
  font-size: 15px;
  font-weight: 500;
  position: relative;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.bcal__day:hover:not(:disabled) { background: rgba(164,124,58,0.16); border-color: rgba(164,124,58,0.5); transform: translateY(-1px); }
.bcal__day:disabled { color: rgba(26,41,66,0.32); cursor: not-allowed; } /* różnica = tylko tekst + kursor */
.bcal__day--empty { background: transparent; border: 0; }
.bcal__day--available::after {
  content: "";
  position: absolute;
  bottom: 3px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-brass);
}
.bcal__day--selected {
  background: var(--color-navy);
  color: var(--color-cream);
  border-color: var(--color-navy);
}
.bcal__day--selected.bcal__day--available::after { background: var(--color-brass-light); }
.bcal__day--today { border-color: rgba(164,124,58,0.5); }

/* MOBILE: mniejsze kratki/numerki — UMIESZCZONE PO regułach bazowych .bcal__day/.bcal__dow,
   żeby NIE zostały nadpisane (wcześniej stały przed nimi i base wygrywał kolejnością →
   kratki zostawały 44px zamiast się zmniejszyć). min-height niski, bo szerokość (aspect-ratio)
   i tak wyznacza realny rozmiar kratki w wąskiej siatce. */
@container bcal (max-width: 499px) {
  .bcal__dow { font-size: 10px; }
  .bcal__day { font-size: 13px; }
}

/* Kolumna godzin */
.bcal__times { display: flex; flex-direction: column; min-width: 0; }
.bcal__timeshead {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 10px;
  min-height: 20px;
}
.bcal__timeslist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.bcal__time {
  padding: 8px 10px;
  min-height: 38px;
  border: 1px solid rgba(26,41,66,0.2);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 500;
}
.bcal__time:hover { border-color: var(--color-brass); background: rgba(164,124,58,0.08); }
.bcal__hint { font-size: 13px; color: var(--color-text-dim); margin: 4px 0 0; }

/* Formularz */
.bcal__form { display: flex; flex-direction: column; gap: 12px; }
.bcal__summary {
  background: rgba(164,124,58,0.1);
  border: 1px solid rgba(164,124,58,0.25);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--color-navy);
}
.bcal__summary strong { font-weight: 600; }
.bcal__field { display: flex; flex-direction: column; gap: 5px; }
.bcal__label { font-size: 13px; font-weight: 500; color: var(--color-navy); }
.bcal__input {
  font-family: var(--font-sans);
  font-size: 16px; /* >=16px: brak auto-zoom na iOS */
  color: var(--color-text);
  background: var(--color-cream);
  border: 1px solid rgba(26,41,66,0.2);
  border-radius: var(--radius-md);
  padding: 11px 12px;
}
.bcal__input:focus { outline: none; border-color: var(--color-brass); box-shadow: 0 0 0 3px rgba(164,124,58,0.15); }
/* honeypot — ukryte przed ludźmi, dostępne dla botów */
.bcal__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bcal__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.bcal__actions .btn { flex: 1; justify-content: center; min-width: 130px; }

/* Komunikaty / stany */
.bcal__msg {
  font-size: 14px;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin: 0;
}
.bcal__msg--error { background: #f6e6e6; border: 1px solid #d9a8a8; color: #7a2e2e; }
.bcal__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  min-height: 396px;
  padding: 12px;
}
.bcal__success-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-cream);
  display: flex; align-items: center; justify-content: center;
}
.bcal__success h3 { margin: 0; }
.bcal__back {
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: var(--color-brass);
  font-size: 13px;
  font-weight: 500;
  padding: 4px 0;
}
.bcal__back:hover { color: var(--color-navy); }

/* Skeleton ładowania */
.bcal__skeleton {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.bcal__skel-cell {
  aspect-ratio: 1/1;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(26,41,66,0.05) 25%, rgba(26,41,66,0.09) 37%, rgba(26,41,66,0.05) 63%);
  background-size: 400% 100%;
  animation: bcal-shimmer 1.3s ease infinite;
}
@keyframes bcal-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .bcal__skel-cell { animation: none; } }

.bcal[aria-busy="true"] { opacity: 0.7; }