/* ==========================================================================
   Archin Unity — Customer Booking
   Mobile-first, self-contained (all classes prefixed `au-` to avoid clashes
   with the existing site stylesheets).
   ========================================================================== */

:root {
  --au-slate: #2e3740;
  --au-slate-2: #364049;
  --au-gold: #f4c542;
  --au-gold-dark: #d4a520;
  --au-cream: #f5f2eb;
  --au-line: #e4e0d6;
  --au-muted: #8a8378;
  --au-green: #1e8e5a;
  --au-green-bg: #e5f5ec;
  --au-red: #c93a3a;
  --au-red-bg: #fbecec;
  --au-blue: #2563eb;
  --au-blue-bg: #e8effd;
  --au-radius: 12px;
}

.au-book {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
  color: var(--au-slate);
  /* The shell never declared a family, so it inherited whatever the theme's
     body stack resolved to and the booking + account flow read as unstyled
     next to the rest of the site. These are the site's own two faces. */
  font-family: var(--font-body, "Freight Sans"), -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

.au-book h1, .au-book h2, .au-book h3 {
  font-family: var(--font-display, "Freight Display"), Georgia, "Times New Roman", serif;
  color: var(--au-slate);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.au-book h1 { font-size: 2rem; margin: 0 0 0.5rem; }
.au-book h2 { font-size: 1.35rem; margin: 0 0 0.75rem; }
.au-book h3 { font-size: 1.08rem; margin: 0 0 0.5rem; }

.au-book-lead {
  color: var(--au-muted);
  max-width: 640px;
}

/* ---------- Stepper ---------- */
.au-steps {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  margin: 1.25rem 0 1.75rem;
  padding: 0;
  overflow-x: auto;
}
.au-steps li {
  flex: 1 0 auto;
  min-width: 110px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--au-muted);
  background: #fff;
  border: 1px solid var(--au-line);
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  text-align: center;
  white-space: nowrap;
}
.au-steps li .au-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--au-cream);
  color: var(--au-slate);
  font-size: 0.72rem;
  margin-right: 0.35rem;
}
.au-steps li.au-current {
  border-color: var(--au-slate-2);
  color: var(--au-slate);
  background: var(--au-cream);
}
.au-steps li.au-current .au-step-n { background: var(--au-gold); }
.au-steps li.au-done { color: var(--au-green); border-color: var(--au-green); }
.au-steps li.au-done .au-step-n { background: var(--au-green); color: #fff; }

/* ---------- Flash messages ---------- */
.au-flash {
  border-radius: var(--au-radius);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
}
.au-flash.au-error { background: var(--au-red-bg); border: 1px solid #f0c4c4; color: #7c2222; }
.au-flash.au-success { background: var(--au-green-bg); border: 1px solid #bfe6cf; color: #145c39; }
.au-flash ul { margin: 0.25rem 0 0 1.1rem; padding: 0; }

/* ---------- Cards / grids ---------- */
.au-card {
  background: #fff;
  border: 1px solid var(--au-line);
  border-radius: var(--au-radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.au-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 860px) {
  .au-grid-2 { grid-template-columns: 1fr 1fr; }
  .au-book { padding: 2.5rem 1.5rem 5rem; }
}

/* ---------- Service select ---------- */
.au-services { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 760px) { .au-services { grid-template-columns: 1fr 1fr; } }
.au-service {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--au-line);
  border-radius: var(--au-radius);
  padding: 1.25rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  font: inherit;
  color: inherit;
  width: 100%;
}
.au-service:hover { border-color: var(--au-slate-2); box-shadow: 0 6px 18px rgba(46,55,64,0.10); }
.au-service:focus-visible { outline: 3px solid var(--au-gold); outline-offset: 2px; }
.au-service h3 { margin: 0.4rem 0 0.3rem; font-size: 1.15rem; }
.au-service p { margin: 0 0 0.8rem; color: var(--au-muted); font-size: 0.92rem; }
.au-service-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
.au-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--au-cream);
  color: var(--au-slate);
  border: 1px solid var(--au-line);
}
.au-pill.au-go { background: var(--au-green-bg); border-color: #bfe6cf; color: #145c39; }
.au-pill.au-quote { background: var(--au-blue-bg); border-color: #c3d4fa; color: #1e40af; }
.au-pill.au-emg { background: var(--au-red-bg); border-color: #f0c4c4; color: #7c2222; }
.au-service-icon { font-size: 1.9rem; line-height: 1; }

/* ---------- Forms ---------- */
.au-form-grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
@media (min-width: 700px) {
  .au-form-grid.au-cols-2 { grid-template-columns: 1fr 1fr; }
  .au-span-2 { grid-column: span 2; }
}
.au-field label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 0.3rem; }
.au-field label .au-req { color: var(--au-red); }
.au-field input[type="text"],
.au-field input[type="email"],
.au-field input[type="tel"],
.au-field select,
.au-field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  border: 1px solid #cfc9bc;
  border-radius: 8px;
  background: #fff;
  color: var(--au-slate);
  min-height: 48px; /* comfortable touch target */
}
.au-field textarea { min-height: 110px; resize: vertical; }
.au-field input:focus, .au-field select:focus, .au-field textarea:focus {
  outline: 3px solid rgba(244,197,66,0.45);
  border-color: var(--au-slate-2);
}
.au-hint { font-size: 0.8rem; color: var(--au-muted); margin-top: 0.25rem; }
.au-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Buttons ---------- */
.au-btn {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.8rem 1.6rem;
  border-radius: 10px;
  border: 2px solid var(--au-slate-2);
  background: var(--au-slate-2);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  min-height: 50px;
  transition: background 0.15s, transform 0.05s;
}
.au-btn:hover { background: var(--au-slate); color: #fff; }
.au-btn:active { transform: scale(0.98); }
.au-btn.au-btn-gold { background: var(--au-gold); border-color: var(--au-gold); color: var(--au-slate); }
.au-btn.au-btn-gold:hover { background: var(--au-gold-dark); border-color: var(--au-gold-dark); }
.au-btn.au-btn-ghost { background: #fff; color: var(--au-slate); }
.au-btn.au-btn-ghost:hover { background: var(--au-cream); }
.au-btn.au-btn-danger { background: #fff; border-color: var(--au-red); color: var(--au-red); }
.au-btn.au-btn-danger:hover { background: var(--au-red-bg); }
.au-btn.au-btn-block { display: block; width: 100%; }
.au-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.au-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.au-actions .au-btn { flex: 1 1 200px; }

/* ---------- Calendar ---------- */
.au-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.au-cal-title { font-size: 1.15rem; font-weight: 800; margin: 0; }
.au-cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--au-line);
  background: #fff;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.au-cal-nav:hover { background: var(--au-cream); }
.au-cal-nav[disabled] { opacity: 0.4; cursor: not-allowed; }
.au-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.au-cal-dow {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--au-muted);
  padding: 0.3rem 0;
}
.au-day {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 52px;
  border: 1px solid var(--au-line);
  background: #fff;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px;
}
.au-day .au-day-n { font-size: 1rem; line-height: 1; }
.au-day .au-day-sub { font-size: 0.62rem; font-weight: 700; line-height: 1; }
.au-day.au-pad { visibility: hidden; }
.au-day.au-available { border-color: #9fd8b8; background: #f2faf5; }
.au-day.au-available .au-day-sub { color: var(--au-green); }
.au-day.au-available:hover { background: var(--au-green-bg); border-color: var(--au-green); }
.au-day.au-selected { background: var(--au-slate-2) !important; border-color: var(--au-slate-2) !important; color: #fff; }
.au-day.au-selected .au-day-sub { color: var(--au-gold); }
.au-day.au-full { background: #faf7f0; color: var(--au-muted); cursor: not-allowed; }
.au-day.au-full .au-day-sub { color: #b07a1e; }
.au-day.au-off { background: var(--au-cream); color: #b7b0a4; cursor: not-allowed; }
.au-day.au-today .au-day-n { text-decoration: underline; text-underline-offset: 3px; }
.au-day:focus-visible { outline: 3px solid var(--au-gold); outline-offset: 1px; }

.au-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--au-muted); }
.au-legend span::before {
  content: ""; display: inline-block; width: 0.75rem; height: 0.75rem;
  border-radius: 3px; margin-right: 0.3rem; vertical-align: -1px; border: 1px solid var(--au-line);
}
.au-legend .au-lg-av::before { background: #f2faf5; border-color: #9fd8b8; }
.au-legend .au-lg-full::before { background: #faf7f0; }
.au-legend .au-lg-off::before { background: var(--au-cream); }
.au-legend .au-lg-sel::before { background: var(--au-slate-2); }

/* ---------- Slots ---------- */
.au-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.75rem; }
@media (min-width: 560px) { .au-slots { grid-template-columns: 1fr 1fr 1fr; } }
.au-slot {
  border: 2px solid var(--au-line);
  background: #fff;
  border-radius: 10px;
  padding: 0.7rem 0.4rem;
  font: inherit;
  cursor: pointer;
  text-align: center;
  min-height: 60px;
}
.au-slot .au-slot-t { display: block; font-weight: 800; font-size: 1rem; }
.au-slot .au-slot-s { display: block; font-size: 0.72rem; color: var(--au-muted); margin-top: 2px; }
.au-slot.au-slot-open:hover { border-color: var(--au-slate-2); background: var(--au-cream); }
.au-slot.au-slot-picked { border-color: var(--au-slate-2); background: var(--au-slate-2); color: #fff; }
.au-slot.au-slot-picked .au-slot-s { color: var(--au-gold); }
.au-slot.au-slot-full { background: #faf7f0; color: #6B635C; border-style: dashed; cursor: not-allowed; } /* #a09a8d was 2.62:1 on #faf7f0 */
.au-slot.au-slot-full .au-slot-s { color: #b07a1e; font-weight: 800; }
.au-slot:focus-visible { outline: 3px solid var(--au-gold); outline-offset: 1px; }
.au-slots-empty { color: var(--au-muted); padding: 1rem 0; }
.au-loading { color: var(--au-muted); padding: 1rem 0; }
.au-tz-note { font-size: 0.82rem; color: var(--au-muted); margin-top: 0.75rem; }

/* ---------- Review / confirmation ---------- */
.au-summary { width: 100%; border-collapse: collapse; }
.au-summary th, .au-summary td { text-align: left; padding: 0.55rem 0; border-bottom: 1px solid var(--au-line); vertical-align: top; }
.au-summary th { color: var(--au-muted); font-weight: 600; width: 34%; font-size: 0.9rem; }
.au-summary td { font-weight: 700; }
.au-ref {
  display: inline-block; font-size: 1.4rem; font-weight: 800; letter-spacing: 0.04em;
  background: var(--au-slate-2); color: #fff; border-radius: 10px; padding: 0.5rem 1.1rem;
}
.au-confirm-hero { text-align: center; padding: 1.5rem 0 0.5rem; }
.au-confirm-hero .au-check {
  width: 72px; height: 72px; border-radius: 50%; background: var(--au-green);
  color: #fff; font-size: 2.2rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.75rem;
}
.au-manage-link-box {
  background: var(--au-cream); border: 1px dashed #cfc9bc; border-radius: 10px;
  padding: 0.8rem 1rem; font-size: 0.85rem; word-break: break-all; margin-top: 1rem;
}
.au-status {
  display: inline-block; font-size: 0.78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0.25rem 0.7rem; border-radius: 999px;
  background: var(--au-cream); border: 1px solid var(--au-line); color: var(--au-slate);
}
.au-status.au-st-confirmed, .au-status.au-st-assigned { background: var(--au-green-bg); border-color: #bfe6cf; color: #145c39; }
.au-status.au-st-cancelled { background: var(--au-red-bg); border-color: #f0c4c4; color: #7c2222; }
.au-status.au-st-pending { background: #fff7e0; border-color: #ecd27a; color: #8a6d00; }
.au-status.au-st-completed { background: var(--au-blue-bg); border-color: #c3d4fa; color: #1e40af; }

/* ---------- Emergency banner ---------- */
.au-emergency {
  background: #7c2222; color: #fff; border-radius: var(--au-radius);
  padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.au-emergency a { color: var(--au-gold); font-weight: 800; }
.au-emergency strong { color: var(--au-gold); }

/* ---------- Skeleton shimmer for loading states ---------- */
.au-skeleton {
  background: linear-gradient(90deg, var(--au-cream) 25%, #fff 50%, var(--au-cream) 75%);
  background-size: 200% 100%;
  animation: au-shimmer 1.2s infinite;
  border-radius: 10px;
  min-height: 52px;
}
@keyframes au-shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .au-skeleton { animation: none; }
  .au-btn, .au-service, .au-day, .au-slot { transition: none; }
}

/* ---------- Phase 2 additions (estimator + customer accounts) ----------
   These mirror the admin scheduler equivalents so the public estimator and
   account pages share one vocabulary with the rest of the booking flow. */
.au-checkbox { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.95rem; margin-bottom: 0.4rem; }
.au-checkbox input { width: 18px; height: 18px; margin-top: 0.15rem; accent-color: var(--au-slate); flex: none; }
.au-checkbox label { font-weight: 500; }

.au-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }

/* Estimate breakdown / account history tables */
.au-table-simple { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.au-table-simple th { text-align: left; font-weight: 700; padding: 0.45rem 0.5rem 0.45rem 0; border-bottom: 2px solid var(--au-cream); }
.au-table-simple td { padding: 0.55rem 0.5rem 0.55rem 0; border-bottom: 1px solid var(--au-cream); vertical-align: top; }
.au-table-simple tr:last-child td { border-bottom: 0; }
.au-num { text-align: right; white-space: nowrap; }

/* The headline figure on the estimate result */
.au-estimate-range { font-size: 2rem; font-weight: 800; line-height: 1.15; margin: 0.4rem 0; color: var(--au-slate); }
@media (max-width: 480px) { .au-estimate-range { font-size: 1.6rem; } }

/* --- Waitlist (Phase 3) -------------------------------------------------- */
/* Shown in the slots column when a chosen date has nothing bookable left, so
   a full day becomes an offer instead of a dead end. */
.au-slots-waitlist {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid #e4e0d6;
    border-radius: 10px;
    background: #faf8f4;
    text-align: center;
}
.au-slots-waitlist p {
    margin: 0 0 12px;
    font-size: 0.92rem;
    color: #5c564e;
}