/* Hand fixes for the two hosts of billing-x.css (generated from the approved billing mockup; do
   not edit that file). The mockup drew its pages inside its own app frame: .content and
   .capp-body were the containers, on the frame's --surface-2 ground. These are the same
   containers in the console and in the center app. */

/* the page column: the mockup's .content (console) and .capp-body (center app). Positioned, so the
   screen-reader-only labels (.bx-sr, absolute) sit inside it: placed against the document they made
   it taller than the window, a second scrollbar and an empty band under the console (owner, 2026-10-13). */
.bx.bx-page { position: relative; display: flex; flex-direction: column; gap: 18px; background: var(--surface-2); }
.bx .bx-sr { top: 0; left: 0; margin: -1px; padding: 0; border: 0; }
.bx.bx-console { padding: 22px 26px 34px; min-height: 100%; }
.bx.bx-center { padding: 22px 26px 30px; border-radius: 14px; border: 1px solid var(--line); }
@media (max-width: 860px) { .bx.bx-console, .bx.bx-center { padding: 18px 16px 26px; } }

/* links that look like the mockup's buttons */
.bx a.bx-btn { text-decoration: none; }
.bx a.bx-btn:hover { text-decoration: none; }
.bx .bx-crumbs a { color: var(--accent-text); text-decoration: none; }

/* the activity search box and selects are real inputs here */
.bx .bx-feed-tools .bx-q input { border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); flex: 1; min-width: 0; min-height: 36px; }
.bx .bx-note-box input { font: inherit; }
.bx form { margin: 0; }
.bx textarea { font: inherit; }

/* the console styles bare th/td (uppercase letter-spaced headers, ink-2 cells): undo inside .bx,
   where the mockup's own .bx-tbl rules decide */
.bx th, .bx td { letter-spacing: normal; text-transform: none; color: inherit; }
.bx code { background: none; padding: 0; color: inherit; font-family: var(--mono); font-size: .92em; }

/* a dialog's form wraps head, body and foot: let them stay the modal's flex children */
.bx .bx-modal > form { display: contents; }
/* menu items that are links or form buttons look like the mockup's menu buttons */
.bx .bx-menu form { margin: 0; }
.bx .bx-menu a.bx-menu-a { display: flex; width: 100%; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--ink); text-decoration: none; }
.bx .bx-menu a.bx-menu-a:hover { background: var(--surface-3); }
/* Sola's card-number iframe inside the mockup's field */
.bx .bx-sola.bx-sola-live { padding: 7px 11px; color: var(--ink-3); }
.bx .bx-sola.bx-sola-live iframe { flex: 1; min-width: 0; height: 24px; border: 0; background: transparent; }
.bx .bx-sola.bx-sola-live:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bx .bx-fld textarea { font: inherit; font-size: 14px; border: 1px solid var(--line-2); border-radius: 9px; padding: 9px 11px; background: var(--surface); color: var(--ink); width: 100%; resize: vertical; }
.bx .bx-fld textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bx details.bx-card > summary { cursor: pointer; }

/* center app: the strip at the top of every page, and the dashboard card, sit on the app's own ground */
.bx.bx-strip-root, .bx.bx-dash-root, .bx.bx-dialogs { background: transparent; }
.bx.bx-strip-root { margin: 14px 0 12px; }
.bx.bx-strip-root:empty { display: none; }
.bx.bx-dash-root { margin-bottom: 20px; }

/* the center app's Bootstrap 3 and skin style bare elements (h1-h4 line-height 1.1, label bold with
   a bottom margin, a slightly tight letter-spacing on the page): undo inside .bx so the mockup's own
   rules are the only ones that apply */
.bx { letter-spacing: normal; }
.bx h1, .bx h2, .bx h3, .bx h4 { line-height: inherit; font-family: inherit; }
.bx label { font-weight: inherit; margin-bottom: 0; max-width: none; }
.bx input, .bx button, .bx select, .bx textarea { letter-spacing: inherit; }

