/* ボタン（すべての画面で共通） */
/* ---- ボタン ---- */

.button {
  min-height: 38px;
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}

.button:hover:not(:disabled) {
  background: var(--surface-2);
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

.button.primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.button.subtle {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.button.small {
  min-height: 30px;
  padding: 2px 8px;
}

.icon-button {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex: none;
}

.icon-button:hover {
  background: var(--surface-2);
  color: var(--danger);
}

/* 削除の「×」を大きめに出すボタン（マイセットの名前の行と、マイ護石の表。押す場所が分かりやすいように。ユーザーの指示） */
.icon-button.delete-x {
  font-size: 1.4rem;
  line-height: 1;
}

/*
 * 画面の下に留まるボタンの並び（検索条件の欄の「検索」ボタンの並びと、検索結果の欄の「トップに戻る」）。
 * 並びを入れている欄が画面にあるあいだだけ、画面の下に留まる（sticky）。
 * スマホの画面の下にアンカー広告が出ているあいだは、広告の上に留まる（ads.css の .has-ad-anchor .actions）
 */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: sticky;
  bottom: 0;
  padding: 10px 0;
  background: var(--bg);
}

.actions .primary {
  flex: 1 1 140px;
}

/* 検索条件の上段の下の並び（幅 861px 以上では全幅）は、ボタンが横に伸びすぎないよう、中央にまとめる */
@media (min-width: 861px) {
  .search-form > .actions {
    justify-content: center;
  }

  .search-form > .actions .primary {
    flex: 0 1 360px;
  }
}