/* file: contents/themes/kawaipublishing/assets/css/book-actions.css */
/* 書籍ボタン行とボタン見た目（縦積み／R=6／aとbuttonを統一） */

/* 行コンテナ（常に縦積み） */
.book-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  margin-top: 12px;
}

/* テキスト（リード／注意） */
.book-actions__lead {
  margin: 0 0 8px;
  width: 100%;
  line-height: 1.7;
  color: #333;
}
.book-actions__notice {
  margin: 0 0 8px;
  width: 100%;
  color: #b45309;
  font-weight: 600;
}

/* カートフォーム */
.book-actions__cart {
  display: block;
  width: 100%;
}

/* ボタン（a / button / input を統一：レイアウト＋基本見た目） */
:where(a.btn, button.btn, input[type="submit"].btn, input[type="button"].btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 6px; /* R=6 */
  font-weight: 700;
  text-decoration: none;
  border: none;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  cursor: pointer;
}

/* フェード（PC等のみ）— 通常セレクタで特異度を持たせる */
a.btn,
button.btn,
input[type="submit"].btn,
input[type="button"].btn {
  transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  a.btn:hover,
  button.btn:hover,
  input[type="submit"].btn:hover,
  input[type="button"].btn:hover {
    opacity: 0.6;
  }
  /* 例外：.no-fade は無効化 */
  a.btn.no-fade:hover,
  button.btn.no-fade:hover,
  input[type="submit"].btn.no-fade:hover,
  input[type="button"].btn.no-fade:hover {
    opacity: 1;
  }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  a.btn,
  button.btn,
  input[type="submit"].btn,
  input[type="button"].btn {
    transition: none;
  }
}

/* 配色（プライマリ）：状態でも色は変えない（opacity だけ変化） */
.btn--primary {
  background: #0072ba;
  color: #fff;
}
.btn--primary:where(:hover, :active, :focus, :focus-visible) {
  background: #0072ba;
  color: #fff;
}

/* アイコン（テキスト左の20px） */
.btn__icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  flex: 0 0 20px;
}

/* 検索結果カード内（縦積み固定） */
.result-card__actions {
  display: block;
  margin-top: 6px;
}
.result-card__actions .book-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  justify-items: stretch;
  align-items: stretch;
  margin-top: 0;
}
.result-card__actions .book-actions > * {
  margin-top: 0;
}

/* 書籍詳細ページ（最大幅ルール）— PC:420px / SP:330px 中央寄せ */
.book-page .book-cart .book-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  justify-items: end;
  align-items: stretch;
  justify-content: center;
  align-content: stretch;
  margin: 40px 20px 40px 0;
}
@media (min-width: 880px) {
  .book-page .book-cart .book-actions :where(a.btn, button.btn) {
    max-width: 420px;
  }
}
@media (max-width: 879px) {
  .book-page .book-cart {
    display: flex;
    justify-content: center;
  }
  .book-page .book-cart .book-actions {
    justify-items: center;
    width: 100%;
    max-width: 330px;
    margin: 0 auto;
  }
  .book-page .book-cart .book-actions :where(a.btn, button.btn) {
    width: 100%;
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 追加ユーティリティ（任意） */
.btn--withicon {
  gap: 8px;
}
.btn--withicon::before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  flex: 0 0 20px;
}
.btn--telephone::before {
  background-image: url("../images/common/telephone_icon.svg");
}
.btn--orderdl::before {
  background-image: url("../images/common/order_dl_icon.svg");
}

/* ===== 検索結果ページの“保険” =====
   他CSSが transition を上書きしている場合でも確実に効かせる
   （不要になったら下の2ブロックは削除OK）
*/
.search-page .result-card__actions a.btn,
.search-page .result-card__actions button.btn,
.search-page .result-card__actions input[type="submit"].btn,
.search-page .result-card__actions input[type="button"].btn {
  transition: opacity 0.3s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .search-page .result-card__actions a.btn:hover,
  .search-page .result-card__actions button.btn:hover,
  .search-page .result-card__actions input[type="submit"].btn:hover,
  .search-page .result-card__actions input[type="button"].btn:hover {
    opacity: 0.6 !important;
  }
}