/* Apprendeu Plus: pieces shared by the offer page (plus.html, styled in plus.css) and the subscription dashboard (minha-assinatura.html). */
body:is([data-page="plus"], [data-page="billing"]) {
  --tone-success-bg: #dcf5e8; --tone-success-ink: #0f6038;
  --tone-warning-bg: #fff0d1; --tone-warning-ink: #7a4a00;
  --tone-danger-bg: #fde4e4; --tone-danger-ink: #9b1c1c;
  --tone-info-bg: var(--ui-soft); --tone-info-ink: var(--ui-accent);
  --tone-neutral-bg: var(--ui-raised); --tone-neutral-ink: var(--ui-muted);
  --plus-radius: 22px;
}
html[data-theme="dark"] body:is([data-page="plus"], [data-page="billing"]) {
  --tone-success-bg: rgba(52, 199, 123, .16); --tone-success-ink: #8be3b4;
  --tone-warning-bg: rgba(255, 184, 0, .15); --tone-warning-ink: #ffd27a;
  --tone-danger-bg: rgba(255, 99, 99, .16); --tone-danger-ink: #ffa3a3;
}

/* Shared pieces. */
.public-page .public-kicker i { margin-right: .25rem; }
.plus-inline-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--ui-accent); font-weight: 750; text-decoration: none; }
.plus-inline-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.plus-plan-badge { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 100px; background: var(--brand-button-fill); color: var(--brand-button-ink); font-size: .75rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.plus-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; color: var(--ui-muted); font-weight: 650; }
.plus-price strong { color: var(--ui-text); font-family: var(--font-title); font-size: clamp(2.3rem, 4vw, 2.9rem); font-weight: 700; letter-spacing: -.05em; line-height: 1.1; }
.plus-price-note, .plus-plan-unavailable { margin: 8px 0 0; color: var(--ui-muted); font-size: .92rem; line-height: 1.6; }
.plus-plan-unavailable { color: var(--ui-text); font-size: 1rem; }
.plus-check-list { display: grid; gap: 10px; margin: 24px 0; padding: 0; list-style: none; }
.plus-check-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ui-text); font-size: .95rem; line-height: 1.5; }
.plus-check-list i { color: var(--ui-accent); font-size: 1.1rem; line-height: 1.35; }
.billing-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 11px; border-radius: 100px; background: var(--tone-info-bg); color: var(--tone-info-ink); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.billing-badge[data-tone="success"] { background: var(--tone-success-bg); color: var(--tone-success-ink); }
.billing-badge[data-tone="warning"] { background: var(--tone-warning-bg); color: var(--tone-warning-ink); }
.billing-badge[data-tone="danger"] { background: var(--tone-danger-bg); color: var(--tone-danger-ink); }
.billing-badge[data-tone="neutral"] { background: var(--tone-neutral-bg); color: var(--tone-neutral-ink); }

