/* Do!nats 予約フォーム（/yoyaku/）
   design_handoff_donats_reservation の Donats予約 案A.dc.html のデザイントークンを移植。
   デザインファイルの端末フレーム（ベゼル・ステータスバー）は編集ツールのプレビュー用モックアップのため、
   本番では通常のWebページとして中央412px幅の1カラムに配置する（README「レイアウト前提」に準拠）。 */

/* テーマ本体（LP用）の装飾・高さ指定をこのページだけ無効化する。
   WordPress がテンプレートページに自動付与する body.page-template-page-yoyaku を利用。 */
body.page-template-page-yoyaku .section {
  min-height: 0;
}
body.page-template-page-yoyaku .bg01,
body.page-template-page-yoyaku .bg02,
body.page-template-page-yoyaku .bg03 {
  background-image: none;
}
body.page-template-page-yoyaku .wrapper {
  background: #EFE6D6;
}

.donats-app-page {
  background: radial-gradient(120% 320px at 50% 0%, #F3EBDC 0%, #E7DAC4 100%);
  padding: 28px 12px 60px;
  min-height: 60vh;
}

.donats-app {
  --brown: #3E2417;
  --brown-dark: #241710;
  --shadow-brown: #2E1C10;
  --caramel: #C99A6B;
  --caramel-light: #E0B888;
  --bg: #FBF5EA;
  --white: #FFFFFF;
  --sub-bg: #F4EAD8;
  --btn-base: #F0E5D3;
  --border: #EADCC6;
  --border-2: #E3D4BD;
  --border-3: #EDE0CC;
  --text-sub: #7A6450;
  --text-sub-2: #6F5A45;
  --text-aux: #A98A66;
  --text-aux-2: #B19A80;
  --disabled-bg: #F2EADB;
  --disabled-text: #9A856E;
  --disabled-text-2: #C0AD93;
  --sat-color: #3E7AA8;
  --sun-color: #C9583E;
  --success: #1F8A5B;
  --error: #C0392B;
  --tentative-bg: #FBEFD9;
  --tentative-border: #E9CE9C;
  --tentative-text: #7A5A2E;

  max-width: 412px;
  margin: 0 auto;
  background: var(--bg);
  border-radius: 24px;
  box-shadow: 0 22px 50px rgba(50, 30, 16, .16);
  overflow: hidden;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.donats-app * { box-sizing: border-box; }
.donats-app input { font-family: 'Zen Kaku Gothic New', sans-serif; }

.donats-app__loading {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-sub);
  font-size: 14px;
}

/* ===== ヘッダー・ステッパー ===== */
.donats-header {
  /* テーマ本体の header { height:100vh } を打ち消す（これが無いとヘッダーが画面1つ分の高さになる） */
  height: auto;
  background: none;
  overflow: visible;
  padding: 18px 22px 14px;
  text-align: center;
  border-bottom: 1px solid var(--border-3);
}
.donats-header__logo { height: 30px; width: auto; display: inline-block; }
.donats-header__title {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--brown);
  margin-top: 8px;
}

