/* ANGELL_ELITE_LAYOUT_V1 — camada visual; nenhuma alteração de lógica. */
:root {
  --elite-v1-bg: #120d23;
  --elite-v1-border: rgba(190, 112, 236, .28);
  --elite-v1-text: #f7f0ff;
  --elite-v1-muted: #c4b5da;
  --elite-v1-gold: #ffd47d;
}

.angell-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
  background: rgba(7, 5, 15, .79) !important;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-sizing: border-box !important;
}

.angell-modal-backdrop > .angell-modal {
  box-sizing: border-box !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: min(100%, 440px) !important;
  max-width: 440px !important;
  max-height: min(88dvh, 840px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 23px 19px 22px !important;
  border: 1px solid rgba(210, 129, 236, .38) !important;
  border-radius: 24px !important;
  color: var(--elite-v1-text) !important;
  background-color: var(--elite-v1-bg) !important;
  background-image:
    linear-gradient(160deg, rgba(46, 21, 76, .87), rgba(17, 12, 34, .96) 45%, rgba(26, 13, 45, .97)),
    url('/assets/Room/event_room/elite-background.jpg') !important;
  background-position: center, center !important;
  background-size: cover, cover !important;
  box-shadow: 0 22px 72px rgba(0,0,0,.62) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(193, 120, 222, .4) transparent;
  text-align: left !important;
}

.angell-modal-backdrop .angell-modal > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  min-height: 44px;
  background: transparent !important;
  border: 0 !important;
}
.angell-modal-backdrop .angell-modal > header h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(25px, 7vw, 32px) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  color: #ffe0a0 !important;
  background: linear-gradient(90deg, #ffa1e0, #ffd98b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.angell-modal-backdrop .angell-modal .angell-close {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(213, 169, 239, .22) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.05) !important;
  color: #f9eaff !important;
  font-size: 26px !important;
  line-height: 1 !important;
  cursor: pointer;
}

