/* Rezerwacje (reservations) - frontend. Template-independent: the module reads the shared --cms-* tokens a template
   may define (AGENTS.md, section 23) and falls back to Bootstrap variables. The timetable reacts to the width of the
   module or block (container queries): seven day columns on wide pages, day cards with a grid of hours on narrow ones.
   Link classes are written twice (".rs-x.rs-x") so template rules such as ".mn-template a" do not recolour them. */

.rs-module,.rs-block{
  --rs-accent:var(--cms-accent,var(--bs-primary,#0d6efd));
  --rs-accent-ink:var(--cms-accent-ink,var(--rs-accent));
  --rs-accent-soft:var(--cms-accent-soft,color-mix(in srgb,var(--rs-accent) 12%,transparent));
  --rs-text:var(--bs-body-color,#212529);
  --rs-muted:var(--bs-secondary-color,#6c757d);
  --rs-border:var(--bs-border-color,#dee2e6);
  --rs-surface:var(--cms-surface,var(--bs-body-bg,#fff));
  --rs-soft:var(--cms-surface-soft,var(--bs-tertiary-bg,#f8f9fa));
  --rs-taken:var(--bs-danger,#dc3545);
  --rs-taken-soft:color-mix(in srgb,var(--rs-taken) 14%,var(--rs-surface));
  --rs-line:var(--cms-surface-border-width,1px);
  --rs-radius:var(--cms-radius,12px);
  --rs-radius-sm:var(--cms-radius-sm,8px);
  container-type:inline-size;
}
:where(.rs-module,.rs-block) a:not([class]){color:var(--rs-accent-ink)}

.rs-module{margin-bottom:2rem}
.rs-crumbs{font-size:.85rem;color:var(--rs-muted);margin-bottom:.5rem}
.rs-crumbs a{color:inherit}
.rs-head{margin-bottom:1.25rem}
.rs-head__title{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:0 0 .5rem;font-size:clamp(1.5rem,1.25rem + 1vw,2.1rem);line-height:1.2;overflow-wrap:anywhere}
.rs-head__lead{color:var(--rs-muted);max-width:72ch}
.rs-head__lead p:last-child{margin-bottom:0}
.rs-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Legend */
.rs-legend{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;list-style:none;margin:0 0 1rem;padding:0;font-size:.85rem;color:var(--rs-muted)}
.rs-legend li{display:inline-flex;align-items:center;gap:.4rem}
.rs-legend__dot{display:inline-block;width:.95rem;height:.95rem;border-radius:4px;border:1px solid var(--rs-border)}
.rs-legend__dot--free{background:var(--rs-accent-soft);border-color:color-mix(in srgb,var(--rs-accent) 45%,var(--rs-border))}
.rs-legend__dot--taken{background:var(--rs-taken-soft);border-color:color-mix(in srgb,var(--rs-taken) 45%,var(--rs-border))}
.rs-legend__dot--off{background:var(--rs-soft)}

/* Weeks and days */
.rs-week{margin-bottom:1.75rem}
.rs-week__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem;font-size:1.15rem;margin:0 0 .75rem}
.rs-week__range{font-size:.9rem;font-weight:400;color:var(--rs-muted)}
.rs-week__empty{color:var(--rs-muted);font-size:.9rem}
.rs-grid{display:grid;gap:.75rem}
.rs-day{border:var(--rs-line) solid var(--rs-border);border-radius:var(--rs-radius);background:var(--rs-surface);overflow:hidden}
.rs-day--past{display:none}
.rs-day--today{border-color:color-mix(in srgb,var(--rs-accent) 55%,var(--rs-border))}
.rs-day__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem;margin:0;padding:.55rem .75rem;font-size:.95rem;background:var(--rs-soft);border-bottom:1px solid var(--rs-border)}
.rs-day__name{font-weight:700;text-transform:capitalize}
.rs-day__date{color:var(--rs-muted);font-weight:400}
.rs-day__today{display:inline-block;padding:0 .35rem;border-radius:999px;background:var(--rs-accent);color:#fff;font-size:.72rem;font-weight:600;vertical-align:1px}
.rs-day__count{margin-left:auto;font-size:.78rem;font-weight:400;color:var(--rs-muted)}
.rs-day__slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.6rem,1fr));gap:.35rem;list-style:none;margin:0;padding:.6rem}

.rs-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:2.75rem;padding:.25rem .3rem;border:1px solid var(--rs-border);border-radius:var(--rs-radius-sm);font-size:.82rem;line-height:1.15;text-align:center}
.rs-slot__time{font-weight:700}
.rs-slot__state{font-size:.72rem}
.rs-slot.rs-slot--free{background:var(--rs-accent-soft);border-color:color-mix(in srgb,var(--rs-accent) 45%,var(--rs-border));color:var(--rs-accent-ink);text-decoration:none;transition:background-color .15s ease,color .15s ease}
.rs-slot.rs-slot--free:hover,.rs-slot.rs-slot--free:focus-visible{background:var(--rs-accent);border-color:var(--rs-accent);color:#fff}
.rs-slot.rs-slot--free:focus-visible{outline:2px solid var(--rs-accent);outline-offset:2px}
.rs-slot--taken{background:var(--rs-taken-soft);border-color:color-mix(in srgb,var(--rs-taken) 40%,var(--rs-border));color:color-mix(in srgb,var(--rs-taken) 75%,var(--rs-text))}
.rs-slot--off,.rs-slot--past{background:var(--rs-soft);color:var(--rs-muted)}
.rs-slot--past .rs-slot__state{display:none}

/* Seven columns when the module is wide enough; all days visible so the hours line up. */
@container (min-width:46rem){
  .rs-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem}
  .rs-day,.rs-day--past{display:block}
  .rs-day--past{opacity:.75}
  .rs-day__head{flex-direction:column;align-items:center;gap:0;padding:.45rem .25rem;font-size:.85rem;text-align:center}
  .rs-day__count{margin:0;font-size:.7rem}
  .rs-day__slots{grid-template-columns:1fr;gap:.3rem;padding:.35rem}
  .rs-slot{min-height:2.6rem;padding:.2rem}
  .rs-week__empty{display:none}
}
@container (min-width:46rem) and (max-width:58rem){
  .rs-day__name{font-size:.78rem}
  .rs-slot__state{font-size:.66rem}
}

/* Form and booking page */
.rs-layout{display:grid;gap:1rem;align-items:start}
@container (min-width:52rem){.rs-layout{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}}
.rs-card{padding:1.1rem 1.2rem;border:var(--rs-line) solid var(--rs-border);border-radius:var(--rs-radius);background:var(--rs-surface)}
.rs-card--soft{background:var(--rs-soft)}
.rs-card--narrow{max-width:44rem}
.rs-card__title{display:flex;align-items:center;gap:.45rem;font-size:1.1rem;margin:0 0 .75rem}
.rs-steps{margin:0;padding-left:1.2rem;font-size:.92rem}
.rs-steps li+li{margin-top:.3rem}
.rs-when{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-bottom:1rem;padding:.8rem 1rem;border-radius:var(--rs-radius-sm);background:var(--rs-accent-soft);border:1px solid color-mix(in srgb,var(--rs-accent) 35%,var(--rs-border))}
.rs-when--cancelled{background:var(--rs-soft);border-color:var(--rs-border)}
.rs-when--cancelled .rs-when__day,.rs-when--cancelled .rs-when__hour{text-decoration:line-through}
.rs-when__icon{font-size:1.8rem;color:var(--rs-accent-ink)}
.rs-when__day{font-weight:700;font-size:1.05rem}
.rs-when__hour{color:var(--rs-muted)}
.rs-when__status{margin-left:auto}
.rs-status{display:inline-flex;align-items:center;gap:.3rem;font-weight:600}
.rs-details{display:grid;grid-template-columns:minmax(7rem,max-content) 1fr;gap:.35rem 1rem;margin:0 0 1rem}
.rs-details dt{font-weight:600;color:var(--rs-muted)}
.rs-details dd{margin:0;overflow-wrap:anywhere}
@container (max-width:26rem){.rs-details{grid-template-columns:1fr}.rs-details dd{margin-bottom:.35rem}}
.rs-note{color:var(--rs-muted)}

/* Block: next free slots */
.rs-block__text{font-size:.9rem;margin:0 0 .6rem}
.rs-block__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.35rem;list-style:none;margin:0 0 .6rem;padding:0}
.rs-block__slot.rs-block__slot{display:flex;flex-direction:column;padding:.35rem .55rem;border:1px solid color-mix(in srgb,var(--rs-accent) 40%,var(--rs-border));border-radius:var(--rs-radius-sm);background:var(--rs-accent-soft);color:var(--rs-accent-ink);text-decoration:none;font-size:.82rem;line-height:1.25}
.rs-block__slot.rs-block__slot:hover,.rs-block__slot.rs-block__slot:focus-visible{background:var(--rs-accent);border-color:var(--rs-accent);color:#fff}
.rs-block__slot strong{font-size:.9rem}
.rs-block__empty{font-size:.88rem;color:var(--rs-muted);margin:0 0 .6rem}
.rs-block__more.rs-block__more{font-size:.88rem;font-weight:600;color:var(--rs-accent-ink);text-decoration:none}
.rs-block__more.rs-block__more:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){.rs-slot{transition:none}}