/*
 * Appointment booker: shared by szeretetprojekt.hu, nagytami.hu and the admin.
 * Source of truth: szeretetprojekt/public/booker/. nagytami keeps a copy (copied, not linked).
 * Takes the host site's fonts and colours when they exist (--font-body, --paper, --ink ...);
 * a host can set --booker-accent and --booker-title to override.
 *
 * Every shooting type is a swatch: a tint and an ink (from src/config/booker.mjs, set by JS as
 * --bk-tint / --bk-ink) and a fine pattern ([data-pattern]). Readability rule: text always sits
 * on a plain tint or the page, in near-black; the pattern only fills a thin band (.bk-sw::before)
 * or a small sample square (.bk-chip). Contrast: npm run contrast.
 */

.bk {
  --bk-paper: var(--paper, #f7f7f2);
  --bk-surface: #ffffff;
  --bk-text: var(--ink, #000000);
  --bk-muted: var(--ink-2, #4b3d3f);
  --bk-accent: var(--booker-accent, var(--wine, #6e2639));
  --bk-line: color-mix(in srgb, var(--bk-text) 18%, transparent);
  --bk-font: var(--font-body, 'Jost Variable', 'Helvetica Neue', sans-serif);
  --bk-title: var(--booker-title, var(--font-accent, var(--font-display, Georgia, serif)));
  --bk-band: 7px;
  font-family: var(--bk-font);
  font-weight: 400;
  color: var(--bk-text);
}

/* ---------------------------------------------------------------- swatches */
[data-pattern] { --bk-pc: color-mix(in srgb, var(--bk-ink) 62%, transparent); }
[data-pattern='none'] { --bk-pat: none; --bk-band-bg: color-mix(in srgb, var(--bk-ink) 45%, var(--bk-tint)); }
[data-pattern='dots'] { --bk-pat: radial-gradient(var(--bk-pc) 1.1px, transparent 1.6px); --bk-pat-size: 6px 6px; }
[data-pattern='lace'] {
  --bk-pat: repeating-linear-gradient(45deg, var(--bk-pc) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, var(--bk-pc) 0 1px, transparent 1px 5px);
}
[data-pattern='scallop'] { --bk-pat: radial-gradient(circle at 50% 100%, transparent 2.6px, var(--bk-pc) 2.8px 3.9px, transparent 4.2px); --bk-pat-size: 8px 5px; }
[data-pattern='check'] { --bk-pat: linear-gradient(var(--bk-pc) 1px, transparent 1px), linear-gradient(90deg, var(--bk-pc) 1px, transparent 1px); --bk-pat-size: 6px 6px; }
[data-pattern='lines'] { --bk-pat: repeating-linear-gradient(0deg, var(--bk-pc) 0 1px, transparent 1px 3px); }
[data-pattern='diag'] { --bk-pat: repeating-linear-gradient(-45deg, var(--bk-pc) 0 1.5px, transparent 1.5px 5px); }
[data-pattern='grain'] {
  --bk-pat: radial-gradient(var(--bk-pc) 0.9px, transparent 1.3px), radial-gradient(var(--bk-pc) 0.9px, transparent 1.3px);
  --bk-pat-size: 4px 4px;
  --bk-pat-pos: 0 0, 2px 2px;
}

/* A type's surface: plain tint for the text, the pattern in a band along the top. */
.bk-sw {
  position: relative;
  background-color: var(--bk-tint);
  padding-block-start: calc(var(--bk-band) + 0.4rem);
}
.bk-sw::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  block-size: var(--bk-band);
  background-color: var(--bk-band-bg, color-mix(in srgb, var(--bk-ink) 12%, var(--bk-tint)));
  background-image: var(--bk-pat, none);
  background-size: var(--bk-pat-size, auto);
  background-position: var(--bk-pat-pos, 0 0);
}
/* The project's own type: a hairline frame inside (like the "letter" design's text cells). */
.bk-sw[data-frame] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bk-ink) 50%, transparent); }

/* The project's own type name, set like the project name on the site (.sz): italic serif in
   wine. swatch() sets --bk-ink on it; the host's accent font is used when it has one. */
.bk-sz {
  position: relative;
  display: inline-block;
  font-family: var(--font-accent, 'Instrument Serif', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em;
  line-height: 1;
  letter-spacing: 0;
  color: var(--bk-ink);
  white-space: nowrap;
}
/* The same brush underline as the project name on the site (underline.svg). Not inside the
   tiny calendar day cells, where it would crowd the text. */
.bk-sz::after {
  content: '';
  position: absolute;
  inset-inline: -0.02em -0.04em;
  bottom: -0.17em;
  height: 0.32em;
  background: currentColor;
  opacity: 0.78;
  mask: url('/booker/underline.svg') no-repeat center / 100% 100%;
  pointer-events: none;
}
.bk-day .bk-sz { white-space: normal; }
.bk-day .bk-sz::after { display: none; }
/* On a chosen (dark) filter button the name follows the button's light text. */
.bk-btn[aria-pressed='true'] .bk-sz { color: inherit; }

/* A small sample square of a type, next to its name. */
.bk-chip {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  flex: none;
  vertical-align: -0.12em;
  background-color: var(--bk-tint);
  background-image: var(--bk-pat, none);
  background-size: var(--bk-pat-size, auto);
  background-position: var(--bk-pat-pos, 0 0);
  border: 1px solid color-mix(in srgb, var(--bk-ink) 55%, transparent);
}
.bk-chip[data-pattern='none'] { background-color: color-mix(in srgb, var(--bk-ink) 30%, var(--bk-tint)); }

/* ---------------------------------------------------------------- next slots (home tile) */
.bk-next {
  display: grid;
  gap: 0.45em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bk-next__item {
  display: grid;
  grid-template-columns: 4.4em 1fr;
  align-items: stretch;
  min-block-size: 3.6em;
  color: var(--bk-text);
  text-decoration: none;
  background: var(--bk-surface);
  border: 1px solid var(--bk-line);
}
.bk-next__item:hover .bk-next__type,
.bk-next__item:focus-visible .bk-next__type { text-decoration: underline; text-underline-offset: 0.2em; }
.bk-next__sw {
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1;
  padding-block-end: 0.3rem;
}
.bk-next__day { font-family: var(--bk-title); font-size: 1.75em; }
.bk-next__month { font-size: 0.78em; font-weight: 500; }
.bk-next__text { display: grid; align-content: center; gap: 0.15em; padding: 0.45em 0.8em; min-inline-size: 0; }
.bk-next__type { font-weight: 500; }
.bk-next__when { color: var(--bk-muted); font-size: 0.9em; }
.bk-next__item--ghost { visibility: hidden; }
.bk-next--loading .bk-next__item { visibility: hidden; }
.bk-empty { color: var(--bk-muted); }

/* ---------------------------------------------------------------- calendar page */
.bk-main { min-inline-size: 0; }
.bk-page {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
@media (min-width: 60rem) {
  .bk-page { grid-template-columns: minmax(0, 1.55fr) minmax(20rem, 1fr); }
  .bk-panel { position: sticky; top: 1.5rem; }
}

.bk-bar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; margin-block-end: 0.75rem; }
.bk-month { font-family: var(--bk-title); font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.3rem); font-weight: 400; line-height: 1.1; }
.bk-nav { display: flex; gap: 0.4rem; }
.bk-h { font-family: var(--bk-title); font-weight: 400; font-size: clamp(1.35rem, 0.6vw + 1.15rem, 1.7rem); line-height: 1.15; margin-block-end: 0.7rem; }

.bk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-block-size: 2.75rem;
  padding: 0.5em 1.05em;
  font: inherit;
  font-weight: 500;
  color: var(--bk-text);
  background: var(--bk-surface);
  border: 1px solid color-mix(in srgb, var(--bk-text) 30%, transparent);
  border-radius: 999px;
  cursor: pointer;
}
.bk-btn:hover { border-color: var(--bk-text); }
.bk-btn:disabled { opacity: 0.35; cursor: default; }
.bk-btn--icon { inline-size: 2.75rem; padding: 0; font-size: 1.3em; line-height: 1; }
.bk-btn--primary { color: #ffffff; background: var(--bk-accent); border-color: var(--bk-accent); }
.bk-btn--primary:hover { background: color-mix(in srgb, var(--bk-accent) 82%, black); border-color: transparent; }
.bk-btn[aria-pressed='true'] { color: #ffffff; background: var(--bk-text); border-color: var(--bk-text); }
.bk-btn:focus-visible, .bk-day:focus-visible, .bk-slot:focus-visible, .bk-next__item:focus-visible, .bk-quick__item:focus-visible, .bk-link:focus-visible {
  outline: 2px solid var(--bk-accent);
  outline-offset: 2px;
}

.bk-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-end: 1.25rem; }

/* Month grid: 7 columns, Monday first. */
.bk-grid { inline-size: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; margin-inline: -4px; }
.bk-grid th { padding: 0.3rem 0 0.3rem 0.55rem; font-size: 0.85em; font-weight: 500; color: var(--bk-muted); text-align: start; }
.bk-grid td { padding: 0; vertical-align: top; }
.bk-day {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  inline-size: 100%;
  min-block-size: clamp(3.6rem, 7vw, 6.6rem);
  padding: 0.5rem 0.55rem;
  font: inherit;
  text-align: start;
  color: var(--bk-muted);
  border: 1px solid transparent;
  border-radius: 0;
  cursor: default;
}
.bk-day:not(.bk-sw) { background: transparent; }
.bk-day.bk-sw { padding-block-start: calc(var(--bk-band) + 0.35rem); }
.bk-day__num { font-variant-numeric: tabular-nums; font-size: 1.1em; line-height: 1; }
.bk-day__type { font-size: 0.86em; font-weight: 500; line-height: 1.2; color: var(--bk-text); }
.bk-day__count { margin-block-start: auto; font-size: 0.86em; color: var(--bk-text); }
.bk-day--off { border-color: color-mix(in srgb, var(--bk-text) 9%, transparent); }
.bk-day--past { opacity: 0.5; }
.bk-day--today .bk-day__num { font-weight: 600; color: var(--bk-text); text-decoration: underline; text-underline-offset: 0.25em; }
.bk-day--open { color: var(--bk-text); cursor: pointer; }
.bk-day--open .bk-day__num { font-weight: 600; }
.bk-day--open:hover { box-shadow: inset 0 0 0 1px var(--bk-text); }
/* Fully booked: white, outlined, words in grey; the band still says which type. */
.bk-day.bk-day--full { background-color: var(--bk-surface); border: 1px solid var(--bk-line); cursor: pointer; }
.bk-day--full .bk-day__num { text-decoration: line-through; text-decoration-thickness: 1px; }
.bk-day--full .bk-day__type,
.bk-day--full .bk-day__count { color: var(--bk-muted); font-weight: 400; }
.bk-day.is-selected { box-shadow: inset 0 0 0 2px var(--bk-text); }
@media (max-width: 40rem) {
  .bk-day__type,
  .bk-day__word { display: none; }
  .bk-day { padding-inline: 0.35rem; }
  .bk-day__count { font-weight: 600; }
  /* Type filters: one row that scrolls sideways instead of several wrapped lines. */
  .bk-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter, 1rem) * -1); padding: 2px var(--gutter, 1rem); scrollbar-width: none; }
  .bk-filters .bk-btn { flex: none; }
}

