/* ====================================================================
   ゼントリ オーダーシステム — カスタムスタイル
   Tailwind CSS と併用するカスタムスタイル定義
   ==================================================================== */

/* --- Google Fonts (Noto Sans JP + Inter) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap');

/* --- CSS Variables --- */
:root {
  --color-navy-900: #0a1628;
  --color-navy-800: #0f2035;
  --color-navy-700: #152a42;
  --color-navy-600: #1b3a5c;
  --color-green-500: #10b981;
  --color-green-400: #34d399;
  --color-green-600: #059669;
  --color-accent: #f59e0b;
  --color-surface: #f0fdf4;
  --color-error: #ef4444;
  --font-ja: 'Noto Sans JP', sans-serif;
  --font-en: 'Inter', sans-serif;
}

/* --- I18n Language Toggle --- */
[data-lang="ja"] .i18n-btn-ja {
  background-color: white;
  color: #0a1628;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
[data-lang="en"] .i18n-btn-en {
  background-color: white;
  color: #0a1628;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.i18n-btn-ja, .i18n-btn-en {
  color: #94a3b8;
}

/* --- Base --- */
* { box-sizing: border-box; }

body {
  font-family: var(--font-ja);
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 30%, #e0f2fe 100%);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* --- Step Wizard Progress Bar --- */
.step-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 0.5rem;
}

.step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: #e2e8f0;
  color: #94a3b8;
  flex-shrink: 0;
  position: relative;
}

.step-dot.active {
  background: linear-gradient(135deg, var(--color-green-500), var(--color-green-600));
  color: #fff;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
  transform: scale(1.15);
}

.step-dot.completed {
  background: var(--color-green-600);
  color: #fff;
}

.step-line {
  height: 3px;
  width: 24px;
  background: #e2e8f0;
  transition: background 0.4s ease;
  flex-shrink: 0;
}

.step-line.completed {
  background: var(--color-green-500);
}

/* --- Card Styles --- */
.order-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.order-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* --- Plan Selection Cards --- */
.plan-card {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.plan-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: transparent;
  transition: background 0.3s ease;
}

.plan-card:hover {
  border-color: var(--color-green-400);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.12);
}

.plan-card.selected {
  border-color: var(--color-green-500);
  background: linear-gradient(to bottom, #f0fdf4, #ffffff);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
}

.plan-card.selected::before {
  background: linear-gradient(90deg, var(--color-green-500), var(--color-green-400));
}

/* 大会選択（STEP2）のカードだけ上下を詰める。
   一覧は画面の高さの半分までなので、詰めたぶんスクロールせずに見える大会が増える。
   .plan-card はプラン選択（STEP3）と共用のため、そちらに影響しないよう
   #tournamentCards の中に限定する。左右は 1.5rem のままにして、
   上下だけ極端に狭くならないようにしている。 */
#tournamentCards .plan-card {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* --- Match Card (Basic plan) --- */
.match-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem;
  position: relative;
  transition: all 0.3s ease;
  animation: slideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.match-card:hover {
  border-color: #cbd5e1;
}

.match-card .match-number {
  position: absolute;
  top: -10px;
  left: 12px;
  background: linear-gradient(135deg, var(--color-navy-700), var(--color-navy-800));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
}

.match-card .delete-match {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #fef2f2;
  color: var(--color-error);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.match-card .delete-match:hover {
  background: #fee2e2;
  transform: scale(1.1);
}

/* --- Form Elements --- */
.form-select, .form-input {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.9rem;
  font-family: var(--font-ja);
  background: #fff;
  color: #1e293b;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.7rem center;
  background-repeat: no-repeat;
  background-size: 1.2em 1.2em;
  padding-right: 2.5rem;
}

.form-select:focus, .form-input:focus {
  outline: none;
  border-color: var(--color-green-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.35rem;
}

/* --- Floating Price Bar --- */
.floating-price {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, var(--color-navy-900), var(--color-navy-800));
  color: #fff;
  padding: 0.8rem 1.2rem;
  z-index: 100;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.floating-price .price-amount {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-green-400);
}

/* --- Buttons --- */
.btn-primary {
  background: linear-gradient(135deg, var(--color-green-500), var(--color-green-600));
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 0.85rem 2rem;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-ja);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  background: #ffffff;
  color: var(--color-navy-700);
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.85rem 2rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-ja);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.btn-add {
  background: #f0fdf4;
  color: var(--color-green-600);
  border: 1.5px dashed var(--color-green-400);
  border-radius: 12px;
  padding: 0.75rem;
  width: 100%;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-ja);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-add:hover {
  background: #dcfce7;
  border-color: var(--color-green-500);
}

.btn-submit {
  background: linear-gradient(135deg, var(--color-green-500), var(--color-green-600));
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-ja);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
  width: 100%;
}