.donats-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px 4px;
}
.donats-stepper__item { display: flex; align-items: center; flex: 1; min-width: 0; }
.donats-stepper__item:last-child { flex: 0 0 auto; }
.donats-stepper__node { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.donats-stepper__mark {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; font-size: 13px;
  background: var(--bg); color: #B7A084; border: 2px solid var(--border-2);
}
.donats-stepper__mark--active,
.donats-stepper__mark--done { background: var(--brown); color: var(--bg); border: none; }
.donats-stepper__label { font-size: 9px; font-weight: 700; color: #B7A084; white-space: nowrap; }
.donats-stepper__label--active { color: var(--brown); }
.donats-stepper__line { height: 2px; flex: 1; background: var(--border-2); margin: 0 4px 16px; min-width: 8px; }

/* ===== 本文共通 ===== */
.donats-main { padding: 8px 20px 16px; }
.donats-section-label {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700; font-size: 13px; color: var(--text-sub-2);
  margin: 0 2px 10px;
}
.donats-section-label small { font-weight: 400; font-size: 10px; color: var(--text-aux-2); }

/* ===== STEP1: 受取方法・日時 ===== */
.donats-method-cards { display: flex; gap: 12px; margin-bottom: 22px; }
.donats-method-card {
  flex: 1; background: var(--white); border: 1px solid var(--border);
  border-radius: 18px; padding: 16px 12px; text-align: center; cursor: pointer;
}
.donats-method-card--selected { border: 2px solid var(--brown); box-shadow: 0 3px 0 var(--shadow-brown); }
.donats-method-card__icon { font-size: 24px; }
.donats-method-card__name {
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--brown); margin-top: 6px;
}
.donats-method-card__note { font-size: 10px; color: var(--text-aux); margin-top: 2px; }

.donats-date-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 6px; }
.donats-date-cell {
  border-radius: 14px; padding: 8px 0 6px; text-align: center;
  background: var(--white); border: 1px solid var(--border); cursor: pointer;
}
.donats-date-cell--disabled { background: var(--disabled-bg); border: none; opacity: .4; cursor: default; }
.donats-date-cell--selected { background: var(--brown); border: none; }
.donats-date-cell__dow { font-size: 9px; color: var(--text-sub); }
.donats-date-cell--selected .donats-date-cell__dow { color: var(--caramel-light); }
.donats-date-cell--disabled .donats-date-cell__dow { color: var(--disabled-text); }
.donats-date-cell__dow--sat { color: var(--sat-color); }
.donats-date-cell__num {
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; font-size: 16px;
  color: var(--brown); line-height: 1.15;
}
.donats-date-cell--selected .donats-date-cell__num { color: var(--bg); }
.donats-date-cell--disabled .donats-date-cell__num { color: var(--disabled-text); }
.donats-date-cell__cap { font-size: 8px; font-weight: 700; color: var(--caramel); min-height: 10px; }
.donats-date-cell--selected .donats-date-cell__cap { color: var(--caramel-light); }
.donats-date-cell__cap--full { color: #C08A7A; }
.donats-date-note { font-size: 10px; color: var(--text-aux-2); margin: 0 2px 22px; line-height: 1.6; }

.donats-time-list { display: flex; flex-wrap: wrap; gap: 8px; }
.donats-time-chip {
  background: var(--white); border: 1px solid var(--border); border-radius: 20px;
  padding: 9px 16px; font-size: 13px; font-weight: 500; color: var(--brown); cursor: pointer;
}
.donats-time-chip--selected { background: var(--brown); border: none; color: var(--bg); font-weight: 700; }
.donats-time-chip--booked { background: var(--disabled-bg); border: none; color: var(--disabled-text-2); cursor: default; }

/* ===== STEP2: 商品 ===== */
.donats-cap-banner {
  display: flex; align-items: center; gap: 8px; background: var(--sub-bg);
  border-radius: 12px; padding: 10px 14px; margin: 2px 0 16px;
}
.donats-cap-banner__icon { font-size: 15px; }
.donats-cap-banner__label {
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; font-size: 13px; color: var(--brown);
}

.donats-section-header { display: flex; align-items: center; justify-content: space-between; margin: 4px 4px 12px; }
.donats-section-header__title { display: flex; align-items: center; gap: 8px; }
.donats-section-header__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--caramel); }
.donats-section-header__text { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; font-size: 14px; color: var(--brown); }
.donats-reset-btn {
  display: flex; align-items: center; gap: 5px; background: var(--btn-base); color: #8A7257;
  border: none; border-radius: 18px; padding: 6px 13px; font-size: 12px; font-weight: 700;
  font-family: 'Zen Maru Gothic', sans-serif; cursor: pointer;
}

