/* ARK HUB piece 2 - booking widget skin. Every colour, font and radius is a variable.
 * A site sets the --arkb-* values ONCE (see preview/theme-*.css), the widget does the rest.
 * Defaults are a neutral LIGHT paper-and-ink look so an unthemed mount is still readable.
 *
 *  --arkb-font        body font            --arkb-font-head   heading font
 *  --arkb-bg          widget background    --arkb-surface     input / card fill
 *  --arkb-ink         main text            --arkb-muted       secondary text (needs 4.5:1 on bg)
 *  --arkb-line        borders              --arkb-accent      main colour (buttons, selected)
 *  --arkb-accent-bg   optional gradient for filled buttons (defaults to the accent)
 *  --arkb-on-accent   text on the accent   --arkb-tint        hover / soft fill
 *  --arkb-focus       focus ring           --arkb-error / --arkb-error-bg   --arkb-ok
 *  --arkb-radius      cards, inputs        --arkb-radius-btn  buttons (999px = pill)
 *  --arkb-track       letter spacing for small caps labels
 */
.arkb {
  --_bg: var(--arkb-bg, var(--_d-bg, #ffffff));
  --_surface: var(--arkb-surface, var(--_d-surface, #ffffff));
  --_ink: var(--arkb-ink, var(--_d-ink, #14202e));
  --_muted: var(--arkb-muted, var(--_d-muted, #566475));
  --_line: var(--arkb-line, var(--_d-line, #cfd8e1));
  --_accent: var(--arkb-accent, var(--_d-accent, #1c4f8a));
  --_accent-bg: var(--arkb-accent-bg, var(--_accent));
  --_on: var(--arkb-on-accent, #ffffff);
  --_tint: var(--arkb-tint, var(--_d-tint, #eef3f8));
  --_focus: var(--arkb-focus, var(--_accent));
  --_err: var(--arkb-error, #b42318);
  --_err-bg: var(--arkb-error-bg, #fdf0ef);
  --_ok: var(--arkb-ok, #0b6b3a);
  --_r: var(--arkb-radius, var(--_d-radius, 10px));
  --_rb: var(--arkb-radius-btn, var(--_d-radius-btn, var(--_r)));
  --_track: var(--arkb-track, var(--_d-track, 0));

  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 20px 16px 24px;
  background: var(--_bg);
  color: var(--_ink);
  font-family: var(--arkb-font, var(--_d-font, inherit));
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid var(--_line);
  border-radius: var(--_r);
  text-align: left;
}
/* Per-site look. Each block reads the host page's OWN variables (with a fallback), so the widget follows the site.
 * Any --arkb-* value set by the site still wins. */
.arkb[data-business="cooldown"] { --_d-bg: var(--paper, #fbfdff); --_d-surface: #fff; --_d-ink: var(--ink, #0f1a2a); --_d-muted: #55657a; --_d-line: var(--rule, #c9dbe8); --_d-accent: var(--blue, #0d498d); --_d-tint: var(--ice, #f0f9ff); --_d-font: var(--font-sans, inherit); --_d-radius: 12px; --_d-radius-btn: 12px; }
.arkb[data-business="wilsark"]  { --_d-bg: var(--panel, #fff); --_d-surface: #fff; --_d-ink: var(--text, #132030); --_d-muted: #536375; --_d-line: var(--rule, #d8dee5); --_d-accent: var(--steel-deep, #1c5f80); --_d-tint: var(--steel-wash, #eef5f9); --_d-font: var(--sans, inherit); --_d-radius: 4px; --_d-radius-btn: 4px; --_d-track: .02em; }
.arkb[data-business="cabral"]   { --_d-bg: #fbf5ee; --_d-surface: #fffdf9; --_d-ink: #2a1c1f; --_d-muted: #6b5a56; --_d-line: #e6d6c8; --_d-accent: #9c4a36; --_d-tint: #f6e6dc; --_d-font: var(--body, inherit); --_d-head: var(--display, inherit); --_d-radius: 16px; --_d-radius-btn: 999px; --_d-track: .04em; }
.arkb[data-business="razzle"]   { --_d-bg: var(--bg2, #fffdf9); --_d-surface: #fff; --_d-ink: var(--ink, #2b2a26); --_d-muted: #5f5a50; --_d-line: var(--line, #e6dfd1); --_d-accent: var(--brand, #1e4433); --_d-tint: var(--soft, #e7efe9); --_d-font: var(--font-body, inherit); --_d-head: var(--font-head, inherit); --_d-radius: var(--radius, 14px); --_d-radius-btn: 999px; }

.arkb *, .arkb *::before, .arkb *::after { box-sizing: border-box; }
.arkb [hidden] { display: none !important; }

.arkb__title {
  margin: 0 0 14px;
  font-family: var(--arkb-font-head, var(--_d-head, var(--arkb-font, inherit)));
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
  line-height: 1.15;
  font-weight: 700;
  color: var(--_ink);
}
.arkb__h {
  margin: 0 0 10px;
  font-family: var(--arkb-font-head, var(--_d-head, var(--arkb-font, inherit)));
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: var(--_track);
  color: var(--_ink);
}
.arkb__h--ok { font-size: 1.35rem; color: var(--_ok); outline: none; }
.arkb__sec { margin: 0 0 22px; padding: 0; border: 0; }
.arkb__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.arkb__hint, .arkb__tz { margin: 0; color: var(--_muted); font-size: 0.9375rem; }
.arkb__tz { margin-top: 10px; font-size: 0.8125rem; }

/* buttons share one reset and one focus ring */
:where(.arkb) button, :where(.arkb) input {
  font: inherit;
  color: inherit;
  margin: 0;
}
.arkb button { cursor: pointer; }
.arkb button:focus-visible, .arkb input:focus-visible {
  outline: 3px solid var(--_focus);
  outline-offset: 2px;
}

/* day strip: 4 across on a phone, 7 across on a wide box */
.arkb__days {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 560px) { .arkb__days { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.arkb__day {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 64px; min-width: 44px; padding: 6px 4px;
  background: var(--_surface); border: 1.5px solid var(--_line); border-radius: var(--_r);
  line-height: 1.15;
  transition: background .15s, border-color .15s, transform .15s;
}
.arkb__wd { font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--_track); color: var(--_muted); }
.arkb__dn { font-size: 1.25rem; font-weight: 700; }
.arkb__mo { font-size: 0.75rem; color: var(--_muted); text-transform: uppercase; }
.arkb__day:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--_tint); border-color: var(--_accent); }
.arkb__day[aria-pressed="true"] { background: var(--_accent-bg); border-color: var(--_accent); color: var(--_on); }
.arkb__day[aria-pressed="true"] .arkb__wd, .arkb__day[aria-pressed="true"] .arkb__mo { color: var(--_on); }
.arkb__day:disabled { opacity: .45; cursor: not-allowed; background: transparent; border-style: dashed; }

/* time buttons */
.arkb__times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.arkb__time {
  min-height: 44px; min-width: 44px; padding: 8px 10px;
  background: var(--_surface); border: 1.5px solid var(--_line); border-radius: var(--_rb);
  font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background .15s, border-color .15s;
}
.arkb__time:hover:not([aria-pressed="true"]) { background: var(--_tint); border-color: var(--_accent); }
.arkb__time[aria-pressed="true"] { background: var(--_accent-bg); border-color: var(--_accent); color: var(--_on); }

/* form */
.arkb__chosen { margin: 0 0 14px; padding: 10px 12px; background: var(--_tint); border-radius: var(--_r); font-size: 0.9375rem; }
.arkb__link {
  min-height: 44px; min-width: 44px; padding: 0 6px; background: none; border: 0;
  color: var(--_accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 600;
}
.arkb__field { margin: 0 0 14px; }
.arkb__label { display: block; margin: 0 0 4px; font-size: 0.875rem; font-weight: 600; letter-spacing: var(--_track); }
.arkb__input {
  display: block; width: 100%; min-height: 48px; padding: 10px 12px;
  background: var(--_surface); color: var(--_ink);
  border: 1.5px solid var(--_line); border-radius: var(--_r);
  font-size: 1rem; /* 16px stops iOS zoom on focus */
}
.arkb__input[aria-invalid="true"] { border-color: var(--_err); background: var(--_err-bg); color: var(--_ink); }
.arkb__err { margin: 4px 0 0; min-height: 0; color: var(--_err); font-size: 0.875rem; font-weight: 600; }
.arkb__err:empty { display: none; }
.arkb__textarea { min-height: 76px; resize: vertical; }
.arkb__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.arkb__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; padding: 12px 22px;
  background: var(--_accent-bg); color: var(--_on); border: 1.5px solid var(--_accent); border-radius: var(--_rb);
  font-weight: 700; letter-spacing: var(--_track);
  transition: filter .15s, transform .15s;
}
@media (min-width: 560px) { .arkb__btn { width: auto; min-width: 14rem; } }
.arkb__btn:hover:not(:disabled) { filter: brightness(1.08); }
.arkb__btn:active:not(:disabled) { transform: translateY(1px); }
.arkb__btn:disabled { opacity: .6; cursor: progress; }
.arkb__btn--ghost { background: transparent; color: var(--_accent); }

/* messages */
.arkb__msg { margin: 0 0 12px; font-weight: 600; outline: none; }
.arkb__msg:empty { display: none; }
.arkb__msg--err { padding: 10px 12px; color: var(--_err); background: var(--_err-bg); border-left: 4px solid var(--_err); border-radius: var(--_r); }
.arkb__done { padding: 8px 0; }
.arkb__okbody { margin: 0 0 16px; font-size: 1.0625rem; }

@media (prefers-reduced-motion: reduce) {
  .arkb *, .arkb *::before, .arkb *::after { transition: none !important; }
}
@media (forced-colors: active) {
  .arkb__day[aria-pressed="true"], .arkb__time[aria-pressed="true"] { outline: 3px solid Highlight; }
}

/* optional wrapper so a site can drop the widget in without writing any CSS of its own */
.arkb-section { box-sizing: border-box; padding: 40px 16px; }
@media (min-width: 900px) { .arkb-section { padding: 64px 24px; } }