.btn-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(16, 185, 129, 0.4);
}

.btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Checkbox Custom --- */
.checkbox-custom {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.75rem;
  border-radius: 10px;
  transition: background 0.2s ease;
}

.checkbox-custom:hover {
  background: #f8fafc;
}

.checkbox-custom input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-green-500);
  flex-shrink: 0;
}

/* --- Option Chips --- */
.option-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
  color: #475569;
}

.option-chip:hover {
  border-color: var(--color-green-400);
  background: #f0fdf4;
}

.option-chip.selected {
  border-color: var(--color-green-500);
  background: #dcfce7;
  color: var(--color-green-600);
  font-weight: 600;
}

.option-chip .chip-price {
  font-family: var(--font-en);
  font-size: 0.75rem;
  opacity: 0.7;
}

/* --- Animations --- */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes checkmark {
  0% { stroke-dashoffset: 30; }
  100% { stroke-dashoffset: 0; }
}

.animate-slide-in {
  animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-fade-in {
  animation: fadeIn 0.3s ease;
}

.animate-slide-up {
  animation: slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Step Section --- */
.step-section {
  display: none;
  animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-section.active {
  display: block;
}

/* --- Price Summary Table --- */
.price-table {
  width: 100%;
  border-collapse: collapse;
}

.price-table tr {
  border-bottom: 1px solid #f1f5f9;
}

.price-table tr:last-child {
  border-bottom: none;
}

.price-table td {
  padding: 0.6rem 0;
  font-size: 0.85rem;
}

.price-table td:last-child {
  text-align: right;
  font-family: var(--font-en);
  font-weight: 600;
}

.price-table .total-row td {
  font-weight: 700;
  font-size: 1rem;
  padding-top: 0.8rem;
  border-top: 2px solid var(--color-navy-800);
  color: var(--color-navy-900);
}

.price-table .total-row td:last-child {
  color: var(--color-green-600);
  font-size: 1.2rem;
}

.price-table .discount-badge {
  display: inline-block;
  background: #fef3c7;
  color: #b45309;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

/* --- Loading / Error States --- */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e2e8f0;
  border-top-color: var(--color-green-500);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/*
 * 画面下部に固定する。上端固定だと iOS のアプリ内ブラウザ（LINE等）で
 * URLバーがページ表示領域に被さり、トーストが隠れて読めなくなるため。
 * URLバーの高さはCSSから取得できず env(safe-area-inset-top) にも含まれない。
 *
 * --toast-offset には合計バー（.floating-price）の実測高さが JS から入る。
 * 合計バーは自身の padding にセーフエリアを含むため、オフセットが入っている
 * ときは env(safe-area-inset-bottom) を重ねない（二重に足さない）。
 */
.toast {
  position: fixed;
  --toast-offset: 0px;
  --toast-safe: env(safe-area-inset-bottom, 0px);
  bottom: calc(var(--toast-offset) + var(--toast-safe) + 1rem);
  left: 50%;
  transform: translateX(-50%) translateY(150%);
  background: #1e293b;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  z-index: 300;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 90vw;
  text-align: center;
}

.toast.error {
  background: #991b1b;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

/* --- Terms Modal --- */
.terms-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 150;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.terms-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.terms-modal {
  background: #fff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 1.5rem;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.terms-modal-overlay.open .terms-modal {
  transform: translateY(0);
}

/* --- Complete Screen --- */
.complete-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-green-400), var(--color-green-600));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
  animation: pulse 1.5s ease infinite;
}

.complete-icon svg {
  width: 40px;
  height: 40px;
  stroke: #fff;
  stroke-width: 3;
  fill: none;
}

.complete-icon svg path {
  stroke-dasharray: 30;
  animation: checkmark 0.6s ease 0.3s forwards;
  stroke-dashoffset: 30;
}

/* --- Safe Area (iPhone notch) --- */
.safe-bottom {
  padding-bottom: max(0.8rem, env(safe-area-inset-bottom));
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

/* --- Custom Date Input (i18n-aware placeholder) ---
 *
 * type="date" のまま多言語プレースホルダを出すための実装。
 * focus/blur で type を text ⇄ date に入れ替えると、ネイティブのカレンダーが
 * 開いた直後に input が作り直され、ピッカーごと閉じてしまう（一瞬出て消える）。
 * そのため type は常に date のままにして、見た目だけをここで調整する。
 */
.date-input-wrapper {
  position: relative;
}

/* .form-input の appearance:none はカレンダーアイコン（タップ標的）まで
   消してしまうため、日付欄だけはネイティブ描画に戻す。
   枠線・角丸・余白は .form-input の通常プロパティなのでそのまま効く */
.date-input-custom {
  -webkit-appearance: auto;
  appearance: auto;
  min-height: 2.9rem;
}

/* カレンダーアイコンを確実に表示し、指で押せる大きさを確保する */
.date-input-custom::-webkit-calendar-picker-indicator {
  display: block;
  opacity: 1;
  cursor: pointer;
  padding: 0.35rem;
  margin-left: auto;
}

/* iOS は値を中央寄せで描画するため左寄せに戻す */
.date-input-custom::-webkit-date-and-time-value {
  text-align: left;
}

/* 未入力のあいだはネイティブの日付テキスト（年/月/日）を隠し、
   代わりに .date-custom-placeholder を重ねて多言語表記を見せる */
.date-input-wrapper .date-input-custom::-webkit-datetime-edit {
  color: transparent;
}

/* 値が入っているとき、および入力中（フォーカス中）はネイティブ表示に戻す。
   入力中に隠したままだと、部分的に入力された年/月/日とプレースホルダが
   重なって「YYYY / MM / 00」のように二重に見えてしまう */
.date-input-wrapper.has-value .date-input-custom::-webkit-datetime-edit,
.date-input-wrapper:focus-within .date-input-custom::-webkit-datetime-edit {
  color: #1e293b;
}

.date-custom-placeholder {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.875rem;
  pointer-events: none;
  /* 既定は非表示。::-webkit-datetime-edit を解釈しないブラウザ（Firefox 等）では
     ネイティブの yyyy/mm/dd が見えたままなので、重ねると二重表示になる */
  display: none;
}

@supports selector(::-webkit-datetime-edit) {
  .date-input-wrapper .date-custom-placeholder {
    display: block;
  }
  /* 値が入ったとき、および入力中はカスタムプレースホルダを引っ込める */
  .date-input-wrapper.has-value .date-custom-placeholder,
  .date-input-wrapper:focus-within .date-custom-placeholder {
    display: none;
  }
}

/* --- Modal Overlay (termsModal用) --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 150;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* --- i18n Visibility Toggles --- */
body[data-lang="ja"] .i18n-only-en { display: none !important; }
body[data-lang="en"] .i18n-only-ja { display: none !important; }
body:not([data-lang]) .i18n-only-en { display: none !important; }

/* ============================================================
   販売期間終了の大会カード（表示はするが選択できない）
   カード全体に opacity をかけると絵文字やバッジまで一様に薄くなり、
   「押せない」ことが伝わらないため、要素ごとに色を落とす。
   ============================================================ */
.plan-card.is-ended {
  background: #e8edf3;
  border-color: #cbd5e1;
  border-style: dashed;
  cursor: default;
  box-shadow: none;
}
/* 選択できないのでホバーの持ち上げ・色付きの枠を打ち消す */
.plan-card.is-ended:hover {
  border-color: #cbd5e1;
  transform: none;
  box-shadow: none;
}
/* 大会名も含めて文字を一段落とす（Tailwind のユーティリティより詳細度が高い） */
.plan-card.is-ended p {
  color: #94a3b8;
}
/* 絵文字は色がそのまま残って浮くので、彩度を落として背景になじませる */
.plan-card.is-ended p > span {
  filter: grayscale(1);
  opacity: 0.55;
}
/* 濃紺のカレンダーアイコンがあると「生きている」ように見えるのでグレーにする */
.plan-card.is-ended .tournament-icon {
  background: #cbd5e1;
}
.plan-card.is-ended .tournament-icon svg {
  color: #f1f5f9;
}

/* 「販売期間終了」バッジ。まわりを薄くするぶん、ここだけはっきり見せる */
.sales-ended-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: #64748b;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
}