/* =====================================================================
   ハイライト式の部品 ― 相談文づくり（#booking）（予約担当）【lisas atelier：窓口は Instagram DM】
   sections/booking/form/style.css
   - 入力欄・チップ・ボタン・カードは base.css の形（.field・.input・.chip・.btn・.card--soft）を使う。
     ここには base.css にない並べ方だけを書く。部品の中だけのクラスは頭に booking- を付ける。
   - 値は tokens.css の変数だけ（design.md「共通ルール」）。
   ===================================================================== */

/* .field（grid）・.chips（flex）・.btn より強く、hidden を効かせる */
.booking [hidden] { display: none !important; }

/* ---------- 手順（1 入力する → 2 相談文をコピー → 3 DM に貼りつけて送る） ---------- */
.booking-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.booking-steps li {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  text-align: center;
}
.booking-steps li + li::before {   /* 番号の丸と丸を点線でつなぐ */
  content: "";
  position: absolute;
  top: calc(var(--space-6) / 2);
  left: calc(-50% + var(--space-3));
  width: calc(100% - var(--space-6));
  border-top: 1px dashed var(--color-border); /* 飾りの線（design.md 1.）*/
}
.booking-step-num {                /* ご相談の流れ（#flow）の番号と同じ形：--font-num（--fs-md）・ふち 1px の差し色の丸（直径 32px）。design.md 23. 案内担当 */
  position: relative;
  display: grid;
  place-items: center;
  width: var(--space-6);
  height: var(--space-6);
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-bg);
  font-family: var(--font-num);
  font-weight: var(--fw-num);
  font-size: var(--fs-md);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}

/* ---------- 小さな案内（レンタルは予約のページ・保存しない・確定しない） ---------- */
.booking-notes {
  display: grid;
  gap: var(--space-1);
  margin-block: var(--space-4);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--color-text-sub);
}
.booking-notes li {
  position: relative;
  padding-left: 1.1em;
}
.booking-notes li::before {        /* 小さな差し色の点 */
  content: "";
  position: absolute;
  left: .3em;
  top: calc(var(--lh-snug) * .5em - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---------- フォーム ---------- */
.booking-form {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.booking-req {
  margin-left: .2em;
  color: var(--color-text-sub);
  font-weight: var(--fw-body);
}
.booking-error {                   /* 赤にしない：差し色の文字＋太字＋文で伝える */
  color: var(--color-accent-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

/* 案内の囲み（ご相談の種類の上の一言・レンタルの案内・受け取ったお品物・種類を変えたときの知らせ） */
.booking-hint,
.booking-received,
.booking-notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-bg-sub);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.booking-received p + p { margin-top: var(--space-1); }
/* 【lisas】文の下にリンクがある案内（レンタルを選んだとき：予約のページへ） */
.booking-hint--link {
  display: grid;
  justify-items: start;
  gap: 0;
}
.booking-hint--link .link { margin-bottom: calc(var(--space-2) * -1); } /* 押せる高さ 44px はそのまま、囲みの下の余白だけそろえる */
.booking-notice:empty {            /* 知らせがないときは見えない（読み上げのために要素は残す） */
  padding: 0;
  background: none;
}

/* 横に並べる行（第1希望・ペット など） */
.booking-row {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}
.booking-row--short { grid-template-columns: auto minmax(0, 1fr); }
.booking-row-label {
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
}
.booking-wish {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

/* 一緒に写る人：大人・子どもの人数を2列に */
.booking-people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-block: var(--space-1) var(--space-2);
}
.booking-mini {
  display: grid;
  gap: var(--space-1);
}
.booking-count { max-width: 12em; } /* 主役の人数（短い選択肢） */

/* 「〇歳」 */
.booking-unit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.booking-unit .input { width: 6em; }

/* 日付の欄（iPhone の Safari で、はみ出さず左にそろえる） */
.booking input[type="date"].input {
  min-width: 0;
  text-align: start;
}
.booking input[type="date"].input::-webkit-date-and-time-value { text-align: start; }
@supports (-webkit-touch-callout: none) {
  .booking input[type="date"].input {
    -webkit-appearance: none;
    appearance: none;
  }
}

/* ---------- 相談文（つくったあと） ---------- */
.booking-result { margin-top: var(--space-6); }
.booking-text { overflow: hidden; }  /* 高さは script が文に合わせる（中でスクロールさせない） */
.booking-stale {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.booking-actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-1);
}
.booking-center { text-align: center; }

/* ---------- 入力せずに DM を開く ---------- */
.booking-direct {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  text-align: center;
}