[data-billing-self-service] { min-width: 0; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); color: var(--card-foreground); }
[data-billing-self-service] :is(h3,h4,p) { overflow-wrap: anywhere; }
[data-billing-self-service] h3 { display: flex; align-items: center; gap: 8px; font-size: 18px; line-height: 1.4; font-weight: 650; }
[data-billing-self-service] h3 > svg { color: #0e7490; flex: none; }
[data-billing-self-service] h4 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; }
[data-billing-self-service] button { min-height: 44px; white-space: normal; height: auto; }
[data-billing-self-service] .billing-service-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
[data-billing-self-service] .billing-service-heading > div { min-width: 0; }
[data-billing-self-service] .billing-service-heading p { margin-top: 4px; font-size: 13px; line-height: 1.6; }
[data-billing-self-service] .billing-service-note { margin-block: 10px; color: var(--muted-foreground); font-size: 13px; line-height: 1.65; }
[data-billing-self-service] .billing-service-field { display: flex; min-width: 0; flex-direction: column; gap: 8px; margin-block: 16px; }
[data-billing-self-service] :is(select,input) { min-width: 0; width: 100%; min-height: 44px; border: 1px solid var(--input); border-radius: 8px; padding-inline: 12px; background: var(--background); color: var(--foreground); font-size: 14px; }
[data-billing-self-service] select:focus-visible { outline: 2px solid #0891b2; outline-offset: 2px; }
[data-billing-self-service] .billing-service-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
[data-billing-self-service] .billing-service-inset { margin-block: 16px; border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: color-mix(in srgb,var(--muted) 35%,transparent); }
[data-billing-self-service] .billing-service-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
[data-billing-self-service] .billing-service-history { display: grid; gap: 10px; margin-block: 12px; font-size: 13px; color: var(--muted-foreground); }
[data-billing-self-service] .billing-service-history li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
[data-billing-self-service] .billing-service-review { margin-top: 20px; padding: 18px; border: 1px solid #0891b266; border-radius: 12px; background: #06b6d40a; }
[data-billing-self-service] .billing-service-review dl { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; margin-block: 18px; font-size: 14px; }
[data-billing-self-service] .billing-service-review dd { text-align: right; font-weight: 600; }
[data-billing-self-service] .billing-service-confirm { display: flex; align-items: flex-start; gap: 12px; margin-block: 20px; font-size: 14px; line-height: 1.65; cursor: pointer; }
[data-billing-self-service] .billing-service-confirm > button { min-height: 16px; height: 16px; margin-top: 4px; flex: none; }
[data-billing-self-service] :is(.billing-service-error,.billing-service-warning,.billing-service-success) { margin-block: 16px; padding: 12px 14px; border-radius: 8px; font-size: 13px; line-height: 1.65; }
[data-billing-self-service] .billing-service-error { border: 1px solid #fca5a5; background: #fef2f2; color: #991b1b; }
[data-billing-self-service] .billing-service-warning { border: 1px solid #fcd34d; background: #fffbeb; color: #92400e; }
[data-billing-self-service] .billing-service-success { border: 1px solid #6ee7b7; background: #ecfdf5; color: #065f46; }
[data-billing-self-service] .billing-service-tax-value { font-family: ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap: anywhere; }
[data-billing-self-service] .billing-service-tax-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.dark [data-billing-self-service] h3 > svg { color: #67e8f9; }
.dark [data-billing-self-service] .billing-service-error { border-color: #f8717155; background: #7f1d1d33; color: #fecaca; }
.dark [data-billing-self-service] .billing-service-warning { border-color: #fbbf2455; background: #78350f33; color: #fde68a; }
.dark [data-billing-self-service] .billing-service-success { border-color: #34d39955; background: #064e3b33; color: #a7f3d0; }
@media (max-width: 540px) {
  [data-billing-self-service] { padding: 16px; }
  [data-billing-self-service] .billing-service-fields { grid-template-columns: minmax(0,1fr); gap: 0; }
  [data-billing-self-service] .billing-service-heading > button { width: 100%; }
  [data-billing-self-service] .billing-service-actions > button { flex: 1 1 140px; }
  [data-billing-self-service] .billing-service-review { padding: 14px; }
  [data-billing-self-service] .billing-service-review dl { gap: 12px 8px; font-size: 13px; }
}

/* Keep mobile touch targets stable when retained native utility classes win. */
@media (max-width: 540px) {
  [data-billing-self-service] :is(button,input,select),
  body:has([data-billing-tax-information]) [role="alertdialog"] button {
    min-height: 44px !important;
    height: auto !important;
  }
  [data-billing-self-service] button,
  body:has([data-billing-tax-information]) [role="alertdialog"] button {
    min-width: 44px !important;
  }
}