/* ---------------------------------------------------------------------------
   <evanto-booking> – styles. No Shadow DOM: the page's body font applies.

   Theme through these custom properties (set them on the element or any
   ancestor; the values below are the defaults, evanto.de dark):

     --booking-surface       widget background            oklch(0.196 0.022 263)
     --booking-elevated      hover / tonal fills           oklch(0.241 0.043 264)
     --booking-fg            text                          oklch(0.969 0.005 247)
     --booking-muted         secondary text                oklch(0.741 0.024 248)
     --booking-accent        selection, button             oklch(0.532 0.196 30)
     --booking-accent-fg     text on accent                oklch(0.985 0.003 30)
     --booking-border        hairlines                     oklch(0.255 0.038 260)
     --booking-radius        outer corner radius           12px
     --booking-font-label    labels (mono)                 JetBrains Mono stack
     --booking-success       "booked" label                oklch(0.834 0.166 153)

   Optional:
     --booking-accent-text   accent as text (AA on surface), defaults to a
                             lighter accent; also used for field errors
     --booking-border-strong outlines of time buttons and inputs
     --booking-field         input background (default transparent)
     --booking-max-width     46rem

   Variant: class "evb--flat" on the element – no hairlines, separation through
   --booking-elevated (landing page).
--------------------------------------------------------------------------- */

evanto-booking {
  --_evb-surface: var(--booking-surface, oklch(0.196 0.022 263));
  --_evb-elevated: var(--booking-elevated, oklch(0.241 0.043 264));
  --_evb-fg: var(--booking-fg, oklch(0.969 0.005 247));
  --_evb-muted: var(--booking-muted, oklch(0.741 0.024 248));
  --_evb-accent: var(--booking-accent, oklch(0.532 0.196 30));
  --_evb-accent-fg: var(--booking-accent-fg, oklch(0.985 0.003 30));
  --_evb-accent-text: var(--booking-accent-text, color-mix(in oklch, var(--_evb-accent) 75%, white));
  --_evb-border: var(--booking-border, oklch(0.255 0.038 260));
  --_evb-border-strong: var(--booking-border-strong, color-mix(in oklch, var(--_evb-border), var(--_evb-fg) 10%));
  --_evb-field: var(--booking-field, transparent);
  --_evb-radius: var(--booking-radius, 12px);
  --_evb-radius-sm: calc(var(--_evb-radius) * 2 / 3);
  --_evb-font-label: var(--booking-font-label, "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  --_evb-success: var(--booking-success, oklch(0.834 0.166 153));
  --_evb-ease: cubic-bezier(0.25, 1, 0.5, 1);

  display: block;
  position: relative;
  box-sizing: border-box;
  max-inline-size: var(--booking-max-width, 46rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--_evb-surface);
  color: var(--_evb-fg);
  border: 1px solid var(--_evb-border);
  border-radius: var(--_evb-radius);
  font-size: 1rem;
  line-height: 1.55;
}

evanto-booking *,
evanto-booking *::before,
evanto-booking *::after { box-sizing: border-box; }

evanto-booking [hidden] { display: none !important; }

/* -- mono label voice ---------------------------------------------------- */
evanto-booking .evb-meta,
evanto-booking .evb-day-wd,
evanto-booking .evb-daylabel,
evanto-booking .evb-foot,
evanto-booking .evb-done-label {
  font-family: var(--_evb-font-label);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* -- head ---------------------------------------------------------------- */
evanto-booking .evb-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin-block-end: 1.25rem;
}
evanto-booking .evb-title {
  font-size: 1.075rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}
evanto-booking .evb-meta { color: var(--_evb-muted); }

/* -- day strip ----------------------------------------------------------- */
evanto-booking .evb-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
}
evanto-booking .evb-days--earlier { grid-template-columns: repeat(8, minmax(0, 1fr)); }