.angell-modal-backdrop .angell-modal > .angell-muted {
  margin: 0 !important;
  color: var(--elite-v1-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.angell-modal-backdrop .angell-modal > header + .angell-muted {
  margin-bottom: 4px !important;
  font-size: 13px !important;
}

/* Total de pontos e barra continuam atualizados pelo JavaScript existente. */
.angell-modal-backdrop .angell-modal > h3 {
  box-sizing: border-box !important;
  margin: 4px 0 -12px !important;
  padding: 18px 17px 9px !important;
  border: 1px solid var(--elite-v1-border) !important;
  border-bottom: 0 !important;
  border-radius: 17px 17px 0 0 !important;
  background: rgba(78, 45, 116, .22) !important;
  color: var(--elite-v1-gold) !important;
  font-size: clamp(25px, 7vw, 31px) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  text-align: left !important;
}
.angell-modal-backdrop .angell-modal > .angell-progress {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  height: 9px !important;
  margin: 0 0 -12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #493364 !important;
  box-shadow: 0 0 0 16px rgba(78,45,116,.22), 0 0 0 17px var(--elite-v1-border) !important;
  width: calc(100% - 34px) !important;
  align-self: center !important;
  overflow: hidden !important;
}
.angell-modal-backdrop .angell-modal > .angell-progress > div {
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #d56aff, #ffca7b) !important;
}
.angell-modal-backdrop .angell-modal > .angell-progress + .angell-muted {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 0 3px !important;
  padding: 14px 17px 15px !important;
  border: 1px solid var(--elite-v1-border) !important;
  border-top: 0 !important;
  border-radius: 0 0 17px 17px !important;
  background: rgba(78,45,116,.22) !important;
  color: #bca9d6 !important;
  font-size: 12px !important;
  text-align: right !important;
}

.angell-modal-backdrop .angell-modal > .angell-tier {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 13px 13px 13px 89px !important;
  position: relative !important;
  border: 1px solid rgba(101, 120, 255, .48) !important;
  border-radius: 16px !important;
  background: linear-gradient(105deg, rgba(27,47,111,.73), rgba(27,20,67,.88)) !important;
  color: #f7f0ff !important;
  font-size: clamp(13px, 3.7vw, 16px) !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.angell-modal-backdrop .angell-modal > .angell-tier::before {
  content: '' !important;
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 66px !important;
  height: 66px !important;
  border-radius: 13px !important;
  background-image: url('/assets/Room/event_room/elite-tier-1.png'), linear-gradient(135deg,#427ef4,#27295f) !important;
  background-size: contain, cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.angell-modal-backdrop .angell-modal > .angell-tier:nth-of-type(3) {
  border-color: rgba(218,83,238,.55) !important;
  background: linear-gradient(105deg,rgba(87,24,115,.67),rgba(35,18,69,.92)) !important;
}
.angell-modal-backdrop .angell-modal > .angell-tier:nth-of-type(3)::before {
  background-image: url('/assets/Room/event_room/elite-tier-2.png'), linear-gradient(135deg,#ba3df3,#57207d) !important;
}
.angell-modal-backdrop .angell-modal > .angell-tier:nth-of-type(4) {
  border-color: rgba(252,86,134,.5) !important;
  background: linear-gradient(105deg,rgba(116,27,63,.67),rgba(57,16,47,.92)) !important;
}
.angell-modal-backdrop .angell-modal > .angell-tier:nth-of-type(4)::before {
  background-image: url('/assets/Room/event_room/elite-tier-3.png'), linear-gradient(135deg,#ee5a6b,#722744) !important;
}
/* A primeira div é a barra de progresso; os três tiers são divs 2, 3 e 4. */
.angell-modal-backdrop .angell-modal > .angell-tier:nth-of-type(2)::before { content: '1' !important; }
.angell-modal-backdrop .angell-modal > .angell-tier:nth-of-type(3)::before { content: '2' !important; }
.angell-modal-backdrop .angell-modal > .angell-tier:nth-of-type(4)::before { content: '3' !important; }
.angell-modal-backdrop .angell-modal > .angell-tier::before {
  display: grid !important;
  place-items: center !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.65);
}
/* Quando as imagens forem enviadas, a classe abaixo esconde os números provisórios. */
.angell-modal-backdrop .angell-modal.elite-images-ready > .angell-tier::before { color: transparent !important; }

.angell-modal-backdrop .angell-modal > .angell-tier + p:not(.angell-muted) {
  margin: 3px 0 -12px !important;
  padding: 17px 15px 0 !important;
  border: 1px solid var(--elite-v1-border) !important;
  border-bottom: 0 !important;
  border-radius: 16px 16px 0 0 !important;
  background: rgba(69,33,96,.25) !important;
  color: #c8b7de !important;
  font-size: 15px !important;
}
.angell-modal-backdrop .angell-modal > .angell-tier + p:not(.angell-muted) b {
  color: var(--elite-v1-gold) !important;
}
.angell-modal-backdrop .angell-modal > .angell-tier + p:not(.angell-muted) + .angell-muted {
  box-sizing: border-box !important;
  min-height: 73px !important;
  margin: 0 0 2px !important;
  padding: 12px 13px 13px 81px !important;
  position: relative !important;
  border: 1px solid var(--elite-v1-border) !important;
  border-top: 0 !important;
  border-radius: 0 0 16px 16px !important;
  background: rgba(69,33,96,.25) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}
.angell-modal-backdrop .angell-modal > .angell-tier + p:not(.angell-muted) + .angell-muted::before {
  content: '✓' !important;
  position: absolute !important;
  top: 4px !important;
  left: 13px !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 13px !important;
  display: grid !important;
  place-items: center !important;
  color: white !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  background-image: url('/assets/Room/event_room/elite-checkin.png'), linear-gradient(135deg,#ff75d6,#8e318e) !important;
  background-size: contain, cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.angell-modal-backdrop .angell-modal.elite-images-ready > .angell-tier + p:not(.angell-muted) + .angell-muted::before { color: transparent !important; }
.angell-modal-backdrop .angell-modal > .angell-action {
  display: block !important;
  width: 100% !important;
  min-height: 49px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255,178,234,.5) !important;
  border-radius: 14px !important;
  background: linear-gradient(105deg,#e949ab,#d82f91) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 20px rgba(215,43,143,.16) !important;
  cursor: pointer;
}
.angell-modal-backdrop .angell-modal > .angell-action:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
.angell-modal-backdrop .angell-modal > #angell-result {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
@media (max-width: 375px) {
  .angell-modal-backdrop > .angell-modal { padding: 18px 14px !important; gap: 10px !important; }
  .angell-modal-backdrop .angell-modal > .angell-tier { min-height: 69px !important; padding-left: 77px !important; }
  .angell-modal-backdrop .angell-modal > .angell-tier::before { width: 57px !important; height: 57px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .angell-modal-backdrop, .angell-modal-backdrop * { scroll-behavior: auto !important; }
}


/* ANGELL_ELITE_REFINAMENTO_V2 */

/* Painel de pontuação mais limpo */
.angell-modal-backdrop .angell-modal > h3 {
  padding: 19px 18px 18px !important;
  margin: 4px 0 -12px !important;
  background: rgba(42, 24, 70, .66) !important;
  border-bottom: 0 !important;
}

/* Barra de progresso redesenhada */
.angell-modal-backdrop .angell-modal > .angell-progress {
  box-sizing: border-box !important;
  position: relative !important;
  width: calc(100% - 36px) !important;
  height: 17px !important;
  min-height: 17px !important;
  padding: 3px !important;
  margin: 0 0 -12px !important;
  align-self: center !important;
  border: 1px solid rgba(215, 160, 248, .28) !important;
  border-radius: 999px !important;
  background: #211830 !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.30) !important;
  overflow: hidden !important;
}

.angell-modal-backdrop .angell-modal > .angell-progress > div {
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    #d95bff 0%,
    #f47bce 52%,
    #ffd58e 100%
  ) !important;
  box-shadow: none !important;
  transition: width .35s ease !important;
}

.angell-modal-backdrop .angell-modal > .angell-progress + .angell-muted {
  padding: 17px 18px 17px !important;
  margin: 0 0 4px !important;
  background: rgba(42, 24, 70, .66) !important;
  border-top: 0 !important;
  font-size: 12px !important;
  color: #d7c7e8 !important;
}

/* Cartões dos três níveis */
.angell-modal-backdrop .angell-modal > .angell-tier {
  min-height: 108px !important;
  padding: 15px 14px 15px 112px !important;
}

/* Ícones maiores, sem quadrados ou fundos */
.angell-modal-backdrop .angell-modal > .angell-tier::before {
  content: '' !important;
  left: 8px !important;
  top: 50% !important;
  width: 92px !important;
  height: 92px !important;
  transform: translateY(-50%) !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 0 !important;
}

/* Elimina números provisórios e fundos quadrados */
.angell-modal-backdrop .angell-modal > .angell-tier:nth-of-type(2)::before {
  content: '' !important;
  background-image: url('/assets/Room/event_room/elite-tier-1.png') !important;
}

.angell-modal-backdrop .angell-modal > .angell-tier:nth-of-type(3)::before {
  content: '' !important;
  background-image: url('/assets/Room/event_room/elite-tier-2.png') !important;
}

.angell-modal-backdrop .angell-modal > .angell-tier:nth-of-type(4)::before {
  content: '' !important;
  background-image: url('/assets/Room/event_room/elite-tier-3.png') !important;
}

/* Check-in com ícone ampliado e transparente */
.angell-modal-backdrop .angell-modal > .angell-tier + p:not(.angell-muted) + .angell-muted {
  min-height: 100px !important;
  padding: 16px 14px 16px 105px !important;
}

.angell-modal-backdrop .angell-modal > .angell-tier + p:not(.angell-muted) + .angell-muted::before {
  content: '' !important;
  left: 10px !important;
  top: 50% !important;
  width: 84px !important;
  height: 84px !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url('/assets/Room/event_room/elite-checkin.png') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

/* Ajustes para celulares pequenos */
@media (max-width: 375px) {
  .angell-modal-backdrop .angell-modal > .angell-tier {
    min-height: 94px !important;
    padding-left: 96px !important;
  }

  .angell-modal-backdrop .angell-modal > .angell-tier::before {
    width: 79px !important;
    height: 79px !important;
    left: 7px !important;
  }

  .angell-modal-backdrop .angell-modal > .angell-tier + p:not(.angell-muted) + .angell-muted {
    padding-left: 90px !important;
  }

  .angell-modal-backdrop .angell-modal > .angell-tier + p:not(.angell-muted) + .angell-muted::before {
    width: 72px !important;
    height: 72px !important;
  }
}


/* ANGELL_ELITE_PROGRESS_CARD_V3 */

.angell-modal-backdrop .angell-modal .elite-progress-card {
  box-sizing: border-box !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 17px 17px 19px !important;
  margin: 3px 0 6px !important;
  border: 1px solid rgba(156, 88, 211, .55) !important;
  border-radius: 19px !important;
  background: linear-gradient(
    115deg,
    rgba(49, 27, 78, .94),
    rgba(27, 22, 66, .96)
  ) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  color: #f5eaff !important;
  text-align: left !important;
}

.angell-modal-backdrop .angell-modal .elite-progress-title {
  display: block !important;
  margin: 0 0 10px !important;
  color: #f3e8ff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.angell-modal-backdrop .angell-modal .elite-progress-info {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 15px !important;
  width: 100% !important;
}

.angell-modal-backdrop .angell-modal .elite-progress-points {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 5px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-align: left !important;
  line-height: 1.15 !important;
}

.angell-modal-backdrop .angell-modal .elite-points-value {
  color: #ffd474 !important;
  font-size: clamp(27px, 8vw, 39px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.angell-modal-backdrop .angell-modal .elite-points-unit {
  color: #cbb4f0 !important;
  font-size: clamp(14px, 4vw, 18px) !important;
  font-weight: 500 !important;
}

.angell-modal-backdrop .angell-modal .elite-progress-meta {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 3px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #d8c6ef !important;
  font-size: clamp(11px, 3.1vw, 14px) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-align: right !important;
}

.angell-modal-backdrop .angell-modal .elite-progress-percent {
  white-space: nowrap !important;
}

.angell-modal-backdrop .angell-modal .elite-progress-percent strong {
  color: #ffd474 !important;
  font-size: clamp(15px, 4.2vw, 19px) !important;
  font-weight: 800 !important;
}

.angell-modal-backdrop .angell-modal .elite-progress-card .angell-progress {
  box-sizing: border-box !important;
  position: relative !important;
  flex: 0 0 auto !important;
  display: block !important;
  align-self: stretch !important;
  width: 100% !important;
  height: 13px !important;
  min-height: 13px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(159, 116, 222, .55) !important;
  border-radius: 999px !important;
  background: #503776 !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.18) !important;
  overflow: hidden !important;
}

.angell-modal-backdrop .angell-modal .elite-progress-card .angell-progress > div {
  display: block !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg, #d96cfa, #ffb5d9, #ffd474
  ) !important;
  box-shadow: none !important;
  transition: width .35s ease !important;
}

@media (max-width: 360px) {
  .angell-modal-backdrop .angell-modal .elite-progress-card {
    padding: 14px 12px 16px !important;
  }
  .angell-modal-backdrop .angell-modal .elite-progress-info {
    gap: 7px !important;
  }
}


/* ANGELL_ELITE_ICONS_FIX_V4 */

/*
  Após o cartão de progresso V3,
  os níveis são as divs 1, 2 e 3.
  Cada imagem é exibida isoladamente,
  sem gradiente ou quadrado de fundo.
*/

.angell-modal-backdrop .angell-modal > .angell-tier::before {
  content: '' !important;
  background-color: transparent !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 0 !important;
}

/* Nível 1 */
.angell-modal-backdrop .angell-modal > .angell-tier:nth-of-type(1)::before {
  content: '' !important;
  background: transparent url('/assets/Room/event_room/elite-tier-1.png')
    center / contain no-repeat !important;
}

/* Nível 2 */
.angell-modal-backdrop .angell-modal > .angell-tier:nth-of-type(2)::before {
  content: '' !important;
  background: transparent url('/assets/Room/event_room/elite-tier-2.png')
    center / contain no-repeat !important;
}

/* Nível 3 */
.angell-modal-backdrop .angell-modal > .angell-tier:nth-of-type(3)::before {
  content: '' !important;
  background: transparent url('/assets/Room/event_room/elite-tier-3.png')
    center / contain no-repeat !important;
}


/* ANGELL_ELITE_BACKGROUND_POSITION_V5 */
.angell-modal-backdrop .angell-modal {
  background-position: right top !important;
  background-size: auto, cover !important;
  background-repeat: no-repeat !important;
}