/* =========================================================
   Relinq Beauty Theme Overrides
   Primary color: #bb2649
   ========================================================= */

:root {
  --rb-primary: #bb2649;
  --rb-primary-dark: #8b1c3c;
  --rb-primary-soft: #fde4ec;
  --rb-primary-soft-2: #f8ccd8;
}

/* ------------------------------
   Text colors (brand)
   ------------------------------ */

.violet-red-color,
.purple-color,
.violet-color {
  color: var(--rb-primary) !important;
}

/* small bits de texto que usam essas classes */
.section-id.bg-tra-purple.purple-color,
.section-id.bg-tra-purple.violet-red-color {
  color: var(--rb-primary) !important;
}

/* ------------------------------
   Backgrounds de marca / gradientes
   ------------------------------ */

.bg-violet-red,
.bg-violet,
.bg-purple {
  background-color: var(--rb-primary) !important;
  background-image: linear-gradient(
    135deg,
    var(--rb-primary) 0%,
    #e05b7c 100%
  ) !important;
}

/* fundos “transparentes” em torno da cor principal */
.bg-tra-purple {
  background-color: rgba(187, 38, 73, 0.08) !important;
}

/* chips / badges claros em torno da cor principal */
.bg-purple-light,
.bg-light-violet,
.bg-light-violet-red {
  background-color: var(--rb-primary-soft) !important;
  color: var(--rb-primary-dark) !important;
}

/* wave ou blocos que às vezes usam roxo */
.bg-04 {
  background: radial-gradient(circle at top left, #960032 0, #b90707 45%);
}

/* ------------------------------
   Ícones, shapes, loaders
   ------------------------------ */

/* bolinha de loading cor primária */
.violet-red-loading .object,
.violet-loading .object {
  background-color: var(--rb-primary) !important;
}

/* ícones redondinhos usados nas feature boxes */
.shape-ico.violet-red-color,
.shape-ico.violet-color,
.shape-ico.purple-color {
  background-color: rgba(187, 38, 73, 0.06) !important;
}

.shape-ico.violet-red-color span,
.shape-ico.violet-color span,
.shape-ico.purple-color span {
  color: var(--rb-primary) !important;
}

/* ------------------------------
   Botões
   ------------------------------ */

/* botão sólido principal */
.btn-violet-red,
.btn-tra-white.violet-hover,
.violet-red-hover {
  background-color: var(--rb-primary) !important;
  border-color: var(--rb-primary) !important;
  color: #ffffff !important;
}

/* hover dos botões principais */
.btn-violet-red:hover,
.btn-tra-white.violet-hover:hover,
.violet-red-hover:hover {
  background-color: var(--rb-primary-dark) !important;
  border-color: var(--rb-primary-dark) !important;
}

/* botão transparente com borda da cor primária */
.btn-tra-violet-red,
.btn-tra-violet-red:hover,
.tra-violet-red-hover {
  background-color: transparent !important;
  border-color: var(--rb-primary) !important;
  color: var(--rb-primary) !important;
}

.btn-tra-violet-red:hover,
.tra-violet-red-hover:hover {
  background-color: rgba(187, 38, 73, 0.08) !important;
}

/* badges de loja (app store / play store) dentro de bloco escuro */
.bg-inner .stores-badge .store img.appstore,
.bg-inner .stores-badge .store img.googleplay {
  filter: saturate(1.05);
}

/* ------------------------------
   Navegação (menu principal)
   ------------------------------ */

/* links do menu com cor primária */
.nav-violet-red-hover .wsmenu-list > li > a {
  color: #222222;
}

.nav-violet-red-hover .wsmenu-list > li > a:hover,
.nav-violet-red-hover .wsmenu-list > li:hover > a,
.nav-violet-red-hover .wsmenu-list > li.current > a {
  color: var(--rb-primary) !important;
}

/* underline / borda inferior em hover (se existir) */
.nav-violet-red-hover .wsmenu-list > li > a:after {
  background-color: var(--rb-primary) !important;
}

/* botão "Começar agora" no header */
.nav-violet-red-hover .wsmenu-list > li > a.btn,
.nav-violet-red-hover .wsmenu-list > li > a.last-link {
  border-color: #ffffff;
  color: #ffffff;
}

.nav-violet-red-hover .wsmenu-list > li > a.btn:hover,
.nav-violet-red-hover .wsmenu-list > li > a.last-link:hover {
  border-color: var(--rb-primary) !important;
  background-color: var(--rb-primary) !important;
  color: #ffffff !important;
}

/* menu mobile: ícones ativos / linhas */
.wsmobileheader .smllogo img {
  max-height: 32px;
}

.wsmobileheader .wsanimated-arrow span,
.wsmobileheader .wsanimated-arrow span:before,
.wsmobileheader .wsanimated-arrow span:after {
  background-color: var(--rb-primary);
}

/* ------------------------------
   Badges e pequenas labels
   ------------------------------ */

/* section-id com contorno clarinho */
.section-id.bg-tra-purple,
.section-id.bg-tra-purple.purple-color {
  background-color: var(--rb-primary-soft-2) !important;
  color: var(--rb-primary-dark) !important;
}

/* chips de vantagens (linha "Teste grátis", etc.) */
.advantages li p {
  color: #444444;
}

.advantages li:first-child p,
.advantages li.last-li p {
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  background-color: var(--rb-primary-soft) !important;
  color: var(--rb-primary-dark) !important;
}

/* ------------------------------
   Pequenos ajustes de links
   ------------------------------ */

a,
.footer-links a,
.footer-socials a,
.bottom-footer-list a {
  color: var(--rb-primary) !important;
}

a:hover,
.footer-links a:hover,
.bottom-footer-list a:hover {
  color: var(--rb-primary-dark) !important;
}

/* ------------------------------
   Cards/boxes em geral
   ------------------------------ */

/* ------------------------------
   Preloader adaptado
   ------------------------------ */

.violet-red-loading #loading-center-absolute .object:nth-child(1),
.violet-red-loading #loading-center-absolute .object:nth-child(2),
.violet-red-loading #loading-center-absolute .object:nth-child(3),
.violet-red-loading #loading-center-absolute .object:nth-child(4) {
  background-color: var(--rb-primary) !important;
}

.bg-whitesmoke {
  background-color: #fff6fa;
}

@media screen and (max-width: 768px) {
  .bg-whitesmoke {
    background: transparent;
  }
}

/* Carrossel de planos apenas no mobile */
@media (max-width: 767.98px) {
  #pricing-2 .pricing-row {
    display: flex;
    flex-wrap: nowrap; /* não quebrar linha */
    overflow-x: auto; /* rolagem horizontal */
    scroll-snap-type: x mandatory; /* efeito de "encaixar" */
    -webkit-overflow-scrolling: touch;
    gap: 5px; /* espacinho entre os cards */
    padding-bottom: 20px;
  }

  #pricing-2 .pricing-row::-webkit-scrollbar {
    display: none; /* esconde a barra de rolagem no mobile */
  }

  #pricing-2 .pricing-row .col {
    flex: 0 0 95%; /* largura de cada slide */
    max-width: 85%;
    scroll-snap-align: center;
    padding: 0; /* centraliza o card na rolagem */
  }

  /* opcional: deixa os cards um pouco mais “destacados” no mobile */
  #pricing-2 .pricing-2-table {
    margin-bottom: 0;
  }

  #statistic-2{
    display: none;
  }
}