/**
 * Eternity — overrides finais (carregar depois dos CSS de página)
 */

html[data-brand] .nod-page,
html[data-brand] .noc-page,
html[data-brand] .sp-page,
html[data-brand] .af-page,
html[data-brand] .oh-page,
html[data-brand] .tk-page,
html[data-brand] .ac-page,
html[data-brand] .api-page,
html[data-brand] .dg-page {
  --nod-p: var(--primary);
  --nod-p2: var(--primary-2);
  --nod-p3: var(--brand-navy);
  --nod-bg: var(--d-bg);
  --sp-p: var(--primary);
  --sp-p2: var(--primary-2);
  --sp-p3: var(--brand-navy);
  --sp-bg: var(--d-bg);
  --sp-cat: var(--primary-soft);
  --sp-row-alt: var(--d-soft);
  --af-p: var(--primary);
  --af-p2: var(--primary-2);
  --af-p3: var(--brand-navy);
  --af-bg: var(--d-bg);
  --oh-p: var(--primary);
  --oh-p2: var(--primary-2);
  --oh-p3: var(--brand-navy);
  --oh-bg: var(--d-bg);
  --tk-p: var(--primary);
  --tk-p2: var(--primary-2);
  --tk-p3: var(--brand-navy);
  --tk-bg: var(--d-bg);
  --ac-p: var(--primary);
  --ac-p2: var(--primary-2);
  --ac-p3: var(--brand-navy);
  --ac-bg: var(--d-bg);
  --api-p: var(--primary);
  --api-p2: var(--primary-2);
  --api-p3: var(--brand-navy);
  --api-bg: var(--d-bg);
  --dg-p: var(--primary);
  --dg-p2: var(--primary-2);
  --dg-p3: var(--brand-navy);
  --dg-bg: var(--d-bg);
}

html[data-brand] .nod-hero,
html[data-brand] .af-hero,
html[data-brand] .oh-hero,
html[data-brand] .tk-hero,
html[data-brand] .ac-hero,
html[data-brand] .api-hero,
html[data-brand] .dg-hero,
html[data-brand] .sp-hero {
  background: var(--brand-bar-grad) !important;
  box-shadow: var(--d-hero-shadow) !important;
}

html[data-brand] .nod-topbar,
html[data-brand] .af-topbar,
html[data-brand] .oh-topbar,
html[data-brand] .tk-topbar,
html[data-brand] .ac-topbar,
html[data-brand] .api-topbar,
html[data-brand] .dg-topbar,
html[data-brand] .sp-topbar {
  background: var(--brand-bar-grad) !important;
}

html[data-brand] .nod-submit,
html[data-brand] .noc-form .btn-primary,
html[data-brand] .noc-form #meuBotao,
html[data-brand] .af-submit,
html[data-brand] .oh-filter-btn,
html[data-brand] .tk-reply-btn,
html[data-brand] .ac-submit,
html[data-brand] .api-copy-btn,
html[data-brand] .dg-btn,
html[data-brand] .sp-order-btn {
  background: var(--brand-btn-grad) !important;
  border-color: var(--brand-accent) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-accent-2) 28%, transparent) !important;
}

html[data-brand] .nod-submit:hover,
html[data-brand] .noc-form .btn-primary:hover,
html[data-brand] .noc-form #meuBotao:hover,
html[data-brand] .af-submit:hover,
html[data-brand] .sp-order-btn:hover {
  box-shadow: 0 10px 22px color-mix(in srgb, var(--brand-accent-2) 34%, transparent) !important;
}

html[data-brand] .nod-field input:focus,
html[data-brand] .nod-field select:focus,
html[data-brand] .nod-field textarea:focus,
html[data-brand] .af-field input:focus,
html[data-brand] .af-field select:focus,
html[data-brand] .oh-field input:focus,
html[data-brand] .oh-field select:focus,
html[data-brand] .tk-field textarea:focus,
html[data-brand] .tk-field input:focus,
html[data-brand] .ac-field input:focus,
html[data-brand] .noc-dd__btn.is-open,
html[data-brand] .noc-dd__btn:focus,
html[data-brand] .noc-search:focus-within {
  border-color: var(--brand-accent) !important;
  box-shadow: 0 0 0 3px var(--brand-focus-ring) !important;
}

html[data-brand] .nod-card__title i,
html[data-brand] .af-card__title i,
html[data-brand] .oh-card__title i,
html[data-brand] .tk-card__title i,
html[data-brand] .ac-card__title i,
html[data-brand] .api-card__title i,
html[data-brand] .sp-card__title i,
html[data-brand] .nod-info-item__ico i,
html[data-brand] .nod-refill-card.is-yes .nod-refill-card__label i {
  color: var(--brand-accent) !important;
}

