/*
 * Vermoegensschutz Digital brand layer
 * Primary logo colors: #ffce31 and #ffa934
 * Loaded after the public, portal, and admin stylesheets.
 */

:root,
.cf-public,
.cf-portal,
.cf-admin {
  --brand-yellow: #ffce31;
  --brand-orange: #ffa934;
  --brand-amber-ink: #8a5600;
  --brand-dark: #241a08;
  --brand-dark-2: #3a2a0f;
  --brand-cream: #fff9e8;
  --brand-cream-2: #fff3c4;
  --brand-border: #ead9aa;
  --brand-text: #2d2618;
  --brand-muted: #6d6250;

  --cf-blue: var(--brand-yellow);
  --cf-blue-hover: var(--brand-orange);
  --cf-aqua: var(--brand-orange);
  --tf-navy: var(--brand-dark);
  --tf-navy-2: var(--brand-dark-2);
  --tf-gold: var(--brand-yellow);
  --tf-gold-2: var(--brand-orange);
  --tf-surface: var(--brand-cream);
  --tf-dark: var(--brand-dark);
  --tf-text: var(--brand-text);
  --tf-text-muted: var(--brand-muted);
  --tf-text-on-dark: #fff8df;
  --tf-border: var(--brand-border);
  --bs-body-color: var(--brand-text);
  --bs-secondary-color: var(--brand-muted);
  --bs-border-color: var(--brand-border);
}

/* Shared controls */
.cf-public :where(a, button, input, select, textarea):focus-visible,
.cf-portal :where(a, button, input, select, textarea):focus-visible,
.cf-admin :is(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--brand-orange);
}

.cf-public ::selection,
.cf-portal ::selection,
.cf-admin ::selection {
  background: #ffe58a;
  color: var(--brand-dark);
}

/* Public website */
.cf-public {
  background: #fff;
  color: var(--brand-text);
}

.cf-public a:hover,
.cf-public .tf-navbar .nav-link.active,
.cf-public .tf-navbar .nav-link:hover,
.cf-public .tf-eyebrow,
.cf-public .cf-hero-accent,
.cf-public .tf-step-num,
.cf-public .tf-process-meta__cell .value {
  color: var(--brand-amber-ink);
}

.cf-public .btn-gold,
.cf-public .btn-primary {
  background: var(--brand-yellow) !important;
  border-color: var(--brand-yellow) !important;
  color: var(--brand-dark) !important;
  box-shadow: 0 6px 18px rgb(255 174 52 / 22%);
}

.cf-public .btn-gold:hover,
.cf-public .btn-gold:focus,
.cf-public .btn-primary:hover,
.cf-public .btn-primary:focus {
  background: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color: var(--brand-dark) !important;
  box-shadow: 0 8px 22px rgb(255 169 52 / 28%);
}

.cf-public .btn-light-solid,
.cf-public .btn-outline-primary {
  border-color: #d8bd72;
  color: var(--brand-dark);
}

.cf-public .btn-light-solid:hover,
.cf-public .btn-outline-primary:hover {
  background: var(--brand-cream);
  border-color: var(--brand-orange);
  color: var(--brand-amber-ink);
}

.cf-public .tf-navbar {
  border-color: #eee2bf;
  box-shadow: 0 2px 16px rgb(76 50 10 / 6%);
}

.cf-public .tf-navbar .nav-link.active::after {
  background: linear-gradient(90deg, var(--brand-yellow), var(--brand-orange));
}

