/* ==========================================================================
   WDR Booking — front-end styles.

   Uses the theme's custom properties where they exist and falls back to the
   same values where they do not, so the widget looks right on the WDR Centre
   theme and merely tidy anywhere else.
   ========================================================================== */

.wdr-bk {
  --bk-navy: var(--wdr-navy, #0a1a3e);
  --bk-royal: var(--wdr-royal, #1e4fb8);
  --bk-gold: var(--wdr-gold, #f5b200);
  --bk-orange: var(--wdr-orange, #ee6a1e);
  --bk-muted: var(--wdr-muted, #4c5a78);
  --bk-hair: var(--wdr-hair, #d8dde7);
  --bk-wall-2: var(--wdr-wall-2, #f1f3f7);

  /* How many service cards sit on a row. Set per widget; see --wide/--full
     below for how the block escapes a narrow container. */
  --bk-cols: 3;
  --bk-max: 1400px;

  font-family: inherit;
  color: var(--bk-navy);
  margin-block: clamp(24px, 4vw, 44px);
}

/* ── width ──────────────────────────────────────────────────────────────
   The widget is often placed inside a centred, constrained container — a
   theme content column, or an Elementor boxed section. These two break out
   of it and re-centre on the viewport, which is why they need the
   left/transform pair rather than a plain max-width. `body` already carries
   overflow-x: hidden, so nothing spills sideways. */

.wdr-bk--wide,
.wdr-bk--full {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-inline: 0;
}

.wdr-bk--wide { width: min(var(--bk-max), 100vw - 2 * var(--wdr-gut, 24px)); }
.wdr-bk--full { width: calc(100vw - 2 * var(--wdr-gut, 24px)); }

.wdr-bk *,
.wdr-bk *::before,
.wdr-bk *::after { box-sizing: border-box; }

.wdr-bk__heading { margin-top: 0; }

/* ── step rail ─────────────────────────────────────────────────────────── */

.wdr-bk__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  counter-reset: wdr-step;
}

.wdr-bk__steps li {
  counter-increment: wdr-step;
  flex: 1 1 120px;
  padding: 11px 14px 11px 40px;
  position: relative;
  background: var(--bk-wall-2);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bk-muted);
}

.wdr-bk__steps li::before {
  content: counter(wdr-step);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid currentColor;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
}

.wdr-bk__steps li.is-current {
  background: var(--bk-navy);
  color: #fff;
}

.wdr-bk__steps li.is-done {
  background: var(--bk-navy);
  color: var(--bk-gold);
}

.wdr-bk__steps li.is-done::before {
  content: "✓";
  background: var(--bk-gold);
  border-color: var(--bk-gold);
  color: var(--bk-navy);
}

/* ── messages ──────────────────────────────────────────────────────────── */

.wdr-bk__error {
  background: #fdf0ea;
  border-left: 5px solid var(--bk-orange);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.wdr-bk__loading,
.wdr-bk__note {
  color: var(--bk-muted);
  font-size: 0.95rem;
}

.wdr-bk__step-title {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--bk-muted);
}

/* ── service cards ─────────────────────────────────────────────────────── */

.wdr-bk__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* A fixed count rather than auto-fill: six services across three columns is
     two tidy rows, where auto-fill gives four-then-two and looks unfinished. */
  grid-template-columns: repeat(var(--bk-cols, 3), minmax(0, 1fr));
  gap: 16px;
}

.wdr-bk__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-align: left;
  background: #fff;
  border: 2px solid var(--bk-hair);
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.wdr-bk__card:hover,
.wdr-bk__card:focus-visible { border-color: var(--bk-navy); }

.wdr-bk__card-img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bk-wall-2);
}

.wdr-bk__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wdr-bk__card-body {
  display: block;
  padding: 16px 18px 20px;
}

.wdr-bk__card-title {
  display: block;
  font-weight: 800;
  font-size: 1.06rem;
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: 6px;
}

.wdr-bk__card-meta {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bk-royal);
  margin-bottom: 10px;
}

.wdr-bk__card-desc {
  display: block;
  font-size: 0.92rem;
  color: var(--bk-muted);
  line-height: 1.5;
}

/* ── the chosen-so-far bar ─────────────────────────────────────────────── */

.wdr-bk__chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding: 13px 16px;
  background: var(--bk-wall-2);
  border-left: 5px solid var(--bk-gold);
  margin-bottom: 24px;
  font-size: 0.95rem;
}

