/* =============================================================================
   Traveler's Hospital — オンライン診察フォーム
   Design tokens: アクセントはインディゴ1色。選択状態は「tint背景＋色枠＋✓」方式
   （旧: 紫→シアンのグラデ塗り潰し＋白文字 → 廃止）
   ============================================================================= */
:root {
  --accent:      #4f46e5;   /* indigo-600 */
  --accent-dark: #4338ca;   /* indigo-700 */
  --accent-tint: #eef2ff;   /* indigo-50  */
  --accent-line: #c7d2fe;   /* indigo-200 */
  --ink:         #1e293b;   /* slate-800  */
}

* { box-sizing: border-box; }
html {
  /* iOS: タップ時のグレーのハイライトを消す */
  -webkit-tap-highlight-color: transparent;
}
/* touch-action は非継承のため、操作要素へ明示的に指定する
   （manipulation = ダブルタップズーム判定の待ちを無くす） */
button, a, input, select, textarea,
.ins-chip, .sym-chip, .type-card, .slot-mini, .cal-day, .country-chip {
  touch-action: manipulation;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', sans-serif;
  background: #f6f7fb;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Pages ── */
.page { display: none; }
.page.active { display: block; }
@keyframes slideInRight { from { opacity:0; transform:translateX(36px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideInLeft  { from { opacity:0; transform:translateX(-36px); } to { opacity:1; transform:translateX(0); } }
.page.active.dir-fwd  { animation: slideInRight .35s ease; }
.page.active.dir-back { animation: slideInLeft  .35s ease; }
/* タッチ端末: 3000px級のページレイヤーを translateX で動かすとラスタ追従で
   ヒッチするため、方向スライドをやめ opacity フェードのみにする。
   フェードが instant スクロールトップの唐突感もマスクする */
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (pointer: coarse) {
  .page.active.dir-fwd, .page.active.dir-back { animation: pageFadeIn .22s ease; }
}

/* 問診セクションは表示時に下方向へ約1画面ぶんの余白を持たせる。
   これが無いとページ残り高さが足りず、「前の質問を画面外へ送って
   次の質問を最上部に」（スロット→Nationality、保険→症状）のスクロールが
   途中でクランプされる。質問が進むにつれて実コンテンツが埋めていく。 */
#sec-symptoms:not(.hidden) {
  padding-bottom: calc(100vh - 240px);
  padding-bottom: calc(100dvh - 240px);
}

/* ── 言語選択オーバーレイ（初回のみ） ── */
#lang-overlay { animation: overlayIn .3s ease; }
#lang-overlay.closing { opacity: 0; transition: opacity .25s ease; }
#lang-overlay-card { animation: cardIn .35s cubic-bezier(.2, .7, .3, 1); }
@keyframes overlayIn { from { opacity: 0; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.lang-opt {
  border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 12px 8px;
  font-size: 15px; font-weight: 600; color: #334155; background: #fff; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  animation: langOptIn .35s cubic-bezier(.2, .7, .3, 1) both;
}
.lang-opt:hover, .lang-opt:active { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-dark); }
@keyframes langOptIn { from { opacity: 0; transform: translateY(8px); } }
/* 言語ボタンを30msずつ順に出す（スタッガー） */
.lang-opt:nth-child(1) { animation-delay: .05s; }
.lang-opt:nth-child(2) { animation-delay: .08s; }
.lang-opt:nth-child(3) { animation-delay: .11s; }
.lang-opt:nth-child(4) { animation-delay: .14s; }
.lang-opt:nth-child(5) { animation-delay: .17s; }
.lang-opt:nth-child(6) { animation-delay: .20s; }
.lang-opt:nth-child(7) { animation-delay: .23s; }
.lang-opt:nth-child(8) { animation-delay: .26s; }

/* ── 料金明細の順次表示（「計算中」風。Page 2 遷移時に .play を付けて再生） ── */
#fee-receipt.play .calc-row {
  animation: calcIn .3s ease both;   /* 行ごとの delay は JS がインラインで指定 */
}
#fee-receipt.play #fee-total-row {
  animation: totalIn .45s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes calcIn  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes totalIn { from { opacity: 0; transform: scale(.95); }      to { opacity: 1; transform: none; } }

/* ── 質問ブロックの段階表示 ──
   opacity/transform のみ（コンポジタ処理）なので低速端末でも滑らか。
   「瞬間出現でレイアウトが跳ねる」のを視覚的に吸収する */
@keyframes qAppear {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.q-appear { animation: qAppear .3s cubic-bezier(.2, .7, .3, 1); }

/* ── Toggle ── */
.toggle { overflow:hidden; transition:max-height .25s ease, opacity .2s ease; }
.toggle.off { max-height:0; opacity:0; pointer-events:none; }
.toggle.on  { max-height:800px; opacity:1; }
/* タッチ端末: max-height アニメは毎フレーム reflow を誘発し、iOSピッカー表示中に
   発火するケース（国籍 Other 選択）があるため非アニメ化 */
@media (pointer: coarse) {
  .toggle { transition: none; }
}

/* ── Inputs ── */
input,select,textarea { -webkit-appearance:none; appearance:none; }
input:focus,select:focus,textarea:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,70,229,.12);
}

/* ── DOB ホイールピッカー（yyyy/mm/dd 一体型・iOSネイティブ風グレードラム） ── */
/* scroll-snap でネイティブ慣性スクロール＋36px毎スナップ。
   スクロール中は JS が中央からの距離に応じて rotateX/scale/opacity を当て、
   ドラム（円筒）が回っているように見せる */
.dob-wheel {
  height: 180px;                    /* 36px × 5行表示 */
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;     /* 端で背面ページを巻き込まない */
  scrollbar-width: none;
  perspective: 700px;               /* 子要素の rotateX に奥行きを与える */
}
.dob-wheel::-webkit-scrollbar { display: none; }
.dob-wheel .pad { height: 72px; }   /* 上下2行ぶんの余白（先頭/末尾を中央に合わせる） */
.dob-item {
  height: 36px;
  display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center;
  font-size: 17px; font-weight: 500; color: #aeaeb2;   /* 非中央はグレー */
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  will-change: transform, opacity;   /* ドラム回転中の再ラスタを避ける（項目は小さい） */
}
.dob-item.center { color: #111827; font-weight: 700; }  /* 中央の選択行だけ濃く */
.dob-item.ph { letter-spacing: .04em; }                  /* プレースホルダ yyyy/mm/dd */
#dob-done { color: var(--accent); transition: color .15s; }
#dob-done:disabled { color: #c5c5cb; pointer-events: none; }

/* ── 選択チップ共通スタイル（tint背景＋色枠。白文字塗り潰しは使わない） ── */
.country-chip {
  border:1.5px solid #e2e8f0; border-radius:10px; padding:8px 6px;
  cursor:pointer; transition:all .18s; text-align:center; font-size:11px; font-weight:600;
  background:#fff;
}
.country-chip:hover  { border-color:var(--accent-line); background:var(--accent-tint); }
.country-chip.sel    { border-color:var(--accent); background:var(--accent-tint); color:var(--accent-dark); }

/* ── Symptom chips (smaller, 4-col grid) ── */
.sym-chip {
  border:1.5px solid #e2e8f0; border-radius:10px; padding:8px 4px;
  cursor:pointer; transition:all .18s; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px; background:#fff;
}
.sym-chip:hover { border-color:var(--accent-line); background:var(--accent-tint); }
.sym-chip.sel   { border-color:var(--accent); background:var(--accent-tint); box-shadow:inset 0 0 0 1px var(--accent); }
.sym-chip.sel p { color:var(--accent-dark); }

/* ── Insurance / choice chips ── */
.ins-chip {
  border:1.5px solid #e2e8f0; border-radius:10px; padding:10px 8px;
  cursor:pointer; transition:all .18s; text-align:center; background:#fff;
}
.ins-chip:hover { border-color:var(--accent-line); background:var(--accent-tint); }
.ins-chip.sel   { border-color:var(--accent); background:var(--accent-tint); box-shadow:inset 0 0 0 1px var(--accent); color:var(--accent-dark); }
.ins-chip.sel .ins-sub { color:#818cf8; }

/* ── Mode cards (受診モード) ── */
.type-card {
  border:1.5px solid #e2e8f0; border-radius:14px; padding:16px 10px 14px;
  cursor:pointer; transition:all .2s; text-align:center; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  position:relative; background:#fff;
}
.type-card:hover { border-color:var(--accent-line); box-shadow:0 2px 8px rgba(79,70,229,.08); }
.type-card.sel   { border-color:var(--accent); background:var(--accent-tint); box-shadow:inset 0 0 0 1px var(--accent); }
.type-card.sel::after {
  content:'✓'; position:absolute; top:8px; right:8px;
  width:18px; height:18px; border-radius:9999px;
  background:var(--accent); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
/* アイコンの丸（SVGは currentColor） */
.type-icon {
  width:2.5rem; height:2.5rem; border-radius:9999px; margin-bottom:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-tint); color:var(--accent); transition:all .2s;
}
.type-card.sel .type-icon { background:var(--accent); color:#fff; }

/* ── Stripe ── */
.stripe-field {
  background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:10px;
  padding:12px 14px; font-size:14px; color:#94a3b8; letter-spacing:.08em;
}

/* ── Buttons ── */
.btn-p {
  width:100%; background:var(--accent);
  color:#fff; font-weight:700; padding:.9rem 1rem; border-radius:.75rem; font-size:.95rem;
  box-shadow:0 4px 14px rgba(79,70,229,.25); transition:all .2s; border:none; cursor:pointer;
}
.btn-p:hover  { background:var(--accent-dark); }
.btn-p:active { transform:scale(.97); }
.btn-o {
  width:100%; background:#fff; color:var(--accent); font-weight:700;
  padding:.85rem 1rem; border-radius:.75rem; font-size:.875rem;
  border:1.5px solid var(--accent-line); transition:all .2s; cursor:pointer;
}
.btn-o:hover  { background:var(--accent-tint); border-color:var(--accent); }
.btn-o:active { transform:scale(.97); }

/* ── Availability board ── */
/* padding 9px → チップ高さ約38px（タップターゲット確保。医療予約は不調時・高齢者の利用が多い） */
.slot-mini {
  border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 9px 2px;
  cursor: pointer; transition: all .15s; text-align: center;
  font-size: 11px; font-weight: 700; color: #374151; background:#fff;
}
.slot-mini:hover { border-color: var(--accent-line); background: var(--accent-tint); color: var(--accent-dark); }
.slot-mini.sel   { border-color: var(--accent); background: var(--accent); color: #fff; }
.slot-mini.busy  { background: #f8fafc; border-color: #f1f5f9; cursor: not-allowed; opacity: .4; text-decoration: line-through; color: #94a3b8; }
.slot-mini.earliest { border-color: #f59e0b; border-style: dashed; background: #fffbeb; color: #374151; }
.slot-mini.earliest:hover { border-color: var(--accent); border-style: solid; background: var(--accent-tint); color: var(--accent-dark); }
.slot-mini.earliest.sel { border-color: var(--accent); border-style: solid; background: var(--accent); color: #fff; }
.earliest-badge { display: block; font-size: 9px; font-weight: 700; color: #d97706; margin-top: 1px; line-height: 1.2; }
.slot-mini.sel .earliest-badge { color: rgba(255,255,255,.8); }

/* ── スロット横スライダー（各日8枠/ページ・スワイプ＋「もっと見る→」でスライド） ── */
.slot-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;   /* 端で背面のスワイプバック等を巻き込まない */
  scrollbar-width: none;
}
.slot-slider::-webkit-scrollbar { display: none; }
.slot-page {
  min-width: 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  align-content: start;
}

/* ── Field validation errors ── */
.field-error { display: block; }
.field-error.hidden { display: none; }

/* ── Future calendar day cells ── */
.cal-day { cursor: pointer; color: #374151; transition: all .15s; border-radius: 8px; }
.cal-day:hover { background: var(--accent-tint); color: var(--accent-dark); }
.cal-day.sel { background: var(--accent); color: #fff; }

/* ── Touch devices ── */
@media (pointer: coarse) {
  /* iOS はフォーカスした入力欄の font-size が 16px 未満だと画面全体を強制ズームする。
     名前・メール・生年月日の操作のたびにガクつく原因になるため 16px を保証する */
  input, select, textarea { font-size: 16px !important; }
}

/* scrollIntoView 用の余白: sticky ヘッダー(拠点名行込み ≈85px)に隠れない・下端に張り付かない。
   scroll-margin（要素側）は Safari の scrollIntoView で無視される既知問題があるため
   scroll-padding（スクロールコンテナ側）で指定する。副次効果として iOS 自身の
   フォーカス時自動スクロールもこの padding を尊重する。
   ※ script.js の SCROLL_PAD_TOP と同値を保つこと */
html {
  scroll-padding-top: 100px;
  scroll-padding-bottom: 16px;
}
/* sm以上はワードマーク拡大でヘッダーが高くなるため余白も追従 */
@media (min-width: 640px) {
  html { scroll-padding-top: 145px; }
}

/* ── Mobile adjustments ── */
@media (max-width: 400px) {
  .country-chip { font-size: 10px; padding: 6px 4px; }
  .slot-mini { font-size: 10px; padding: 8px 1px; }
  .ins-chip { padding: 8px 4px; }
}