/* ============ Só o que não existe como utilitário do Bootstrap ============ */
html {
  overflow-x: hidden;
}

@media (min-width: 992px) {
  .border-lg-end {
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
}

/* cor de marca fora da paleta padrão do Bootstrap (não há token equivalente) */
.bg-primary-dark {
  background-color: #071233 !important;
}

/* diâmetro/lado fixos: os utilitários w-* do Bootstrap são percentuais, não px */
.produto-img { width: 48px; height: 48px; }

/* Bootstrap não tem variante de botão "subtle" pronta */
.btn-primary-subtle {
  color: #0d6efd;
  background-color: #cfe2ff;
  border-color: #cfe2ff;
}
.btn-primary-subtle:hover {
  color: #0d6efd;
  background-color: #b6d4fe;
  border-color: #a8ccfe;
}
.btn-primary-subtle:active,
.btn-primary-subtle.active {
  color: #0d6efd;
  background-color: #a8ccfe;
  border-color: #9fc5fe;
}

/* O bloco draive/points-history tem seu próprio breadcrumb "Dashboard > Histórico",
   redundante dentro de Minha Conta (a sidebar já mostra onde você está). */
.woocommerce-MyAccount-content .history-breadcrumb {
  display: none;
}

/* Menu de navegação da sidebar — copiado do draive-dashboard.php */
.draive-account-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--bs-body-color);
  text-decoration: none;
  font-size: 0.925rem;
  transition: background-color 0.15s ease;
}

.draive-account-item .material-symbols-outlined {
  font-size: 20px;
  color: var(--bs-primary);
  -webkit-text-stroke: 0.15px currentColor;
}

.draive-account-item:hover {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-body-color);
}

/* Barra de atalhos fixa (mobile) — qualquer página, usuário logado, ver
   draive_points_render_mobile_quick_nav() em inc/account-endpoints.php. */
.draive-mobile-account-nav {
  display: none;
}

@media (max-width: 991.98px) {
  .draive-mobile-account-nav {
    display: flex;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    background-color: #fff;
    border-top: 1px solid var(--bs-border-color);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Dois dos itens são <button> (QR Code, usuário), não <a> — reset pra não
     herdar a aparência padrão de botão do navegador. */
  .draive-mobile-account-nav .draive-mobile-nav-item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.25rem;
    border: 0;
    background: none;
    color: var(--bs-secondary-color);
    text-decoration: none;
  }

  .draive-mobile-account-nav .draive-mobile-nav-item .material-symbols-outlined {
    font-size: 28px;
  }

  .draive-mobile-account-nav .draive-mobile-nav-item.is-active {
    color: var(--bs-primary);
  }

  /* Sobra espaço pro fim do conteúdo não ficar escondido atrás da barra.
     Sem escopo em body.woocommerce-account: esta barra aparece em qualquer
     página, não só na Minha Conta. */
  body {
    padding-bottom: 64px;
  }
}


/* ============ Animações — sem equivalente no Bootstrap ============ */
.icon-circle {
  transform: scale(0);
  animation: pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  width: 90px; height: 90px;
}

.icon-x {
  transform: scale(0);
  animation: pop-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.icon-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  animation: check-out 0.3s ease-in 0.9s forwards;
}

.icon-check path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: draw-check 0.35s ease-out 0.35s forwards;
}

.icon-points {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  animation: points-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 1.05s forwards;
}

@keyframes pop-in {
  to { transform: scale(1); }
}

@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

@keyframes check-out {
  to { opacity: 0; transform: scale(0.6); }
}

@keyframes points-in {
  to { opacity: 1; transform: scale(1); }
}