/* O-28, payments and booking mode: what apartments.css's form parts don't cover. */
.bh-pay-meta { margin: 0; color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); overflow-wrap: anywhere; }
.bh-pay-meta strong { color: var(--ink-1); }

/* Online payment: the title, its state and the locked Switch (O28-not-verified: a dashed track that can't move). */
.bh-pay-head { display: flex; align-items: center; gap: var(--space-3); }
.bh-pay-head > h2 { flex: 1 1 auto; min-width: 0; margin: 0; }
.bh-pay-state { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-2); font-size: var(--text-small); font-weight: var(--weight-bold); }
.bh-pay-switch { position: relative; flex: none; width: 52px; height: var(--target-min); padding: 0; border: 0; background: transparent; cursor: not-allowed; }
.bh-pay-switch > span { position: absolute; left: 4px; top: 50%; width: 44px; height: 24px; margin-top: -12px; box-sizing: border-box; border: 1px dashed var(--ink-3); border-radius: var(--radius-pill); background: var(--sunken); }
.bh-pay-switch > span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: var(--radius-pill); background: var(--card); box-shadow: 0 0 0 1px var(--ink-3); }
.bh-pay-switch:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-control); }

/* The checklist that turns it on: a tick for what is done, an empty circle for the rest. */
.bh-pay-steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.bh-pay-steps > li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--ink-3); }
.bh-pay-steps > li.is-done { color: var(--success-ink); }
.bh-pay-steps > li > span { display: grid; gap: var(--space-1); min-width: 0; color: var(--ink-1); }
.bh-pay-step-name { font-weight: var(--weight-bold); overflow-wrap: anywhere; }

/* The steppers' value is text ("30%", "7 days before"), so it gets room. */
.bh-pay-stepper { justify-self: start; }
.bh-pay-stepper > .bh-stepper-value { min-width: 9ch; text-align: center; }

/* The live split: label left, amount right; the fee is muted and the owner's two lines stand out. */
.bh-pay-split { display: grid; gap: var(--space-2); }
.bh-pay-split > p { margin: 0; }
.bh-pay-lines { width: 100%; border-collapse: collapse; }
.bh-pay-lines th { padding: var(--space-2) var(--space-3) var(--space-2) 0; text-align: left; font-weight: var(--weight-regular); }
.bh-pay-lines td { padding: var(--space-2) 0; text-align: right; white-space: nowrap; vertical-align: top; }
.bh-pay-lines tr + tr > * { border-top: 1px solid var(--line); }
.bh-pay-lines tr.is-fee > * { color: var(--ink-2); }
.bh-pay-lines tr.is-total > * { font-weight: var(--weight-bold); }

/* The rule as guests see it. */
.bh-pay-rule { display: grid; gap: var(--space-1); margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--sunken); }
.bh-pay-rule > p { margin: 0; }

.bh-pay-recipient { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }