/* ============================================================
   Form validation feedback
   - .field-error: 各フィールド直下に JS 動的挿入
   - .avap-form-toast: フォーム送信結果の右下トースト
   ============================================================ */

.field-error {
  margin: var(--sp-1) 0 0;
  color: var(--error);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: var(--lh-body);
}

/* aria-invalid が付いた input/select/textarea を赤枠にする。
   focus 時も赤枠を維持し、error state が focus 中も見えるようにする。
   checkbox はネイティブ UI に border が付かず outline が違和感になるため除外し、
   代わりに親コンテナ (.contact-agreement / .dl-form__agree) で示す。 */
[aria-invalid="true"]:not(button):not([type="checkbox"]) {
  border-color: var(--error) !important;
}
[aria-invalid="true"]:not(button):not([type="checkbox"]):focus-visible {
  outline-color: var(--error) !important;
}
.contact-agreement:has(input[type="checkbox"][aria-invalid="true"]),
.dl-form__agree:has(input[type="checkbox"][aria-invalid="true"]) {
  outline: var(--bw-2) solid var(--error);
  outline-offset: 0;
}

/* checkbox の field-error は agree wrapper 内配置だと label と横並びになり見苦しい。
   wrapper の直後 (枠外) に配置し、他フィールドと同じくらいの距離感に詰める。
   - contact 側: .contact-agreement の margin-bottom (sp-8) を打ち消し、
     代わりに field-error に margin-bottom を移して後続要素との距離を維持
   - dl 側: .dl-form の grid gap (sp-5) を負マージンで打ち消し */
.contact-agreement:has(+ .field-error) {
  margin-bottom: 0;
}
.contact-agreement + .field-error {
  margin-top: var(--sp-1);
  margin-bottom: var(--sp-8);
}
.dl-form__agree + .field-error {
  margin-top: calc(-1 * var(--sp-5) + var(--sp-1));
}

/* 姓/名 のような 2 列 grid で片方だけに .field-error が入ると、
   エラーなし側の cell が stretch されて中の input が縦に伸びる。
   cell を上端揃いにして input の高さを両側で揃える。 */
.field-row,
.dl-form__row {
  align-items: start;
}

.avap-form-toast {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  z-index: 2000;
  background: var(--ink);
  color: #fff;
  padding: var(--sp-4) var(--sp-5);
  box-shadow: 0 10px 30px rgba(17, 37, 62, 0.35);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  max-width: 360px;
  opacity: 0;
  transform: translateY(var(--sp-3));
  transition:
    opacity var(--t),
    transform var(--t);
  pointer-events: none;
}
.avap-form-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.avap-form-toast--error {
  background: var(--error);
}

@media (max-width: 560px) {
  .avap-form-toast {
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: var(--sp-4);
    max-width: none;
  }
}