.bk-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-block-start: 1rem; font-size: 0.9em; color: var(--bk-muted); }
.bk-legend span { display: inline-flex; align-items: center; gap: 0.5em; }
.bk-legend__full,
.bk-legend__off { display: inline-block; inline-size: 1em; block-size: 1em; border: 1px solid var(--bk-line); background: var(--bk-surface); }
.bk-legend__full { background-image: linear-gradient(to top right, transparent 46%, var(--bk-muted) 47% 53%, transparent 54%); }

/* Fast path: the next free slots, above the grid. */
.bk-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.5rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.bk-quick__item {
  display: block;
  inline-size: 100%;
  padding: calc(var(--bk-band) + 0.5rem) 0.85rem 0.6rem;
  font: inherit;
  text-align: start;
  color: var(--bk-text);
  border: 0;
  cursor: pointer;
}
.bk-quick__item:hover strong { text-decoration: underline; text-underline-offset: 0.2em; }
.bk-quick__item strong { display: block; font-weight: 600; }
.bk-quick__item span { display: block; font-size: 0.92em; }

/* Day panel and request form. */
.bk-panel { padding: clamp(1.25rem, 2vw, 2rem); background: var(--bk-surface); border: 1px solid var(--bk-line); }
.bk-panel__type { display: flex; align-items: center; gap: 0.5em; margin-block-end: 1rem; font-weight: 500; }
.bk-slots { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.bk-slot {
  min-inline-size: 6.5rem;
  min-block-size: 3rem;
  padding: calc(var(--bk-band) + 0.35rem) 0.9em 0.45em;
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bk-text);
  border: 0;
  cursor: pointer;
}
.bk-slot:hover { box-shadow: inset 0 0 0 1px var(--bk-text); }
.bk-slot[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--bk-text); }
.bk-slot[aria-pressed='true']::after { content: ' ✓'; }
.bk-slot:disabled { color: var(--bk-muted); background: var(--bk-surface); font-weight: 400; cursor: default; box-shadow: inset 0 0 0 1px var(--bk-line); }
.bk-slot:disabled::before { display: none; }
.bk-slot small { display: block; font-size: 0.78em; font-weight: 400; }
.bk-hint { color: var(--bk-muted); font-size: 0.95em; }