.plus-plan-kicker, .billing-offer-kicker, .billing-plan-kicker { margin: 0 0 4px; color: var(--ui-accent); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.plus-plan-offer { min-height: 92px; }
.plus-plan-secure, .billing-fineprint { margin: 0; color: var(--ui-muted); font-size: .84rem; line-height: 1.6; }
:is(.plus-plan-secure, .billing-fineprint) > i { margin-right: 6px; }

/* Subscription dashboard. */
.billing-main { padding-bottom: clamp(48px, 6vw, 80px); }
.billing-hero { padding-block: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 40px); border-bottom: 1px solid var(--ui-line); background: radial-gradient(ellipse at 90% 10%, var(--brand-wash-end), transparent 65%), linear-gradient(120deg, var(--brand-wash), var(--ui-bg)); }
.public-page .billing-hero .public-title { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.public-page .billing-hero .public-lead { margin-top: 14px; }
.billing-body { padding-top: 32px; }
.billing-status-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 28px; }
.billing-status-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.billing-status { display: flex; flex: 1 1 420px; gap: 12px; align-items: center; min-height: 56px; margin: 0; padding: 14px 18px; border-radius: 14px; background: var(--tone-info-bg); color: var(--ui-text); font-weight: 650; line-height: 1.5; }
.billing-status::before { content: "\f41f"; flex-shrink: 0; font-family: "bootstrap-icons"; font-size: 1.25rem; font-weight: 400; color: var(--tone-info-ink); }
.billing-status[data-state="active"] { background: var(--tone-success-bg); }
.billing-status[data-state="active"]::before { content: "\f26a"; color: var(--tone-success-ink); }
.billing-status:is([data-state="idle"], [data-state="login"])::before { content: "\f430"; }
.billing-status[data-state="login"]::before { content: "\f1be"; }
.billing-status:is([data-state="uncertain"], [data-state="card_validation"], [data-state="consent"], [data-state="expired"], [data-state="cancelled"]) { background: var(--tone-warning-bg); }
.billing-status:is([data-state="uncertain"], [data-state="card_validation"], [data-state="consent"], [data-state="expired"], [data-state="cancelled"])::before { content: "\f33a"; color: var(--tone-warning-ink); }
.billing-status:is([data-state="rejected"], [data-state="unavailable"], [data-state="suspended"]) { background: var(--tone-danger-bg); }
.billing-status:is([data-state="rejected"], [data-state="unavailable"], [data-state="suspended"])::before { content: "\f622"; color: var(--tone-danger-ink); }
.billing-quiet-button, .billing-icon-button { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--ui-line); border-radius: 100px; background: var(--ui-surface); color: var(--ui-text); font: inherit; font-weight: 750; cursor: pointer; }
.billing-quiet-button:hover, .billing-icon-button:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.billing-icon-button { width: 44px; padding: 0; }
.billing-guest { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; max-width: 760px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--ui-line); border-radius: var(--plus-radius); background: var(--ui-surface); }
.billing-guest > i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--brand-button-fill); color: var(--brand-button-ink); font-size: 1.5rem; }
.billing-guest h2 { margin: 0 0 8px; font-size: 1.3rem; font-weight: 650; }
.billing-guest p { margin: 0 0 14px; color: var(--ui-muted); line-height: 1.65; }
.billing-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 28px; align-items: start; }
.billing-primary-column, .billing-side-column, .billing-subscriptions { display: grid; gap: 24px; min-width: 0; }
.billing-subscriptions:empty { display: none; }
.billing-notice { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--tone-warning-ink) 30%, transparent); border-radius: 14px; background: var(--tone-warning-bg); color: var(--ui-text); line-height: 1.6; }
.billing-notice i { color: var(--tone-warning-ink); font-size: 1.1rem; }
.billing-notice a { color: inherit; font-weight: 750; }
.billing-notice--info { border-color: var(--ui-line); background: var(--tone-info-bg); }
.billing-notice--info i { color: var(--tone-info-ink); }
.billing-plan, .billing-offer, .billing-checkout, .billing-panel { min-width: 0; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--ui-line); border-radius: var(--plus-radius); background: var(--ui-surface); }
.billing-plan, .billing-offer { position: relative; overflow: hidden; box-shadow: 0 14px 40px color-mix(in srgb, var(--ui-accent) 8%, transparent); }
.billing-plan::before, .billing-offer::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--brand-button-fill); }
.billing-plan-head, .billing-offer-head, .billing-checkout-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.billing-plan h2, .billing-offer h2, .billing-checkout h2 { margin: 0; font-size: 1.45rem; font-weight: 650; }
.billing-plan-price, #card-amount { margin: 6px 0 0; color: var(--ui-muted); font-weight: 650; line-height: 1.6; }
.billing-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; }
.billing-facts > div { padding: 14px 16px; border-radius: 14px; background: var(--ui-bg); border: 1px solid var(--ui-line); }
.billing-facts dt { color: var(--ui-muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.billing-facts dd { margin: 6px 0 0; color: var(--ui-text); font-weight: 750; overflow-wrap: anywhere; }
.billing-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.billing-actions .btn, .billing-dialog-actions .btn, .billing-cta { display: inline-flex; gap: 8px; align-items: center; justify-content: center; padding: 10px 22px; font: inherit; font-weight: 750; cursor: pointer; }
.billing-main .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.billing-danger-outline { color: var(--tone-danger-ink); }
.billing-danger-outline:hover:not(:disabled) { border-color: var(--tone-danger-ink); background: var(--tone-danger-bg); }
.billing-footnote { margin: 14px 0 0; color: var(--ui-muted); font-size: .86rem; line-height: 1.6; }
.billing-history { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ui-line); }
.billing-history h3 { margin: 0 0 14px; font-size: 1rem; font-weight: 650; }
.billing-charges, .billing-activity { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.billing-charges li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 16px; border-radius: 14px; background: var(--ui-bg); border: 1px solid var(--ui-line); }
.billing-charge-main { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.billing-charges li > span { color: var(--ui-muted); font-size: .88rem; text-align: right; }
.billing-charges li > small { grid-column: 1 / -1; color: var(--ui-muted); font-size: .84rem; }
.billing-empty { margin: 0; color: var(--ui-muted); font-size: .92rem; }
.billing-offer .plus-price strong { font-size: clamp(2rem, 3.4vw, 2.5rem); }
.billing-offer .plus-plan-offer { margin-top: 18px; }
.billing-offer .billing-fineprint + .billing-fineprint { margin-top: 10px; }
.billing-offer .billing-cta { margin-bottom: 18px; }
.billing-offer .billing-fineprint a { color: var(--ui-accent); }
.billing-offer[data-available="false"] :is(.billing-cta, .billing-fineprint, .plus-check-list) { display: none; }
.billing-checkout { border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-accent) 10%, transparent); }
.billing-checkout:focus { outline: none; }
.billing-consent-box { margin-top: 20px; padding: 18px; border-radius: 14px; background: var(--ui-bg); border: 1px solid var(--ui-line); }
.billing-consent { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; color: var(--ui-text); font-size: .92rem; line-height: 1.6; cursor: pointer; }
.billing-consent input { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; }
.billing-consent-box .billing-fineprint a { color: var(--ui-accent); }
.billing-brick { margin-top: 20px; }
.billing-brick:empty { display: none; }
.billing-panel { display: grid; gap: 14px; padding: 22px 24px; }
.billing-panel p { margin: 0; color: var(--ui-muted); font-size: .92rem; line-height: 1.6; }
.billing-panel p a { color: var(--ui-accent); font-weight: 700; overflow-wrap: anywhere; }
.billing-panel-title { margin: 0; font-size: 1rem; font-weight: 650; }
.billing-account-chip { display: flex; gap: 12px; align-items: center; }
.billing-account-chip > span:last-child { display: grid; min-width: 0; }
.billing-account-chip strong { overflow-wrap: anywhere; }
.billing-account-chip small { color: var(--ui-muted); font-size: .82rem; line-height: 1.5; }
.billing-account-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--ui-soft); color: var(--ui-accent); font-size: 1.2rem; }
.billing-activity li { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--ui-line); }
.billing-activity li:last-child { padding-bottom: 0; border-bottom: 0; }
.billing-activity-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.billing-activity-row strong { font-size: .92rem; }
.billing-activity small { color: var(--ui-muted); font-size: .78rem; overflow-wrap: anywhere; }
.billing-dialog { width: min(480px, calc(100% - 32px)); padding: 32px; border: 1px solid var(--ui-line); border-radius: var(--plus-radius); background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow); text-align: center; }
.billing-dialog::backdrop { background: rgba(6, 20, 40, .55); backdrop-filter: blur(3px); }
.billing-dialog-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 12px; border-radius: 50%; background: var(--tone-danger-bg); color: var(--tone-danger-ink); font-size: 1.5rem; }
.billing-dialog h2 { margin: 0 0 10px; font-size: 1.35rem; font-weight: 650; }
.billing-dialog p { margin: 0; color: var(--ui-muted); line-height: 1.65; }
.billing-dialog-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.billing-danger { background: var(--tone-danger-bg); color: var(--tone-danger-ink); border-color: transparent; }
.billing-main :is(a, button, input):focus-visible, .billing-dialog button:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 3px; }
.billing-main [hidden] { display: none !important; }
/* Test-user CardForm: Mercado Pago secure iframes need a sized container. */
.billing-card-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.billing-field { display: grid; gap: 6px; color: var(--ui-text); font-size: .88rem; font-weight: 700; }
.billing-field:first-child, .billing-card-form > button { grid-column: 1 / -1; }
.billing-field :is(input, select), .billing-secure-field { box-sizing: border-box; width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-bg); color: var(--ui-text); font: inherit; font-weight: 400; }
.billing-secure-field iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 1000px) {
  .billing-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .billing-facts { grid-template-columns: minmax(0, 1fr); }
  .billing-status-actions, .billing-actions { width: 100%; }
  .billing-status-actions > *, .billing-actions > * { flex: 1 1 100%; }
  .billing-card-form { grid-template-columns: minmax(0, 1fr); }
  .billing-charges li { grid-template-columns: minmax(0, 1fr); }
  .billing-charges li > span { text-align: left; }
  .billing-dialog { padding: 24px; }
  .billing-dialog-actions > * { flex: 1 1 100%; }
}