/* =========================================================
   🧭 NAVIGATION DRAWER — GHOSTUNE
========================================================= */

.navigation-drawer {
  position: fixed;
  inset: 0;
  z-index: 99999;

  width: 100%; /* ✅ tinha '100' sem % */
  height: 100%;

  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Drawer ativo */
.navigation-drawer.is-open {
  pointer-events: auto;
  opacity: 1;
}


/* =========================================================
   PAINEL (FULL SCREEN)
========================================================= */
.drawer-panel {
  position: absolute;
  inset: 0;          /* ✅ top/left/right/bottom = 0 */
  width: 100%;
  height: 100%;
  max-width: none;   /* ✅ REMOVE o limite de 320px */
  background: #0b0e14;
  color: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.navigation-drawer.is-open .drawer-panel {
  transform: translateX(0);
}

/* Bloqueia scroll do body */
body.drawer-open {
  overflow: hidden;
}

/* =========================================================
   HEADER
========================================================= */
.drawer-header {
  padding: 1.2rem 1rem 1.4rem;
  border-bottom: 2px solid rgb(21 27 39);
  position: relative;
}

.drawer-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  background: none;
  border: none;
  padding: 0.4rem;
  cursor: pointer;
}

.drawer-close img {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1);
  opacity: 0.4;
}

/* =========================================================
   PERFIL
========================================================= */
.drawer-profile {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.drawer-avatar-wrap {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  overflow: hidden;
  padding: 3px; /* espessura da borda */
  background: linear-gradient(180deg, #EA646C 5.2%, #2226DF 100%);
}

.drawer-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  
}

.drawer-userinfo {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.drawer-name {
  font-size: 1rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


.drawer-slogan {
  font-size: 0.85rem;
  color: #aaa;
}

/* =========================================================
   MENU
========================================================= */
.drawer-nav {
  padding: 0.5rem 0;
  overflow-y: auto;
}

.drawer-item,
.drawer-cta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1rem;
  text-decoration: none;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  justify-content: flex-start;
  text-decoration: none;
}

.drawer-ico {
  width: 24px;
  height: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}

.drawer-item:hover,
.drawer-cta:hover {
  background: rgb(16 21 31);
  text-decoration: none;

}

.drawer-ico img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

/* CTA */
.drawer-cta {
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(
    90deg,
    #EA646C 0%,
    rgba(34, 38, 223, 0.5) 50%,
    rgba(34, 38, 223, 0) 100%
  );

}

.drawer-cta-secondary {
  color: #bbb;
}

.drawer-item-logout {
  background: none;
  border: none;
  outline: none;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;

  cursor: pointer;
}

/* Remove highlight mobile */
.drawer-item-logout:focus {
  outline: none;
}

.drawer-item-logout:active {
  background: rgba(255, 255, 255, 0.05);
}




/* ================================
   ACORDEON (PADRÃO)
================================ */
.drawer-accordion {
  width: 100%;
}

/* Botão do acordeon */
.drawer-accordion-toggle {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
}

/* Conteúdo oculto (base do efeito) */
.drawer-accordion-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;

  /* ⏱️ fechamento/abertura mais suave */
  transition:
    max-height 0.45s ease,
    opacity 0.25s ease;
}

/* Subitem */
.drawer-subitem {
  padding-left: 3rem;
  font-size: 0.9rem;
  background-color: #2226DF;
  opacity: 0.9;
}

/* Estado aberto */
.drawer-accordion.open .drawer-accordion-content {
  max-height: 200px; /* ajuste se necessário */
  opacity: 1;
}

/* Seta */
.drawer-accordion.open .drawer-arrow {
  transform: rotate(180deg);
}



/* ======================================
   💜 DRAWER — APOIADOR (CONTEÚDO INTERNO)
   (usa o mesmo acordeon acima)
====================================== */

/* Texto de apoio */
.apoio-texto {
  font-size: 0.85rem;
  color: var(--cor-text-muted);
  margin: 0.8rem 1rem 0.8rem;
  line-height: 1.4;
}

/* Container PIX */
.pix-box {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0 1rem 1.2rem;
}

/* Input da chave PIX */
.pix-input {
  background: #151922;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 0.8rem 0.2rem;
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
}

/* Botão copiar */
.btn-copiar-pix {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 0.8rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;

  background: linear-gradient(
    243.41deg,
    #EA646C 8.13%,
    #2226DF 87.26%
  );

  color: #fff;
  transition: background 0.25s ease, color 0.25s ease;
}

/* Estado copiado */
.btn-copiar-pix.copiado {
  background: #2ecc71;
  color: #fff;
}






/* Divider */
.drawer-divider {
  height: 2px;
  margin: 0.6rem 0;
  background: rgb(21 27 39);
}


/* =========================================================
   LOGOUT
========================================================= */
.drawer-logout {
  margin-top: auto;
}

.drawer-item-logout {
  color: #ffffff;
}

.drawer-item-logout img {
  filter: brightness(0) invert(1);
}