/* ai-review-modal.css */

/* AIレビューモーダル全体ラッパー（オーバーレイ） */
.ai-review-modal {
  position: fixed;
  inset: 0;
  display: none;             /* JSで display:flex に切替 */
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.7);
  z-index: 10000;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
}

/* モーダルコンテンツ */
.ai-review-modal .ai-modal-content {
  position: relative;
  background: #fff;
  width: min(680px, 92vw);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 56px 20px 20px;   /* 上は「閉じる」ボタン分の余白 */
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  box-sizing: border-box;
}

/* 閉じるボタン（テキストのみ／右上／ホバーでリンク色） */
.ai-close-review-modal {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 0;
  background: transparent;
  color: #666;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.ai-close-review-modal:hover {
  color: #0073aa;            /* WPのリンク色に近い青 */
}

/* 投稿ボタン */
.ai-review-form #ai-review-submit,
.ai-review-form .acf-button.button.button-primary.button-large {
  padding: 10px 20px;
  background-color: #6bcb77;
  color: #000;
  font-weight: bold;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.ai-review-form #ai-review-submit:hover,
.ai-review-form .acf-button.button.button-primary.button-large:hover {
  background-color: #000;
  color: #fff;
}
.ai-review-form input[type="submit"]:hover {
  background-color: #000;
  color: #fff;
}

/* 「対象のレビュー」を確実に非表示（正しいキーで） */
.ai-review-form .acf-field-6890927dbcc83,
.ai-review-form .acf-field[data-name="ai_target_ai"],
.ai-review-form .acf-field[data-key="field_6890927dbcc83"] {
  display: none;
}

/* テキストエリア（コメント欄） */
.ai-review-form textarea {
  min-height: 110px;
  font-size: 1em;
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 8px;
}

/* ACFデフォルトラベル */
.ai-review-form .acf-label label {
  font-weight: bold;
  font-size: 1.05em;
  margin-bottom: 5px;
}

/* モーダル内エラー表示 */
.ai-review-modal .ai-modal-error {
  color: #d7263d;
  font-weight: bold;
  margin-bottom: 10px;
  display: none;
}

/* トリガーボタンの見た目 */
.ai-open-modal-btn {
  display: inline-block;
  background: #6bcB77;
  color: #000;
  font-weight: bold;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.2s, color 0.2s;
  border-bottom: none;
}
.ai-open-modal-btn:hover {
  background: #000;
  color: #fff;
  text-decoration: none;
}

/* 星UI（0.5刻み） */
.ai-review-form .acf-field[data-name^="ai_rating_"] select {
  display: none;
}
.ai-review-form .acf-field[data-name^="ai_rating_"] .acf-input {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ai-stars { display: inline-block; vertical-align: middle; }
.ai-stars .star {
  position: relative;
  display: inline-block;
  width: 1.2em;
  font-size: 22px;
  color: #d0d7de;   /* 空き星（☆）色 */
  cursor: pointer;
}
.ai-stars .star + .star { margin-left: 2px; }
.ai-stars .star::before {
  content: '★';
  position: absolute;
  left: 0; top: 0;
  width: 0;         /* full/halfで上書き */
  overflow: hidden;
  color: #f5a623;   /* 塗りつぶし色 */
}
.ai-stars .star.full::before { width: 100%; }
.ai-stars .star.half::before { width: 50%; }

/* ===== 評価(レーダー用) 行の余白と整列を調整 ===== */
.ai-review-form .acf-field[data-name^="ai_rating_"] {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ラベルと★の距離を詰める */
.ai-review-form .acf-field[data-name^="ai_rating_"] .acf-label {
  margin-bottom: 4px;
}
.ai-review-form .acf-field[data-name^="ai_rating_"] .acf-label label {
  margin: 0 0 4px 0;
  line-height: 1.2;
}

/* ★が下で切れないよう高さ/行間を調整（中央寄せ） */
.ai-review-form .acf-field[data-name^="ai_rating_"] .acf-input {
  display: flex;
  align-items: center;
  gap: .4rem;
  line-height: 1;         /* 重要：切れ対策 */
  min-height: 26px;       /* 重要：切れ対策 */
}

/* ★自体の行高を固定（切れ対策） */
.ai-stars { line-height: 1; }
.ai-stars .star {
  font-size: 20px;        /* 少しだけ小さくして安全マージン */
  height: 1em;            /* 行高と同じにして揃える */
}

/* 必須エラー表示（JSが挿入する .ai-field-error） */
.ai-review-modal .ai-field-error {
  color: #e53935;      /* 赤 */
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
}