* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: #f0f7fa;
  color: #1f3a4a;
  padding: 16px;
  font-size: 15px;
  line-height: 1.45;
}

.booking-wrap { max-width: 640px; margin: 0 auto; }

.page-header { text-align: center; margin-bottom: 18px; }
.page-title { font-size: 1.5rem; font-weight: 700; color: #1f3a4a; }
.page-subtitle { font-size: 0.9rem; color: #5b7280; margin-top: 4px; }

.card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

.block { padding: 14px 0; border-top: 1px solid #eef3f5; }
.block:first-child { border-top: none; padding-top: 0; }

.step-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #5b7280;
  margin: 4px 0 10px;
}

.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choices.times { gap: 8px; }

.choice {
  border: 1.5px solid #d7e3e8;
  background: #fff;
  color: #1f3a4a;
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}
.choice:hover:not(.disabled) { border-color: #009efd; }
.choice.selected {
  border-color: transparent;
  background: linear-gradient(135deg, #2af598, #009efd);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 158, 253, 0.3);
}
.choice.selected .muted { color: rgba(255, 255, 255, 0.85); }
.choice.disabled { opacity: 0.4; cursor: not-allowed; }
.choice.plan { align-items: flex-start; min-width: 200px; }
.choice.time { padding: 9px 14px; font-variant-numeric: tabular-nums; align-items: center; }
.choice.time .time-main { font-size: 0.95rem; font-weight: 600; }
.choice.time .pickup-sub { font-size: 0.7rem; color: #5b7280; font-variant-numeric: tabular-nums; }
.choice.time.selected .pickup-sub { color: rgba(255, 255, 255, 0.9); }

.muted { color: #5b7280; font-size: 0.85rem; }
.small { font-size: 0.8rem; }

.people-row input,
.field input {
  width: 100%;
  border: 1.5px solid #d7e3e8;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 1rem;
  color: #1f3a4a;
}
.people-row input { width: 110px; }
.people-row input:focus,
.field input:focus { outline: none; border-color: #009efd; }

.field { display: block; margin-bottom: 10px; }
.field-label { display: block; font-size: 0.82rem; color: #5b7280; margin-bottom: 4px; }

.summary { background: #f7fbfc; border-radius: 12px; margin-top: 8px; padding: 16px; border-top: none; }
.sum-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed #e3edf0; }
.sum-row:last-child { border-bottom: none; }
.sum-row span { color: #5b7280; }

.submit {
  width: 100%;
  margin-top: 14px;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #2af598, #009efd);
  box-shadow: 0 6px 14px rgba(0, 158, 253, 0.35);
}
.submit:disabled { background: #c5d3da; box-shadow: none; cursor: not-allowed; }

.status { margin-top: 10px; text-align: center; color: #c0392b; font-size: 0.9rem; min-height: 1em; }

.done { text-align: center; padding: 36px 20px; }
.done-check {
  width: 56px; height: 56px; line-height: 56px; margin: 0 auto 12px;
  border-radius: 50%; color: #fff; font-size: 1.6rem;
  background: linear-gradient(135deg, #2af598, #009efd);
}
.done h2 { color: #1f3a4a; margin-bottom: 8px; }
.done p { margin: 4px 0; }

/* ---- アルグブルー用 月カレンダー ---- */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title { font-size: 1rem; font-weight: 700; color: #1f3a4a; }
.cal-nav {
  border: 1.5px solid #d7e3e8; background: #fff; color: #1f3a4a;
  border-radius: 10px; width: 40px; height: 36px; font-size: 1.2rem; line-height: 1;
  cursor: pointer; transition: all 0.15s ease;
}
.cal-nav:hover:not(:disabled) { border-color: #009efd; }
.cal-nav:disabled { opacity: 0.35; cursor: not-allowed; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { margin-bottom: 4px; }
.cal-dowcell { text-align: center; font-size: 0.7rem; color: #5b7280; padding: 2px 0; }

.cal-cell {
  aspect-ratio: 1 / 1; border: 1.5px solid #d7e3e8; background: #fff; color: #1f3a4a;
  border-radius: 10px; font-size: 0.9rem; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: all 0.15s ease; padding: 0;
}
.cal-cell.empty, .cal-cell.out { border: none; background: transparent; cursor: default; }
.cal-cell.closed { color: #c5d3da; background: #f7fbfc; cursor: not-allowed; }
.cal-cell.open:hover { border-color: #009efd; }
.cal-cell.open { border-color: #2af598; box-shadow: inset 0 0 0 1px rgba(42, 245, 152, 0.35); font-weight: 600; }
.cal-cell.today { position: relative; }
.cal-cell.today::after {
  content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: #009efd;
}
.cal-cell.selected {
  border-color: transparent; color: #fff; box-shadow: 0 4px 10px rgba(0, 158, 253, 0.3);
  background: linear-gradient(135deg, #2af598, #009efd);
}
.cal-cell.selected.today::after { background: #fff; }

/* ---- メンテナンス案内 ---- */
.maint-notice { text-align: center; padding: 20px 8px; }
.maint-notice h3 { font-size: 1.15rem; color: #1f3a4a; margin-bottom: 10px; }
.maint-notice p { margin: 6px 0; }