/* UK ETA申請フォーム 追加スタイル（Phase 1）
   ベースは現行ベンダーから取得した bootstrap.min.css + style.css + confirmDiff.css（/formstatic/css/）。
   ここには決済ページ（keta-form の stripePayment テンプレート流用）に必要な
   スタイルと、自前JSが使うわずかな補助スタイルだけを置く。 */

/* ---------- 決済ページ（keta-form/public/assets/form.css から抜粋） ---------- */
/* 「滞在先 郵便番号」等の幅217px枠内の注記は折り返さない */
.width-217 .asterisk { white-space: nowrap; }
/* 決済画面（第2弾の自作デザイン。ブランドアイコンのみ本物画像 pay01〜05.jpg） */
.payment-box {
  max-width: 420px;
  margin: 40px auto;
  /* 枠線はカードブランドタイルと同じ紺色 */
  border: solid 1px #ced4da;  /* カード番号入力欄と同色 */
  background: #fff;
  padding: 40px;
}
.payment-box .list-pay-type {
  max-width: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto 26px;
  padding: 0;
  list-style: none;
}
.payment-box .list-pay-type li { list-style: none; line-height: 0; }
/* SP: ブランドマーク列と「カード番号」ラベルの間隔。
   style.css の @media(max-width:768px) .list-pay-type{margin:auto !important}
が
   上の margin-bottom:26px を0に潰して密着していたため、!importantで取り戻す */
body[data-platform="sp"] .payment-box .list-pay-type { margin: 0 auto 26px !important; }
/* 各ブランドロゴは紺色の枠に入れる（第2弾デザインの枠+本物のロゴ画像）。
   タイルは正方形にする。style.css がSPで img に margin-bottom 25px を
   !important 付きで当てて枠が縦長になるため、ここで margin を打ち消す */
.payment-box .list-pay-type li.brand-frame {
  border: solid 1px #ced4da;  /* カード番号入力欄と同色 */
  border-radius: 3px;
  background: #fff;
  padding: 4px;
}
.payment-box .list-pay-type li.brand-frame img {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain;
  display: block;
  margin: 0 !important;
}
.pay-btn {
  display: block;
  width: 300px;
  margin: 14px auto 0;
  /* 現行 UK ETA の決済ページ（docs/vendor-payment-page-pc.pdf）に合わせて紺色 */
  background-color: #1c2b5a;
  border-color: #1c2b5a;
  color: #fff;
  font-weight: bold;
  font-size: 1.8rem;
  padding: 12px;
}
.pay-btn:hover { background-color: #15224a; border-color: #15224a; color: #fff; }
/* 決済ページ上部の注意帯: 現行は淡い青地 */
.payment-note-default { background-color: #e9f0fb !important; }
.card-field { margin-bottom: 16px; }
.card-field label {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 5px;
}
/* 有効期限とセキュリティコードはSPでも横並び（本物の card-form-flex と同じ） */
.card-row { display: flex; gap: 12px; }
.card-row > div { flex: 1; }
#payment-error { color: #f00; font-size: 1.4rem; margin-top: 10px; min-height: 1em; }
/* セキュリティコードの「？」ヘルプ（本物の help-icon / tool-tip を移植。
   アイコンは下に申請料金の記載があるため薄いグレーで控えめにする） */
.help-icon-wrapper { position: relative; }
.help-icon {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 10px;
  bottom: 14px;
  cursor: pointer;
}
.tool-tip {
  display: none;
  position: absolute;
  bottom: 40px;
  right: -7px;
  background-color: rgba(51, 51, 51, 0.9);
  color: #fff;
  width: 210px;
  font-size: 13px;
  line-height: 1.6;
  padding: 10px;
  border-radius: 3px;
  z-index: 5;
  text-align: left;
}
.tool-tip:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 18px;
  width: 0;
  border: 6px solid transparent;
  border-top-color: rgba(51, 51, 51, 0.9);
}
.help-icon:hover + .tool-tip,
.tool-tip.show { display: block; }
.payment-note-error { width: auto; max-width: 800px; }
/* ローディングオーバーレイ */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, .8);
  z-index: 1100;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
.overlay.open { display: flex; }
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e9ecef;
  border-top-color: #dc1616;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* ---------- 補助 ---------- */
/* 確認画面: 下書きにプレビューが無いときは画像を出さない（app.js が display:none にする） */
img[data-preview][src=""] { display: none; }

