/*
 * Tema rosa elegante da JN Salles.
 * Mantido separado do CSS legado para facilitar ajustes e reversao.
 */

:root {
  --hot-pink: #d83f7d;
  --hot-pink-strong: #b42c63;
  --hot-pink-dark: #6f2445;
  --hot-pink-soft: #f4dce7;
  --hot-pink-surface: #faf8f9;
  --hot-pink-card: #ffffff;
  --hot-pink-text: #34242c;

  --incrivel-bg: #faf8f9;
  --incrivel-border: #eadde3;
  --incrivel-bgColor: #34242c;
  --incrivel-bgLink: #6f2445;
  --incrivel-bgLinkHover: #b42c63;
  --incrivel-rgba: 255, 255, 255;
  --incrivel-rgbaInvert: 52, 36, 44;
  --incrivel-formBg: #ffffff;
  --incrivel-formBgHover: #f8edf2;
  --incrivel-formBgHoverColor: #5c3145;
  --incrivel-formBorder: #ded0d7;
  --incrivel-formColor: #34242c;
  --incrivel-cardBg: #ffffff;
  --incrivel-cardColor: #34242c;
  --incrivel-cardLink: #6f2445;
  --incrivel-modalBg: #ffffff;
  --incrivel-modalBorder: #eadde3;
  --incrivel-modalColor: #34242c;
  --incrivel-primaria: #b42c63;
  --incrivel-primariaColor: #ffffff;
  --incrivel-primariaColornew: #f8edf2;
  --incrivel-primariaLink: #ffffff;
  --incrivel-primariaLinkHover: #ffffff;
  --incrivel-primariaDarken: #f7f1f4;
  --incrivel-primariaDarkenColor: #5c3145;
  --incrivel-primariaDarkenLink: #6f2445;
  --incrivel-primariaDarkenLinkHover: #b42c63;
  --incrivel-secundaria: #6f2445;
  --cor-secundaria: #6f2445;
  --cor-primaria-light: #d8739d;
  --cor-primaria-lighten: #f8edf2;
  --cor-primaria-link: #ffffff;
  --cor-secundaria-link: #ffffff;

  --primary-color: #b42c63;
  --primary-text-color: #ffffff;
  --secondary-color: #6f2445;
  --tertiary-color: #b42c63;
  --header-bg-color: #472536;
  --button-color: #b42c63;
  --button-border: #c75b87;
  --title-color: #ffffff;
  --text-color: #f4dce7;

  --bs-primary: #b42c63;
  --bs-primary-rgb: 180, 44, 99;
  --bs-success: #b42c63;
  --bs-success-rgb: 180, 44, 99;
}

html,
body {
  accent-color: var(--hot-pink-strong);
}

body {
  color: var(--hot-pink-text);
  background-color: var(--hot-pink-surface);
  background-image: none;
}

::selection {
  color: #ffffff;
  background: var(--hot-pink-strong);
}

::-webkit-scrollbar-thumb {
  background: #b9a4ae !important;
}

.header-app-header .header-app-header-container,
.header-app-header.campanha .header-app-header-container,
.app-header,
.navbar {
  color: #ffffff !important;
  background-color: #472536 !important;
  background-image: none !important;
  box-shadow: 0 1px 0 rgba(52, 36, 44, 0.16);
}

.navbar.scrolled {
  background-color: rgba(71, 37, 54, 0.97) !important;
}

.black-bar,
.black-bar.campanha {
  background-color: var(--hot-pink-strong) !important;
  background-image: none !important;
}

.app-main,
.app-footer {
  background-color: var(--hot-pink-surface);
}

.app-footer {
  border-top: 1px solid #e8e0e4;
  background-color: #f5f2f4 !important;
}

.app-card,
.ganhadorItem_ganhadorContainer__1Sbxm,
.app-titulos-premiados--item,
.SorteioTpl_sorteioTpl__2s2Wu,
.SorteioTpl_sorteioTpl__home {
  border: 1px solid rgba(52, 36, 44, 0.1);
  box-shadow: 0 1px 4px rgba(52, 36, 44, 0.04);
}

.bg-cor-primaria,
.btn-success,
.btn-primary,
.bg-primary,
.bg-success {
  color: #ffffff !important;
  border-color: var(--hot-pink-strong) !important;
  background-color: var(--hot-pink-strong) !important;
  background-image: none !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  color: #ffffff !important;
  border-color: var(--hot-pink-dark) !important;
  background-color: var(--hot-pink-dark) !important;
  background-image: none !important;
  box-shadow: 0 0 0 0.2rem rgba(180, 44, 99, 0.14) !important;
}

.btn-outline-success,
.btn-outline-primary {
  color: var(--hot-pink-strong) !important;
  border-color: var(--hot-pink-strong) !important;
}

