/* apps/worker/extensions/lift-product-options/assets/options.css
 *
 * Storefront のオプション表示。仕様: ../../docs/option-display-spec.md
 *
 * 基準は「ボックス型」。オプション 1 つを 1 バンド (上端に太い罫線 + 淡いグレー背景) とし、
 * 選択肢を白いカード行で並べる。BTO のカスタマイザで要る情報量 (仕様テキスト・チップ・
 * 価格差・選び方ガイド・非対応理由) を、詰め込まずに読める密度で出すことを狙っている。
 *
 * 以前は Globo の素の radio 行に pixel 単位で寄せていたが、そこから離れる判断をしたので
 * 全面的に書き直した。ただし次の 2 つは挙動なので引き継ぐ:
 *   - .lift-price は非表示。合計はテーマ側の価格表示 ([data-gpo-product-unit-price]) を
 *     options.js が書き換えるため、二重に出さない
 *   - .case-sector は MDL テーマが advanced_settings.class_name で差し込むフック
 */

.lift-mount {
  --lift-accent: #2440d8;
  --lift-accent-soft: #e8f1fd;
  --lift-accent-text: #1f3fbf;
  --lift-up: #d92d20;
  --lift-free: #12805c;
  --lift-ink: #16181d;
  --lift-ink-muted: #667085;
  --lift-line: #e4e7ec;
  --lift-surface: #ffffff;
  --lift-band: #f4f5f7;
  --lift-radius: 10px;

  /* テーマのカート form は flex 行になっていることが多く、そのまま入れると
     ボタンの隣の狭いカラムに押し込まれる。強制的に 1 行占有して全幅にする */
  width: 100%;
  flex: 1 1 100%;
  grid-column: 1 / -1;
  box-sizing: border-box;

  margin: 2rem 0;
  color: var(--lift-ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* テーマ側の box-sizing に影響されないようにする */
.lift-mount *,
.lift-mount *::before,
.lift-mount *::after {
  box-sizing: border-box;
}

.lift-root {
  display: flex;
  flex-direction: column;
}

/* ============================================================
 * グループ帯 — オプション 1 つ = 1 バンド
 * 上端の太い罫線で区切ることで、長いカスタマイズ画面をスクロールしても
 * 「今どの項目を選んでいるか」を見失わない
 * ============================================================ */

.lift-element {
  border: none;
  border-top: 3px solid var(--lift-accent);
  margin: 0;
  padding: 1.5rem 1.25rem 1.75rem;
  background: var(--lift-band);
}

/* legend は既定だと枠線に食い込む配置になるので通常のブロックとして扱う */
.lift-element legend {
  display: block;
  float: left;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--lift-ink);
}

.lift-element legend + * {
  clear: both;
}

.lift-element .required {
  margin-left: 0.25em;
  color: var(--lift-up);
}

/* 現在の選択値。タイトル直下に小さく出して、スクロール中でも今の構成が分かるようにする */
.lift-element-summary {
  display: block;
  clear: both;
  margin: -0.65rem 0 0.9rem;
  min-height: 1.2em;
  color: var(--lift-ink-muted);
  font-size: 0.85rem;
}

.lift-group {
  padding: 1.75rem 1.25rem 0;
}

.lift-group h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

/* ============================================================
 * 選択肢 — 白いカード行
 * ============================================================ */

.lift-values {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.lift-value {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--lift-line);
  border-radius: var(--lift-radius);
  background: var(--lift-surface);
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    background-color 0.12s ease,
    box-shadow 0.12s ease;
}

.lift-value:hover {
  border-color: #c3cbd8;
}

/* 選択状態。塗りと枠の両方で示す。色だけに頼らないので色覚差があっても判別できる */
.lift-value:has(input:checked) {
  border-color: var(--lift-accent);
  background: var(--lift-accent-soft);
  box-shadow: inset 0 0 0 1px var(--lift-accent);
}

/* キーボード操作でも今どこにいるか分かるようにする */
.lift-value:has(input:focus-visible) {
  outline: 2px solid var(--lift-accent);
  outline-offset: 2px;
}

/* ラジオ / チェックは自前で描く。ブラウザ既定だとサイズと色が揃わない */
.lift-value input[type='radio'],
.lift-value input[type='checkbox'] {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid #c3cbd8;
  border-radius: 50%;
  background: var(--lift-surface);
  cursor: inherit;
  transition:
    border-color 0.12s ease,
    background-color 0.12s ease;
}

.lift-value input[type='checkbox'] {
  border-radius: 4px;
}

.lift-value:hover input {
  border-color: var(--lift-accent);
}

.lift-value input[type='radio']:checked {
  border-color: var(--lift-accent);
  border-width: 2px;
}

.lift-value input[type='radio']:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--lift-accent);
  transform: translate(-50%, -50%);
}

