/*
 * ipanel-order-flow.css — 注文フロー(D1)モック合わせスタイル
 *
 * handoff 018: 商品選択 → カート確認 → ご注文手続き → 内容確認 → 完了 の
 *   5 ステップをモック `ipanel-combined.html`(STEP BAR〜PAGE1-5)に寄せる。
 *
 * 【競合回避】
 *   - すべてのクラスに `ipnl-` プレフィックスを付与し、EC-CUBE 既定クラスや
 *     ヘッダー共通 CSS(ipanel-common-blocks.css / 017 専有)と衝突させない。
 *   - EC-CUBE 既定クラスへの上書きは注文フロー 5 ページ限定で使う要素のみに絞る。
 *   - 決済・フォーム挙動には一切触れない(見た目だけ)。ZEUS(D2)は後回し。
 */

:root {
  --ipnl-accent: #e63312;
  --ipnl-accent-dark: #c02a0e;
  --ipnl-navy: #2c3e60;
  --ipnl-navy-light: #3d5080;
  --ipnl-text: #1a1a1a;
  --ipnl-text-sub: #555;
  --ipnl-light: #f7f5f2;
  --ipnl-border: #ddd;
  --ipnl-gold: #d4a017;
  --ipnl-gold-light: #f0c040;
}

/* ============================================================
 * STEP BAR(5 段インジケータ)
 * ============================================================ */
.ipnl-step-bar {
  background: var(--ipnl-navy);
  padding: 20px 40px;
  margin: 0 0 28px;
}
.ipnl-step-inner {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ipnl-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ipnl-step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.5);
}
.ipnl-step-circle.is-active {
  background: var(--ipnl-accent);
  border-color: var(--ipnl-accent);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(230, 51, 18, 0.3);
}
.ipnl-step-circle.is-done {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.ipnl-step-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.ipnl-step-label.is-active {
  color: #fff;
  font-weight: 500;
}
.ipnl-step-label.is-done {
  color: rgba(255, 255, 255, 0.8);
}
.ipnl-step-line {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 8px 22px;
  min-width: 30px;
  max-width: 80px;
}
.ipnl-step-line.is-done {
  background: rgba(255, 255, 255, 0.5);
}

/* ============================================================
 * SECTION CARD(共通カード)
 * ============================================================ */
.ipnl-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  margin-bottom: 24px;
  overflow: hidden;
}
.ipnl-card-header {
  background: var(--ipnl-gold-light);
  padding: 12px 24px;
  font-weight: 700;
  font-size: 15px;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ipnl-card-header::before {
  content: '';
  width: 4px;
  height: 18px;
  background: var(--ipnl-gold);
  border-radius: 2px;
}
.ipnl-card-body {
  padding: 24px;
}

/* ============================================================
 * 商品選択(PAGE1)— サイズ / 縦横 / 設置場所 / 取付部品
 * ============================================================ */
.ipnl-order-form {
  max-width: 900px;
  margin: 0 auto 8px;
}

/* サイズ:ラジオカード */
.ipnl-radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.ipnl-radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 2px solid var(--ipnl-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
}
.ipnl-radio-option:hover {
  border-color: var(--ipnl-accent);
  background: #fff8f7;
}
.ipnl-radio-option.is-selected {
  border-color: var(--ipnl-accent);
  background: #fff0ee;
}
.ipnl-radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--ipnl-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.ipnl-radio-option.is-selected .ipnl-radio-dot {
  border-color: var(--ipnl-accent);
  background: var(--ipnl-accent);
}
.ipnl-radio-option.is-selected .ipnl-radio-dot::after {
  content: '';
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
}
.ipnl-radio-text {
  flex: 1;
}
.ipnl-radio-text .ipnl-name {
  font-size: 14px;
  font-weight: 500;
}
.ipnl-radio-text .ipnl-size-info {
  font-size: 11px;
  color: var(--ipnl-text-sub);
  margin-top: 2px;
}
.ipnl-radio-text .ipnl-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--ipnl-accent);
  margin-top: 2px;
}
.ipnl-radio-option.ipnl-custom .ipnl-size-info {
  color: var(--ipnl-accent);
}

