/* クリスマストレイン申込フォーム: お申込み希望アイテムの画像つき選択肢。
   可能なブラウザ幅ではカードを横並びにし、狭い幅では折り返す。
   チェックボックスの見た目（丸マーク等）は親テーマ form.css の共通スタイルを使う。 */

.wpcf7-form .wpcf7-checkbox.xmas-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 最大でも 2×2 */
  gap: 16px;
  max-width: 560px;
}

/* 共通の縦並び指定（display:block・margin）をカード用に上書き */
.wpcf7-form .wpcf7-checkbox.xmas-items .wpcf7-list-item {
  display: block;
  margin: 0;
}

/* カード内は「画像 → ○＋名称 → 価格 → サイズ」の段組み。
   価格・サイズは ::after（選択肢の並び順に対応）で出力し、改行位置を固定する。 */
.wpcf7-form .wpcf7-checkbox.xmas-items .wpcf7-list-item label {
  /* 1fr の両サイド列で「○＋名称」を中央寄せしつつ、カード全幅（画像・価格行）を保つ */
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  align-items: center;
  column-gap: 8px;
  row-gap: 8px;
  padding: 12px;
  border: 1px solid #e3ddd8;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wpcf7-form .wpcf7-checkbox.xmas-items .wpcf7-list-item label input[type="checkbox"] { grid-column: 2; }
.wpcf7-form .wpcf7-checkbox.xmas-items .wpcf7-list-item .wpcf7-list-item-label { grid-column: 3; }

.wpcf7-form .wpcf7-checkbox.xmas-items .wpcf7-list-item label:hover {
  border-color: var(--aureate);
}

.wpcf7-form .wpcf7-checkbox.xmas-items .wpcf7-list-item:has(input:checked) label {
  border-color: var(--aureate);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aureate) 25%, transparent);
}

/* アイテム画像（選択肢の並び順に対応: 貨車・広告看板・家屋・気球）。カード全幅の1行目 */
.wpcf7-form .wpcf7-checkbox.xmas-items .wpcf7-list-item label::before {
  content: "";
  grid-column: 1 / -1;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.wpcf7-form .wpcf7-checkbox.xmas-items .wpcf7-list-item:nth-child(1) label::before { background-image: url(../images/christmas-train/freight-car.png); }
.wpcf7-form .wpcf7-checkbox.xmas-items .wpcf7-list-item:nth-child(2) label::before { background-image: url(../images/christmas-train/billboard.png); }
.wpcf7-form .wpcf7-checkbox.xmas-items .wpcf7-list-item:nth-child(3) label::before { background-image: url(../images/christmas-train/house.png); }
.wpcf7-form .wpcf7-checkbox.xmas-items .wpcf7-list-item:nth-child(4) label::before { background-image: url(../images/christmas-train/balloon.png); }

/* 2行目: ○（チェック）＋アイテム名を中央に横並び */
.wpcf7-form .wpcf7-checkbox.xmas-items .wpcf7-list-item-label {
  font-size: 14px;
  font-weight: 700;
}

/* 3行目以降: 価格（1行）→ サイズ（次の行）。\A で改行位置を固定する */
.wpcf7-form .wpcf7-checkbox.xmas-items .wpcf7-list-item label::after {
  grid-column: 1 / -1;
  white-space: pre-line;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: var(--warm-grey, #6e6e6e);
}
.wpcf7-form .wpcf7-checkbox.xmas-items .wpcf7-list-item:nth-child(1) label::after { content: "￥165,000\A 高さ2.5×幅25㎝～高さ8㎝×幅16㎝"; }
.wpcf7-form .wpcf7-checkbox.xmas-items .wpcf7-list-item:nth-child(2) label::after { content: "￥150,000\A 高さ10㎝×幅24㎝"; }
.wpcf7-form .wpcf7-checkbox.xmas-items .wpcf7-list-item:nth-child(3) label::after { content: "￥100,000\A 高さ9㎝×幅17㎝～高さ12㎝×幅38㎝"; }
.wpcf7-form .wpcf7-checkbox.xmas-items .wpcf7-list-item:nth-child(4) label::after { content: "￥220,000\A 高さ51㎝×直径46㎝"; }