.donats-product-card {
  display: flex; align-items: center; gap: 13px; background: var(--white);
  border-radius: 18px; padding: 11px 13px; margin-bottom: 10px;
  border: 1px solid var(--border);
}
.donats-product-card--active { border: 1px solid var(--shadow-brown); box-shadow: 0 3px 0 var(--shadow-brown); }
.donats-product-card__photo {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: rgba(62,36,23,.5);
}
.donats-product-card__body { flex: 1; min-width: 0; }
.donats-product-card__name { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; font-size: 15px; color: var(--brown); }
.donats-product-card__price { font-size: 12px; color: var(--text-aux); }
.donats-product-card__qty { display: flex; align-items: center; gap: 9px; }
.donats-qty-btn {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; cursor: pointer; padding: 0;
}
.donats-qty-btn--minus { background: var(--btn-base); color: #CFBEA4; }
.donats-product-card--active .donats-qty-btn--minus { color: var(--text-sub-2); }
.donats-qty-btn--plus { background: var(--brown); color: var(--bg); }
.donats-qty-value {
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; font-size: 16px;
  color: #C8B59A; min-width: 16px; text-align: center;
}
.donats-product-card--active .donats-qty-value { color: var(--brown); }

.donats-select-note-box {
  display: flex; align-items: flex-start; gap: 8px; background: var(--sub-bg);
  border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; font-size: 11px; color: var(--disabled-text); line-height: 1.6;
}
.donats-select-note-box b { color: var(--brown); }

.donats-footnote { text-align: center; font-size: 11px; color: var(--text-aux-2); margin-top: 22px; line-height: 1.6; }

/* ===== STEP3: お客様情報 ===== */
.donats-method-banner {
  background: var(--sub-bg); border-radius: 14px; padding: 12px 16px; margin-bottom: 20px;
  font-size: 13px; color: var(--brown); font-weight: 700; font-family: 'Zen Maru Gothic', sans-serif;
}
.donats-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.donats-chip {
  background: var(--white); color: var(--text-sub-2); border: 1px solid var(--border-2);
  border-radius: 18px; padding: 8px 14px; font-size: 13px; cursor: pointer;
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 500;
}
.donats-chip--selected { background: var(--brown); color: var(--bg); border: none; font-weight: 700; }
.donats-chip--pay { flex: 1; text-align: center; border-radius: 14px; padding: 13px; font-size: 14px; }

.donats-field { margin-bottom: 18px; }
.donats-field input {
  width: 100%; background: var(--white); border: 1px solid var(--border-2);
  border-radius: 14px; padding: 14px 16px; font-size: 15px; color: var(--brown); outline: none;
}
.donats-payment-note-box {
  display: flex; align-items: flex-start; gap: 8px; background: var(--sub-bg);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 18px; font-size: 11px; color: var(--text-sub); line-height: 1.6;
}
.donats-payment-note-box b { color: var(--brown); }
.donats-klee-note {
  background: var(--sub-bg); border-radius: 14px; padding: 14px 16px; margin-top: 20px;
  font-size: 12px; color: var(--text-sub); line-height: 1.7;
}
.donats-klee-note span { font-family: 'Klee One', cursive; color: #9A7B5E; }

/* ===== STEP4: 確認 ===== */
.donats-card { background: var(--white); border-radius: 18px; padding: 16px 18px; margin-bottom: 14px; }
.donats-card__title { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; font-size: 13px; color: var(--text-sub-2); margin-bottom: 10px; }
.donats-order-line {
  display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--btn-base);
}
.donats-order-line__name { font-size: 14px; color: var(--brown); }
.donats-order-line__qty { color: var(--text-aux); font-size: 12px; }
.donats-order-line__amount { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; font-size: 14px; color: var(--brown); }
.donats-summary-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0 0; }
.donats-summary-row__label { font-size: 13px; color: var(--text-aux); }
.donats-summary-row__value { font-size: 14px; color: var(--brown); font-weight: 500; }
.donats-total-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; }
.donats-total-row__label { font-size: 14px; color: var(--text-sub); }
.donats-total-row__value { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: 22px; color: var(--brown); }

.donats-info-row {
  display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--btn-base);
}
.donats-info-row__key { font-size: 12px; color: var(--text-aux); }
.donats-info-row__value { font-size: 14px; color: var(--brown); font-weight: 500; text-align: right; max-width: 62%; }

.donats-large-banner {
  display: flex; align-items: flex-start; gap: 10px; background: var(--tentative-bg);
  border: 1px solid var(--tentative-border); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px;
  font-size: 12.5px; color: var(--tentative-text); line-height: 1.7;
}