evanto-booking .evb-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0.6rem 0.25rem 0.55rem;
  font: inherit;
  color: var(--_evb-fg);
  text-align: center;
  background: transparent;
  border: 1px solid var(--_evb-border);
  border-radius: var(--_evb-radius-sm);
  cursor: pointer;
  opacity: 1;
}
evanto-booking .evb-day-wd { color: var(--_evb-muted); }
evanto-booking .evb-day-n {
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
evanto-booking .evb-day-c {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--_evb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-inline-size: 100%;
}

evanto-booking .evb-day:hover:not(:disabled) { background: var(--_evb-elevated); }
evanto-booking .evb-day[aria-pressed="true"] {
  border-color: var(--_evb-accent);
  background: color-mix(in oklch, var(--_evb-accent) 12%, transparent);
}
evanto-booking .evb-day[aria-pressed="true"] .evb-day-wd { color: var(--_evb-accent-text); }
evanto-booking .evb-day:disabled {
  cursor: default;
  opacity: 0.4;
}
evanto-booking .evb-day--nav { border-style: dashed; }
evanto-booking .evb-day--nav .evb-day-n { color: var(--_evb-muted); }

evanto-booking .evb-day--ghost {
  block-size: 4.6rem;
  background: var(--_evb-elevated);
  border-color: transparent;
  opacity: 0.55;
  cursor: default;
}

/* -- times --------------------------------------------------------------- */
evanto-booking .evb-daylabel {
  margin: 1.4rem 0 0.65rem;
  max-inline-size: none;
  color: var(--_evb-muted);
}
evanto-booking .evb-times {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}
evanto-booking .evb-time {
  margin: 0;
  padding: 0.55rem 0.5rem;
  font: inherit;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--_evb-fg);
  background: transparent;
  border: 1px solid var(--_evb-border-strong);
  border-radius: var(--_evb-radius-sm);
  cursor: pointer;
  opacity: 1;
}
evanto-booking .evb-time:hover { background: var(--_evb-elevated); }
evanto-booking .evb-times-empty {
  grid-column: 1 / -1;
  margin: 0;
  max-inline-size: none;
  padding-block: 0.55rem;
  font-size: 0.95rem;
  color: var(--_evb-muted);
}
evanto-booking .evb-time[aria-pressed="true"] {
  color: var(--_evb-accent-fg);
  background: var(--_evb-accent);
  border-color: var(--_evb-accent);
  font-weight: 500;
}

/* -- form ---------------------------------------------------------------- */
evanto-booking .evb-form {
  margin-block-start: 1.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--_evb-border);
}
evanto-booking .evb-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
evanto-booking .evb-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-inline-size: 0;
}
evanto-booking .evb-field--message { grid-column: 1 / -1; }
evanto-booking .evb-label {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--_evb-muted);
}
evanto-booking .evb-input {
  inline-size: 100%;
  margin: 0;
  padding: 0.65rem 0.8rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--_evb-fg);
  background: var(--_evb-field);
  border: 1px solid var(--_evb-border-strong);
  border-radius: var(--_evb-radius-sm);
  /* transparent, not none: forced-colors mode paints it as the focus ring */
  outline: 2px solid transparent;
}
evanto-booking .evb-textarea {
  min-block-size: 5.5rem;
  resize: vertical;
}
evanto-booking .evb-input:focus-visible {
  border-color: var(--_evb-accent-text);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--_evb-accent) 25%, transparent);
}
evanto-booking .evb-input[aria-invalid="true"] { border-color: var(--_evb-accent-text); }
evanto-booking .evb-error {
  margin: 0;
  max-inline-size: none;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--_evb-accent-text);
}

/* honeypot: out of view, out of the accessibility tree, out of the tab order */
evanto-booking .evb-hp {
  position: absolute;
  inset-inline-start: -10000px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

evanto-booking .evb-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-block-start: 1.25rem;
}
evanto-booking .evb-privacy {
  margin: 0;
  max-inline-size: 26rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--_evb-muted);
}
evanto-booking .evb-privacy a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, currentColor 45%, transparent);
  text-underline-offset: 0.18em;
}
evanto-booking .evb-privacy a:hover { color: var(--_evb-fg); text-decoration-color: currentColor; }

evanto-booking .evb-submit {
  flex: none;
  margin: 0;
  padding: 0.8rem 1.35rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--_evb-accent-fg);
  background: var(--_evb-accent);
  border: 1px solid transparent;
  border-radius: var(--_evb-radius);
  cursor: pointer;
  opacity: 1;
}
evanto-booking .evb-submit:hover:not(:disabled) {
  background: color-mix(in oklch, var(--_evb-accent) 88%, white);
}
evanto-booking .evb-submit:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
evanto-booking .evb-submit[aria-busy="true"] {
  cursor: progress;
  opacity: 0.75;
}

/* -- status -------------------------------------------------------------- */
/* the live region itself stays rendered (and in the accessibility tree) while
   empty, so the first message inserted into it is announced; spacing and the
   box sit on the message child */
evanto-booking .evb-status {
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--_evb-muted);
}
evanto-booking .evb-msg { margin-block-start: 1.25rem; }
evanto-booking .evb-msg p { margin: 0; max-inline-size: none; }
evanto-booking .evb-msg[data-kind="error"],
evanto-booking .evb-msg[data-kind="field"] {
  padding: 0.85rem 1rem;
  color: var(--_evb-fg);
  background: color-mix(in oklch, var(--_evb-accent) 7%, transparent);
  border: 1px solid color-mix(in oklch, var(--_evb-accent) 40%, var(--_evb-border));
  border-radius: var(--_evb-radius-sm);
}
evanto-booking .evb-fallback {
  margin-block-start: 0.4rem;
  color: var(--_evb-muted);
}
evanto-booking .evb-fallback a {
  color: var(--_evb-accent-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, currentColor 45%, transparent);
  text-underline-offset: 0.18em;
}
evanto-booking .evb-fallback a:hover { text-decoration-color: currentColor; }

