/**
 * checkout.css - チェックアウト専用スタイル
 * カート、配送先、支払い、確認、完了ページで使用
 * number input のスピンボタン非表示、ダイアログ背景、クレジットカードフォームなど
 */

/* ==========================================
   input type="number" のスピンボタンを非表示
   カートの数量入力などで使用
   ========================================== */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* ==========================================
   ダイアログの背景オーバーレイ
   <dialog> 要素の ::backdrop で使用
   ========================================== */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* ==========================================
   クレジットカード入力フォーム（支払いページ）
   Stripe/Baymard ベストプラクティス準拠:
   - ラベル上・入力・エラー下の一貫レイアウト
   - 有効期限+CVV 横並びでコンパクト
   - タップ領域 48px 以上（モバイル）
   - セキュリティ表示で信頼感向上
   ========================================== */

/* 入力欄: 統一スタイル・十分な余白・角丸・フォーカス時強調 */
.cc-form .cc-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  background-color: #faf8f5;
  border: 1px solid #d0caba;
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cc-form .cc-input::placeholder {
  color: #999;
}

.cc-form .cc-input:hover {
  border-color: #b8b0a0;
}

.cc-form .cc-input:focus {
  outline: none;
  border-color: #4a5d23;
  box-shadow: 0 0 0 3px rgba(74, 93, 35, 0.15);
}

/* フォームグループ: ラベル・入力・エラーを縦に一貫配置 */
.cc-form .cc-form-fields .form-group {
  margin-bottom: 0;
}

.cc-form .form-group .error-msg {
  margin-top: 0.375rem;
}

/* セキュリティバッジ: 信頼感を与える控えめな表示 */
.cc-form .cc-security-badge {
  padding: 0.875rem 1rem;
  background: linear-gradient(135deg, #f8faf0 0%, #f0f7e8 100%);
  border: 1px solid #d4e4c4;
  border-radius: 6px;
}

/* 3Dセキュア案内: 情報なので暖色系（エラー色ではない） */
.cc-form .cc-3ds-notice {
  padding: 1rem 1.25rem;
  background: #fffbf0;
  border: 1px solid #e8d4a0;
  border-radius: 6px;
}