.cf-public .tf-hero,
.cf-public .tf-svc-hero {
  background-color: var(--brand-cream);
  background-image:
    radial-gradient(ellipse at 92% 15%, rgb(255 206 49 / 36%), transparent 52%),
    linear-gradient(115deg, #fffdf7, #fff3cf);
}

.cf-public .tf-section.alt,
.cf-public.cf-page-contact .tf-svc-block,
.cf-public .accordion-button:not(.collapsed),
.cf-public .accordion-body,
.cf-public .tf-panel--warn,
.cf-public .tf-svc-feature__bullet,
.cf-public .tf-phase__chip {
  background: var(--brand-cream);
}

.cf-public :is(.tf-card, .tf-svc-asset, .tf-principle, .tf-testimonial):hover {
  border-color: #f1c552;
  box-shadow: 0 12px 28px rgb(133 83 0 / 10%);
}

.cf-public :is(.tf-card .icon, .tf-svc-asset__icon),
.cf-public .tf-avatar {
  color: var(--brand-amber-ink);
  background: var(--brand-cream);
  border-color: #f0d98f;
}

.cf-public .tf-card-feature,
.cf-public .tf-stats,
.cf-public .tf-svc-spotlight,
.cf-public .tf-svc-visual,
.cf-public .tf-footer {
  background-color: var(--brand-dark);
}

.cf-public .tf-card-feature {
  background-image: radial-gradient(ellipse at 100% 0, rgb(255 169 52 / 26%), transparent 65%);
  border-color: #5a431b;
}

.cf-public :is(.tf-card-feature, .tf-stats, .tf-svc-block--dark, .tf-svc-spotlight, .tf-tracer-graph) {
  --tf-gold: var(--brand-yellow);
  --tf-gold-2: var(--brand-orange);
}

.cf-public :is(.tf-card-feature, .tf-stats, .tf-svc-block--dark, .tf-svc-spotlight) .tf-eyebrow,
.cf-public .tf-card-feature .icon,
.cf-public .tf-footer a:hover {
  color: var(--brand-yellow);
}

.cf-public .tf-stats-bg,
.cf-public .tf-svc-block--dark::before,
.cf-public .tf-svc-spotlight__bg {
  background: radial-gradient(ellipse at 88% 20%, rgb(255 169 52 / 25%), transparent 65%);
}

.cf-public .tf-cta-panel {
  background: linear-gradient(135deg, var(--brand-yellow), var(--brand-orange));
  color: var(--brand-dark);
}

.cf-public .tf-cta-panel .btn-gold,
.cf-public .tf-cta-panel .btn-gold:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--brand-dark) !important;
}

.cf-public .tf-footer .btn-gold {
  color: var(--brand-dark) !important;
}

.cf-public .form-control:focus,
.cf-public .form-select:focus,
.cf-public .accordion-button:focus {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgb(255 206 49 / 24%);
}

/* Client portal */
.cf-portal {
  background: #fffaf0;
  color: var(--brand-text);
}

.cf-portal a,
.cf-portal .tf-market-card a,
.cf-portal .tf-market-eyebrow {
  color: var(--brand-amber-ink);
}

.cf-portal a:hover {
  color: #b76800;
}

.cf-portal .tf-admin__sidebar {
  background: var(--brand-dark);
  border-color: #4b3715;
}

.cf-portal .tf-admin__navlabel {
  color: #c9b98f;
}

.cf-portal .tf-admin__navitem {
  color: #eee3c3;
}

.cf-portal .tf-admin__navitem:hover {
  background: #3b2c12;
}

.cf-portal .tf-admin__navitem.is-active {
  background: linear-gradient(135deg, var(--brand-yellow), var(--brand-orange));
  color: var(--brand-dark);
}

.cf-portal .tf-admin__navitem.is-active .ic {
  color: var(--brand-dark);
}

.cf-portal .tf-balance-menu__btn,
.cf-portal .tf-userbtn__avatar,
.cf-portal .tf-userdrop__item:hover,
.cf-portal .tf-convert__preview,
.cf-portal .tf-panel .flex-row-reverse > .flex-grow-1,
.cf-portal .tf-wd-addr:has(input:checked),
.cf-portal .tf-kyc__why,
.cf-portal .tf-watch-row.is-active {
  background: var(--brand-cream) !important;
  border-color: #efd785;
}

.cf-portal .tf-balance-menu__btn strong,
.cf-portal .tf-userbtn__avatar {
  color: var(--brand-amber-ink);
}

.cf-portal .btn-gold,
.cf-portal .btn-primary,
.cf-portal .tf-convert__submit,
.cf-portal .tf-wd__submit,
.cf-portal .tf-balance-menu__link,
.cf-portal .tf-panel .flex-row-reverse > .flex-shrink-0 > div,
.cf-portal .tf-chart-toolbar button.is-active,
.cf-portal .tf-chart-toolbar button[aria-pressed=true] {
  background: var(--brand-yellow) !important;
  border-color: var(--brand-yellow) !important;
  color: var(--brand-dark) !important;
}

.cf-portal .btn-gold:hover,
.cf-portal .btn-gold:focus,
.cf-portal .btn-primary:hover,
.cf-portal .tf-convert__submit:hover:not(:disabled),
.cf-portal .tf-wd__submit:hover:not(:disabled) {
  background: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color: var(--brand-dark) !important;
}

