/* ============================================================================
 * calendar.css — month grid + slot list + Book button
 * Values ported directly from Paper artboard O85-0 "Booking — Phone Consultation"
 * Layout is fluid (single column on mobile, 2-column at 720px+).
 * ============================================================================ */

/* ---------- Card shell (the purple-outlined container) ---------- */
.booking-card {
  padding: 0;
  border: 3px solid #9945FF;
  border-radius: 20px;
  background: linear-gradient(180deg, #1B193B 0%, #121126 100%);
  overflow: clip;
}
.booking-card .dot-pattern { display: none; }

.calendar-split {
  display: grid;
  grid-template-columns: 1fr;
}
.calendar-split[hidden] { display: none !important; }
@media (min-width: 800px) {
  .calendar-split {
    grid-template-columns: 1.9fr 300px;
  }
}

/* ---------- Calendar (left) ---------- */
.month-view {
  padding: 28px 24px;
}
@media (min-width: 800px) {
  .month-view { padding: 36px 40px; }
}

.month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.month-nav h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 28px;
  color: #F0EEFF;
  letter-spacing: 0;
  margin: 0;
}
.month-nav button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: rgba(153, 69, 255, 0.15); /* #9945FF26 */
  color: #C77DFF;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease;
}
.month-nav button:hover:not([disabled]) {
  background: rgba(153, 69, 255, 0.28);
}
.month-nav button[disabled] {
  opacity: 0.35;
  cursor: default;
}
.month-nav button + button { margin-left: 6px; }

/* Weekday row */
.month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 12px;
}
.month-weekdays span {
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.05em;
  color: rgba(248, 248, 248, 0.30);
  text-transform: uppercase;
}

/* Day grid */
.month-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 6px;
  column-gap: 0;
}
.day-cell {
  aspect-ratio: 1;
  max-width: 44px;
  margin: 0 auto;
  width: 100%;
  border: none;
  background: transparent;
  color: #F0EEFF;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease;
  position: relative;
}
.day-cell.empty { cursor: default; visibility: hidden; }
.day-cell.outside,
.day-cell.unavailable {
  color: rgba(248, 248, 248, 0.25);
  cursor: not-allowed;
  font-weight: 400;
}
.day-cell.has-open,
.day-cell.only-soft {
  color: #F0EEFF;
}
/* Hover only applies when NOT selected — otherwise hover's specificity
 * wins and the faded purple masks the solid-purple selected state. */
.day-cell.has-open:not(.selected):hover,
.day-cell.only-soft:not(.selected):hover {
  background: rgba(153, 69, 255, 0.12);
}
/* Today — teal text with dot below */
.day-cell.today:not(.selected) {
  flex-direction: column;
  gap: 3px;
  color: #07EDBE;
  font-weight: 500;
}
.day-cell.today:not(.selected)::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #07EDBE;
}
/* Selected — solid purple fill, white bold text (wins over all other states) */
.day-cell.selected {
  background: #9945FF !important;
  color: #FFFFFF !important;
  font-weight: 700;
}

/* Current-week highlight (month-view, desktop consult) — soft light-purple
 * tint so the user's eye lands on the week we want them to book. */
.day-cell.current-week:not(.selected):not(.today) {
  background: rgba(160, 140, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(160, 140, 255, 0.22);
}

.month-legend { display: none; }

/* ---------- Week strip (consult = 1 row, rebooking rolling = N rows) ---------- */
.week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 6px;
}
/* Rolling multi-week view drops the DOW label per-cell (weekday header
 * is shown once above the grid), so cells can be a bit shorter. */