.btn-outline-success:hover,
.btn-outline-primary:hover {
  color: #ffffff !important;
  background-color: var(--hot-pink-strong) !important;
}

.text-primary,
.text-success,
.text-cor-primaria,
.incrivel-primariaLink {
  color: var(--hot-pink-strong) !important;
}

.vendasExpressNumsSelect .item.mais-popular {
  border-color: var(--hot-pink) !important;
}

.vendasExpressNumsSelect .item.mais-popular::before {
  color: #ffffff;
  background-color: var(--hot-pink-strong);
}

.vendasExpressNumsSelect.v2 .item.mais-popular .item-content,
.vendasExpressNumsSelect .item.active {
  color: #ffffff !important;
  border-color: var(--hot-pink-strong) !important;
  background-color: var(--hot-pink-strong) !important;
  background-image: none !important;
}

.vendasExpressNumsSelect .item.active h3,
.vendasExpressNumsSelect .item.active p,
.vendasExpressNumsSelect.v2 .item.mais-popular h3 {
  color: #ffffff !important;
}

.progress-bar,
.step1-progress.active,
.step2-progress.active,
.step3-progress.active,
.step4-progress.active,
.step-header i.active {
  background-color: var(--hot-pink-strong) !important;
  background-image: none !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--hot-pink) !important;
  box-shadow: 0 0 0 0.2rem rgba(180, 44, 99, 0.12) !important;
}

.custom-content-wrapper-details .btn,
.botao-girar {
  color: #ffffff !important;
  border-color: var(--hot-pink-strong) !important;
  background: var(--hot-pink-strong) !important;
}

.bg-gradient-pink,
.bg-gradient-purple,
.bg-gradient-red2 {
  border-color: var(--hot-pink-strong) !important;
  background: var(--hot-pink-strong) !important;
}

.css-dtzixn {
  color: var(--hot-pink-strong);
  border-color: var(--hot-pink-strong);
}

.css-1mcv32d {
  color: var(--hot-pink-strong);
}

/* A pagina inicial declara parte do visual depois do CSS principal. */
.bg-azul-personalizado {
  background-color: var(--hot-pink-strong) !important;
}

