/* Shared booking UI styles — the single source of truth for the visual primitives
 * used by BOTH the server-rendered booking/manage pages and the embeddable widget
 * (injected into its Shadow DOM). Page chrome (body background, powered-by) and the
 * per-context responsive layer (page @media vs widget @container) live with each
 * surface; everything that defines how the card/calendar/slots/form/confirm LOOK
 * lives here so the two never drift. Class names are shared verbatim. */

/* Reset — also relied on by the widget's Shadow DOM, which has no UA reset of its
 * own. box-sizing:border-box keeps width:100% panes inside the card; zeroing margin/
 * padding removes default <ul>/<h1>/<p> spacing (component rules below set their own). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Brand banner ────────────────────────────────── */
/* Full-width operator banner, shown above .card (below the logo, if any). Not
 * used by the embed widget — the widget carries no operator branding. */
.brand-banner {
  display: block;
  width: 100%;
  max-width: 860px;
  height: auto;
  border-radius: 12px;
  margin: 0 0 16px;
}

/* ── Card ────────────────────────────────────────── */
.card {
  display: flex;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 12px 40px rgba(0,0,0,.1);
  overflow: hidden;
  width: 100%;
  max-width: 860px;
}

/* ── Info panel ──────────────────────────────────── */
.info {
  width: 240px;
  flex-shrink: 0;
  padding: 2rem 1.5rem;
  border-right: 1px solid #e5e7eb;
}
.host-name  { font-size: .8125rem; color: #6b7280; margin-bottom: .375rem; }
.event-name { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.3; }
.meta       { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.meta li    { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: #4b5563; }
.meta svg   { flex-shrink: 0; color: #9ca3af; }
.description { margin-top: 1rem; font-size: .8125rem; color: #6b7280; line-height: 1.65; }
.description p + p { margin-top: .5rem; }
.description strong { font-weight: 600; color: #4b5563; }
.description em { font-style: italic; }
/* Description clamp + "Show more" toggle (applied by JS only in constrained
   layouts that can't show the full three columns; the toggle appears only when the
   text actually overflows the clamp). */
.description.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.desc-toggle {
  display: none;
  background: none; border: none; padding: 0;
  margin-top: .4rem;
  font: inherit; font-size: .75rem; font-weight: 600;
  color: #6b7280; cursor: pointer;
}
.desc-toggle:hover { color: #111827; }
.desc-toggle.visible { display: inline-block; }

/* ── Calendar column ─────────────────────────────── */
.cal-col {
  flex: 0 0 auto;
  padding: 2rem 1.5rem 2rem 2rem;
  border-right: 1px solid #e5e7eb;
}

.cal-nav {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  gap: .5rem;
}
.cal-nav button {
  width: 28px; height: 28px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  color: #6b7280;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.cal-nav button:hover:not(:disabled) { background: #f9fafb; color: #111827; }
.cal-nav button:disabled { opacity: .3; cursor: default; }
.month-label {
  flex: 1;
  font-size: .9375rem;
  font-weight: 600;
  color: #111827;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 40px);
  gap: 2px;
}
.ch {
  width: 40px; height: 28px;
  text-align: center;
  font-size: .6875rem;
  font-weight: 500;
  color: #9ca3af;
  display: flex; align-items: center; justify-content: center;
}
.cd {
  width: 40px; height: 40px;
  border: none; background: none;
  border-radius: 8px;
  font-size: .875rem;
  color: #374151;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
  position: relative;
}
.cd.available { background: #f3f4f6; }
.cd.available:hover { background: #e5e7eb; }
.cd.sel { background: #111827 !important; color: #fff !important; font-weight: 600; }
.cd.today::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.cd.sel.today::after { background: #fff; }
.cd:disabled { color: #d1d5db; cursor: default; background: none !important; }

.tz-label {
  margin-top: .875rem;
  font-size: .6875rem;
  color: #9ca3af;
}
.tz-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.tz-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  font-size: .6875rem;
  color: #9ca3af;
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none;
}
.tz-wrapper svg { pointer-events: none; color: #9ca3af; flex-shrink: 0; }
.tz-wrapper:hover select,
.tz-wrapper:hover svg { color: #6b7280; }

/* ── Right column ────────────────────────────────── */
.right-col {
  flex: 1;
  min-width: 0;
  padding: 2rem 1.5rem;
}
.hidden { display: none !important; }

/* Slots */
.slots-header { font-size: .9375rem; font-weight: 600; margin-bottom: 1rem; color: #111827; }
.slots-list { display: flex; flex-direction: column; gap: .5rem; max-height: 340px; overflow-y: auto; }
.slot-btn {
  padding: .625rem 1rem;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  text-align: center;
  transition: border-color .12s, background .12s;
}
.slot-btn:hover { border-color: #111827; background: #f9fafb; }
.slot-btn.sel   { background: #111827; color: #fff; border-color: #111827; }

/* Already booked, shown only when the event type opts in (show_taken_slots).
   Rendered as a disabled button rather than a div so it keeps the same box and
   rhythm as a bookable slot, and so assistive tech announces it as unavailable
   instead of reading it as a plain time. The strikethrough carries the meaning
   without relying on colour alone. */
.slot-btn.taken {
  background: #f9fafb;
  border-color: #f3f4f6;
  border-style: dashed;
  color: #9ca3af;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: #d1d5db;
}
.slot-btn.taken:hover { border-color: #f3f4f6; background: #f9fafb; }

.hint { font-size: .8125rem; color: #9ca3af; }

/* The minimum-notice explanation (#20). Darker than a plain .hint on purpose: the rest
   of the .hint family is placeholder text the eye is meant to skip, whereas this is the
   answer to the question the visitor is actually asking. Shares .hint's size so it does
   not read as a warning either. Set on all three booking surfaces. */
.notice-hint { margin-top: .625rem; color: #6b7280; }

/* Form */
.back-btn {
  display: inline-flex; align-items: center; gap: .25rem;
  background: none; border: none; color: #6b7280;
  cursor: pointer; font-size: .8125rem; margin-bottom: 1rem; padding: 0;
}
.back-btn:hover { color: #111827; }
.slot-label { font-size: .875rem; font-weight: 600; color: #111827; margin-bottom: 1.25rem; }
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .75rem; }
.field label { font-size: .75rem; font-weight: 500; color: #6b7280; }
.field input {
  padding: .55rem .75rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font-size: .875rem;
  color: #111827;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.field input:focus { border-color: #111827; box-shadow: 0 0 0 3px rgba(17,24,39,.06); }
.field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: .55rem .75rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font: inherit;
  font-size: .875rem;
  color: #111827;
  outline: none;
  resize: vertical;
  min-height: 4.5rem;
  transition: border-color .12s, box-shadow .12s;
}
.field textarea:focus { border-color: #111827; box-shadow: 0 0 0 3px rgba(17,24,39,.06); }
.btn-primary {
  width: 100%; padding: .675rem 1rem; margin-top: .5rem;
  background: #111827; color: #fff;
  border: none; border-radius: 8px;
  font-size: .9375rem; font-weight: 600;
  cursor: pointer; transition: background .12s;
}
.btn-primary:hover:not(:disabled) { background: #1f2937; }
.btn-primary:disabled { opacity: .5; cursor: default; }
.form-error { font-size: .8125rem; color: #dc2626; margin-top: .375rem; min-height: 1.2em; }

.field select {
  padding: .55rem .75rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font-size: .875rem;
  color: #111827;
  outline: none;
  background: #fff;
  width: 100%;
  cursor: pointer;
  transition: border-color .12s;
}
.field select:focus { border-color: #111827; }
.field-checkbox { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; }
.field-checkbox input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; margin: 0; cursor: pointer; }
.field-checkbox label { font-size: .875rem; color: #374151; margin: 0; cursor: pointer; }
.required-star { color: #dc2626; }

/* Confirmation */
.confirm-icon {
  width: 48px; height: 48px;
  background: #dcfce7;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .875rem;
}
.confirm-view h3 { font-size: 1rem; font-weight: 700; margin-bottom: .375rem; }
.confirm-view .when { font-size: .875rem; font-weight: 600; color: #111827; margin-bottom: .25rem; }
.confirm-view .sub { font-size: .8125rem; color: #6b7280; }

/* Avatar */
.avatar-img {
  width: 56px; height: 56px;
  border-radius: 50%; object-fit: cover;
  margin-bottom: .75rem;
}
.avatar-initials {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #374151;
  font-size: 1.25rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .75rem;
}
/* Host face stack: leftmost paints on top (inline z-index, descending). */
.host-faces { display: flex; margin-bottom: .75rem; }
.host-faces .face { position: relative; line-height: 0; }
.host-faces .face + .face { margin-left: -16px; }
.host-faces .avatar-img,
.host-faces .avatar-initials {
  margin-bottom: 0;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}

/* ── Conversational booking assistant — floating launcher + drawer (book.html; shared with the widget) ── */
.asst-fab-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  display: inline-flex; align-items: center; gap: .5rem;
  background: #111827; color: #fff; border: none; border-radius: 999px;
  padding: .7rem 1.1rem; font: inherit; font-size: .875rem; font-weight: 600;
  cursor: pointer; box-shadow: 0 6px 24px rgba(16,24,40,.18);
}
.asst-fab-btn svg { color: #fff; }
.asst-fab-btn:hover { background: #1f2937; }
.asst-fab-btn[hidden] { display: none; }

.asst-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 51;
  width: 380px; max-width: calc(100vw - 32px);
  height: 540px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
  overflow: hidden; box-shadow: 0 12px 40px rgba(16,24,40,.22);
}
.asst-panel[hidden] { display: none; }
.asst-head { display: flex; flex-direction: column; flex-shrink: 0; border-bottom: 1px solid #f3f4f6; }
.asst-head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem .5rem; }
.asst-title { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 600; color: #111827; }
.asst-title svg { color: #6b7280; }
.asst-close { background: none; border: none; padding: .25rem; color: #9ca3af; cursor: pointer; line-height: 0; border-radius: 6px; }
.asst-close:hover { color: #111827; background: #f3f4f6; }
/* Persistent AI-disclosure notice (EU AI Act Art. 50(1)): stays pinned above the
   conversation log, not part of scrollback, not dismissible. */
.asst-disclosure { padding: 0 1rem .625rem; font-size: .75rem; line-height: 1.4; color: #6b7280; }
.asst-log { flex: 1; display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; padding: 1rem; }
.asst-msg { max-width: 85%; padding: .5rem .75rem; border-radius: 12px; font-size: .875rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.asst-msg.bot { align-self: flex-start; background: #f3f4f6; color: #111827; border-bottom-left-radius: 4px; }
.asst-msg.user { align-self: flex-end; background: #111827; color: #fff; border-bottom-right-radius: 4px; }
.asst-msg.note { align-self: center; background: none; color: #6b7280; font-size: .8125rem; text-align: center; }
.asst-msg.ok { align-self: flex-start; background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.asst-typing { align-self: flex-start; color: #9ca3af; font-size: .8125rem; padding: .25rem; }
.asst-row { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid #f3f4f6; flex-shrink: 0; }
.asst-input { flex: 1; min-width: 0; border: 1px solid #e5e7eb; border-radius: 10px; padding: .5rem .75rem; font: inherit; font-size: .875rem; color: #111827; outline: none; }
.asst-input:focus { border-color: #111827; }
.asst-send { border: none; background: #111827; color: #fff; border-radius: 10px; padding: .5rem 1rem; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.asst-send:disabled { opacity: .5; cursor: default; }

/* Subtle inline entry point under the event meta — toggles the same drawer. */
.asst-link {
  display: inline-flex; align-items: center; gap: .375rem; margin-top: 16px;
  background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 999px; padding: .4rem .8rem;
  font: inherit; font-size: .8125rem; font-weight: 500; color: #0284c7; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.asst-link:hover { border-color: #7dd3fc; color: #0369a1; background: #e0f2fe; }
.asst-link svg { color: #0ea5e9; }
.asst-link:hover svg { color: #0284c7; }
.asst-link .asst-link-arrow { margin-left: .0625rem; }
.asst-link:focus { outline: none; }
.asst-link:focus-visible { outline: 2px solid rgba(14,165,233,.35); outline-offset: 2px; }

@media (max-width: 700px) {
  .asst-panel { right: 8px; left: 8px; bottom: 8px; width: auto; max-width: none; height: 72vh; }
  .asst-fab-btn { right: 12px; bottom: 12px; }
}

/* ── Cookie consent banner ─────────────────────────── */
/* [hidden] must beat the display:flex below, or the banner never dismisses. */
.cookie-banner[hidden] { display: none; }
.cookie-banner {
  position: fixed; z-index: 1000; left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 30rem; margin: 0 auto;
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1rem 1.25rem;
  border: 1px solid #e5e7eb; border-radius: .75rem; background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.cookie-text { margin: 0; font-size: .8125rem; line-height: 1.5; color: #4b5563; }
.cookie-text a { color: inherit; text-decoration: underline; }
.cookie-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.cookie-btn {
  cursor: pointer; padding: .4rem .9rem; font-size: .8125rem; font-weight: 500;
  border: 1px solid #d1d5db; border-radius: .5rem; background: #fff; color: #374151;
}
.cookie-btn:hover { background: #f9fafb; }
.cookie-btn-primary { background: #111827; border-color: #111827; color: #fff; }
.cookie-btn-primary:hover { background: #1f2937; }
/* ── Public-page footer (.powered-by) ──────────────────
   Shared by book.html + manage.html (the "legalFooter" partial). Links + the
   "Cookie settings" button share one rule so all footer items stay identical;
   `font: inherit` is what stops the <button> from rendering in the UA font.
   (The embed widget uses its own .powered class, not this.) */
.powered-by {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .9rem;
}
.powered-by a,
.powered-by .cookie-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  color: #111827;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity .12s;
}
.powered-by a:hover,
.powered-by .cookie-link:hover { opacity: .6; }

/* Language switcher — matches the footer links' size/weight/color so it reads as one
   of the footer items rather than a distinct form control. */
.powered-by .lang-select {
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  color: #111827;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ── Public demo banner ────────────────────────────── */
/* Shared by book.html + manage.html (the "demoBanner" partial) — only rendered
   when the instance is running in demo mode (internal/demo). */
.demo-banner {
  align-self: stretch; /* book/manage's <body> is a centered flex column — stretch to full width */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem 1rem;
  font-size: .8125rem;
  color: #78350f;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: .5rem;
  text-align: center;
}
.demo-banner strong { font-weight: 600; }
.demo-banner a { color: inherit; text-decoration: underline; font-weight: 600; }