.vendedor-page main button.group.w-full {
  position: relative;
}

@media (min-width: 768px) {
  .vendedor-page main button.group.w-full {
    margin-top: 198px;
  }

  .vendedor-page main button.group.w-full::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 24px);
    height: 174px;
    border-radius: 22px;
    background-image: url('/tradipay/banner-carteira.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
    pointer-events: none;
  }

  html[data-vendedor-brand="queropay"] .vendedor-page main button.group.w-full::before {
    background-image: url('/queropay/banner-carteira.svg');
  }
}

@media (min-width: 1180px) {
  .vendedor-page main button.group.w-full {
    margin-top: 218px;
  }

  .vendedor-page main button.group.w-full::before {
    height: 194px;
  }
}

@media (max-width: 767px) {
  .vendedor-page main button.group.w-full {
    margin-top: 104px;
  }

  .vendedor-page main button.group.w-full::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 14px);
    height: 90px;
    border-radius: 16px;
    background-image: url('/tradipay/banner-carteira.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
    pointer-events: none;
  }

  html[data-vendedor-brand="queropay"] .vendedor-page main button.group.w-full::before {
    background-image: url('/queropay/banner-carteira.svg');
  }
}

html[data-vendedor-theme="light"] .vendedor-page main button.group.w-full::before {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
}

/* --------------------------------------------------------------------------
   QueroPay identity — scoped exclusively to QueroPay. TradiPay is untouched.
   -------------------------------------------------------------------------- */
html[data-vendedor-brand="queropay"] .vendedor-page {
  --qp-orange: #ff6a00;
  --qp-orange-soft: rgba(255, 106, 0, 0.18);
  --qp-orange-border: rgba(255, 106, 0, 0.34);
  background-image: radial-gradient(circle at 0% 100%, rgba(255,106,0,.10) 0%, transparent 40%), radial-gradient(circle at 100% 0%, rgba(255,106,0,.065) 0%, transparent 45%) !important;
}

/* Header brand square: F -> Q and gold -> orange. */
html[data-vendedor-brand="queropay"] .vendedor-page .vendedor-header.hidden > div:first-child > div:first-child {
  position: relative;
  color: transparent !important;
  background-color: var(--qp-orange) !important;
}

html[data-vendedor-brand="queropay"] .vendedor-page .vendedor-header.hidden > div:first-child > div:first-child::after {
  content: "Q";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  font-weight: 800;
}

html[data-vendedor-brand="queropay"] .vendedor-page .vendedor-header.hidden > div:first-child > div:nth-child(2) span:last-child,
html[data-vendedor-brand="queropay"] .vendedor-page .vendedor-header.hidden button .text-left p:last-child {
  color: var(--qp-orange) !important;
}

html[data-vendedor-brand="queropay"] .vendedor-page .vendedor-header.hidden button > div:first-child {
  background-color: var(--qp-orange) !important;
}

/* Active period and refresh. */
html[data-vendedor-brand="queropay"] .vendedor-page .vendedor-surface button.border-transparent {
  background: var(--qp-orange) !important;
}

html[data-vendedor-brand="queropay"] .vendedor-page .vendedor-surface button svg[style] {
  color: var(--qp-orange) !important;
}

/* Brand-colored text generated with inline styles in the legacy dashboard. */
html[data-vendedor-brand="queropay"] .vendedor-page .vendedor-surface p[style*="color"],
html[data-vendedor-brand="queropay"] .vendedor-page .vendedor-surface span[style*="color"] {
  color: var(--qp-orange) !important;
}

/* Meta e progresso: a barra ainda vinha com o dourado inline do TradiPay.
   Sobrescreve exclusivamente no QueroPay sem tocar no TradiPay. */
html[data-vendedor-brand="queropay"] .vendedor-page .vendedor-surface div[style*="width"][style*="background"] {
  background: var(--qp-orange) !important;
}

/* Icon chips / ranking badges that were hardcoded with TradiPay gold. */
html[data-vendedor-brand="queropay"] .vendedor-page .vendedor-surface div:has(> svg[style]) {
  background: var(--qp-orange-soft) !important;
}

html[data-vendedor-brand="queropay"] .vendedor-page .vendedor-surface div:has(> svg[style]) > svg[style] {
  color: var(--qp-orange) !important;
}

html[data-vendedor-brand="queropay"] .vendedor-page .vendedor-surface span[style*="background"] {
  background: var(--qp-orange-soft) !important;
  color: var(--qp-orange) !important;
}

html[data-vendedor-brand="queropay"] .vendedor-page [stroke="#F5A623"],
html[data-vendedor-brand="queropay"] .vendedor-page [stroke="#f5a623"] {
  stroke: var(--qp-orange) !important;
}

html[data-vendedor-brand="queropay"] .vendedor-page [fill="#F5A623"],
html[data-vendedor-brand="queropay"] .vendedor-page [fill="#f5a623"] {
  fill: var(--qp-orange) !important;
}

/* Create-payment-link callout. */
html[data-vendedor-brand="queropay"] .vendedor-page main button.group.w-full {
  border-color: var(--qp-orange-border) !important;
  background: rgba(255, 106, 0, 0.085) !important;
}

html[data-vendedor-brand="queropay"] .vendedor-page main button.group.w-full:hover {
  border-color: rgba(255, 106, 0, 0.50) !important;
  background: rgba(255, 106, 0, 0.12) !important;
}

html[data-vendedor-brand="queropay"] .vendedor-page main button.group.w-full svg[style] {
  color: var(--qp-orange) !important;
}

html[data-vendedor-brand="queropay"] .vendedor-page main button.group.w-full span[style] {
  background: var(--qp-orange-soft) !important;
  color: var(--qp-orange) !important;
}

html[data-vendedor-brand="queropay"][data-vendedor-theme="light"] .vendedor-page main button.group.w-full {
  background: #fff0e7 !important;
  border-color: #ffb27f !important;
}

html[data-vendedor-brand="queropay"][data-vendedor-theme="light"] .vendedor-page main button.group.w-full:hover {
  background: #ffe6d6 !important;
  border-color: #ff9852 !important;
}

/* In light mode the old global seller CSS paints some brand icon chips amber.
   Override only chips that belong to QueroPay brand accents; semantic KPI colors stay intact. */
html[data-vendedor-brand="queropay"][data-vendedor-theme="light"] .vendedor-page .vendedor-header.hidden > div:first-child > div:first-child,
html[data-vendedor-brand="queropay"][data-vendedor-theme="light"] .vendedor-page .vendedor-header.hidden button > div:first-child {
  background: var(--qp-orange) !important;
}

/* Relatório TradiPay/QueroPay: mantém o banner fino e evita imagem quebrada no preview. */
div:has(> img[src="/tradipay/banner-relatorio.svg"]) {
  min-height: 112px;
  height: 112px;
  background-image: url('/tradipay/banner-carteira.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-color: #0b0b0b !important;
}

div:has(> img[src="/tradipay/banner-relatorio.svg"]) > img {
  display: block !important;
  width: 100% !important;
  height: 112px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html[data-vendedor-brand="queropay"] div:has(> img[src="/tradipay/banner-relatorio.svg"]) {
  background-image: url('/queropay/banner-carteira.svg') !important;
}

@media (max-width: 900px) {
  div:has(> img[src="/tradipay/banner-relatorio.svg"]) {
    min-height: 94px;
    height: 94px;
  }

  div:has(> img[src="/tradipay/banner-relatorio.svg"]) > img {
    height: 94px !important;
  }
}