.lift-value input[type='checkbox']:checked {
  background: var(--lift-accent);
  border-color: var(--lift-accent);
}

.lift-value input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.lift-value-main {
  flex: 1;
  min-width: 0;
}

.lift-value-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
}

.lift-value-label {
  font-weight: 600;
}

/* 仕様テキスト。ラベルに添えるが主役にはしない */
.lift-value-subtitle {
  color: var(--lift-ink-muted);
  font-size: 0.82rem;
}

.lift-value-desc {
  margin-top: 0.35rem;
  color: var(--lift-ink-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* 補足チップ (B650 Wi-Fi 6E / 2.5G LAN など) */
.lift-chip {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: 4px;
  background: #eef1f5;
  color: #475467;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

/* 強調バッジ (おすすめ) */
.lift-value-badge {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: 4px;
  background: var(--lift-up);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ============================================================
 * 価格
 * 差額が判断材料なので右端で強く出す。無料は緑、加算は赤、値引きは緑
 * ============================================================ */

.lift-value-price {
  flex: none;
  margin-left: auto;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.lift-value-price.is-free {
  color: var(--lift-free);
}

.lift-value-price.is-up {
  color: var(--lift-up);
}

.lift-value-price.is-down {
  color: var(--lift-free);
}

/* ============================================================
 * 区切り見出し (ここから AM5 / DDR5 構成)
 * ============================================================ */

.lift-divider {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin: 0.9rem 0 0.3rem;
  color: var(--lift-accent-text);
  font-size: 0.8rem;
  font-weight: 700;
}

.lift-divider::before,
.lift-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #d7dce5;
}

/* ============================================================
 * 選び方ガイド / 説明ブロック
 * ============================================================ */

.lift-content {
  margin: 0 0 0.6rem;
}

.lift-content-title {
  margin-bottom: 0.3rem;
  font-weight: 700;
}

.lift-content-body {
  color: #475467;
  font-size: 0.88rem;
  line-height: 1.75;
}

.lift-content-body > :first-child {
  margin-top: 0;
}

.lift-content-body > :last-child {
  margin-bottom: 0;
}

.lift-content img,
.lift-content-body img,
.lift-content-body svg {
  max-width: 100%;
  height: auto;
}

.lift-content-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.85rem;
}

.lift-content-body th,
.lift-content-body td {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--lift-line);
  text-align: left;
  vertical-align: top;
}

.lift-content-body th {
  width: 30%;
  background: #f9fafb;
  font-weight: 600;
}

/* 折りたたみ。閉じていても「開けば情報がある」と分かる見た目にする */
.lift-content-collapsible {
  border: 1px solid var(--lift-line);
  border-radius: var(--lift-radius);
  background: var(--lift-surface);
}

.lift-content-collapsible > summary {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 1.1rem 1.25rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.lift-content-collapsible > summary::-webkit-details-marker {
  display: none;
}

.lift-content-collapsible > summary::before {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  color: var(--lift-ink-muted);
  font-weight: 400;
  font-size: 1.15em;
}

.lift-content-collapsible[open] > summary::before {
  content: '−';
}

.lift-content-collapsible[open] > summary {
  border-bottom: 1px solid var(--lift-line);
}

.lift-content-collapsible > .lift-content-body {
  padding: 1rem 1.25rem 1.25rem;
}

/* ============================================================
 * 選べない状態
 * 消さずに残して理由を出す。消すと選択肢の存在に気づけないため
 * ============================================================ */

.lift-value.is-unavailable,
.lift-value.is-static {
  background: #fbfbfc;
  cursor: default;
}

.lift-value.is-unavailable:hover,
.lift-value.is-static:hover {
  border-color: var(--lift-line);
}

.lift-value.is-unavailable .lift-value-label,
.lift-value.is-static .lift-value-label,
.lift-value.is-unavailable .lift-value-price,
.lift-value.is-static .lift-value-price {
  opacity: 0.55;
}

.lift-value.is-unavailable input {
  opacity: 0.4;
}

/* 表示専用はチェックの丸自体を出さない。選べると誤解させないため */
.lift-value.is-static input {
  visibility: hidden;
}

.lift-unavailable-note {
  flex: none;
  margin-left: auto;
  padding: 0.15em 0.6em;
  border-radius: 4px;
  background: #fef3f2;
  color: #b42318;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.lift-value-row:has(.lift-unavailable-note) .lift-value-price {
  margin-left: 0.6rem;
}

/* ============================================================
 * 自動追従 (CPU を変えたらマザーボードも変わる)
 * ============================================================ */

.lift-auto-note {
  margin: 0.7rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  background: var(--lift-accent-soft);
  color: var(--lift-accent-text);
  font-size: 0.8rem;
  line-height: 1.65;
}

.lift-element.is-locked .lift-values {
  opacity: 0.75;
  pointer-events: none;
}

.lift-element.is-locked legend::after {
  content: '自動選択';
  margin-left: 0.5em;
  padding: 0.15em 0.6em;
  border-radius: 4px;
  background: var(--lift-accent-soft);
  color: var(--lift-accent-text);
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: middle;
}

/* ============================================================
 * 画像カード
 * ============================================================ */

.lift-style-image_card .lift-values {
  display: grid;
  grid-template-columns: repeat(var(--lift-columns, auto-fill), minmax(150px, 1fr));
  gap: 0.75rem;
}

.lift-style-image_card .lift-divider {
  grid-column: 1 / -1;
}

.lift-value-card {
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem;
  border-width: 2px;
  text-align: center;
}

.lift-value-card:has(input:checked) {
  border-color: var(--lift-ink);
  background: var(--lift-surface);
  box-shadow: none;
}

.lift-value-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lift-card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f8fa;
  border-radius: 8px;
  overflow: hidden;
}

.lift-card-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lift-card-name {
  font-weight: 700;
  font-size: 0.92rem;
}

.lift-card-price {
  color: var(--lift-ink-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.lift-card-price.is-up {
  color: var(--lift-up);
}

.lift-card-price.is-down {
  color: var(--lift-free);
}

.lift-card-dots {
  display: flex;
  gap: 0.28rem;
}

.lift-dot {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  border: 1px solid #d0d5dd;
}

/* ============================================================
 * カラーピル
 * ============================================================ */

.lift-style-swatch_pill .lift-values {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lift-value-pill {
  width: auto;
  gap: 0.5em;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
}

.lift-value-pill:has(input:checked) {
  border-color: var(--lift-accent);
  background: var(--lift-surface);
  box-shadow: 0 0 0 1px var(--lift-accent);
}

.lift-value-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lift-pill-name {
  font-size: 0.88rem;
  font-weight: 600;
}

/* ============================================================
 * プルダウン
 * ============================================================ */

.lift-select {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--lift-line);
  border-radius: var(--lift-radius);
  background: var(--lift-surface);
  font-size: 0.95rem;
  color: inherit;
}

/* ============================================================
 * 合計表示
 * テーマ側の価格表示を options.js が書き換えるので、ここでは出さない
 * (二重に金額が出ると、どちらが最終価格か分からなくなる)
 * ============================================================ */

.lift-price {
  display: none;
}

/* MDL テーマが advanced_settings.class_name 経由で差し込むフック。
   テーマ側で上書きされる前提なのでここでは何も当てない */
.case-sector {
  /* intentionally empty */
}

/* 依存要素で親が未選択のときは要素ごと消える */
.lift-element[hidden] {
  display: none;
}

/* ============================================================
 * 狭い画面
 * 価格を右端に置き続けるとラベルが潰れるので折り返す
 * ============================================================ */

@media (max-width: 600px) {
  .lift-mount {
    font-size: 14px;
  }

  .lift-element {
    padding: 1.25rem 0.9rem 1.4rem;
  }

  .lift-element legend {
    font-size: 1.05rem;
  }

  .lift-value {
    flex-wrap: wrap;
    padding: 0.95rem 1rem;
  }

  /* ラジオ幅 + gap のぶん字下げして、折り返した行を本文と揃える */
  .lift-value-price,
  .lift-unavailable-note {
    margin-left: 2.15rem;
  }

  .lift-content-collapsible > summary {
    padding: 0.9rem 1rem;
  }

  .lift-style-image_card .lift-values {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

/* コンテナ幅が狭いときは余白を詰める。
   テーマによっては全幅にできない配置に置かれるため、
   ビューポート幅ではなく自分の幅で判断する */
@container (max-width: 420px) {
  .lift-element {
    padding: 1.1rem 0.85rem 1.25rem;
  }
  .lift-value {
    padding: 0.85rem 0.9rem;
    gap: 0.6rem;
  }
  .lift-element legend {
    font-size: 1rem;
    margin-bottom: 0.7rem;
  }
}

.lift-root {
  container-type: inline-size;
}

@media (prefers-reduced-motion: reduce) {
  .lift-value,
  .lift-value input {
    transition: none;
  }
}