/* 配信されるのは public/app.css。client/styles/app.css と同じ内容に保つこと */
/* hono で追加した部品の補助スタイルだけを置く。
   本番デザインは public/forest.css (Rails の _style.html.erb と同一) が担うため、
   body / a / .main / gnav / footer などの既存クラスはここで上書きしないこと。 */

/* Stripe Elements */
.stripe-card-element, .stripe-payment-element { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.purchase-payment { display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
.purchase-payment button { padding: 12px; border: 0; border-radius: 6px; font-size: 16px; cursor: pointer; }
.purchase-payment button[type="submit"] { background: #5c7339; color: #fff; }
.purchase-payment button:disabled { opacity: .6; cursor: default; }
.btn-cancel { background: #eee; color: #333; }
.purchase-summary { margin: 12px 0; }
.purchase-price { font-size: 22px; font-weight: 700; }

/* マーケットの購入手続き: 配送先のラジオボタンは forest.css で display:none のため、見た目は隠したままキーボードで選べるようにする */
#market-page .purchase .record_shipping_address input[type="radio"] {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
#market-page .purchase .record_shipping_address label:focus-within {
  outline: 2px solid #5c7339;
  outline-offset: 3px;
}

/* イベントの購入完了: 自己紹介への案内 (チャットを開くボタン) を .suggest のリンクと同じ見た目にする */
.payment-page button.suggest {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.payment-page .suggest:focus-visible {
  outline: 2px solid #374140;
  outline-offset: 3px;
}

/* ログアウトは POST のフォーム。Rails のリンク (.sign-out .button) と同じ見た目にする */
.mypage__body .sign-out form {
  margin: 0;
}
.mypage__body .sign-out form .button {
  font-family: inherit;
}

/* マーケットの商品のコメントの削除・通報は POST のフォーム。Rails のリンク (a.report > i) と同じ見た目にする */
#market-page .sale-item .comments .comment-ballon .flex > form.comment-action {
  display: contents;
}
#market-page .sale-item .comments .comment-ballon .flex > form.comment-action > button.report {
  font: inherit;
  font-size: 10px;
  line-height: inherit;
  background: none;
}

/* マーケットの取引: 「商品を発送しました」は POST のフォーム。Rails のリンク (.reaction-area > a.btn、幅いっぱい) と同じ幅にする */
#market-page .transaction-detail .reaction-area > form.ship-form {
  width: 100%;
}

/* Rails layouts/_shared_content の <style> (ログイン中の「メールアドレスを更新して下さい」等の案内) */
.shared-message-box {
  position: fixed;
  top: 150px;
  right: 20px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #666;
}
.shared-message {
  display: block;
  padding: 5px;
  box-sizing: border-box;
}
.shared-message + .shared-message {
  margin-top: 10px;
}
.shared-message:hover {
  opacity: 0.8;
}
.shared-message .fa-exclamation-circle {
  color: #c41a22;
}
.shared-message > span {
  font-size: 14px;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .shared-message-box {
    top: unset;
    right: unset;
    bottom: 65px;
    left: 15px;
  }
}

/* 掲示板のコメントの削除は POST のフォーム。Rails のリンク (a.action-link、編集との間 5px) と同じ見た目にする */
#forum-page .show .forum .comment .action-link-form > button.action-link {
  font-family: inherit;
  line-height: inherit;
  border: none;
  cursor: pointer;
}

/* 出品フォームの画像の削除は button。Rails の div.remove と同じ見た目にする (ボタンの既定の枠・余白を消す) */
#market-page .market-form .upload-image-area .item-image button.remove {
  border: none;
  padding: 0;
  font: inherit;
  font-size: 20px;
}

/* 投稿・返信の削除は POST のフォーム。Rails のリンク (.meta > a.delete) と同じ並び・見た目にする */
#thread-page .meta > form.delete-form {
  display: contents;
}
#thread-page .meta > form.delete-form > button.delete {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}