/* the Notice composer: the estimate under the message, and dialogs above the page's own overlays (1300) */
.bx.bx-est-root { background: transparent; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.bx.bx-est-root:empty { display: none; }
.bx.bx-dialogs .bx-scrim { z-index: 1310; }
/* and the mockup's order on top of that: dialog, then toast, then an open dropdown */
.bx .bx-toast { z-index: 1320; }
.bx .bx-dd-list { z-index: 1330; }

/* the mockup's components show and hide through the hidden attribute (dialogs, menus, rows); a
   component's own display rule must not win over it on a page whose CSS lacks this reset */
.bx [hidden], .bx[hidden] { display: none !important; }

/* bx_tip(): an info icon with a bubble (billing-x.js); the bubble lives on <body>, outside .bx */
.bx .bx-tip { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; margin: 0 0 0 4px; border: 0; border-radius: 50%; background: none; color: var(--ink-4); cursor: help; vertical-align: -3px; }
.bx .bx-tip:hover, .bx .bx-tip:focus-visible, .bx .bx-tip[aria-expanded="true"] { color: var(--accent-text); outline: none; }
.bx .bx-tip:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }
.bx .bx-tip svg { width: 15px; height: 15px; }
.bx-tipb { position: fixed; z-index: 1340; max-width: 280px; padding: 8px 10px; border-radius: 8px; background: #15171C; color: #FFFFFF; font: 500 12.5px/1.45 Geist, ui-sans-serif, system-ui, sans-serif; letter-spacing: normal; text-transform: none; box-shadow: 0 8px 24px rgba(15, 18, 25, .2); pointer-events: none; }

/* the center's Billing & plan page (views/admin/subscription.php) */
.bx .bx-plan-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bx .bx-plan-row:last-child { border-bottom: 0; }
.bx .bx-plan-price { text-align: right; white-space: nowrap; }
.bx .bx-plan-price .bx-hint { margin-left: 3px; }
.bx .bx-inv-row.bx-pay { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, .7fr) minmax(0, .8fr); cursor: default; }
@media (max-width: 760px) {
  .bx .bx-inv-row.bx-pay { grid-template-columns: minmax(0, 1fr) auto; }
  .bx .bx-inv-row.bx-pay > :nth-child(2), .bx .bx-inv-row.bx-pay > :nth-child(3) { grid-column: 1 / 2; }
}
/* one field for the whole card: number (the Sola iframe), MM/YY, CVC and ZIP on one line */
.bx .bx-cardline { display: flex; align-items: center; min-height: 42px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); }
.bx .bx-cardline:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bx .bx-cardline > .bx-i { flex: none; margin-left: 11px; color: var(--ink-3); }
.bx .bx-cardline iframe { flex: 1 1 auto; min-width: 120px; height: 24px; margin: 0 8px; border: 0; background: transparent; }
.bx .bx-fld .bx-cardline input, .bx .bx-cardline input { flex: none; width: 72px; min-width: 0; padding: 9px 10px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; font: inherit; font-size: 14px; color: var(--ink); outline: none; }
.bx .bx-fld .bx-cardline input:focus { border-color: var(--line); box-shadow: none; background: var(--surface-2); }
.bx .bx-cardline input.bx-c-cvc { width: 60px; }
.bx .bx-cardline input.bx-c-zip { width: 76px; border-radius: 0 8px 8px 0; }
@media (max-width: 520px) {
  .bx .bx-cardline { flex-wrap: wrap; }
  .bx .bx-cardline iframe { flex-basis: calc(100% - 50px); height: 40px; }
  .bx .bx-fld .bx-cardline input, .bx .bx-cardline input { flex: 1 1 30%; border-top: 1px solid var(--line); }
  .bx .bx-cardline input.bx-c-exp { border-left: 0; }
}
.bx .bx-pm-foot { flex: none; margin-top: auto; padding: 12px 18px 14px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }

/* The center's own pages are part of the page, not a box in a box (owner, 2026-10-13): Billing & plan
   sits on the page like Notices does, Settings > Texts & calls flows in its tab, and cards are flat. */
.tendi-skin.tnd-billing { max-width: 1080px; margin: 0 auto; padding: 6px 4px 60px; }
.bx.bx-tpage-head { display: flex; align-items: center; gap: 13px; margin: 2px 0 20px; background: transparent; }
.bx.bx-tpage-head h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }
.bx .bx-tpage-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.bx .bx-tpage-ic svg { width: 22px; height: 22px; }
.bx.bx-tpage { padding: 0; border: 0; border-radius: 0; background: transparent; }
.bx.bx-center { padding: 0; border: 0; border-radius: 0; background: transparent; }
.bx.bx-tpage .bx-card, .bx.bx-tpage .bx-strip, .bx.bx-center .bx-card, .bx.bx-center .bx-strip { box-shadow: none; }
/* a hovered or opened row, or a hovered tile, never pokes out of the rounded corners around it */
.bx .bx-strip { overflow: hidden; }
.bx .bx-card > .bx-inv:last-child { border-radius: 0 0 13px 13px; overflow: hidden; }
.bx .bx-card > .bx-inv:last-child { margin-bottom: -1px; }   /* the last row's line sits on the card's own border */
/* room between a card header's buttons and the table under it */
.bx .bx-card > .bx-card-h + .bx-inv { margin-top: 14px; }

/* the small icon button matches the small button beside it (the later .bx-icon rule made it 34px) */
.bx .bx-btn.bx-icon.bx-sm { padding: 5px; min-height: 30px; min-width: 30px; justify-content: center; border-radius: 8px; }
/* a card that is only a header still has its bottom padding */
.bx .bx-card > .bx-card-h:last-child { padding-bottom: 15px; }
.bx .bx-toast { cursor: pointer; }