/* ---------- Phase 2: 通信中オーバーレイ（アップロード・送信・決済） ---------- */
#uketa-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(255, 255, 255, 0.75);
  align-items: center;
  justify-content: center;
}
#uketa-overlay.open { display: flex; }
#uketa-overlay .uketa-overlay__box { text-align: center; color: #333; font-size: 1.5rem; }
#uketa-overlay .uketa-overlay__spinner {
  width: 40px; height: 40px; margin: 0 auto 12px;
  border: 4px solid #ddd; border-top-color: #c8102e; border-radius: 50%;
  animation: uketa-spin 0.9s linear infinite;
}
@keyframes uketa-spin { to { transform: rotate(360deg); } }

/* ---------- Phase 2: 状況照会の該当あり表示（現行未取得のため確認画面の表組みを流用） ---------- */
#status-found { margin-top: 30px; }
#status-found .status-found-section { max-width: 900px; margin: 30px auto 0; text-align: left; }
#status-found .status-found-section h3 { font-size: 1.8rem; margin: 0 0 10px; }
#status-found table.form-confirm { width: 100%; margin-bottom: 0; }
#status-found table.form-confirm th { width: 40%; }

/* 2026-10-06 釘崎さん指示: 現行の決済ページと同じく入力欄に枠線（Stripe Elements の受け皿）、注意帯は1行 */
#card-element, #expiry-element, #cvc-element { border: 1px solid #ced4da; border-radius: 4px; padding: 10px 12px; background: #fff; min-height: 42px; box-sizing: border-box; }
#card-element.StripeElement--focus, #expiry-element.StripeElement--focus, #cvc-element.StripeElement--focus { border-color: #1c2b5a; box-shadow: 0 0 0 2px rgba(28,43,90,.12); }
.card-field .form-control { height: 42px; }
@media (min-width: 768px) { .payment-note-default, .payment-note-default .asterisk { white-space: nowrap; } }
.payment-note-default { width: auto !important; max-width: none !important; padding: 15px !important; margin-bottom: 66px !important; } /* 帯と見出しの間 66px（inline-block なので margin は相殺されない） */
.payment-note-default .asterisk { width: auto !important; max-width: none !important; margin: 0; }