html[data-brand] .nod-refill-card.is-yes .nod-refill-card__badge {
  background: color-mix(in srgb, var(--brand-accent-2) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--brand-accent-2) 20%, transparent) !important;
  color: var(--brand-accent-2) !important;
}

html[data-brand] .noc-dd__item.is-active,
html[data-brand] .noc-dd__item:hover,
html[data-brand] .noc-search__icon,
html[data-brand] .noc-dd__btn i,
html[data-brand] .sp-cat-btn.is-active,
html[data-brand] .sp-row:hover {
  color: var(--brand-accent) !important;
}

html[data-brand] .noc-dd__item.is-active,
html[data-brand] .sp-cat-btn.is-active {
  background: color-mix(in srgb, var(--brand-accent) 12%, transparent) !important;
}

html[data-brand] .sp-progress__fill,
html[data-brand] .nod-progress__fill {
  background: linear-gradient(90deg, var(--brand-accent-2), var(--brand-accent)) !important;
}

html[data-brand] .oh-pagination a {
  background: var(--brand-surface-soft) !important;
  color: var(--brand-navy) !important;
}

html[data-brand] .oh-page .pagination .active > a,
html[data-brand] .oh-page .pagination .active > span,
html[data-brand] .oh-pagination .active a,
html[data-brand] .oh-pagination a:hover,
html[data-brand] .oh-actions .btn-primary {
  background: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  color: #fff !important;
}

html[data-brand] .oh-status--processing {
  background: var(--brand-accent-soft) !important;
  color: var(--brand-accent-2) !important;
}

/* Fundo geral das páginas */
html[data-brand] .body .wrapper-content,
html[data-brand] .body .wrapper-content__body,
html[data-brand] .body .wrapper-content__header,
html[data-brand] .af-page .wrapper-content__body,
html[data-brand] .tk-page .wrapper-content__body,
html[data-brand] .dg-page .wrapper-content__body,
html[data-brand] .nod-page .wrapper-content__body,
html[data-brand] .oh-page .wrapper-content__body,
html[data-brand] .sp-page .wrapper-content__body,
html[data-brand] .ac-page .wrapper-content__body,
html[data-brand] .api-page .wrapper-content__body {
  background: var(--brand-page-bg) !important;
}

/* navy.css legado — inputs e botões roxos */
html[data-brand] .body .form-control {
  background-color: #fff !important;
  border: 1px solid var(--d-border) !important;
  color: #334e6e !important;
}

html[data-brand] .body .form-group input:read-only,
html[data-brand] .body .form-group input:-moz-read-only,
html[data-brand] .body .form-group input:disabled,
html[data-brand] .body .form-control[readonly],
html[data-brand] .body .form-control:disabled,
html[data-brand] .body #charge,
html[data-brand] .body #charge_div .form-control {
  background-color: var(--brand-input-readonly-bg) !important;
  border-color: var(--brand-input-readonly-border) !important;
}

html[data-brand] .body .form-control:focus {
  background-color: #fff !important;
  border-color: var(--brand-accent) !important;
  box-shadow: 0 0 0 3px var(--brand-focus-ring) !important;
}

html[data-brand] .body .btn-primary,
html[data-brand] .body .btn-primary:hover,
html[data-brand] .body .btn-primary:active,
html[data-brand] .body .btn-primary:focus,
html[data-brand] .body .show > .btn-primary.dropdown-toggle,
html[data-brand] .body .btn-primary-account,
html[data-brand] .body .btn-primary-account:hover,
html[data-brand] .body .btn-primary-account-api,
html[data-brand] .body .btn-primary-account-api:hover {
  background: var(--brand-btn-grad) !important;
  border-color: var(--brand-accent) !important;
  color: #fff !important;
}

/* Novo pedido — cards e stats */
html[data-brand] .nod-stat,
html[data-brand] .nod-info-item {
  background: var(--brand-surface-stat) !important;
  border-color: var(--brand-surface-stat-border) !important;
}

html[data-brand] .nod-stat__label {
  color: var(--brand-stat-label) !important;
}

html[data-brand] .nod-refill-card.is-yes {
  background: var(--brand-surface-refill) !important;
  border-color: var(--brand-surface-refill-border) !important;
}

html[data-brand] .nod-note {
  background: var(--brand-surface-note) !important;
  color: var(--brand-text-note) !important;
}

html[data-brand] .nod-info-item__ico {
  background: var(--d-icon-bg) !important;
  color: var(--brand-accent) !important;
}