/* bx_datefield(): the date button and its month calendar (billing-x.js) */
.bx .bx-date-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.bx .bx-date-btn:hover { border-color: var(--ink-4); }
.bx .bx-date-btn:focus-visible, .bx .bx-date-btn[aria-expanded="true"] { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bx .bx-date-btn .bx-i { flex: none; color: var(--ink-3); }
.bx .bx-date-val.bx-ph { color: var(--ink-3); }
.bx .bx-cal { position: fixed; z-index: 1335; width: 268px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); }
.bx .bx-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.bx .bx-cal-h b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.bx .bx-cal-nav { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; }
.bx .bx-cal-nav:hover:not(:disabled) { background: var(--surface-3); }
.bx .bx-cal-nav:disabled { opacity: .35; cursor: not-allowed; }
.bx .bx-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.bx .bx-cal-wd { padding: 4px 0; text-align: center; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.bx .bx-cal-d { height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; cursor: pointer; }
.bx .bx-cal-d:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-text); }
.bx .bx-cal-d.bx-today { box-shadow: inset 0 0 0 1px var(--accent); }
.bx .bx-cal-d.bx-on, .bx .bx-cal-d.bx-on:hover { background: var(--accent); color: var(--accent-ink); }
.bx .bx-cal-d:disabled { color: var(--ink-4); opacity: .5; cursor: not-allowed; }
.bx .bx-cal-d:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bx .bx-cal-f { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

/* the console's Access card: a tier that opens to the features in it */
.bx .bx-feat > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.bx .bx-feat > summary::-webkit-details-marker { display: none; }
.bx .bx-feat > summary .bx-i { width: 15px; height: 15px; color: var(--ink-3); transition: transform .15s; }
.bx .bx-feat[open] > summary .bx-i { transform: rotate(90deg); }
.bx .bx-feat-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; }
.bx .bx-feat-list li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.bx .bx-feat-list li .bx-i { width: 14px; height: 14px; flex: none; color: var(--ok); }

/* every one-line field in a dialog is the same height: inputs, drawn dropdowns and date buttons */
.bx .bx-fld > input:not([type=checkbox]):not([type=radio]), .bx .bx-fld .bx-affix > input, .bx .bx-fld .bx-dd-btn, .bx .bx-fld .bx-date-btn { box-sizing: border-box; height: 42px; min-height: 42px; }
.bx .bx-fld .bx-seg.bx-full { min-height: 42px; padding: 3px; }
.bx .bx-fld .bx-seg.bx-full button { padding: 6px 10px; font-size: 13.5px; }
/* a field with a unit in it: $ before, % after */
.bx .bx-affix { position: relative; display: block; }
.bx .bx-affix > i { position: absolute; top: 0; bottom: 0; left: 12px; display: flex; align-items: center; font-style: normal; font-size: 14px; color: var(--ink-3); pointer-events: none; }
.bx .bx-fld .bx-affix > input { padding-left: 24px; }
.bx .bx-affix.bx-suf > i { left: auto; right: 12px; }
.bx .bx-fld .bx-affix.bx-suf > input { padding-left: 11px; padding-right: 30px; }
/* a button that reads as a link */
.bx .bx-linkbtn { appearance: none; border: 0; background: none; padding: 0; margin-left: 4px; font: inherit; font-weight: 500; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.bx .bx-linkbtn:hover { color: var(--accent); }

/* disclosure rows (past discounts, ended subscriptions): an SVG chevron that turns, never the
   browser's triangle (owner, 2026-10-13) */
.bx details.bx-disc > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.bx details.bx-disc > summary::-webkit-details-marker { display: none; }
.bx details.bx-disc > summary .bx-i { width: 15px; height: 15px; color: var(--ink-3); transition: transform .15s; }
.bx details.bx-disc[open] > summary .bx-i { transform: rotate(90deg); }
.bx details.bx-disc > summary:hover { color: var(--ink); }
.bx .bx-past { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.bx .bx-past li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.bx .bx-past li > div { min-width: 0; display: flex; flex-direction: column; }
.bx .bx-past li .bx-hint { font-size: 12.5px; }

/* a native date input anywhere in the console becomes the same date button (billing-x.js) */
.bx.bx-bare { display: inline-block; background: transparent; vertical-align: middle; }
.bx.bx-bare .bx-date-btn { min-width: 150px; min-height: 36px; padding: 7px 12px; }
/* a payment option that cannot be used right now (no price, no card) reads as unavailable */
.bx .bx-radio-row label:has(input:disabled) { opacity: .55; cursor: not-allowed; }

/* plan dialogs (Change the plan, Set up the plan): wider, with the tier's features as checkboxes */
.bx .bx-modal.bx-wide { width: min(680px, 100%); }
.bx .bx-feat-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 7px 14px; margin-top: 10px; max-height: 230px; overflow: auto; padding: 2px; }
.bx .bx-feat-checks .bx-check { font-size: 13px; }
.bx .bx-feat-checks .bx-check.bx-soon { color: var(--ink-3); cursor: help; }
.bx .bx-feat-checks .bx-check.bx-soon input { opacity: .55; }
.bx .bx-feat-list li.bx-off { color: var(--ink-3); }
.bx .bx-feat-list li.bx-off .bx-i { color: var(--crit); }
.bx #mNewSub .bx-modal { width: min(680px, 100%); }

/* a native select in the console, drawn as the bx dropdown (billing-x.js enhanceSelects): the select
   stays in the form, hidden but focusable so the browser can still point at it when it is required */
.bx.bx-sel { position: relative; }
.bx.bx-sel .bx-sel-src { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bx.bx-bare .bx-dd-btn { min-height: 36px; padding: 6px 11px; }