.cf-portal .form-control:focus,
.cf-portal .form-select:focus {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgb(255 206 49 / 24%);
}

.cf-portal .tf-portfolio,
.cf-portal .tf-wallet-summary {
  background-color: var(--brand-dark);
  background-image: radial-gradient(ellipse at 100% 0, rgb(255 169 52 / 28%), transparent 65%);
  border-color: #5a431b;
}

.cf-portal .tf-market-card:first-child {
  border-top-color: var(--brand-yellow);
}

/* Admin workspace */
.cf-admin {
  background: #f8f6f0;
  color: var(--brand-text);
}

.cf-admin a,
.cf-admin .tf-shell-footer__nav a:hover {
  color: var(--brand-amber-ink);
}

.cf-admin a:hover {
  color: #b76800;
}

.cf-admin .tf-admin__sidebar {
  background: var(--brand-dark);
  border-color: #4b3715;
}

.cf-admin .tf-admin__navlabel {
  color: #bfae83;
}

.cf-admin .tf-admin__navitem {
  color: #e8ddbd;
}

.cf-admin .tf-admin__navitem:hover {
  color: #fff;
  background: #3b2c12;
}

.cf-admin .tf-admin__navitem.is-active,
.cf-admin .tf-admin__navitem.is-active:hover {
  background: linear-gradient(135deg, var(--brand-yellow), var(--brand-orange));
  color: var(--brand-dark) !important;
  box-shadow: inset 0 0 0 1px rgb(80 51 0 / 16%);
}

.cf-admin .tf-admin__navitem.is-active .ic {
  color: var(--brand-dark);
}

.cf-admin .tf-admin__badge,
.cf-admin .tf-userbtn__avatar,
.cf-admin .tf-userdrop__item:hover,
.cf-admin .tf-lang__option:hover,
.cf-admin .tf-lang__option.is-active,
.cf-admin :is(.tf-credit-filter__chip.is-active, .tf-deposit-filter__pill.is-active) {
  background: var(--brand-cream);
  border-color: #efd785;
  color: var(--brand-amber-ink) !important;
}

.cf-admin :is(.btn-primary, .btn-gold, .tf-credit-card__submit),
.cf-admin :is(.page-item.active .page-link, .pagination .page-link.active, .nav-pills .nav-link.active, .list-group-item.active) {
  background: var(--brand-yellow) !important;
  border-color: var(--brand-yellow) !important;
  color: var(--brand-dark) !important;
}

.cf-admin :is(.btn-primary, .btn-gold, .tf-credit-card__submit):hover {
  background: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color: var(--brand-dark) !important;
}

.cf-admin .form-control:focus,
.cf-admin .form-select:focus,
.cf-admin .cf-manager-email:focus-within {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgb(255 206 49 / 24%);
}

.cf-admin .cf-manager-permission:has(input:checked) {
  border-color: #e2bd49;
  background: var(--brand-cream);
}

.cf-admin .cf-manager-permission input {
  accent-color: var(--brand-orange);
}

.cf-admin .ad-hero {
  background: radial-gradient(ellipse at 15% 0%, #554019 0%, transparent 65%), var(--brand-dark);
  border-color: #5a431b;
}

.cf-admin .ad-hero__eyebrow,
.cf-admin .ad-hero__mark,
.cf-admin .ad-pipeline__heading > div > span {
  color: var(--brand-yellow);
}

.cf-admin .ad-hero__description,
.cf-admin .ad-hero__metrics span,
.cf-admin .ad-pipeline__heading > span {
  color: #e7d8ad;
}

.cf-admin .ad-queue.has-items .ad-queue__icon,
.cf-admin .ad-case-name strong,
.cf-admin .ad-shortcuts a:hover,
.cf-admin .cf-case-stages li.is-current strong {
  color: var(--brand-amber-ink);
}

.cf-admin .cf-case-stages li.is-current > span,
.cf-admin .cf-team-workload i {
  background: linear-gradient(90deg, var(--brand-yellow), var(--brand-orange));
}

.cf-admin .tf-admin__content,
.cf-admin .ad-shortcuts {
  background-color: #f8f6f0;
}

@media (prefers-reduced-motion: reduce) {
  .cf-public *,
  .cf-portal *,
  .cf-admin * {
    transition-duration: 0.01ms !important;
  }
}