/*
 * The artup/service block and the third-party plugin markup it wraps
 * (booking calendars, appointment pickers, request forms). Enqueued by the
 * block's render callback, so it only ever ships to pages that contain the
 * block. Everything stays scoped under .artup-service: plugin markup is never
 * forked, it is fed the site's custom properties, and only the shared
 * primitives (buttons, inputs, labels, focus, selected calendar cells) are
 * normalised. Plugin-specific selector inventories belong in a per-plugin
 * stylesheet once the plugins are verified on a live install.
 */

.artup-service {
  max-width: 100%;
  min-width: 0;
}

.artup-service__widget {
  max-width: 100%;
  overflow-x: auto;
}

/* -- the fallback: the page with no plugin behind it ----------------------- */

.artup-service__fallback {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--artup-soft);
  border-radius: var(--artup-radius);
  text-align: center;
}

.artup-service__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin: 0;
}

/* -- the shared primitives, on the site tokens ------------------------------ */

.artup-service button[type="submit"],
.artup-service input[type="submit"],
.artup-service input[type="button"] {
  min-height: 44px;
  padding: 0.5rem 1.4rem;
  border: 0;
  border-radius: var(--artup-radius-button);
  background: var(--artup-accent);
  color: var(--artup-on-accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.artup-service input[type="text"],
.artup-service input[type="email"],
.artup-service input[type="tel"],
.artup-service input[type="date"],
.artup-service input[type="number"],
.artup-service input[type="search"],
.artup-service select,
.artup-service textarea {
  min-height: 44px;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--artup-line);
  border-radius: var(--artup-radius);
  background: var(--artup-surface);
  color: var(--artup-ink);
  font: inherit;
}

.artup-service label {
  font-weight: 600;
}

/* The focus ring takes the text-safe accent, visible on every palette. */
.artup-service :focus-visible {
  outline: 3px solid var(--artup-accent-text);
  outline-offset: 2px;
  border-radius: 2px;
}

/* A selected calendar day takes the accent as a fill with the on-accent text
   colour; the plugin's own text and aria state carry the rest of the meaning. */
.artup-service [aria-selected="true"],
.artup-service .is-selected,
.artup-service .selected {
  background: var(--artup-accent);
  color: var(--artup-on-accent);
}

/* -- the lines the block prints itself -------------------------------------- */

.artup-service__privacy,
.artup-service__paid-privacy,
.artup-service__noscript {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--artup-muted);
}