/* みっけ Stripe 個人協賛（テーマのトークン --ink / --teal などを使う） */
.mk-stripe { max-width: 560px; margin: 0 auto; }
.mk-stripe__form { display: grid; gap: 18px; }
.mk-stripe__form[hidden], .mk-stripe__pay[hidden], .mk-stripe__other[hidden] { display: none; }

.mk-stripe__label { display: block; font-weight: 700; margin-bottom: 6px; }
.mk-stripe__req, .mk-stripe__opt { font-size: .75em; padding: 1px 6px; border-radius: 4px; margin-left: 4px; vertical-align: 1px; }
.mk-stripe__req { background: var(--orange, #ea6d43); color: #fff; }
.mk-stripe__opt { background: var(--paper-2, #fdf8e4); color: var(--ink-3, #8a6a52); }
.mk-stripe__hint { display: block; font-size: .85em; color: var(--ink-3, #8a6a52); margin-top: 4px; }
.mk-stripe__error { display: block; color: var(--rust, #c0512c); font-size: .9em; margin: 4px 0 0; }
.mk-stripe__error:empty { display: none; }

.mk-stripe__amounts { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mk-stripe__amounts legend { width: 100%; }
.mk-stripe__amount { position: relative; }
.mk-stripe__amount input { position: absolute; opacity: 0; }
.mk-stripe__amount span {
	display: inline-block; padding: 10px 16px; border-radius: 999px; cursor: pointer;
	border: 2px solid var(--ink, #4a2a17); background: var(--paper, #fffdf4); font-weight: 700;
}
.mk-stripe__amount input:checked + span { background: var(--teal, #26c6b7); color: #fff; border-color: var(--teal-dark, #149185); }
.mk-stripe__amount input:focus-visible + span { outline: 3px solid var(--yellow, #f2c94c); outline-offset: 2px; }
.mk-stripe__other { display: flex; align-items: center; gap: 6px; width: 100%; }
.mk-stripe__other input { width: 10em; }

.mk-stripe__field input, .mk-stripe__field textarea, .mk-stripe__other input {
	width: 100%; padding: 10px 12px; font: inherit; border-radius: 8px;
	border: 2px solid var(--ink-3, #8a6a52); background: #fff; color: var(--ink, #4a2a17);
}
.mk-stripe__check { display: flex; gap: 8px; align-items: flex-start; }
.mk-stripe__check input { margin-top: .35em; }

.mk-stripe__submit { justify-self: center; justify-content: center; text-align: center; min-width: 14em; }
/* 入力欄と、それに付くチェックボックスはひとまとまりに（間をつめる） */
.mk-stripe__group { display: grid; gap: 8px; }
.mk-stripe__submit:disabled { opacity: .6; cursor: wait; }

.mk-stripe__back { background: none; border: 0; padding: 0 0 12px; color: var(--teal-deep, #2f6e64); cursor: pointer; font: inherit; text-decoration: underline; }
.mk-stripe__checkout { background: #fff; border-radius: 12px; padding: 16px; min-height: 200px; }

.mk-stripe__result { max-width: 560px; margin: 0 auto; padding: 24px; border-radius: 12px; background: var(--paper, #fffdf4); border: 2px solid var(--ink, #4a2a17); text-align: center; }
.mk-stripe__result-title { font-size: 1.4em; font-weight: 700; color: var(--teal-dark, #149185); }
.mk-stripe__result.is-error { border-color: var(--rust, #c0512c); }

/* 開発用の帯（管理者にだけ出る） */
.mk-stripe__dev { max-width: 560px; margin: 0 auto 20px; padding: 10px 14px; border: 2px dashed var(--ink-3, #8a6a52); border-radius: 8px; font-size: .9em; background: var(--paper-2, #fdf8e4); }
.mk-stripe__badge { display: inline-block; padding: 1px 8px; border-radius: 4px; color: #fff; margin-right: 6px; }
.mk-stripe__badge.is-test { background: var(--teal-dark, #149185); }
.mk-stripe__badge.is-live { background: var(--rust, #c0512c); }

.mk-stripe__result p { margin: .6em 0; }
.mk-stripe__result-note { font-size: .92em; color: var(--ink-2, #6b4a33); }
/* その他の金額: 入力欄はせまく、単位は折り返さない */
.mk-stripe__other input { width: 9em; max-width: 60%; flex: none; }
.mk-stripe__other span { white-space: nowrap; }
.mk-stripe__legal { font-size: .85em; line-height: 1.8; color: var(--ink-2, #6b4a33); text-align: center; margin: 0; }
.mk-stripe__legal a { color: var(--teal-deep, #2f6e64); }