.home-hero {
  background: linear-gradient(135deg, #3b2330 0%, #632945 100%) !important;
  box-shadow: 0 3px 12px rgba(52, 36, 44, 0.1) !important;
}

.home-hero__eyebrow {
  color: var(--hot-pink-soft) !important;
}

.home-info-card {
  border-color: rgba(52, 36, 44, 0.1) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(52, 36, 44, 0.04) !important;
}

.home-info-card h2 {
  color: var(--hot-pink-text) !important;
}

.home-info-card p {
  color: #7b4965 !important;
}

.home-info-actions a {
  color: #ffffff !important;
  background: var(--hot-pink-strong) !important;
}

.comprador {
  border-color: var(--hot-pink-strong) !important;
}

/* Limpeza visual global: superfícies calmas e um único nível de destaque. */
.app-main {
  padding-top: 16px;
  padding-bottom: 28px;
}

.app-card:not(.rounded-0),
.modal-content,
.accordion-item {
  border-radius: 14px;
}

.app-card {
  background: var(--hot-pink-card);
}

.app-title {
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.app-title h1,
.app-title .h1 {
  font-weight: 750;
  letter-spacing: -0.025em;
}

.app-title-desc,
.text-muted {
  color: #806976 !important;
}

.form-control,
.form-select {
  min-height: 44px;
  border-color: #ded0d7;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: none !important;
}

.btn {
  border-radius: 10px;
  font-weight: 700;
  box-shadow: none;
}

.badge {
  box-shadow: none !important;
}

/* Compra de cotas: mais legibilidade, menos blocos competindo entre si. */
.purchase-helper-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.purchase-helper-card .card-body {
  padding: 8px 12px;
}

.purchase-helper-card p {
  margin: 0;
  color: #806976;
  line-height: 1.4;
}

.ranking-spotlight {
  min-height: 46px;
  margin-bottom: 10px;
  border-color: rgba(52, 36, 44, 0.1);
  border-radius: 12px;
  background: #ffffff;
  background-image: none;
  color: var(--hot-pink-dark);
  box-shadow: 0 1px 4px rgba(52, 36, 44, 0.04);
}

.ranking-spotlight:hover,
.ranking-spotlight:focus-visible {
  color: var(--hot-pink-dark);
  transform: none;
  box-shadow: 0 2px 7px rgba(52, 36, 44, 0.07);
}

.ranking-spotlight:focus-visible {
  outline-color: rgba(180, 44, 99, 0.18);
}

.ranking-spotlight__icon {
  color: #ffffff;
  background: var(--hot-pink-strong);
}

.app-vendas-express {
  padding: 12px;
  border: 1px solid rgba(52, 36, 44, 0.1);
  border-radius: 16px;
  background: #ffffff;
}

.vendasExpressNumsSelect.v2 {
  width: 100%;
  gap: 8px;
  justify-content: space-between;
}

.vendasExpressNumsSelect.v2 .item {
  width: calc(33.333% - 6px);
  margin-bottom: 0 !important;
  overflow: visible;
  border: 1px solid #e6dbe0;
  border-radius: 12px;
  background: transparent !important;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.vendasExpressNumsSelect.v2 .item:hover {
  transform: translateY(-1px);
  border-color: var(--hot-pink);
  box-shadow: 0 2px 7px rgba(52, 36, 44, 0.06);
}

.vendasExpressNumsSelect.v2 .item .item-content {
  min-height: 70px;
  height: auto;
  border: 0;
  border-radius: 11px;
  background: #ffffff;
  color: var(--hot-pink-text);
}

.vendasExpressNumsSelect.v2 .item .item-content h3,
.vendasExpressNumsSelect.v2 .item .item-content p {
  color: var(--hot-pink-text) !important;
}

.vendasExpressNumsSelect.v2 .item .item-content h3 {
  font-size: 1.55rem !important;
  font-weight: 800;
  line-height: 1.1;
}

.vendasExpressNumsSelect.v2 .item .item-content p {
  margin-top: 3px;
  color: #806976 !important;
  font-size: 0.67rem !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.vendasExpressNumsSelect.v2 .item.mais-popular {
  border: 2px solid var(--hot-pink-strong) !important;
  background: #ffffff !important;
  box-shadow: none;
}

.vendasExpressNumsSelect .item.mais-popular::before {
  top: -2px;
  width: 104px;
  padding: 3px 8px;
  border-radius: 0 0 9px 9px;
  font-size: 0.62rem;
  font-weight: 750;
}

.vendasExpressNumsSelect.v2 .item.mais-popular .item-content {
  padding-top: 21px !important;
  background: #fbf3f7 !important;
  background-image: none !important;
  color: var(--hot-pink-text) !important;
}

.vendasExpressNumsSelect.v2 .item.mais-popular .item-content h3,
.vendasExpressNumsSelect.v2 .item.mais-popular .item-content p {
  color: var(--hot-pink-text) !important;
}

.vendasExpressNumsSelect.v2 .item.active,
.vendasExpressNumsSelect.v2 .item.active .item-content {
  border-color: var(--hot-pink-strong) !important;
  background: var(--hot-pink-strong) !important;
  background-image: none !important;
}

.vendasExpressNumsSelect.v2 .item.active .item-content h3,
.vendasExpressNumsSelect.v2 .item.active .item-content p {
  color: #ffffff !important;
}

.purchase-action-row {
  gap: 8px;
  margin-top: 10px;
}

.purchase-quantity-control {
  flex: 0 0 46%;
  margin-right: 0 !important;
  border-color: #e6dbe0;
  box-shadow: none;
}

.purchase-quantity-control .card-body {
  height: 56px;
  gap: 7px;
}

.purchase-quantity-control .numeroChange {
  padding: 7px;
  color: var(--hot-pink-dark);
}

.purchase-quantity-control .qty {
  min-height: 38px;
  border-color: #ded0d7;
  background: #faf8f9;
  color: var(--hot-pink-text);
  font-weight: 800;
}

.purchase-submit-button {
  min-height: 58px;
  margin-bottom: 0 !important;
  border: 0 !important;
  background: var(--hot-pink-strong) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 2px 7px rgba(111, 36, 69, 0.14);
}

.purchase-submit-button:hover,
.purchase-submit-button:focus {
  background: var(--hot-pink-dark) !important;
  transform: translateY(-1px);
}

.purchase-submit-content,
.purchase-submit-icon {
  display: flex;
  align-items: center;
}

.purchase-submit-content {
  justify-content: center;
  gap: 10px;
}

.purchase-submit-icon {
  flex: 0 0 auto;
}

.purchase-submit-icon svg {
  width: 28px;
  height: 28px;
}

.purchase-submit-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.purchase-submit-title {
  font-size: 0.96rem;
  font-weight: 800;
}

.purchase-submit-button #total {
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.76rem !important;
  font-weight: 700;
}

@media (max-width: 420px) {
  .app-vendas-express {
    padding: 10px;
  }

  .vendasExpressNumsSelect.v2 {
    gap: 6px;
  }

  .vendasExpressNumsSelect.v2 .item {
    width: calc(33.333% - 4px);
  }

  .vendasExpressNumsSelect.v2 .item .item-content h3 {
    font-size: 1.35rem !important;
  }

  .purchase-action-row {
    flex-wrap: wrap;
  }

  .purchase-quantity-control,
  .purchase-submit-button {
    flex: 1 1 100%;
    width: 100% !important;
  }
}