@charset "UTF-8";

/* ==========================================================================
   1. 事前査定専用：動的商品フィールド ＆ 削除アニメーション
   ========================================================================== */
.dynamic-field {
    background-color: var(--form-bg-base, #fbfbfb);
    border: 2px dashed var(--form-bg-lightgrey, #efefef);
    border-radius: 4px;
    margin-bottom: 1.75rem;
    padding: 1.75rem;
    box-sizing: border-box;
}

/* 削除時のCSS Transitionアニメーションと組み合わせる、商品削除ボタンの右配置設定 */
.remove-btn {
    float: right;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
}

/* ==========================================================================
   2. 事前査定専用：商品基本情報（メーカー・型番・商品名）
   ========================================================================== */
.required-one-group label:has(input[name^="your-manufacturer_"]),
.required-one-group label:has(input[name^="your-model-number_"]),
.required-one-group label:has(input[name^="your-product-name_"]) {
  display: block !important;
  width: 100% !important;
  margin-bottom: var(--form-block-gap, 1rem) !important;
}
.required-one-group label:has(input[name^="your-manufacturer_"]) strong,
.required-one-group label:has(input[name^="your-model-number_"]) strong,
.required-one-group label:has(input[name^="your-product-name_"]) strong {
  display: inline-block !important;
  font-size: 15px !important;
  color: var(--form-text-contrast) !important;
  margin-bottom: 8px !important; 
}

/* 商品画像アップロード枠 */
.wpcf7 label:has(input[name^="product-images_"]) {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}
.wpcf7 label:has(input[name^="product-images_"]) strong {
  display: inline-block;
  font-size: 15px;
  color: var(--form-text-contrast);
  margin-bottom: 8px;
}
.wpcf7 label input[name^="product-images_"] {
  display: block;
  width: 100%;
  font-size: 15px;
  font-weight: bold;
  color: var(--form-border-grey);
  background-color: var(--form-bg-base);
  border: 2px dashed var(--form-bg-lightgrey);
  border-radius: 8px;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.25s ease;
  cursor: pointer;
  padding: 20px 16px;
}
.wpcf7 label input[name^="product-images_"]:hover {
  background-color: var(--form-bg-lightgrey);
  border-color: var(--form-primary-color);
  color: var(--form-primary-color);
}
.wpcf7 label input[name^="product-images_"]::file-selector-button,
.wpcf7 label input[name^="product-images_"]::-webkit-file-upload-button { display: none !important; }
.wpcf7 label input[name^="product-images_"]::before {
  content: '\f03e';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-right: 8px;
  font-size: 16px;
  color: inherit;
  display: inline-block;
  vertical-align: middle;
}

/* ==========================================================================
   3. 事前査定専用：商品状態・動作状況・付属品ラジオボタン
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. 商品状態（radio-product-condition_）
   -------------------------------------------------------------------------- */
.field-group label:has(input[name^="radio-product-condition_"]) {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  height: 72px !important;
  width: 100% !important;
  padding: 12px 20px !important;
  margin: 0 0 12px 0 !important;
  background-color: #ffffff !important;
  border: 2px solid var(--form-bg-lightgrey) !important;
  border-radius: 8px !important;
  color: var(--form-text-contrast) !important;
  font-size: 15px !important; 
  font-weight: bold !important;
  line-height: var(--form-lh-small) !important; 
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}

.field-group label:has(input[name^="radio-product-condition_"]):hover {
  background-color: var(--form-bg-base) !important;
  border-color: var(--form-border-grey) !important;
}

.field-group label:has(input[name^="radio-product-condition_"]):has(input:checked) {
  background-color: var(--form-primary-bg-light) !important;
  border-color: var(--form-primary-color) !important;
  color: var(--form-primary-color) !important;
}

/* TABキーでのフォーカス移動を100%捕捉し、カード全体へ美しい輪郭線を明示 */
.field-group label:has(input[name^="radio-product-condition_"]):has(input:focus-visible) {
  outline: 2px solid var(--form-primary-color) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--form-primary-bg-light) !important;
}

/* --------------------------------------------------------------------------
   B. 動作状況（radio-product-operation-status_）
   -------------------------------------------------------------------------- */
.field-group label:has(input[name^="radio-product-operation-status_"]) {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 54px !important;
  width: 100% !important; 
  padding: 12px 16px !important;
  margin: 0 !important;
  background-color: #ffffff !important;
  border: 2px solid var(--form-bg-lightgrey) !important;
  border-radius: 8px !important;
  color: var(--form-text-contrast) !important;
  font-size: 15px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.field-group label:has(input[name^="radio-product-operation-status_"]):hover {
  background-color: var(--form-bg-base) !important;
  border-color: var(--form-border-grey) !important;
}

.field-group label:has(input[name^="radio-product-operation-status_"]):has(input:checked) {
  background-color: var(--form-primary-bg-light) !important;
  border-color: var(--form-primary-color) !important;
  color: var(--form-primary-color) !important;
}

/* TABキーでのフォーカス移動を100%捕捉し、カード全体へ美しい輪郭線を明示 */
.field-group label:has(input[name^="radio-product-operation-status_"]):has(input:focus-visible) {
  outline: 2px solid var(--form-primary-color) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--form-primary-bg-light) !important;
}

/* --------------------------------------------------------------------------
   C. 付属品4項目（元箱・取扱説明書・電源アダプター・動作に必須の付属品）
   -------------------------------------------------------------------------- */
.radio-sub-group label:has(input[name^="radio-product-original-box_"]),
.radio-sub-group label:has(input[name^="radio-product-operating-instructions_"]),
.radio-sub-group label:has(input[name^="radio-product-power-adapter_"]),
.radio-sub-group label:has(input[name^="radio-product-accessories-essential-for-operation_"]) {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 54px !important;
  width: 100% !important; 
  padding: 12px 16px !important;
  margin: 0 !important;
  background-color: #ffffff !important;
  border: 2px solid var(--form-bg-lightgrey) !important;
  border-radius: 8px !important;
  color: var(--form-text-contrast) !important;
  font-size: 15px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}

.radio-sub-group label:has(input[name^="radio-product-original-box_"]):hover,
.radio-sub-group label:has(input[name^="radio-product-operating-instructions_"]):hover,
.radio-sub-group label:has(input[name^="radio-product-power-adapter_"]):hover,
.radio-sub-group label:has(input[name^="radio-product-accessories-essential-for-operation_"]):hover {
  background-color: var(--form-bg-base) !important;
  border-color: var(--form-border-grey) !important;
}

.radio-sub-group label:has(input[name^="radio-product-original-box_"]):has(input:checked),
.radio-sub-group label:has(input[name^="radio-product-operating-instructions_"]):has(input:checked),
.radio-sub-group label:has(input[name^="radio-product-power-adapter_"]):has(input:checked),
.radio-sub-group label:has(input[name^="radio-product-accessories-essential-for-operation_"]):has(input:checked) {
  background-color: var(--form-primary-bg-light) !important;
  border-color: var(--form-primary-color) !important;
  color: var(--form-primary-color) !important;
}

/* TABキーでのフォーカス移動を100%捕捉し、カード全体へ美しい輪郭線を明示 */
.radio-sub-group label:has(input[name^="radio-product-original-box_"]):has(input:focus-visible),
.radio-sub-group label:has(input[name^="radio-product-operating-instructions_"]):has(input:focus-visible),
.radio-sub-group label:has(input[name^="radio-product-power-adapter_"]):has(input:focus-visible),
.radio-sub-group label:has(input[name^="radio-product-accessories-essential-for-operation_"]):has(input:focus-visible) {
  outline: 2px solid var(--form-primary-color) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--form-primary-bg-light) !important;
}