html[data-brand] .noc-form #service_description,
html[data-brand] .noc-dd__item:hover,
html[data-brand] .noc-dd__item.is-active {
  background: var(--brand-surface-soft) !important;
  color: var(--brand-accent-2) !important;
}

/* Adicionar saldo */
html[data-brand] .af-stat__ico,
html[data-brand] .af-badge,
html[data-brand] .af-manual,
html[data-brand] .af-preset:hover,
html[data-brand] .af-preset.is-active,
html[data-brand] .af-amount-wrap {
  background: var(--brand-badge-bg) !important;
  border-color: var(--brand-badge-border) !important;
  color: var(--brand-badge-text) !important;
}

html[data-brand] .af-preset {
  border-color: var(--d-border) !important;
}

html[data-brand] .af-preset:hover,
html[data-brand] .af-preset.is-active {
  color: var(--brand-accent-2) !important;
}

html[data-brand] .af-bonus {
  background: var(--brand-badge-bg) !important;
  border-color: var(--brand-badge-border) !important;
}

html[data-brand] .af-bonus__pct {
  background: var(--brand-accent) !important;
  color: #fff !important;
}

html[data-brand] .af-bonus__copy strong {
  color: var(--brand-accent-2) !important;
}

html[data-brand] .af-table tbody tr:hover {
  background: var(--brand-surface-soft) !important;
}

html[data-brand] .af-field label span,
html[data-brand] .af-field .af-required {
  color: var(--brand-accent) !important;
}

/* Tickets */
html[data-brand] .tk-submit {
  background: var(--brand-btn-grad) !important;
  border-color: var(--brand-accent) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-accent-2) 28%, transparent) !important;
}

html[data-brand] .tk-field input[readonly],
html[data-brand] .tk-field input.tk-locked,
html[data-brand] .tk-note {
  background: var(--brand-surface-note) !important;
  border-color: var(--brand-input-readonly-border) !important;
  color: var(--brand-text-note) !important;
}

html[data-brand] .tk-eligible li:hover {
  border-color: var(--brand-border-soft) !important;
  background: var(--brand-surface-soft) !important;
}

html[data-brand] .tk-card h2 i {
  color: var(--brand-accent) !important;
}

/* Divulgue e ganhe */
html[data-brand] .dg-stat__icon,
html[data-brand] .dg-steps span {
  background: var(--brand-btn-grad) !important;
  color: #fff !important;
}

html[data-brand] .dg-bonus__tag:not(.dg-bonus__tag--green) {
  background: var(--brand-accent) !important;
  color: #fff !important;
}

html[data-brand] .dg-field input[readonly],
html[data-brand] .dg-field textarea[readonly],
html[data-brand] .dg-copy input,
html[data-brand] .dg-bonus {
  background: var(--brand-surface-soft) !important;
  border-color: var(--brand-border-soft) !important;
}

html[data-brand] .dg-bonus__icon {
  border-color: var(--brand-border-chip) !important;
  color: var(--brand-accent) !important;
}

html[data-brand] .dg-copy button,
html[data-brand] .dg-submit {
  background: var(--brand-btn-grad) !important;
  border-color: var(--brand-accent) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-accent-2) 25%, transparent) !important;
}

/* Serviços, pedidos, conta, API */
html[data-brand] .sp-cat,
html[data-brand] .sp-row-alt,
html[data-brand] .oh-table tbody tr:hover,
html[data-brand] .oh-table tbody tr:hover td,
html[data-brand] .api-copy,
html[data-brand] .api-key-box {
  background: var(--brand-surface-soft) !important;
}

html[data-brand] .oh-badge--inprogress {
  background: var(--brand-surface-stat) !important;
  color: var(--brand-accent-2) !important;
}

html[data-brand] .ac-field input[readonly],
html[data-brand] .ac-note {
  background: var(--brand-surface-note) !important;
  color: var(--brand-text-note) !important;
}

html[data-brand] .api-copy:hover {
  background: var(--brand-surface-soft) !important;
}

html[data-brand] .af-card h2 i,
html[data-brand] .dg-card h2 i,
html[data-brand] .tk-card h2 i,
html[data-brand] .ac-card h2 i,
html[data-brand] .api-card h2 i {
  color: var(--brand-accent) !important;
}

html[data-brand] .tk-field input:focus,
html[data-brand] .tk-field select:focus,
html[data-brand] .tk-field textarea:focus,
html[data-brand] .af-field input:focus,
html[data-brand] .af-field select:focus,
html[data-brand] .dg-field input:focus,
html[data-brand] .dg-field textarea:focus,
html[data-brand] .ac-field input:focus {
  border-color: var(--brand-accent) !important;
  box-shadow: 0 0 0 3px var(--brand-focus-ring) !important;
}