.week-strip:not(.weeks-1) .day-cell.week-cell {
  padding: 8px 0;
}
.week-strip:not(.weeks-1) .day-cell.week-cell .dom {
  font-size: 17px;
}
.day-cell.week-cell {
  aspect-ratio: auto;
  max-width: none;
  height: auto;
  padding: 10px 0 12px;
  flex-direction: column;
  gap: 4px;
  border-radius: 14px;
  line-height: 1;
}
.day-cell.week-cell .dow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}
.day-cell.week-cell .dom {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 19px;
  line-height: 1;
}
.day-cell.week-cell.today:not(.selected) {
  gap: 4px;
}
.day-cell.week-cell.today:not(.selected)::after { display: none; }
.day-cell.week-cell.today:not(.selected) .dom { color: #07EDBE; }
.day-cell.week-cell.selected .dow { opacity: 0.85; }
.day-cell.week-cell.unavailable,
.day-cell.week-cell.outside {
  opacity: 0.35;
}

/* ---------- Time side (right) ---------- */
.slots-view {
  /* The 14px scrollbar sits inside slot-list's padding-right. This
   * right padding is the gutter from scrollbar to the card border.
   * Spacing reads: [pill] --6px-- [scrollbar 14px] --6px-- [card edge]. */
  padding: 28px 6px 28px 26px;
  background: rgba(10, 9, 26, 0.50);
  border-top: 1px solid rgba(153, 69, 255, 0.25);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}
@media (min-width: 800px) {
  .slots-view {
    padding: 36px 8px 36px 30px;
    border-top: none;
    border-left: 1px solid rgba(153, 69, 255, 0.25);
  }
}
.slots-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  flex: 1 1 auto;
}
/* Wrap positions the custom gradient scrollbar overlay next to the list */
.slot-list-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Cap the visible slot stack so the Book button + form stay in view no
 * matter how many times the day has open. Fade the bottom edge so a
 * scrolled-out pill reads as "there's more below." */
.slot-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Momentum scroll off — it's what was making the list "zing" on tiny
   * finger drags. Snap each pill to the top of the viewport so short
   * drags settle on a full pill instead of mid-pill. */
  -webkit-overflow-scrolling: auto;
  scroll-snap-type: y proximity;
  scroll-padding-top: 4px;
  -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent);
  mask-image: linear-gradient(180deg, #000 92%, transparent);
  /* Right padding reserves space for the gradient thumb overlay */
  padding: 0 20px 6px 0;
  flex: 1 1 auto;
  min-height: 0;
  /* Hide native scrollbar — custom gradient overlay replaces it */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.slot-list > .slot { scroll-snap-align: start; }
.slot-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Desktop cap so card height is stable + wider gap to match 30px left */
@media (min-width: 800px) {
  .slot-list {
    max-height: 360px;
    padding-right: 22px;
  }
}

/* Custom gradient scrollbar — a styled div overlay instead of the
 * native widget. Renders identically on iOS Safari, Firefox, Chrome,
 * etc. since we aren't relying on any ::-webkit-scrollbar support. */
.custom-scrollbar {
  position: absolute;
  top: 0;
  right: 6px;
  bottom: 6px;
  width: 6px;
  pointer-events: none;
}
@media (min-width: 800px) {
  .custom-scrollbar { right: 8px; }
}
.custom-scrollbar-thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background-image: linear-gradient(
    to bottom,
    #A08CFF 0%,
    #07EDBE 50%,
    #FF7EC0 100%
  );
  background-color: #A08CFF;
  border-radius: 999px;
  min-height: 28px;
  will-change: transform, height;
}
.custom-scrollbar[hidden] { display: none; }

/* Mobile: only the consult flow uses the locked-viewport app-shell
 * pattern (compact 1-week strip fits cleanly in 100dvh). The rebook
 * page has a 4-week rolling grid + progress pill + possible address
 * panel — too tall for 100dvh, so it scrolls like a normal page. */
@media (max-width: 799px) {
  .page[data-mode="consult"] {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-bottom: 1rem;
    overflow: hidden;
  }
  .page[data-mode="consult"] .hero {
    padding: 1rem 0 0.75rem;
    flex: 0 0 auto;
  }
  .page[data-mode="consult"] .beta-banner {
    flex: 0 0 auto;
    font-size: 0.8rem;
    padding: 0.5rem 2rem 0.5rem 0.8rem;
  }
  .page[data-mode="consult"] .booking-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .page[data-mode="consult"] .calendar-split {
    flex: 1 1 auto;
    min-height: 0;
  }
  .page[data-mode="consult"] .slots-view {
    flex: 1 1 auto;
    min-height: 0;
  }
  .page[data-mode="consult"] .month-view { flex: 0 0 auto; }

  /* Consult page needs html/body locked to 100dvh so the inner
   * app-shell fills correctly. Rebook page stays with normal body
   * scrolling. */
  html:has(.page[data-mode="consult"]),
  body:has(.page[data-mode="consult"]) {
    height: 100dvh;
    overflow: hidden;
  }
}
.slots-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.slots-header h2 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(248, 248, 248, 0.55);
  margin: 0;
}
.date-label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 22px;
  color: #07EDBE;
}