.donats-sms-desc { font-size: 11px; color: var(--text-aux); line-height: 1.6; margin-bottom: 12px; }
.donats-sms-send-btn {
  text-align: center; background: var(--btn-base); color: var(--text-sub-2); border: none;
  border-radius: 14px; padding: 12px; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700;
  font-size: 13px; cursor: pointer; width: 100%;
}
.donats-sms-hint { font-size: 11px; color: var(--caramel); margin: 10px 0; }
.donats-sms-input {
  width: 100%; background: var(--bg); border: 1px solid var(--border-2); border-radius: 14px;
  padding: 14px 16px; font-size: 18px; letter-spacing: .4em; text-align: center; color: var(--brown); outline: none;
}
.donats-sms-status { font-size: 12px; font-weight: 700; margin-top: 8px; min-height: 16px; }
.donats-sms-status--ok { color: var(--success); }
.donats-sms-status--ng { color: var(--error); }

.donats-agree-row {
  display: flex; align-items: flex-start; gap: 12px; background: var(--white);
  border-radius: 18px; padding: 16px 18px; cursor: pointer;
}
.donats-agree-box {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; border: 2px solid var(--brown);
  background: var(--white); color: var(--bg); display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 900;
}
.donats-agree-box--checked { background: var(--brown); }
.donats-agree-text { font-size: 12.5px; color: #6A5436; line-height: 1.7; }
.donats-agree-text b { color: var(--brown); }

/* ===== STEP5: 完了 ===== */
.donats-done {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 50px 30px;
}
.donats-done__icon {
  width: 96px; height: 96px; border-radius: 50%; background: var(--brown);
  display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 24px;
}
.donats-done__icon-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--bg); }
.donats-done__icon-check {
  position: absolute; bottom: -6px; right: -6px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--caramel); color: var(--brown); display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900;
}
.donats-done__logo { height: 26px; width: auto; margin-bottom: 18px; }
.donats-done__title { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: 22px; color: var(--brown); }
.donats-done__lead { font-family: 'Klee One', cursive; font-size: 14px; color: #9A7B5E; margin-top: 8px; }
.donats-done__no-card { background: var(--white); border-radius: 16px; padding: 16px 28px; margin-top: 24px; }
.donats-done__no-label { font-size: 11px; color: var(--text-aux); }
.donats-done__no-value { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: 24px; color: var(--brown); letter-spacing: .08em; }
.donats-done__summary { font-size: 12px; color: var(--text-sub); margin-top: 20px; line-height: 1.7; }
.donats-done__reset { margin-top: 28px; color: #9A7B5E; font-size: 13px; text-decoration: underline; cursor: pointer; background: none; border: none; }

/* ===== フッター ===== */
.donats-footer {
  background: var(--white); border-top: 1px solid var(--border-3); padding: 13px 20px 22px;
  box-shadow: 0 -8px 24px rgba(62, 36, 23, .06);
}
.donats-footer__subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.donats-footer__caption { font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 13px; color: var(--text-sub); }
.donats-footer__total { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: 21px; color: var(--brown); }
.donats-footer__actions { display: flex; gap: 10px; }
.donats-btn-back {
  width: 54px; flex-shrink: 0; text-align: center; padding: 15px 0; border-radius: 30px;
  background: var(--btn-base); color: var(--text-sub-2); border: none;
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; font-size: 16px; cursor: pointer;
}
.donats-btn-next {
  flex: 1; text-align: center; padding: 15px; border-radius: 30px; border: none;
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; font-size: 16px;
  background: var(--brown); color: var(--bg); cursor: pointer;
}
.donats-btn-next:disabled { background: #D9CDBA; color: #FFFFFF; cursor: not-allowed; }

.donats-error-box {
  background: #FCEBE9; border: 1px solid #EFC6C1; color: var(--error);
  border-radius: 12px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 14px; line-height: 1.6;
}

@media (max-width: 460px) {
  .donats-app-page { padding: 0; }
  .donats-app { max-width: 100%; border-radius: 0; box-shadow: none; }
}