/* 縦・横 */
.ipnl-orient-grid {
  display: flex;
  gap: 16px;
}
.ipnl-orient-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  border: 2px solid var(--ipnl-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.ipnl-orient-option:hover {
  border-color: var(--ipnl-accent);
  background: #fff8f7;
}
.ipnl-orient-option.is-selected {
  border-color: var(--ipnl-accent);
  background: #fff0ee;
}
.ipnl-orient-icon {
  font-size: 28px;
  line-height: 1;
}
.ipnl-orient-label {
  font-size: 15px;
  font-weight: 500;
}

/* 設置場所 / 取付部品:チェックボックス(複数選択) */
.ipnl-check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ipnl-check-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px solid var(--ipnl-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  font-weight: 500;
  user-select: none;
}
.ipnl-check-option:hover {
  border-color: var(--ipnl-navy);
  background: #f0f4ff;
}
.ipnl-check-option.is-selected {
  border-color: var(--ipnl-navy);
  background: #e8eeff;
}
.ipnl-check-box {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ipnl-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
  font-size: 12px;
  color: transparent;
}
.ipnl-check-option.is-selected .ipnl-check-box {
  background: var(--ipnl-navy);
  border-color: var(--ipnl-navy);
  color: #fff;
}

/* その他 自由入力 */
.ipnl-other-input {
  margin-top: 12px;
  display: none;
}
.ipnl-other-input.is-show {
  display: block;
}
.ipnl-other-input textarea,
.ipnl-other-input input {
  width: 100%;
  max-width: 480px;
  padding: 10px 14px;
  border: 2px solid var(--ipnl-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  resize: vertical;
}
.ipnl-other-input textarea:focus,
.ipnl-other-input input:focus {
  border-color: var(--ipnl-navy);
}
.ipnl-field-note {
  font-size: 12px;
  color: var(--ipnl-text-sub);
  margin: 6px 0 0;
}

/* 価格サマリー */
.ipnl-price-summary {
  background: linear-gradient(135deg, #fff8f7 0%, #fff 100%);
  border: 2px solid var(--ipnl-accent);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.ipnl-price-label {
  font-size: 14px;
  color: var(--ipnl-text-sub);
}
.ipnl-price-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--ipnl-accent);
  line-height: 1.1;
}
.ipnl-price-value small {
  font-size: 14px;
  font-weight: 400;
  color: var(--ipnl-text-sub);
}

/* 特注:お問い合わせ導線 */
.ipnl-custom-notice {
  display: none;
  margin-bottom: 24px;
}
.ipnl-custom-notice.is-show {
  display: block;
}
.ipnl-custom-notice a {
  color: var(--ipnl-accent);
  font-weight: 700;
  text-decoration: underline;
}

/* ============================================================
 * 商品詳細ページ:EC-CUBE 既定の規格セレクト/カートボタンをモック調に
 *   (.product_pageで商品ページ本文にスコープ)
 * ============================================================ */
.product_page .ec-productRole__actions {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.product_page .ec-productRole__actions .ec-select select {
  border: 2px solid var(--ipnl-border);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 15px;
}

/* ============================================================
 * ご注文手続き(PAGE3)/ 内容確認(PAGE4)
 *   .ec-orderRole をモックのカード + navy 見出しに寄せる(非破壊・見た目のみ)。
 *   お支払い方法(.ec-orderPayment)は既存決済のまま。将来 ZEUS(D2)は
 *   この既存 .ec-orderPayment ブロックへ差し込む(= 領域確保済み)。
 * ============================================================ */
.ec-orderRole .ec-rectHeading h2 {
  font-weight: 700;
  font-size: 16px;
  color: var(--ipnl-navy);
  border-bottom: 2px solid var(--ipnl-navy);
  padding-bottom: 8px;
  margin-bottom: 16px;
}
.ec-orderRole .ec-orderRole__detail > div {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.ec-orderRole .ec-orderPayment[data-ipnl-zeus-slot] {
  /* D2(ZEUS)差し込み用アンカー。現状は既存決済 UI をそのまま表示。 */
}

.ipnl-notice-box {
  background: #fff8f0;
  border-left: 4px solid var(--ipnl-gold);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ipnl-text-sub);
  margin: 0 0 20px;
}

/* ============================================================
 * 完了(PAGE5)+ デザイン案内
 * ============================================================ */
.ipnl-design-guide {
  max-width: 720px;
  margin: 8px auto 28px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  border: 2px solid var(--ipnl-accent);
}
.ipnl-design-guide__header {
  background: var(--ipnl-accent);
  color: #fff;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ipnl-design-guide__header .ipnl-icon {
  font-size: 24px;
}
.ipnl-design-guide__header h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}
.ipnl-design-guide__body {
  padding: 24px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ipnl-text);
}
.ipnl-design-guide__body p {
  margin: 0 0 12px;
}
.ipnl-design-guide__lead {
  color: var(--ipnl-accent);
  font-weight: 700;
}
.ipnl-design-guide__body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.ipnl-design-guide__body ul li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.ipnl-design-guide__body ul li::before {
  content: '▶';
  color: var(--ipnl-accent);
  font-size: 10px;
  margin-top: 5px;
  flex-shrink: 0;
}
.ipnl-design-guide__note {
  font-size: 13px;
  color: var(--ipnl-text-sub);
}

/* ============================================================
 * レスポンシブ
 * ============================================================ */
@media (max-width: 768px) {
  .ipnl-step-bar {
    padding: 16px;
  }
  .ipnl-step-label {
    font-size: 10px;
  }
  .ipnl-step-line {
    min-width: 12px;
    margin: 0 4px 22px;
  }
  .ipnl-radio-grid {
    grid-template-columns: 1fr;
  }
  .ipnl-card-body {
    padding: 18px;
  }
}