/* Booking page, loaded after style.css */

.booking-page { max-width: 860px; }

.book-step { margin-bottom: 2.5rem; }
.book-step h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  margin-right: .4em;
  border: 1px solid var(--bronze);
  border-radius: 50%;
  color: var(--bronze);
  font-family: var(--font-body);
  font-size: .75em;
  font-weight: 500;
  vertical-align: .15em;
}

/* Step 1: type cards */
.type-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
.type-card {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
  text-align: left;
  font-family: var(--font-body);
  background: #fff;
  border: 1px solid var(--line);
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: border-color .15s;
}
.type-card:hover { border-color: var(--bronze); }
.type-card.is-picked {
  border-color: var(--bronze);
  outline: 2px solid var(--bronze);
  outline-offset: -1px;
}
.type-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  flex: 1 1 100%;
}
.type-meta { font-size: .85rem; color: var(--muted); flex: 1; }
.type-price {
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bronze);
  white-space: nowrap;
}

.book-hint { color: var(--muted); font-size: .9rem; margin-top: .6rem; }

/* ---- Availability calendar ---- */
.cal-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.cal-nav {
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1;
  width: 2.2rem;
  height: 2.2rem;
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
}
.cal-nav:hover:not(:disabled) { border-color: var(--bronze); color: var(--bronze); }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  min-width: 11rem;
  text-align: center;
}
.cal-toggle { margin-left: auto; display: flex; }
.cal-toggle-btn {
  font-family: var(--font-body);
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .5rem .9rem;
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
}
.cal-toggle-btn + .cal-toggle-btn { border-left: none; }
.cal-toggle-btn.is-active {
  background: var(--bronze);
  border-color: var(--bronze);
  color: #fff;
}
.cal-status { color: var(--muted); font-size: .95rem; padding: .5rem 0; }

/* Month view */
.cal-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-wd {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: .3rem 0;
}
.cal-day {
  min-height: 3.4rem;
  padding: .35rem .3rem;
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .15rem;
  border: 1px solid transparent;
  background: none;
}
.cal-num { font-size: .95rem; }
.cal-sub { font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; }
.cal-off { color: #c9c2b8; }
.cal-off .cal-sub { display: none; }
.cal-closed { color: #c9c2b8; }
.cal-full { color: var(--muted); background: var(--paper-alt); }
.cal-avail {
  background: #fff;
  border-color: var(--line);
  cursor: pointer;
  transition: border-color .15s;
}
.cal-avail .cal-sub { color: var(--bronze); }
.cal-avail:hover { border-color: var(--bronze); }
.cal-avail.is-picked {
  border-color: var(--bronze);
  outline: 2px solid var(--bronze);
  outline-offset: -1px;
}
.cal-dim { opacity: .45; }

/* Slot panel under the month grid */
.cal-slots { margin-top: 1.25rem; }
.cal-slots-head {
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: .75rem;
}

/* Week view */
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.cal-col-head {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  padding: .35rem 0 .6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: .6rem;
}
.cal-col-note {
  color: var(--muted);
  font-size: .8rem;
  text-align: center;
  padding-top: .3rem;
}
.cal-week .slot-grid { grid-template-columns: 1fr; gap: .4rem; }
.cal-week .slot { padding: .5rem 0; font-size: .88rem; }

/* Slot buttons (shared) */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: .6rem;
}
.slot {
  font-family: var(--font-body);
  font-size: .95rem;
  padding: .7rem 0;
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .15s;
}
.slot:hover { border-color: var(--bronze); }
.slot.is-picked {
  border-color: var(--bronze);
  outline: 2px solid var(--bronze);
  outline-offset: -1px;
  color: var(--bronze);
  font-weight: 500;
}

/* Details */
.book-summary {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
  padding: .8rem 1rem;
  background: var(--paper-alt);
  border-left: 3px solid var(--bronze);
}
.book-form { max-width: 520px; }
.book-form label {
  display: block;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.book-form .hint { text-transform: none; letter-spacing: 0; }
.book-form input, .book-form textarea {
  display: block;
  width: 100%;
  margin-top: .4rem;
  padding: .75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
}
.book-form input:focus, .book-form textarea:focus {
  outline: 2px solid var(--bronze);
  outline-offset: 1px;
}
.book-form .notice {
  background: #f6e7e2;
  border-left: 3px solid #b0563a;
  padding: .7rem 1rem;
  font-size: .95rem;
  margin-bottom: 1rem;
}
.paypal-wrap { max-width: 420px; margin-top: 1rem; }

/* Done */
.book-done h3 { font-size: 1.6rem; }
.book-done p { max-width: 52ch; margin-bottom: 1rem; color: var(--muted); }
.book-done #doneText { color: var(--ink); font-family: var(--font-display); font-size: 1.15rem; }

@media (min-width: 720px) {
  .type-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 719px) {
  /* Week view stacks into a day-by-day list on phones */
  .cal-week { grid-template-columns: 1fr; }
  .cal-col-head { text-align: left; }
  .cal-week .slot-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .cal-label { min-width: 0; flex: 1; }
  .cal-toggle { margin-left: 0; width: 100%; }
  .cal-toggle-btn { flex: 1; }
  .cal-day { min-height: 2.9rem; }
  .cal-sub { font-size: .55rem; }
}