/* Rootophia Doggy Daycare — the one online booking flow.
   Built on the site tokens in styles.v7.css so it stays on brand, and mobile
   first: every grid collapses to a single column on a phone. */

.dc-page {
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(245, 124, 0, 0.12), transparent 60%),
    radial-gradient(900px 500px at 88% 0%, rgba(143, 208, 255, 0.18), transparent 60%),
    #fff;
}

/* ── Hero ─────────────────────────────────────────────── */
.dc-hero { padding: 34px 0 10px; }
.dc-hero__eyebrow {
  display: inline-block;
  background: rgba(245, 124, 0, 0.14);
  color: #b45309;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}
.dc-hero h1 { margin: 12px 0 6px; font-size: clamp(28px, 5vw, 42px); line-height: 1.12; }
.dc-hero__lead { margin: 0 0 14px; color: var(--muted); max-width: 62ch; font-size: 17px; }
.dc-hero__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.dc-hero__strip li {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* The payment warning the owner asked for, word for word. It is deliberately
   loud, and it appears at the top of the page and again on every step. */
.dc-warning {
  margin: 20px 0 0;
  border: 2px solid #f59e0b;
  border-left-width: 8px;
  background: #fffbeb;
  border-radius: 14px;
  padding: 16px 18px;
  color: #78350f;
}
.dc-warning strong { display: block; font-size: 16px; margin-bottom: 4px; }
.dc-warning p { margin: 0; font-size: 15px; font-weight: 600; }
.dc-warning--tight { margin-top: 0; }

/* ── Progress ─────────────────────────────────────────── */
.dc-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 26px 0 18px;
  padding: 0;
}
.dc-steps li {
  flex: 1 1 150px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.dc-steps li b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.07);
  font-size: 12px;
}
.dc-steps li.is-active { border-color: var(--orange); color: var(--ink); box-shadow: 0 4px 14px rgba(245, 124, 0, 0.18); }
.dc-steps li.is-active b { background: var(--orange); color: #fff; }
.dc-steps li.is-done { color: #166534; border-color: rgba(22, 101, 52, 0.3); }
.dc-steps li.is-done b { background: #16a34a; color: #fff; }

/* ── Panels ───────────────────────────────────────────── */
.dc-panel {
  background: var(--card);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  margin: 0 0 20px;
}
.dc-panel[hidden] { display: none; }
.dc-panel__head { margin-bottom: 16px; }
.dc-panel__head h2 { margin: 0 0 6px; font-size: 22px; }
.dc-panel__head p { margin: 0; color: var(--muted); font-size: 15px; }
.dc-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  align-items: center;
}
.dc-panel__actions .dc-spacer { flex: 1 1 auto; }

@media (min-width: 720px) { .dc-panel { padding: 26px 28px; } }

/* ── Option chooser ───────────────────────────────────── */
.dc-optgroup { margin-bottom: 22px; }
.dc-optgroup:last-child { margin-bottom: 0; }
.dc-optgroup__title { margin: 0 0 4px; font-size: 17px; }
.dc-optgroup__note { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.dc-options {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .dc-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .dc-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.dc-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.09);
  border-radius: 14px;
  padding: 15px 16px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.dc-option:hover { border-color: rgba(245, 124, 0, 0.55); transform: translateY(-2px); }
.dc-option.is-selected {
  border-color: var(--orange);
  box-shadow: 0 8px 22px rgba(245, 124, 0, 0.22);
}
.dc-option.is-selected::after {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.dc-option__name { font-weight: 800; font-size: 16px; padding-right: 28px; }
.dc-option__price { font-weight: 800; color: #b45309; font-size: 15px; }
.dc-option__time { font-size: 13px; color: var(--muted); font-weight: 700; }
.dc-option__desc { font-size: 13.5px; color: var(--muted); margin: 0; }
.dc-option__tag {
  align-self: flex-start;
  margin-top: 2px;
  background: rgba(143, 208, 255, 0.35);
  color: #075985;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ── Calendar ─────────────────────────────────────────── */
.dc-calbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.dc-calbar__title { font-weight: 800; font-size: 17px; flex: 1 1 auto; }
.dc-calnav {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  border-radius: 10px;
  width: 38px;
  height: 38px;
  font-size: 17px;
  cursor: pointer;
}
.dc-calnav[disabled] { opacity: 0.4; cursor: not-allowed; }

.dc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--muted);
}
.dc-legend li { display: flex; align-items: center; gap: 6px; }
.dc-legend i {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.dc-legend .dc-key-open { background: #dcfce7; }
.dc-legend .dc-key-low { background: #fef3c7; }
.dc-legend .dc-key-full { background: #fee2e2; }
.dc-legend .dc-key-closed { background: #f3f4f6; }

.dc-daynames,
.dc-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.dc-daynames {
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dc-cell { min-height: 66px; }
.dc-cell--empty { visibility: hidden; }

.dc-day {
  width: 100%;
  height: 100%;
  min-height: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1.5px solid rgba(0, 0, 0, 0.09);
  border-radius: 11px;
  background: #fff;
  font: inherit;
  cursor: pointer;
  padding: 4px 2px;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.dc-day__num { font-weight: 800; font-size: 15px; line-height: 1.1; }
.dc-day__spaces { font-size: 10.5px; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.15; }
.dc-day:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }
.dc-day--open { background: #f0fdf4; border-color: rgba(22, 163, 74, 0.35); }
.dc-day--low { background: #fffbeb; border-color: rgba(217, 119, 6, 0.45); }
.dc-day--low .dc-day__spaces { color: #b45309; }
.dc-day--full { background: #fef2f2; border-color: rgba(220, 38, 38, 0.35); cursor: pointer; }
.dc-day--full .dc-day__spaces { color: #b91c1c; }
.dc-day--closed { background: #f9fafb; color: #9ca3af; cursor: not-allowed; }
.dc-day--closed .dc-day__spaces { color: #9ca3af; }
.dc-day[disabled] { cursor: not-allowed; }
.dc-day.is-selected {
  border-color: var(--orange);
  border-width: 2.5px;
  background: #fff7ed;
  box-shadow: 0 6px 18px rgba(245, 124, 0, 0.25);
}
.dc-day.is-selected .dc-day__num { color: #b45309; }

.dc-selected {
  margin-top: 16px;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
  padding-top: 14px;
}
.dc-selected__title { font-weight: 800; font-size: 15px; margin: 0 0 8px; }
.dc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff7ed;
  border: 1px solid rgba(245, 124, 0, 0.4);
  border-radius: 999px;
  padding: 6px 8px 6px 13px;
  font-size: 13.5px;
  font-weight: 700;
}
.dc-chip button {
  border: 0;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  color: var(--ink);
}
.dc-chip button:hover { background: rgba(220, 38, 38, 0.18); }

.dc-counter {
  display: inline-block;
  margin-top: 12px;
  background: rgba(143, 208, 255, 0.28);
  color: #075985;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 800;
}
.dc-counter.is-complete { background: #dcfce7; color: #166534; }

/* ── Forms ────────────────────────────────────────────── */
.dc-fieldset {
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 14px;
  padding: 16px;
  margin: 0 0 16px;
  background: #fff;
}
.dc-fieldset legend { font-weight: 800; font-size: 15px; padding: 0 8px; }
.dc-grid2 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .dc-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dc-field label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 5px; }
.dc-field input,
.dc-field select,
.dc-field textarea {
  width: 100%;
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  border-radius: 11px;
  padding: 11px 12px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}
.dc-field textarea { min-height: 84px; resize: vertical; }
.dc-field input:focus,
.dc-field select:focus,
.dc-field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(245, 124, 0, 0.18); }
.dc-field .dc-help { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.dc-field--wide { grid-column: 1 / -1; }

.dc-check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 14.5px;
}
.dc-check:last-child { margin-bottom: 0; }
.dc-check input { margin: 2px 0 0; width: 19px; height: 19px; flex: 0 0 19px; accent-color: var(--orange); }
.dc-check:hover { border-color: rgba(245, 124, 0, 0.5); }

/* ── Notices ──────────────────────────────────────────── */
.dc-note {
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14.5px;
  margin: 0 0 14px;
  border: 1px solid transparent;
}
.dc-note:last-child { margin-bottom: 0; }
.dc-note--info { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.dc-note--warn { background: #fffbeb; border-color: #fcd34d; color: #78350f; }
.dc-note--error { background: #fef2f2; border-color: #fecaca; color: #991b1b; font-weight: 700; }
.dc-note--ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.dc-note strong { display: block; margin-bottom: 3px; }
.dc-note[hidden] { display: none; }

/* ── Summary ──────────────────────────────────────────── */
.dc-summary { width: 100%; border-collapse: collapse; margin: 0 0 8px; font-size: 15px; }
.dc-summary th,
.dc-summary td { padding: 10px 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); text-align: left; vertical-align: top; }
.dc-summary th { width: 42%; color: var(--muted); font-weight: 700; }
.dc-summary tr:last-child th,
.dc-summary tr:last-child td { border-bottom: 0; }
.dc-summary .dc-total th,
.dc-summary .dc-total td { font-size: 18px; font-weight: 800; color: #b45309; border-top: 2px solid rgba(0, 0, 0, 0.12); }

/* ── Payment instructions ─────────────────────────────── */
.dc-ref {
  text-align: center;
  background: #1f2937;
  color: #fff;
  border-radius: 14px;
  padding: 18px;
  margin: 0 0 18px;
}
.dc-ref span { display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.dc-ref strong {
  display: block;
  margin-top: 6px;
  font-size: clamp(18px, 4.4vw, 27px);
  font-weight: 800;
  letter-spacing: 0.02em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}
.dc-ref button {
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font: inherit;
  font-weight: 800;
  padding: 9px 18px;
  cursor: pointer;
}

.dc-pay {
  border: 2px solid rgba(245, 124, 0, 0.35);
  border-radius: 16px;
  padding: 18px;
  background: #fff;
  margin: 0 0 18px;
}
.dc-pay h3 { margin: 0 0 12px; font-size: 18px; }
.dc-bank { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.dc-bank th,
.dc-bank td { padding: 11px 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); text-align: left; }
.dc-bank th { color: var(--muted); font-weight: 700; width: 44%; }
.dc-bank td { font-weight: 800; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.dc-bank tr:last-child th,
.dc-bank tr:last-child td { border-bottom: 0; }
.dc-qr { text-align: center; margin-top: 16px; }
.dc-qr svg { width: 190px; height: 190px; max-width: 100%; }
.dc-qr p { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.dc-paylink { text-align: center; margin-top: 14px; }

/* The page the customer's bank returns them to. Narrower than the booking
   form because it only ever says one thing. */
.dc-payreturn { max-width: 760px; }

/* Pay by Bank: the one-tap route into the customer's own banking app. Given
   its own green panel above the bank details so it reads as the easy option,
   while the details underneath stay put as the way that always works. */
.dc-pbb {
  border: 2px solid #86efac;
  border-radius: 16px;
  padding: 18px;
  background: #f0fdf4;
  margin: 0 0 18px;
}
.dc-pbb h3 { margin: 0 0 8px; font-size: 18px; color: #14532d; }
.dc-pbb p { margin: 0 0 12px; font-size: 15px; color: #166534; line-height: 1.55; }
.dc-pbb__go {
  width: 100%;
  background: #15803d;
  border-color: #15803d;
  font-size: 17px;
}
.dc-pbb__go:hover:not(:disabled) { background: #166534; border-color: #166534; }
.dc-pbb__msg {
  margin: 12px 0 0;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #78350f;
  font-size: 14.5px;
  font-weight: 700;
}
.dc-pbb__msg[hidden] { display: none; }
.dc-pbb__alt { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }

.dc-next { margin: 0; padding-left: 20px; font-size: 15px; }
.dc-next li { margin-bottom: 7px; }

/* Bookings a customer still owes for, shown when they try to book again. */
.dc-unpaid { margin: 0; padding: 0; list-style: none; }
.dc-unpaid li {
  padding: 12px 14px;
  margin-bottom: 8px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-left: 5px solid var(--orange);
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.5;
}
.dc-unpaid strong { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0.4px; }

/* ── Lookup ───────────────────────────────────────────── */
.dc-lookup__result { margin-top: 16px; }
.dc-status {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.dc-status--pending { background: #fef3c7; color: #92400e; }
.dc-status--confirmed { background: #dcfce7; color: #166534; }
.dc-status--cancelled { background: #fee2e2; color: #991b1b; }
.dc-status--expired { background: #f3f4f6; color: #4b5563; }

.dc-inline-load { color: var(--muted); font-size: 14.5px; }
.dc-busy { opacity: 0.6; pointer-events: none; }

.dc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}