/* ---------- Slot pills ---------- */
.slot-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.slot-group { display: flex; flex-direction: column; gap: 8px; }
.slot-group-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 238, 255, 0.6);
}
.slot-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.slot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  background: transparent;
  color: #F0EEFF;
  border: 1px solid rgba(153, 69, 255, 0.25);
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  position: relative;
  width: 100%;
}
.slot[data-selectable="0"] { cursor: not-allowed; }
.slot:not([data-selectable="0"]):hover {
  border-color: rgba(153, 69, 255, 0.55);
}
.slot.needs-approval {
  border-color: rgba(160, 140, 255, 0.50);
}
.slot.flex-to-move {
  border-color: rgba(71, 126, 214, 0.45);
}
.slot.unavailable {
  opacity: 0.35;
  border-style: dashed;
}
.slot.selected {
  background: #07EDBE;
  border-color: #07EDBE;
  color: #0A091A;
  font-weight: 600;
}
.slot-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
}
.slot-time { font-weight: inherit; font-size: 15px; }
.slot-duration {
  font-size: 0.7rem;
  color: inherit;
  opacity: 0.6;
}
.slot-meta {
  font-size: 0.72rem;
  opacity: 0.75;
  margin-top: 2px;
}
.drive-chip {
  display: inline-block;
  font-size: 0.7rem;
  color: #A0C7FF;
  background: rgba(160, 199, 255, 0.08);
  border-radius: 999px;
  padding: 2px 8px;
}
.drive-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  white-space: nowrap;
  pointer-events: none;
}
.slot.show-tooltip .drive-tooltip { display: inline-block; }

.slot-empty {
  text-align: center;
  padding: 1.5rem 0.5rem;
  color: rgba(248, 248, 248, 0.45);
  font-size: 0.9rem;
}
.slot-empty .empty-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(153, 69, 255, 0.10);
  color: #C77DFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

/* ---------- Book button (gradient pill) ---------- */
.summary {
  margin-top: auto;
  padding-top: 16px;
  position: static;
  background: transparent;
  border: none;
  backdrop-filter: none;
}
.summary-row { display: none; }
.summary-actions { display: flex; }