/* --------------------------------------------------------------------------
   D. ラジオボタン本体の一括アクセシブル非表示共通設定
   -------------------------------------------------------------------------- */
/* display:noneを完全に廃止。見た目を1pxに縮小して隠しつつ、TABフォーカスを正常に作動させる実務上の最善規格 */
.field-group label input[name^="radio-product-condition_"],
.field-group label input[name^="radio-product-operation-status_"],
.radio-sub-group label input[name^="radio-product-original-box_"],
.radio-sub-group label input[name^="radio-product-operating-instructions_"],
.radio-sub-group label input[name^="radio-product-power-adapter_"],
.radio-sub-group label input[name^="radio-product-accessories-essential-for-operation_"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================================
   4. 事前査定専用：確認画面の区切りブロック
   ========================================================================== */
.confirm-product-block {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
}

/* ==========================================================================
 * 【レスポンシブ補正】商品ヘッダー領域の横並び死守設計
 * 画面幅が狭くなった際、Gutenberg標準カラムの縦並び化（カラム落ち）を完全に防止
 * ==========================================================================
 */

/* 「商品 X」と「この商品を削除」を直接内包している一番外側の親コンテナを狙い撃ち */
.wp-block-columns:has(.product-title):has(.remove-btn) {
  display: flex !important;
  flex-direction: row !important;  /* スマホ環境でも縦並び（column）への変化を強力に阻止し、横並びを固定 */
  flex-wrap: nowrap !important;     /* 絶対に2行に改行（カラム落ち）させない */
  justify-content: space-between !important; /* 両端に美しく配置 */
  align-items: center !important;   /* 上下中央揃え */
  width: 100% !important;
  gap: 15px !important;            /* タイトルとボタンの間の安全な最低余白 */
}

/* タイトル側とボタン側の「幅の自動調整」をそれぞれ最適化 */
.wp-block-columns:has(.product-title):has(.remove-btn) .wp-block-column {
  margin: 0 !important;            /* WordPress標準カラムが持つ不要なスマホ用余白を相殺 */
  width: auto !important;          /* 幅100%化による縦割れを防止 */
  flex-basis: auto !important;
}

/* 「商品 X」の見出しが含まれる左側カラムの挙動補正 */
.wp-block-columns:has(.product-title):has(.remove-btn) .wp-block-column:has(.product-title) {
  flex-grow: 1 !important;         /* 画面幅に合わせて伸縮を許可 */
  flex-shrink: 1 !important;
  min-width: 0 !important;         /* テキストの溢れ・改行暴走を100%防ぐ魔法の1行 */
}

/* 「商品 X」のテキスト自体の省略表示（三点リーダー）仕様 */
.product-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important; /* 万が一、画面幅が極端に狭くなった場合は美しく「商品1…」と省略 */
}

/* 「この商品を削除」ボタンが含まれる右側カラム・ボタン自体の幅ディフェンス（固定） */
.wp-block-columns:has(.product-title):has(.remove-btn) .wp-block-column:has(.remove-btn),
.remove-btn {
  flex-shrink: 0 !important;       /* 画面幅がどれだけ狭くなっても、ボタンの横幅が絶対に潰れないように死守 */
  white-space: nowrap !important;   /* ボタン内の文字「この商品を削除」の改行も完全に阻止 */
}