/* Trimsalon Joyce · appointment request page */
.back { margin-left: auto; color: var(--ink); text-decoration: none; font-weight: 600; }
.book { max-width: 760px; margin: 0 auto; padding: 28px 16px 40px; }
.book-head h1 { font-size: clamp(36px, 6vw, 54px); font-weight: 800; }
.book-head p { color: var(--ink-2); font-size: 18px; margin: 12px 0 24px; }
.step { background: var(--card); border: 1.5px solid var(--line); border-radius: 22px; padding: 22px clamp(16px, 3vw, 28px) 24px; margin-bottom: 16px; }
.step h2 { font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.field { margin-bottom: 14px; }
.field label, .label { display: block; font-weight: 700; margin: 0 0 6px; font-size: 16px; }
.label { margin-top: 14px; }
.opt { font-weight: 400; color: var(--ink-2); }
.field input, .field textarea { width: 100%; font: inherit; font-size: 17px; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 14px; background: var(--bg); }
.field input:focus, .field textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }
.chips-col { flex-direction: column; margin-bottom: 14px; }
.chips-col button { width: 100%; }
.hint { color: var(--ink-2); margin-top: -6px; }
.warn { background: var(--coral-soft); border-radius: 12px; padding: 10px 14px; margin-top: 10px; }
.estimate { background: var(--blue-soft); border-radius: 14px; padding: 12px 16px; margin: 0; }
.estimate span { display: block; font-size: 14px; color: var(--ink-2); }
.days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; min-width: 0; }
.days button { flex: none; width: 70px; scroll-snap-align: start; border: 1.5px solid var(--line); background: var(--bg); border-radius: 16px;
  padding: 10px 0; cursor: pointer; display: grid; justify-items: center; gap: 0; line-height: 1.15; }
.days button span { font-size: 13px; color: var(--ink-2); }
.days button b { font: 800 24px var(--head); }
.days button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.days button[aria-pressed="true"] span { color: #dfe5ff; }
.demo { margin-top: 14px; }
.sendbar { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; gap: 14px; margin: 18px -16px 0; padding: 12px 16px 40px;
  background: rgba(251, 250, 247, .96); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.sendbar p { margin: 0; flex: 1; min-width: 0; font-size: 14px; }
.sendbar p b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sendbar p span { color: var(--ink-2); }
.error { position: fixed; left: 50%; transform: translateX(-50%); bottom: 112px; z-index: 40; background: var(--ink); color: #fff;
  border-radius: 14px; padding: 12px 16px; width: min(440px, calc(100vw - 32px)); text-align: center; }

/* done: the collar tag */
.done { text-align: center; padding-top: 6px; }
.tag-wrap { width: 170px; margin: 0 auto 10px; }
.tag { width: 100%; overflow: visible; }
.tag-swing { transform-origin: 100px 22px; animation: swing 2.6s ease-in-out 1; }
@keyframes swing { 0% { transform: rotate(14deg); } 25% { transform: rotate(-9deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
.tag-name { font: 800 36px var(--head); fill: #fff; letter-spacing: .02em; }
.tag-small { font: 700 11px var(--body); fill: #ffd7cf; letter-spacing: .16em; }
.done h2 { font-size: clamp(28px, 5vw, 38px); font-weight: 800; margin: 6px 0 10px; }
.done > p { color: var(--ink-2); max-width: 32em; margin-left: auto; margin-right: auto; }
.recap { text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 20px; padding: 6px 20px; margin: 22px 0 16px; }
.recap dt { font-size: 13px; color: var(--ink-2); padding-top: 12px; }
.recap dd { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-weight: 600; }
.recap dd:last-child { border-bottom: 0; }
.done-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 22px 0 60px; }

@media (max-width: 680px) {
  .two { grid-template-columns: minmax(0, 1fr); }
  .step h2 { font-size: 21px; }
  .sendbar .btn { padding: 12px 18px; }
  .done-actions .btn { flex: 1 1 100%; }
}