.wdr-bk__chosen strong { text-transform: uppercase; }
.wdr-bk__chosen span { color: var(--bk-muted); }

.wdr-bk__link {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bk-royal);
  cursor: pointer;
  text-decoration: underline;
}

/* ── calendar ──────────────────────────────────────────────────────────── */

/* Only the service grid wants the extra width. Once somebody has chosen, a
   date picker stretched across 1400px is harder to use, not easier — so the
   later steps re-centre inside a sane measure. */
.wdr-bk__cal-nav,
.wdr-bk__cal,
.wdr-bk__slots,
.wdr-bk__chosen,
.wdr-bk__form {
  max-width: 46rem;
  margin-inline: auto;
}

.wdr-bk__cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.wdr-bk__cal-month {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.06rem;
}

.wdr-bk__cal-btn {
  width: 44px;
  height: 44px;
  border: 2px solid var(--bk-navy);
  background: #fff;
  color: var(--bk-navy);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.wdr-bk__cal-btn:hover:not(:disabled) {
  background: var(--bk-navy);
  color: #fff;
}

.wdr-bk__cal-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.wdr-bk__cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 28px;
}

.wdr-bk__cal-dow {
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bk-muted);
  padding-bottom: 6px;
}

.wdr-bk__cal-pad { display: block; }

.wdr-bk__cal-day {
  position: relative;
  aspect-ratio: 1;
  min-height: 44px;
  border: 2px solid var(--bk-hair);
  background: #fff;
  color: var(--bk-navy);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.wdr-bk__cal-day.is-open:hover,
.wdr-bk__cal-day.is-open:focus-visible { border-color: var(--bk-navy); }

.wdr-bk__cal-day.is-selected {
  background: var(--bk-navy);
  border-color: var(--bk-navy);
  color: #fff;
}

.wdr-bk__cal-day.is-disabled {
  /* Not opacity alone: a greyed-out number still has to be legible enough
     that somebody can tell which day they are looking at. */
  background: var(--bk-wall-2);
  border-color: var(--bk-wall-2);
  color: #9aa5bb;
  cursor: not-allowed;
}

.wdr-bk__cal-num { font-size: 0.95rem; }

.wdr-bk__cal-dot {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bk-gold);
}

.wdr-bk__cal-day.is-selected .wdr-bk__cal-dot { background: var(--bk-gold); }

/* ── slots ─────────────────────────────────────────────────────────────── */

.wdr-bk__slot-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.wdr-bk__slot {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 12px;
  border: 2px solid var(--bk-hair);
  background: #fff;
  color: var(--bk-navy);
  font: inherit;
  cursor: pointer;
  text-align: left;
  min-height: 44px;
}

.wdr-bk__slot:hover:not(:disabled),
.wdr-bk__slot:focus-visible:not(:disabled) { border-color: var(--bk-navy); }

.wdr-bk__slot.is-selected {
  background: var(--bk-navy);
  border-color: var(--bk-navy);
  color: #fff;
}

.wdr-bk__slot.is-full {
  background: var(--bk-wall-2);
  border-color: var(--bk-wall-2);
  color: #7a869f;
  cursor: not-allowed;
  text-decoration: line-through;
}

.wdr-bk__slot-time {
  font-weight: 800;
  font-size: 1rem;
}