/* ---------- Intake panel (View B — replaces calendar after slot pick) ---------- */
.intake-panel {
  /* Slim side padding on phones (24px -> 14px, Andrew 2026-07-13): the form
   * fields should take up more of the card's width. Desktop keeps 36px. */
  padding: 24px 14px 28px;
  display: flex;
  flex-direction: column;
  animation: intake-slide-in 240ms ease;
  /* Fill the booking-card on mobile so the form can scroll inside the
   * locked 100dvh viewport instead of spilling off-screen. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 800px) {
  .intake-panel { padding: 32px 36px 36px; }
}
.intake-panel[hidden] { display: none !important; }
@keyframes intake-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.intake-panel-body {
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}
.intake-panel .back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font: 600 13px/1 var(--font-body);
  cursor: pointer;
  padding: 6px 8px;
  margin: 0 0 0.75rem -8px;
  border-radius: 999px;
  transition: color 120ms;
}
.intake-panel .back-btn:hover {
  color: var(--teal);
}
.intake-panel .intake-header {
  text-align: center;
  margin-bottom: 1.25rem;
}
.intake-panel .intake-header h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  line-height: 28px;
  color: #F0EEFF;
  margin-bottom: 4px;
}
.intake-panel .intake-when {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 22px;
  color: var(--teal);
}
.intake-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.intake-form .field { margin-bottom: 0; }
.intake-form .field > span { font-size: 13px; }
.intake-form .field input,
.intake-form .field textarea {
  padding: 12px 16px !important;
  /* 16px MINIMUM (Andrew 2026-07-13): anything smaller makes iOS Safari
   * auto-zoom on focus and stay zoomed — the "card wider than the screen,
   * have to pinch out" bug. Never set an input font below 16px. */
  font-size: 16px !important;
}
.intake-form .field textarea {
  border-radius: var(--radius-md) !important;
  min-height: 56px !important;
}
.intake-form .intake-error {
  background: rgba(255, 126, 192, 0.10);
  border: 1px solid rgba(255, 126, 192, 0.35);
  color: var(--pink);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
}
.intake-form .btn-book {
  margin-top: 8px;
  width: 100%;
  padding: 16px;
  min-height: 50px;
  background: linear-gradient(135deg, #A08CFF 0%, #C77DFF 25%, #FF7EC0 50%, #C77DFF 75%, #07EDBE 100%);
  background-size: 220% 220%;
  color: #FFFFFF;
  border: none;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 10px 30px -12px rgba(153, 69, 255, 0.55);
  transition: filter 120ms, box-shadow 120ms;
  animation: gdkc-book-shift 6s ease infinite;
}
.intake-form .btn-book::before,
.intake-form .btn-book::after { display: none; }
.intake-form .btn-book:hover {
  filter: brightness(1.12);
  box-shadow: 0 14px 32px -10px rgba(153, 69, 255, 0.7);
}
.intake-form .btn-book[disabled] { opacity: 0.6; cursor: default; }

/* Legacy .intake-mini (kept for any consumer that hasn't switched yet) */
.intake-mini {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.intake-mini .intake-when {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  color: var(--teal);
  text-align: center;
  padding-bottom: 4px;
}
.intake-mini .field { margin-bottom: 0; }
.intake-mini .field > span {
  font-size: 12px;
  letter-spacing: 0;
}
.intake-mini input,
.intake-mini textarea {
  padding: 10px 14px !important;
  font-size: 14px !important;
}
.intake-mini textarea {
  border-radius: var(--radius-md) !important;
  min-height: 52px !important;
}
.intake-mini .intake-error {
  background: rgba(255, 126, 192, 0.10);
  border: 1px solid rgba(255, 126, 192, 0.35);
  color: var(--pink);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 12px;
}
.intake-mini .btn-mesh,
.intake-mini .btn-pill {
  margin-top: 4px;
  width: 100%;
  padding: 14px;
  min-height: 46px;
  background: linear-gradient(135deg, #A08CFF 0%, #C77DFF 25%, #FF7EC0 50%, #C77DFF 75%, #07EDBE 100%);
  background-size: 220% 220%;
  color: #FFFFFF;
  border: none;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 10px 30px -12px rgba(153, 69, 255, 0.55);
  transition: filter 120ms, box-shadow 120ms;
  animation: gdkc-book-shift 6s ease infinite;
}
.intake-mini .btn-mesh::before,
.intake-mini .btn-mesh::after,
.intake-mini .btn-pill::before,
.intake-mini .btn-pill::after { display: none; }
.intake-mini .btn-mesh:hover,
.intake-mini .btn-pill:hover {
  filter: brightness(1.12);
  box-shadow: 0 14px 32px -10px rgba(153, 69, 255, 0.7);
}
.intake-mini .btn-mesh[disabled] { opacity: 0.6; cursor: default; }
@keyframes gdkc-book-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.summary-actions .btn-pill,
.summary-actions .btn-mesh {
  /* Animated-gradient pill (replaces the rotating-border pill for this
   * screen — solid fill matches Paper, the motion keeps it alive). */
  width: 100%;
  padding: 16px;
  min-height: 50px;
  background: linear-gradient(135deg, #A08CFF 0%, #C77DFF 25%, #FF7EC0 50%, #C77DFF 75%, #07EDBE 100%);
  background-size: 220% 220%;
  color: #FFFFFF;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 18px;
  box-shadow: 0 10px 30px -12px rgba(153, 69, 255, 0.55);
  transition: transform 120ms, box-shadow 120ms, filter 120ms;
  animation: gdkc-book-shift 6s ease infinite;
}
.summary-actions .btn-pill::before,
.summary-actions .btn-pill::after,
.summary-actions .btn-mesh::before,
.summary-actions .btn-mesh::after {
  display: none;
}
.summary-actions .btn-pill:hover,
.summary-actions .btn-mesh:hover {
  filter: brightness(1.12);
  box-shadow: 0 14px 32px -10px rgba(153, 69, 255, 0.7);
}

/* ---------- Contract banner / Address / Progress (kept minimal) ---------- */
.contract-banner {
  background: rgba(255, 126, 192, 0.10);
  border: 1px solid rgba(255, 126, 192, 0.35);
  color: var(--pink);
  border-radius: 14px;
  padding: 0.65rem 1rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.address-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 26, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: address-fade-in 180ms ease-out;
}
.address-modal[hidden] { display: none; }
.address-modal-card {
  background: #14132E;
  border: 1px solid rgba(153, 69, 255, 0.35);
  border-radius: 20px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: address-pop-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.address-modal-card h3 {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: #F0EEFF;
}
.address-modal-card input {
  width: 100%;
  margin: 0 0 16px;
  padding: 0.75rem 1rem;
  background: #FFFFFF;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--navy);
  font: inherit;
  box-shadow: 0 1px 0 rgba(0,0,0,0.20);
}
.address-modal-card input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(7, 237, 190, 0.25);
}
.address-modal-card #address-save {
  background: #9945FF;
  color: #FFFFFF;
  border: none;
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, transform 120ms;
}
.address-modal-card #address-save:hover { background: #8438EC; }
.address-modal-card #address-save:active { transform: scale(0.98); }
@keyframes address-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes address-pop-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.address-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.address-actions .btn,
.address-actions .btn-secondary {
  flex: 1 0 140px;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(153, 69, 255, 0.35);
  background: transparent;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}
.address-actions .btn:hover {
  border-color: var(--teal);
  color: var(--teal);
}

/* Session progress pill — same 3-color gradient border as the beta
 * banner so it reads as a branded accent, not a flat grey chip. */
.progress {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #FFFFFF;
  background:
    linear-gradient(rgba(10, 9, 26, 0.55), rgba(10, 9, 26, 0.55)) padding-box,
    linear-gradient(90deg, #A08CFF 0%, #07EDBE 50%, #FF7EC0 100%) border-box;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 4px 14px;
  margin-top: 0.5rem;
  letter-spacing: 0.01em;
}

/* ---------- Success card (shared by consult + rebook success states) ----
 * On-brand: purple bordered card, animated gradient checkmark ring,
 * display-font heading, teal date/time. */
.success-card {
  text-align: center;
  padding: 2.5rem 1.5rem;
  border-radius: 20px;
  background: linear-gradient(180deg, #1B193B 0%, #121126 100%);
  position: relative;
}
/* Card border matches the payment card (/pay): teal + mid-purple wrapped evenly
   via a conic gradient, no pink, no animation. */
.success-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from 0deg,
    #07EDBE 0deg, #C77DFF 40deg, #C77DFF 140deg, #07EDBE 180deg,
    #C77DFF 220deg, #C77DFF 320deg, #07EDBE 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* Just the Pawesome possum, large — no circle, no checkmark. */
.success-card .success-icon {
  display: block;
  width: 184px;
  height: auto;
  margin: 0 auto 1.1rem;
}
.success-card h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}
.success-card p {
  color: var(--text-muted);
  max-width: 42ch;
  margin: 0 auto 0.6rem;
  line-height: 1.5;
}
.success-card p strong {
  color: var(--teal);
  font-weight: 700;
}
.success-card .consult-extra,
.success-card p:last-of-type {
  margin-top: 0.75rem;
  font-size: 0.92rem;
  color: var(--text-dim);
}

/* ---------- Skeleton ---------- */
.skeleton {
  position: relative;
  background: rgba(248, 248, 248, 0.04);
  border-radius: 14px;
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(248, 248, 248, 0.06) 50%,
    transparent 100%);
  animation: skeleton-slide 1.3s infinite;
}
.slot.skeleton { height: 48px; border-color: transparent; }
@keyframes skeleton-slide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}