/* 2026-10-06 釘崎さん指示: 紺色だった主ボタン（次へ／入力内容の確認／送信／今すぐ支払う）を #0d5c3c に。グレーの戻る・赤のアップロードはそのまま */
.btn-primary.analyze:not(#input-file):not(#input-face-image), .btn-primary[data-astro-cid-m7m5zjx7], #contact-submit.btn-primary, .pay-btn { background-color: #0d5c3c !important; border-color: #0d5c3c !important; color: #fff !important; }
.btn-primary.analyze:not(#input-file):not(#input-face-image):hover:not(:disabled), .btn-primary[data-astro-cid-m7m5zjx7]:hover, #contact-submit.btn-primary:hover, .pay-btn:hover { background-color: #0a4a30 !important; border-color: #0a4a30 !important; }
.btn-primary.analyze:not(#input-file):not(#input-face-image):disabled { background-color: #3d8562 !important; border-color: #3d8562 !important; opacity: 1; }
.payment-title-wrap { max-width: 860px; }
.payment-title { text-align: left; font-size: 2.4rem; font-weight: bold; margin: 0 0 -16px; }
body[data-platform="sp"] .payment-title-wrap { display: none; }
body[data-platform="sp"] .payment-note-default { margin-bottom: 15px !important; }
body[data-platform="sp"] .payment-box { margin-top: 10px; }
/* 確認画面の「修正」から戻ったとき: 戻るを隠し、中央の「入力内容を確認する」だけ */
body.is-edit-return .form-submit .btn-secondary { display: none !important; }
body.is-edit-return .form-submit .form-group { justify-content: center; text-align: center; }
body.is-edit-return .form-submit .form-group > span { display: none; }

/* お問い合わせ完了ページの「トップページに戻る」も主ボタン色に */
.form-submit a.btn-primary { background-color: #0d5c3c !important; border-color: #0d5c3c !important; color: #fff !important; }
.form-submit a.btn-primary:hover { background-color: #0a4a30 !important; border-color: #0a4a30 !important; }

/* ☑ は絵文字扱いで紫になる環境があるため、文字として黒で表示 */
.chk-glyph { display: inline-block; width: 1.25em; height: 1.25em; margin: 0 2px; vertical-align: -0.25em; font-size: inherit; color: transparent; overflow: hidden;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='2.5' y='2.5' width='19' height='19' rx='2' fill='%23fff' stroke='%23000' stroke-width='2'/><path d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain; }

/* ===== 画像アップロード欄（keta-travel の pp-upload を移植、2026-10-08） ===== */
.pp-upload { margin-top: 4px; }
.pp-upload > input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.pp-upload__req { margin: 0 0 8px; padding: 10px 12px; border-radius: 3px; background: #f1f3f5; color: #212529; }
.pp-upload__req-title { margin: 0 0 4px; font-size: 1.4rem; font-weight: bold; }
.pp-upload__req-list { margin: 0; padding: 0 0 0 1.2em; font-size: 1.3rem; line-height: 1.6; }
.pp-upload__req-list li { margin: 0; }
.pp-upload__req-link { margin: 4px 0 0; font-size: 1.3rem; }
.pp-upload__req-link a { color: #2c5697; text-decoration: underline; font-size: 1.3rem; }
.pp-upload__btnwrap { position: relative; max-width: 480px; }
.pp-upload__btn {
  display: block; width: 100%; min-height: 60px; box-sizing: border-box;
  margin: 0; padding: 10px 14px 28px 68px;
  border: 1px solid #ced4da; border-radius: 2.5px;
  background: #ffe8b2; color: #212529; cursor: pointer;
  font-weight: normal; font-size: 1.5rem; line-height: 1.35; text-align: left;
}
.pp-upload__btn:hover, .pp-upload__btn:focus-visible, .pp-upload.is-dragover .pp-upload__btn { background: #ffe0a0; box-shadow: 0 0 0 2px rgba(44,86,151,.25); outline: none; }
.pp-upload__deco { position: absolute; inset: 0; pointer-events: none; }
.pp-upload__deco::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 40px; height: 40px; margin-top: -20px;
  box-sizing: border-box; border: 1px solid #ced4da; border-radius: 2.5px; background-color: #fff;
  background-repeat: no-repeat; background-position: center; background-size: 24px 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/><circle cx='12' cy='13' r='3.5'/></svg>");
}
.pp-upload__deco--photo::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='1.5'/><circle cx='8.5' cy='10' r='1.6'/><path d='M21 16l-5.2-5.2a1 1 0 0 0-1.4 0L7 18'/></svg>");
}
.pp-upload__deco--face::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8.5' r='3.5'/><path d='M4.5 20c1.2-3.6 4-5.5 7.5-5.5s6.3 1.9 7.5 5.5'/></svg>");
}
.pp-upload__deco-sub { position: absolute; left: 68px; right: 14px; bottom: 9px; font-size: 1.25rem; font-weight: normal; line-height: 1.3; color: #6c757d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-upload__done { display: flex; gap: 12px; align-items: flex-start; max-width: 480px; margin: 0; padding: 10px 12px; border: 1px solid #ced4da; border-radius: 2.5px; background: #f8f9fa; }
.pp-upload__preview { flex: 0 0 auto; }
.pp-upload .pp-upload__preview .thumb { max-width: 124px; max-height: 124px; margin: 0; border: 1px solid #ced4da; border-radius: 2px; background: #fff; display: block; }
.pp-upload__meta { flex: 1 1 auto; min-width: 0; }
.pp-upload__ok { margin: 0 0 2px; font-size: 1.5rem; font-weight: bold; color: #212529; display: flex; align-items: center; gap: 6px; }
.pp-upload__check { display: block; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; background: none; }
.pp-upload__name { margin: 0 0 4px; font-size: 1.3rem; color: #495057; word-break: break-all; }
.pp-upload__status { margin: 0 0 4px; font-size: 1.3rem; color: #495057; min-height: 1.3em; }
.pp-upload__status.is-done { color: #2c5697; font-weight: bold; }
.pp-upload__status.is-error { color: #b00020; font-weight: bold; }
.pp-upload__bar { height: 6px; margin: 0 0 6px; border-radius: 3px; background: #e9ecef; overflow: hidden; }
.pp-upload__bar span { display: block; height: 100%; width: 5%; background: #2c5697; transition: width .2s; }
.pp-upload__recheck { margin: 0 0 6px; font-size: 1.25rem; color: #6c757d; }
.pp-upload__change { display: inline-block; margin: 0; padding: 7px 12px; min-height: 36px; border: 1px solid #ced4da; border-radius: 2.5px; background: #fff; color: #495057; font-size: 1.3rem; font-weight: bold; cursor: pointer; }
.pp-upload__change:hover { background: #f1f3f5; }
.pp-upload__done.is-error { border-color: #b00020; background: #fff; }
.pp-upload__done.is-error .pp-upload__check { opacity: .35; }
.pp-upload__error { margin-top: 4px; }
.pp-upload__btns { display: flex; flex-direction: column; gap: 8px; }
.pp-upload__btns .pp-upload__btn { min-height: 58px; }
.pp-upload__btns.not-entered { background: transparent; }
.pp-upload__zoom { display: block; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; text-align: center; }
.pp-upload__zoom-hint { display: block; margin-top: 3px; font-size: 1.1rem; color: #6c757d; }
.pp-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.95); display: flex; flex-direction: column; }
.pp-lightbox[hidden] { display: none; }
.pp-lightbox__close { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 8px 12px; border: 1px solid #fff; border-radius: 2.5px; background: rgba(0,0,0,.5); color: #fff; font-size: 1.4rem; font-weight: bold; cursor: pointer; }
.pp-lightbox__scroll { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; align-items: center; justify-content: center; padding: 48px 8px 8px; }
.pp-lightbox__scroll img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; }
body.pp-lightbox-open { overflow: hidden; }
@media (max-width: 768px) {
  .pp-upload__btn { max-width: none; min-height: 64px; }
  .pp-upload__done { max-width: none; }
  .pp-upload__change { display: block; width: 100%; }
}
/* 画像欄の導入文（keta と同じ ※ 行。要件ボックスは keta に無いため廃止 2026-10-08） */
.pp-upload__intro { margin: 0 0 8px; font-size: 1.3rem; line-height: 1.6; color: #555; }
.pp-upload__intro a { color: #2c5697; text-decoration: underline; font-size: 1.3rem; }
.pp-upload__intro.note-flex { display: flex; align-items: flex-start; gap: .35em; }
.pp-upload__intro .note-mark { flex: 0 0 auto; }
.pp-upload__intro .note-body { flex: 1 1 auto; min-width: 0; }
/* 画像欄の※注記: ベンダーの span 既定サイズ（1.6rem）を打ち消し、他の※注記と同じ13pxにする */
.pp-upload small.asterisk, .pp-upload small.asterisk > span, .pp-upload small.asterisk a { font-size: 13px !important; line-height: 1.6; }
/* SP 申請フォーム: 生年月日・有効期間満了日を1行に（2026-10-08 釘崎さん指示、status と同じ組み方） */
body[data-platform="sp"] .form-date-oneline { display: flex !important; flex-wrap: wrap; align-items: flex-end !important; gap: 0; white-space: nowrap; width: 100%; }
body[data-platform="sp"] .form-date-oneline > div:not(.form-error), body[data-platform="sp"] .form-date-oneline > div:not(.form-error) > div { display: flex; align-items: flex-end; margin: 0; width: auto; }
body[data-platform="sp"] .form-date-oneline .form-error { flex: 0 0 100%; white-space: normal; }
body[data-platform="sp"] .form-date-oneline select.form-control { margin: 0 2px 0 0 !important; padding-left: 6px !important; padding-right: 2px !important; max-width: none; }
body[data-platform="sp"] .form-date-oneline .form-year { width: 100px !important; }
body[data-platform="sp"] .form-date-oneline .form-month { width: 100px !important; }
body[data-platform="sp"] .form-date-oneline .form-day { width: 90px !important; }
body[data-platform="sp"] .form-date-oneline span { display: inline-block; transform: none !important; font-size: 1.5rem; margin: 0 6px 0 0 !important; line-height: 1; padding-bottom: 9px; }
body[data-platform="sp"] .form-date-oneline > div:last-of-type span:last-child, body[data-platform="sp"] .form-date-oneline > div:last-of-type > div:last-child span:last-child { margin-right: 0 !important; }
/* SP: ページ下部のボタン帯をコンテナの左右余白（15px）いっぱいまで伸ばす（2026-10-09 釘崎さん指示） */
body[data-platform="sp"] .form-submit { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 15px; padding-right: 15px; }
/* SP 申請フォーム: 項目名（主な滞在先 など）を太字に。※注記・ラジオ・ボタン型ラベルは対象外（2026-10-09 釘崎さん指示） */
body[data-platform="sp"] form .form-group > label:not(.agree-checkbox):not(.pp-upload__btn):not(.form-check-label),
body[data-platform="sp"] form section > label { font-weight: bold; }
/* 条件付きで開く項目（他国籍・Other）は太字にしない。上の太字規則（:not() 3つ）より詳細度が低いので !important */
body[data-platform="sp"] form .form-group > label[for="country_other_nationcur"], body[data-platform="sp"] form .form-group > label[for="occupation_other"] { font-weight: normal !important; }
/* 「他国の国民または市民ですか？」は .form-open-pc の中にあり直下ラベル規則に当たらないため個別に太字 */
body[data-platform="sp"] form .form-group > .form-open-pc > label { font-weight: bold; }
/* カード名義のプレースホルダーを Stripe 要素（MM/YYYY・CVV）の #adb5bd に合わせる（2026-10-09 釘崎さん指示） */
#card-name::placeholder { color: #adb5bd; opacity: 1; }
#card-name::-webkit-input-placeholder { color: #adb5bd; opacity: 1; }