/*
 * HAIRA 決済: GMO のカード入力欄（ts_pay_card_form_html()）
 * 見た目は変数だけで変えられる（v2 のデザインに合わせるときは、外側の要素で --ts-pay-* を上書きする）。
 * iframe の中（カード番号などの文字）は CSS が効かないため、HairaPay.card( el, { style } ) で指定する。
 *
 * エラーの表示（HairaPay の card.setError）: カード入力欄の枠全体（.ts-pay-card.is-error）を赤い枠・薄い赤の背景にして、
 * 枠のいちばん上に赤い文（.ts-pay-error）、支払いボタンのすぐ近くにも同じ文（.ts-pay-btnerr）を出す。
 * 赤はデザイン v2 のトークン（--danger #C81E43 / --danger-soft #FFF0F3 / --danger-line #F5B8C6）と同じ値。
 */
.ts-pay-card, .ts-pay-btnerr, [data-pay-frame] {
    --ts-pay-danger: #C81E43;
    --ts-pay-danger-soft: #FFF0F3;
    --ts-pay-danger-line: #F5B8C6;
}
.ts-pay-card {
    --ts-pay-border: #e5e7eb;
    --ts-pay-border-focus: var(--primary, #6f56ee);
    --ts-pay-radius: 10px;
    --ts-pay-bg: #fff;
    --ts-pay-label: #374151;
    --ts-pay-hint: #6b7280;
    --ts-pay-error: var(--ts-pay-danger);
    --ts-pay-error-bg: var(--ts-pay-danger-soft);
    --ts-pay-gap: 12px;
    display: flex;
    flex-direction: column;
    gap: var(--ts-pay-gap);
    min-width: 0;
}
.ts-pay-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ts-pay-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ts-pay-gap); }
.ts-pay-row-2 > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ts-pay-label { font-size: 13px; font-weight: 600; color: var(--ts-pay-label); }
.ts-pay-field {
    box-sizing: border-box;
    min-height: 46px;
    padding: 12px;
    border: 1.5px solid var(--ts-pay-border);
    border-radius: var(--ts-pay-radius);
    background: var(--ts-pay-bg);
    transition: border-color .15s;
    min-width: 0;
}
.ts-pay-field:focus-within { border-color: var(--ts-pay-border-focus); }
.ts-pay-field iframe { display: block; width: 100% !important; }
.ts-pay-holder {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    padding: 12px;
    font-size: 16px;            /* iOS の自動拡大を避ける */
    border: 1.5px solid var(--ts-pay-border);
    border-radius: var(--ts-pay-radius);
    background: var(--ts-pay-bg);
    letter-spacing: .02em;
}
.ts-pay-holder:focus { outline: none; border-color: var(--ts-pay-border-focus); }
/* 枠の中のエラー文（枠のいちばん上）。.post-content p などの段落の余白に負けないよう、外枠のクラスと組み合わせる */
.ts-pay-card .ts-pay-error, .ts-pay-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--ts-pay-error);
    overflow-wrap: anywhere;
}
.ts-pay-error::before, .ts-pay-btnerr__msg::before {
    content: "!";
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--ts-pay-danger);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}
.ts-pay-error:focus { outline: none; }
.ts-pay-error:focus-visible { outline: 3px solid var(--ts-pay-danger); outline-offset: 3px; border-radius: 4px; }
.ts-pay-error[hidden], .ts-pay-loading[hidden] { display: none; }
/* エラーのときの枠全体: 赤い枠・薄い赤の背景。欄の幅は変えない（左右は外側へ 12px 広げた分を負のマージンで打ち消す。
   上下は枠とエラー文の分だけ下の内容が下がる。上下を外側へ広げると、すぐ下の注意書きなどに枠が重なるため） */
.ts-pay-card.is-error {
    margin-left: -12px;
    margin-right: -12px;
    padding: 12px 10px;
    border: 2px solid var(--ts-pay-danger);
    border-radius: 16px;
    background: var(--ts-pay-danger-soft);
}
.ts-pay-card.is-error .ts-pay-field,
.ts-pay-card.is-error .ts-pay-holder { border-color: var(--ts-pay-danger); background: #fff; }
.ts-pay-card.is-error .ts-pay-field:focus-within,
.ts-pay-card.is-error .ts-pay-holder:focus { box-shadow: 0 0 0 4px rgba(200, 30, 67, .18); }
/* 枠がすでにあるページ（data-pay-frame の要素の中のカード入力欄。依頼フォームの「お支払い方法」）: その枠を赤くする */
[data-pay-frame].is-pay-error {
    border-color: var(--ts-pay-danger) !important;
    box-shadow: inset 0 0 0 1px var(--ts-pay-danger);
    background: var(--ts-pay-danger-soft) !important;
}
[data-pay-frame] .ts-pay-card.is-error { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
/* 支払いボタンのすぐ近く（ボタンの上）のエラー文（ts_pay_btn_error_html()） */
.ts-pay-btnerr {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
    max-width: 100%;
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1.5px solid var(--ts-pay-danger-line);
    border-radius: 12px;
    background: var(--ts-pay-danger-soft);
    color: var(--ts-pay-danger);
    text-align: left;
}
.ts-pay-btnerr[hidden], .ts-pay-btnerr__go[hidden] { display: none; }
.ts-pay-btnerr .ts-pay-btnerr__msg {
    flex: 1 1 220px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--ts-pay-danger);
    overflow-wrap: anywhere;
}
.ts-pay-btnerr__go {
    flex: none;
    min-height: 44px;
    margin-left: auto;
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--ts-pay-danger);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.ts-pay-btnerr__go:focus-visible { outline: 3px solid var(--ts-pay-danger); outline-offset: 2px; border-radius: 4px; }
.ts-pay-loading { margin: 0; font-size: 12px; color: var(--ts-pay-hint); }
.ts-pay-hint { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ts-pay-hint); }
.ts-pay-hint a { color: inherit; text-decoration: underline; }
/* 選べない支払い方法（「準備中」） */
.ts-pay-soon { opacity: .55; cursor: not-allowed; }
.ts-pay-soon-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    font-size: 11px;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 999px;
    vertical-align: middle;
}
@media (max-width: 360px) {
    .ts-pay-row-2 { grid-template-columns: 1fr; }
}