.bk-form { display: grid; gap: 0.9rem; }
.bk-summary { padding-inline: 0.9rem; padding-block-end: 0.7rem; }
.bk-summary strong { display: block; font-weight: 600; }
.bk-field { display: grid; gap: 0.3rem; }
.bk-field label { font-size: 0.95em; font-weight: 500; }
.bk-field input,
.bk-field textarea {
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: 0.55em 0.7em;
  font: inherit;
  color: var(--bk-text);
  background: var(--bk-surface);
  border: 1px solid color-mix(in srgb, var(--bk-text) 40%, transparent);
  border-radius: 0;
}
.bk-field input:focus-visible,
.bk-field textarea:focus-visible { outline: 2px solid var(--bk-accent); outline-offset: 1px; }
.bk-field [aria-invalid='true'] { border-color: var(--bk-accent); border-width: 2px; }
.bk-trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.bk-status:empty { display: none; }
.bk-status { padding: 0.6rem 0.8rem; border-inline-start: 3px solid var(--bk-accent); background: var(--bk-surface); }
.bk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.bk-done { display: grid; gap: 0.75rem; }
.bk-link { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {
  .bk-panel > * { animation: bk-in 160ms ease-out; }
}
@keyframes bk-in { from { opacity: 0; transform: translateY(3px); } }