/* ══════════════════════════════════════════════
   BOOKING-PAGE.CSS — 預約頁：步驟、月曆、規範、FAQ
   ══════════════════════════════════════════════ */

/* ── 預約步驟 ── */
.booking-steps { background: var(--blush-50); }
.steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}
.steps-row::before {
  content: '';
  position: absolute;
  top: 28px; left: calc(100% / 6);
  right: calc(100% / 6);
  height: 1px;
  background: var(--blush-200);
  z-index: 0;
}
.step-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
.step-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--blush-200);
  color: var(--rose-500);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px -8px var(--rose-400);
}
.step-item h3 {
  font-family: 'Noto Serif TC', serif;
  font-size: clamp(14px, 2.2vw, 17px);
  font-weight: 500;
  color: var(--rose-900);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.step-item p {
  font-size: clamp(11px, 1.6vw, 13px);
  color: var(--ink-soft);
  line-height: 1.8;
}

/* ── 月曆預約 ── */
.booking { background: var(--paper); }
.booking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.panel {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 34px;
  box-shadow: 0 20px 52px -38px var(--rose-500);
}
.panel-title {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 6px;
}
.panel-title .ord {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(15px, 2.5vw, 20px);
  color: var(--rose-400);
}
.panel-title h3 {
  font-family: 'Noto Serif TC', serif;
  font-size: clamp(16px, 2.8vw, 22px);
  font-weight: 600;
  color: var(--rose-900);
  letter-spacing: 0.05em;
}
.panel-sub {
  font-size: clamp(11px, 1.6vw, 13px);
  color: var(--ink-soft);
  margin-bottom: 22px;
  line-height: 1.7;
}
/* 月曆 */
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.cal-head .mlabel {
  font-family: 'Noto Serif TC', serif;
  font-size: clamp(14px, 2.3vw, 18px);
  color: var(--rose-900);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.cal-nav {
  background: var(--blush-50);
  border: 1px solid var(--blush-200);
  color: var(--rose-600);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.2s;
  display: inline-flex; align-items: center; justify-content: center;
}
.cal-nav:hover:not(:disabled) { background: var(--rose-600); color: #fff; border-color: var(--rose-600); }
.cal-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-dow {
  text-align: center;
  font-size: clamp(10px, 1.4vw, 12px);
  color: var(--ink-soft);
  letter-spacing: 0.1em;
  padding: 5px 0;
}
.cal-cell {
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 9px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: clamp(11px, 1.8vw, 13px);
  cursor: pointer;
  transition: all 0.15s;
  background: var(--blush-50);
  color: var(--ink);
}
.cal-cell.empty    { background: transparent; cursor: default; border-color: transparent; }
.cal-cell:not(.empty):not(.disabled):not(.full):hover { border-color: var(--rose-400); }
.cal-cell.selected { background: var(--rose-600); color: #fff; }
.cal-cell.disabled { color: #cdbcc2; cursor: not-allowed; background: transparent; text-decoration: line-through; }
.cal-cell.full     { background: #fff; color: #cdbcc2; cursor: not-allowed; border-color: var(--rule); }
.cal-cell .dot     { width:5px; height:5px; border-radius:50%; background:var(--rose-400); margin-top:3px; }
.cal-cell.selected .dot { background:#fff; }
.cal-cell.full .dot, .cal-cell.disabled .dot { display:none; }
.cal-legend {
  display: flex; gap:16px; flex-wrap:wrap;
  margin-top: 14px;
  font-size: clamp(10px, 1.4vw, 12px);
  color: var(--ink-soft);
}
.cal-legend span { display:inline-flex; align-items:center; gap:5px; }
.lg-dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
/* 時段 */
.slots-head {
  font-size: clamp(11px, 1.6vw, 13px);
  color: var(--ink-soft);
  margin: 22px 0 10px;
  letter-spacing: 0.04em;
}
.slots-head b { color: var(--rose-700); font-weight:600; }
.slots { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.slot {
  border: 1px solid var(--blush-200);
  background: var(--blush-50);
  color: var(--ink);
  border-radius: 9px;
  padding: 11px 6px;
  text-align: center;
  font-size: clamp(12px, 1.8vw, 14px);
  cursor: pointer;
  transition: all 0.15s;
}
.slot:hover:not(.booked) { border-color:var(--rose-500); color:var(--rose-700); }
.slot.selected  { background:var(--rose-600); border-color:var(--rose-600); color:#fff; }
.slot.booked    { background:#f6eef1; color:#c3aeb6; cursor:not-allowed; text-decoration:line-through; }
.slot small { display:block; font-size:clamp(9px,1.3vw,10px); letter-spacing:0.05em; margin-top:2px; }
.slots-empty {
  grid-column:1/-1;
  text-align:center;
  color:var(--ink-soft);
  font-size:clamp(11px,1.6vw,13px);
  padding:16px 0;
}
/* 表單 */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: clamp(11px,1.6vw,13px);
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.field label .req { color:var(--rose-500); margin-left:3px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--blush-200);
  border-radius: 9px;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--blush-50);
  transition: border-color 0.2s, background 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--rose-400);
  background: #fff;
}
.field textarea { resize:vertical; min-height:74px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pick-summary {
  background: var(--blush-50);
  border: 1px dashed var(--blush-300);
  border-radius: 9px;
  padding: 13px 15px;
  font-size: clamp(12px,1.8vw,13.5px);
  color: var(--rose-700);
  margin-bottom: 18px;
  line-height: 1.6;
}
.pick-summary .muted { color:var(--ink-soft); }
.form-submit { width:100%; justify-content:center; margin-top:4px; }
.form-foot {
  text-align:center;
  font-size:clamp(10px,1.4vw,12px);
  color:var(--ink-soft);
  margin-top:12px;
  line-height:1.7;
}
.confirm { display:none; text-align:center; padding:16px 6px 2px; }
.confirm.show { display:block; }
.confirm .ok {
  width:60px; height:60px; border-radius:50%;
  background:var(--blush-100); color:var(--rose-600);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; margin:0 auto 16px;
}
.confirm h4 {
  font-family:'Noto Serif TC',serif;
  font-size:clamp(16px,2.6vw,21px);
  color:var(--rose-900);
  margin-bottom:10px;
}
.confirm p { font-size:clamp(12px,1.6vw,14px); color:var(--ink-soft); line-height:1.8; margin-bottom:8px; }
.confirm .summary-box {
  background:var(--blush-50); border-radius:9px;
  padding:13px; font-size:clamp(12px,1.6vw,14px);
  color:var(--rose-700); margin:14px 0 20px;
}

/* ── 預約須知 ── */
.terms { background: var(--blush-50); }
.terms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.terms-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 28px 30px;
}
.terms-card-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.terms-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--blush-100);
  color: var(--rose-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.terms-card-head h3 {
  font-family: 'Noto Serif TC', serif;
  font-size: clamp(14px, 2.2vw, 17px);
  font-weight: 500;
  color: var(--rose-900);
  letter-spacing: 0.04em;
}
.terms-card ul { list-style: none; }
.terms-card li {
  font-size: clamp(12px, 1.6vw, 13.5px);
  color: var(--ink-soft);
  padding: 7px 0 7px 18px;
  position: relative;
  border-bottom: 1px dashed var(--rule);
  line-height: 1.7;
}
.terms-card li:last-child { border-bottom: none; }
.terms-card li::before {
  content: '·';
  position: absolute; left: 4px;
  color: var(--rose-400);
  font-size: 16px; line-height: 1.4;
}

/* ── FAQ ── */
.faq { background: var(--paper); }
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.faq-item.open { box-shadow: 0 16px 40px -28px var(--rose-500); }
.faq-q {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 24px;
  cursor: pointer;
}
.faq-q .qmark {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(16px, 2.8vw, 21px);
  color: var(--rose-400);
  flex-shrink: 0;
}
.faq-q h4 {
  font-family: 'Noto Serif TC', serif;
  font-size: clamp(14px, 2.2vw, 16px);
  font-weight: 500;
  color: var(--rose-900);
  flex: 1;
  letter-spacing: 0.02em;
}
.faq-q .chev { color:var(--rose-500); font-size:18px; transition:transform 0.25s; flex-shrink:0; }
.faq-item.open .chev { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
.faq-a-inner {
  padding: 0 24px 22px 58px;
  font-size: clamp(12px, 1.8vw, 14px);
  color: var(--ink-soft);
  line-height: 1.9;
}

/* ── RWD ── */
@media (max-width:1024px) {
  .booking-grid { gap:32px; }
  .panel { padding:26px; }
}
@media (max-width:768px) {
  .steps-row { grid-template-columns:1fr; gap:28px; }
  .steps-row::before { display:none; }
  .booking-grid { grid-template-columns:1fr; }
  .terms-grid   { grid-template-columns:1fr; }
  .field-row    { grid-template-columns:1fr; gap:0; }
  .field input, .field select, .field textarea { font-size:16px; }
}
@media (max-width:480px) {
  .panel { padding:18px 14px; }
  .faq-a-inner { padding:0 16px 18px 44px; }
  .terms-card  { padding:20px 16px; }
}