/* -- confirmation -------------------------------------------------------- */
evanto-booking .evb-done { padding-block: 0.25rem 0.5rem; }
evanto-booking .evb-done-heading {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--_evb-fg);
  outline: none;
}
evanto-booking .evb-done-label { color: var(--_evb-success); }
evanto-booking .evb-done-label::before { content: "✓\00a0"; }
evanto-booking .evb-done-body {
  margin: 0.6rem 0 0;
  max-inline-size: 34rem;
  color: var(--_evb-muted);
  overflow-wrap: anywhere;
}

/* -- footer -------------------------------------------------------------- */
evanto-booking .evb-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin-block-start: 1.5rem;
  padding-block-start: 0.9rem;
  border-block-start: 1px solid var(--_evb-border);
  color: var(--_evb-muted);
}
evanto-booking .evb-foot:has(.evb-foot-tz:empty):has(.evb-foot-pick:empty) { display: none; }
evanto-booking .evb-foot-pick { color: var(--_evb-fg); }

/* -- focus --------------------------------------------------------------- */
evanto-booking .evb-day:focus-visible,
evanto-booking .evb-time:focus-visible,
evanto-booking .evb-submit:focus-visible,
evanto-booking a:focus-visible {
  outline: 2px solid var(--_evb-accent-text);
  outline-offset: 2px;
}
evanto-booking a:focus-visible { border-radius: 2px; }
/* the confirmation heading only receives focus programmatically (screen readers
   start reading there); it is not a control, so no ring */
evanto-booking .evb-done-heading:focus,
evanto-booking .evb-done-heading:focus-visible { outline: none; }

/* -- motion (only when the visitor allows it) ---------------------------- */
@media (prefers-reduced-motion: no-preference) {
  evanto-booking .evb-day,
  evanto-booking .evb-time,
  evanto-booking .evb-input,
  evanto-booking .evb-submit,
  evanto-booking a {
    transition:
      background-color 200ms var(--_evb-ease),
      border-color 200ms var(--_evb-ease),
      color 200ms var(--_evb-ease),
      box-shadow 200ms var(--_evb-ease),
      transform 200ms var(--_evb-ease);
  }
  evanto-booking .evb-submit:hover:not(:disabled) { transform: translateY(-1px); }
  evanto-booking .evb-submit:active { transform: none; }
}

/* -- flat variant (landing page): no hairlines, tonal separation --------- */
evanto-booking.evb--flat { border: 0; }
evanto-booking.evb--flat .evb-day,
evanto-booking.evb--flat .evb-time,
evanto-booking.evb--flat .evb-input {
  border-color: transparent;
  background: var(--_evb-elevated);
}
evanto-booking.evb--flat .evb-day:hover:not(:disabled),
evanto-booking.evb--flat .evb-time:hover {
  background: color-mix(in oklch, var(--_evb-elevated), var(--_evb-fg) 6%);
}
evanto-booking.evb--flat .evb-day[aria-pressed="true"] {
  border-color: transparent;
  background: color-mix(in oklch, var(--_evb-accent) 14%, var(--_evb-elevated));
}
evanto-booking.evb--flat .evb-time[aria-pressed="true"] {
  border-color: transparent;
  background: var(--_evb-accent);
}
evanto-booking.evb--flat .evb-day--nav { border-style: solid; background: transparent; }
evanto-booking.evb--flat .evb-day--nav:hover { background: var(--_evb-elevated); }
evanto-booking.evb--flat .evb-input:focus-visible { border-color: var(--_evb-accent-text); }
evanto-booking.evb--flat .evb-input[aria-invalid="true"] { border-color: var(--_evb-accent-text); }
evanto-booking.evb--flat .evb-form,
evanto-booking.evb--flat .evb-foot { border-block-start: 0; }
evanto-booking.evb--flat .evb-form { padding-block-start: 0.25rem; }
evanto-booking.evb--flat .evb-foot { padding-block-start: 0; }
evanto-booking.evb--flat .evb-msg[data-kind="error"],
evanto-booking.evb--flat .evb-msg[data-kind="field"] {
  border-color: transparent;
  background: var(--_evb-elevated);
}

/* -- narrow screens ------------------------------------------------------ */
@media (max-width: 719.98px) {
  evanto-booking .evb-days,
  evanto-booking .evb-days--earlier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  evanto-booking .evb-times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  evanto-booking .evb-fields { grid-template-columns: 1fr; }
  evanto-booking .evb-actions {
    flex-direction: column;
    align-items: stretch;
  }
  evanto-booking .evb-submit { inline-size: 100%; }
}