/* =============================================================================
   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; }
}

/* ── 質問ブロックの段階表示 ──
   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); }

/* ── Progress ── */
/* transition は色系のみに限定（all だと box-shadow リングの 400ms ペイントが
   sticky レイヤー内で走り、ページ遷移＋スクロールと同時発火してヒッチする） */
.sdot { width:1.85rem;height:1.85rem;border-radius:9999px;border:2px solid;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;transition:background-color .4s, border-color .4s, color .4s; }
.sdot.active  { background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--accent-tint); }
.sdot.done    { background:var(--accent);border-color:var(--accent);color:#fff; }
.sdot.pending { background:#fff;border-color:#e2e8f0;color:#94a3b8; }
.sline { height:2px;border-radius:9999px;flex:1;margin:0 4px;transition:background .4s; }
.sline.done    { background:var(--accent); }
.sline.pending { background:#e2e8f0; }

/* ── 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);
}

/* ── Native date input (生年月日ダイヤル) ── */
/* iOS WebKit は空の date input の中身が無く高さが潰れるため min-height を保証 */
input[type="date"] {
  min-height: 47px;
  display: block;
}
/* iOS は値が中央寄せになるデフォルトを左寄せに（他の入力欄と揃える） */
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}

/* ── 選択チップ共通スタイル（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); }

/* ── 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 ヘッダー群(≈150px)に隠れない・下端に張り付かない。
   scroll-margin（要素側）は Safari の scrollIntoView で無視される既知問題があるため
   scroll-padding（スクロールコンテナ側）で指定する。副次効果として iOS 自身の
   フォーカス時自動スクロールもこの padding を尊重する */
html {
  scroll-padding-top: 155px;
  scroll-padding-bottom: 16px;
}

/* ── 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; }
  /* sticky ヘッダー群の縦圧縮（320px縦持ちで画面の1/4を占有していた対策） */
  .sdot { width: 1.5rem; height: 1.5rem; font-size: .6rem; }
  /* ラベルは1行固定（列幅57pxを中央基準ではみ出させる。隣接領域は空きなので衝突しない） */
  #progress-bar span[id^="lbl"] { font-size: 10px; white-space: nowrap; }
  #progress-bar .sline { margin-top: 10px !important; }
}