/* Billing parts: shared, opt-in components. All colour and type come from the design system. */
.bp-banner {
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  padding:10px 14px;
  border-radius:var(--radius-md);
  font-family:var(--font-sans);
  font-size:12px;
  line-height:1.5
}
.bp-banner-copy {
  min-width:0
}
.bp-banner-copy > div {
  display:inline
}
.bp-banner-lead::after {
  content:" "
}
.bp-banner-lead {
  font-weight:700
}
.bp-banner-action {
  flex:none;
  white-space:nowrap;
  font:inherit;
  font-weight:600;
  color:inherit;
  background:transparent;
  border:1px solid currentColor;
  border-radius:var(--radius-btn);
  padding:8px 14px;
  cursor:pointer;
  text-decoration:none
}
.bp-banner--critical .bp-banner-action,.bp-banner--warning .bp-banner-action {
  background:var(--color-brand);
  color:var(--color-bg);
  border-color:var(--color-brand)
}
.bp-banner--critical .bp-banner-action:hover,.bp-banner--warning .bp-banner-action:hover {
  background:var(--color-brand-hover);
  border-color:var(--color-brand-hover)
}
.bp-banner--info .bp-banner-action[href] {
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-decoration:underline
}
.bp-banner-action:focus-visible {
  outline:2px solid var(--color-brand);
  outline-offset:2px
}
.bp-banner--critical {
  color:var(--color-critical-text);
  background:var(--color-critical-bg)
}
.bp-banner--warning {
  color:var(--color-warning-text);
  background:var(--color-warning-bg);
  border:1px solid var(--color-warning-text)
}
.bp-banner--quiet {
  --color-background-soft:var(--gray);
  color:var(--color-text-secondary);
  background:var(--color-background-soft);
  border:1px solid var(--color-border)
}
.bp-banner--quiet .bp-banner-lead {
  color:var(--color-text)
}
.bp-banner--quiet .bp-banner-action {
  background:var(--color-brand);
  color:var(--color-bg);
  border-color:var(--color-brand)
}
.bp-banner--quiet .bp-banner-action:hover {
  background:var(--color-brand-hover);
  border-color:var(--color-brand-hover)
}
.bp-banner--quiet .bp-banner-action--secondary {
  background:var(--color-border);
  color:var(--color-text);
  border-color:var(--color-border)
}
.bp-banner--quiet .bp-banner-action--secondary:hover {
  background:var(--color-surface);
  border-color:var(--color-border)
}
.bp-banner--info {
  color:var(--color-info-text);
  background:var(--color-info-bg)
}
.bp-quiet-label {
  display:inline-flex;
  width:fit-content;
  max-width:100%;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  background:var(--color-surface);
  color:var(--color-text-secondary);
  font:600 12px/1.4 var(--font-sans);
  white-space:normal
}
.bp-locked-note {
  box-sizing:border-box;
  width:fit-content;
  max-width:100%;
  padding:12px 14px;
  border:1px dashed var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  color:var(--color-text-secondary);
  font:400 13px/1.5 var(--font-sans)
}
.bp-toggle-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-family:var(--font-sans)
}
.bp-toggle-copy {
  display:grid;
  gap:3px
}
.bp-toggle-label {
  font-weight:600
}
.bp-toggle-description {
  color:var(--color-text-secondary);
  font-size:13px
}
.bp-toggle-switch {
  position:relative;
  display:inline-flex;
  width:42px;
  height:24px;
  flex:none;
  align-items:center
}
.bp-toggle-switch input {
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  margin:0
}
.bp-toggle-track {
  width:42px;
  height:24px;
  border-radius:999px;
  background:var(--color-border);
  transition:background .15s
}
.bp-toggle-track::after {
  content:'';
  display:block;
  width:18px;
  height:18px;
  margin:3px;
  border-radius:50%;
  background:var(--color-bg);
  box-shadow:var(--shadow-card);
  transition:transform .15s
}
.bp-toggle-switch input:checked+.bp-toggle-track {
  background:var(--color-brand)
}
.bp-toggle-switch input:checked+.bp-toggle-track::after {
  transform:translateX(18px)
}
.bp-toggle-switch input:focus-visible+.bp-toggle-track {
  outline:2px solid var(--color-brand);
  outline-offset:3px
}
.bp-toggle-switch input:disabled {
  cursor:not-allowed
}
.bp-toggle-switch input:disabled+.bp-toggle-track {
  opacity:.5
}
.bp-code-boxes {
  display:flex;
  gap:8px;
  width:100%;
  max-width:340px
}
.bp-code-box {
  box-sizing:border-box;
  min-width:0;
  width:calc((100% - 40px)/6);
  height:48px;
  text-align:center;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-bg);
  color:var(--color-text);
  font:600 20px/1 var(--font-sans);
  font-variant-numeric:tabular-nums
}
.bp-code-box:focus-visible {
  outline:2px solid var(--color-brand);
  outline-offset:2px
}
.bp-code-boxes--error .bp-code-box {
  border-color:var(--color-critical-text)
}
.bp-code-box:disabled {
  background:var(--color-surface);
  color:var(--color-text-tertiary);
  cursor:not-allowed
}
.bp-danger-card {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:20px;
  border:1px solid var(--color-critical-text);
  border-radius:var(--radius-card);
  background:var(--color-bg);
  font-family:var(--font-sans)
}
.bp-danger-copy {
  display:grid;
  gap:5px
}
.bp-danger-title {
  font-weight:700
}
.bp-danger-description {
  color:var(--color-text-secondary);
  font-size:13px
}
.bp-btn-danger-outline {
  flex:none;
  border:1px solid var(--color-critical-text);
  border-radius:var(--radius-btn);
  background:transparent;
  color:var(--color-critical-text);
  padding:9px 14px;
  font:600 13px var(--font-sans);
  cursor:pointer
}
.bp-btn-danger-outline:hover {
  background:var(--color-critical-bg)
}
.bp-btn-danger-outline:focus-visible {
  outline:2px solid var(--color-critical-text);
  outline-offset:2px
}
.bp-progress-steps {
  display:grid;
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
  font-family:var(--font-sans)
}
.bp-progress-step {
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:12px;
  align-items:start;
  color:var(--color-text-tertiary)
}
.bp-progress-marker {
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border:2px solid var(--color-border);
  border-radius:50%;
  font-size:12px;
  font-weight:700
}
.bp-progress-step--done {
  color:var(--color-success-text)
}
.bp-progress-step--done .bp-progress-marker {
  border-color:var(--color-success-text);
  background:var(--color-success-bg)
}
.bp-progress-step--current {
  color:var(--color-text)
}
.bp-progress-step--current .bp-progress-marker {
  border-color:var(--color-brand);
  background:var(--color-brand)
}
.bp-progress-step--current .bp-progress-marker::after {
  content:'';
  width:6px;
  height:6px;
  background:var(--color-bg);
  border-radius:50%
}
.bp-progress-title {
  font-size:14px;
  font-weight:600
}
.bp-progress-detail {
  display:block;
  margin-top:4px;
  font-size:12px;
  color:var(--color-text-secondary)
}
.bp-progress-track,.bp-period-track {
  display:block;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:var(--color-border)
}
.bp-progress-track {
  margin-top:9px
}
.bp-progress-fill {
  display:block;
  width:clamp(0%,var(--value),100%);
  height:100%;
  background:var(--color-brand);
  border-radius:inherit
}
.bp-period-bar {
  font-family:var(--font-sans)
}
.bp-period-top {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:end;
  margin-bottom:10px;
  font-size:13px
}
.bp-period-end {
  text-align:right;
  font-weight:700
}
.bp-period-remaining {
  display:block;
  color:var(--color-text-secondary);
  font-size:12px;
  font-weight:400
}
.bp-period-fill {
  height:100%;
  width:clamp(0%,var(--value),100%);
  background:var(--color-text);
  border-radius:inherit
}
.bp-help-tip {
  position:relative;
  display:inline-flex;
  vertical-align:middle;
  font-family:var(--font-sans)
}
.bp-help-button {
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border:1px solid var(--color-text-tertiary);
  border-radius:50%;
  background:var(--color-bg);
  color:var(--color-text-secondary);
  font:600 12px var(--font-sans);
  cursor:help
}
.bp-help-button:focus-visible {
  outline:2px solid var(--color-brand);
  outline-offset:2px
}
.bp-help-content {
  position:absolute;
  z-index:2;
  bottom:calc(100% + 8px);
  left:0;
  width:max-content;
  max-width:min(260px,80vw);
  padding:8px 10px;
  border-radius:var(--radius-sm);
  background:var(--color-text);
  color:var(--color-bg);
  font-size:12px;
  line-height:1.4;
  visibility:hidden;
  opacity:0;
  pointer-events:none
}
.bp-help-tip:hover .bp-help-content,.bp-help-tip:focus-within .bp-help-content {
  visibility:visible;
  opacity:1
}
.bp-pay-choice {
  display:grid;
  gap:10px;
  font-family:var(--font-sans)
}
.bp-pay-option,.bp-choice-option {
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-bg);
  cursor:pointer
}
.bp-pay-option:has(input:checked),.bp-choice-option:has(input:checked) {
  border-color:var(--color-brand)
}
.bp-pay-option input,.bp-choice-option input {
  appearance:none;
  flex:none;
  width:18px;
  height:18px;
  margin:2px 0 0;
  border:1.5px solid var(--color-border);
  border-radius:50%;
  background:var(--color-bg);
  cursor:pointer
}
.bp-pay-option input:checked,.bp-choice-option input:checked {
  border:5px solid var(--color-brand)
}
.bp-pay-option input:focus-visible,.bp-choice-option input:focus-visible {
  outline:2px solid var(--color-brand);
  outline-offset:2px
}
.bp-pay-copy,.bp-choice-copy {
  display:grid;
  gap:6px;
  min-width:0
}
.bp-pay-logos {
  display:flex;
  align-items:center;
  gap:24px;
  min-height:48px;
  flex-wrap:wrap
}
.bp-pay-logo {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px;
  min-width:64px;
  height:24px;
  white-space:nowrap;
  color:var(--color-text);
  font:600 11px/1 var(--font-sans)
}
.bp-pay-logo img {
  display:block;
  max-width:100%;
  height:24px;
  object-fit:contain
}
.bp-pay-description,.bp-choice-description {
  color:var(--color-text-secondary);
  font-size:12px;
  line-height:1.45
}
.bp-pay-option[hidden] {
  display:none
}
.bp-pay-method {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  min-width:0;
  font:400 13px/1.4 var(--font-sans)
}
.bp-pay-method .bp-pay-logo {
  flex:none
}
.bp-pay-method-text {
  min-width:0;
  overflow-wrap:anywhere
}
.bp-saved-note {
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--color-success-text);
  font:600 13px/1.4 var(--font-sans)
}
.bp-choice-list {
  display:grid;
  gap:8px;
  font-family:var(--font-sans)
}
.bp-choice-option {
  padding:4px 0;
  border:0;
  border-radius:0;
  font-size:14px
}
.bp-choice-copy {
  flex:1;
  width:100%
}
.bp-choice-text {
  width:100%;
  box-sizing:border-box;
  padding:9px 11px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-btn);
  background:var(--color-bg);
  color:var(--color-text);
  font:inherit
}
.bp-choice-text:focus-visible {
  outline:2px solid var(--color-brand);
  outline-offset:2px
}
@media(max-width:480px) {
  .bp-banner {
    align-items:flex-start;
    flex-direction:column
  }
  .bp-banner-action {
    white-space:normal
  }
  .bp-danger-card {
    align-items:stretch;
    flex-direction:column
  }
  .bp-btn-danger-outline {
    align-self:flex-end
  }
  .bp-code-boxes {
    gap:5px
  }
  .bp-code-box {
    width:calc((100% - 25px)/6);
    height:44px
  }
}