.wdr-bk__slot-name,
.wdr-bk__slot-left {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.wdr-bk__slot-name { color: var(--bk-muted); }
.wdr-bk__slot.is-selected .wdr-bk__slot-name { color: #c3cee4; }

/* Scarcity earns a colour, and it must still pass contrast on white. */
.wdr-bk__slot-left { color: #b4451a; }
.wdr-bk__slot.is-selected .wdr-bk__slot-left { color: var(--bk-gold); }
.wdr-bk__slot.is-full .wdr-bk__slot-left { color: #7a869f; }

/* ── form ──────────────────────────────────────────────────────────────── */

.wdr-bk__form { max-width: 32rem; }

.wdr-bk__field { margin-bottom: 18px; }

.wdr-bk__field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.wdr-bk__field input,
.wdr-bk__field select,
.wdr-bk__field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: inherit;
  background: #fff;
  border: 2px solid var(--bk-hair);
  border-radius: 0;
  padding: 12px 13px;
  min-height: 44px;
}

.wdr-bk__field input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin-right: 8px;
}

.wdr-bk__field input:focus,
.wdr-bk__field select:focus,
.wdr-bk__field textarea:focus {
  border-color: var(--bk-navy);
  outline: 3px solid var(--bk-orange);
  outline-offset: 2px;
}

.wdr-bk__help {
  display: block;
  margin-top: 5px;
  font-size: 0.82rem;
  color: var(--bk-muted);
}

/* Off-screen rather than display:none — a bot that skips hidden fields is
   exactly the bot this is trying to catch. */
.wdr-bk__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.wdr-bk__total {
  font-weight: 800;
  font-size: 1.15rem;
  padding: 14px 0;
  border-top: 3px solid var(--bk-navy);
  margin: 22px 0 18px;
}

.wdr-bk__submit { width: 100%; justify-content: center; }

/* A minimal button, in case the theme provides no .wdr-btn of its own. */
.wdr-bk .wdr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  min-height: 44px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid var(--bk-navy);
  background: var(--bk-navy);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}

.wdr-bk .wdr-btn:hover {
  background: var(--bk-royal);
  border-color: var(--bk-royal);
}

.wdr-bk .wdr-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.wdr-bk .wdr-btn--ghost {
  background: transparent;
  color: var(--bk-navy);
}

.wdr-bk .wdr-btn--ghost:hover {
  background: var(--bk-navy);
  color: #fff;
}

/* ── the no-JavaScript service list ────────────────────────────────────── */

.wdr-bk__services {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}

.wdr-bk__service {
  border: 2px solid var(--bk-hair);
}

.wdr-bk__service-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bk-wall-2);
}

.wdr-bk__service-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wdr-bk__service-body { padding: 16px 18px 20px; }
.wdr-bk__service-body h3 { margin-top: 0; }

.wdr-bk__service-meta {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bk-royal);
}

.wdr-bk__service-meta span + span::before {
  content: " · ";
  color: var(--bk-muted);
}

/* ── confirmation page ─────────────────────────────────────────────────── */

.wdr-conf {
  max-width: 40rem;
  margin-block: clamp(24px, 4vw, 44px);
}

.wdr-conf__banner {
  padding: 22px 24px;
  border-left: 5px solid var(--wdr-gold, #f5b200);
  background: var(--wdr-navy, #0a1a3e);
  color: #fff;
  margin-bottom: 28px;
}

.wdr-conf__banner h2 {
  margin: 0 0 8px;
  color: #fff;
}

.wdr-conf__banner p { margin: 0; color: #c3cee4; }

.wdr-conf__banner--fail {
  background: #fdf0ea;
  border-left-color: var(--wdr-orange, #ee6a1e);
  color: #4a2412;
}

.wdr-conf__banner--fail h2 { color: #4a2412; }
.wdr-conf__banner--fail p { color: #6b3a22; }

.wdr-conf__ref {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--wdr-gold, #f5b200);
  display: block;
  margin-top: 10px;
}

.wdr-conf__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 26px;
}

.wdr-conf__table th,
.wdr-conf__table td {
  text-align: left;
  padding: 12px 0;
  border-bottom: 1px solid var(--wdr-hair, #d8dde7);
  vertical-align: top;
}

.wdr-conf__table th {
  width: 40%;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wdr-muted, #4c5a78);
}

/* ── responsive ────────────────────────────────────────────────────────── */

/* Three cards is right on a desktop and wrong on a tablet, so the count steps
   down regardless of what the widget was set to. */
@media (max-width: 900px) {
  .wdr-bk__grid,
  .wdr-bk__services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .wdr-bk__steps li {
    flex-basis: 100%;
    padding-block: 9px;
  }

  .wdr-bk__grid,
  .wdr-bk__services { grid-template-columns: 1fr; }

  .wdr-bk__cal { gap: 3px; }
  .wdr-bk__cal-day { min-height: 40px; }
  .wdr-bk__slot-list { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .wdr-bk * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}