/* AURIXA ULTRA PREMIUM BONUS V2
 * Design-only. No financial or event logic changes.
 * Existing position, width and outer sizing preserved.
 */

/* Luxury white / graphite panel */
.dv4-page .dv4-hero-stack > section.arx-deposit-tiered {
  background:
    radial-gradient(
      ellipse at 90% 0%,
      rgba(100,112,130,.09),
      transparent 44%
    ),
    linear-gradient(
      155deg,
      #ffffff 0%,
      #fbfcfe 53%,
      #f5f7fa 100%
    ) !important;
  border: 1px solid rgba(36,43,51,.13) !important;
  box-shadow:
    0 20px 46px rgba(23,29,36,.12),
    0 5px 14px rgba(23,29,36,.05),
    inset 0 1px 0 rgba(255,255,255,.96)
    !important;
  isolation: isolate;
}

/* Subtle metallic detail */
.dv4-page .dv4-hero-stack > section.arx-deposit-tiered::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(116,129,148,.32),
    transparent
  );
  pointer-events: none;
  z-index: 0;
}

/* Header: keep original button behavior */
.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-toggle {
  position: relative !important;
  z-index: 1 !important;
  border-radius: 17px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: background .22s ease !important;
}

.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-icon {
  background:
    linear-gradient(
      145deg,#f5f7fa,#e7ebf1
    ) !important;
  color: #242b33 !important;
  border: 1px solid #d7dee7 !important;
  border-radius: 13px !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 5px 12px rgba(23,29,36,.08)
    !important;
}

.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-title {
  min-width: 0 !important;
}

.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-title small {
  color: #818b9b !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .14em !important;
}

.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-title strong {
  color: #171d24 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: break-word !important;
}

/* Premium compact bonus chip */
.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-max {
  background:
    linear-gradient(
      135deg,#eef1f5,#e4e9f0
    ) !important;
  color: #242b33 !important;
  border: 1px solid #d9e0e8 !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 8px rgba(23,29,36,.05)
    !important;
}

.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-chevron {
  color: #35414d !important;
  transition: transform .25s ease !important;
}

/* Expanded content */
.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-collapse {
  position: relative;
  z-index: 1;
}

.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-inner {
  padding-top: 8px !important;
}

.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-list {
  gap: 9px !important;
}

/* Four polished tier cards */
.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-row {
  position: relative !important;
  min-height: 58px !important;
  border: 1px solid #e3e8ee !important;
  border-radius: 16px !important;
  background:
    linear-gradient(
      145deg,#ffffff,#f7f9fb
    ) !important;
  box-shadow:
    0 4px 11px rgba(23,29,36,.035),
    inset 0 1px 0 #fff
    !important;
  transition:
    box-shadow .22s ease,
    border-color .22s ease
    !important;
}

/* Refined numbered markers */
.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-dot {
  position: relative !important;
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  display: grid !important;
  place-items: center !important;
  background: #eef1f5 !important;
  color: #35414d !important;
  border: 1px solid #e0e5ec !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-dot::before {
  display: none !important;
}

.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-dot::after {
  position: static !important;
  content: "01" !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  inset: auto !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
}

.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-row:nth-child(2)
.arx-tier-dot::after {
  content: "02" !important;
}
.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-row:nth-child(3)
.arx-tier-dot::after {
  content: "03" !important;
}
.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-row:nth-child(4)
.arx-tier-dot::after {
  content: "04" !important;
}

.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-range {
  min-width: 0 !important;
  color: #242b33 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* Neutral badges on white */
.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-badge {
  white-space: nowrap !important;
  background: #edf1f5 !important;
  color: #242b33 !important;
  border: 1px solid #e0e6ed !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  box-shadow: inset 0 1px 0 #fff !important;
}

/* Top 15% tier: graphite + lime on dark */
.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-row:last-child {
  background:
    linear-gradient(
      125deg,
      #242b33 0%,
      #171d24 100%
    ) !important;
  border-color: #35414d !important;
  box-shadow:
    0 9px 20px rgba(23,29,36,.16),
    inset 0 1px 0 rgba(255,255,255,.11)
    !important;
}

.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-row:last-child
.arx-tier-range {
  color: #fff !important;
}

.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-row:last-child
.arx-tier-dot {
  color: #c8ee77 !important;
  background: #35414d !important;
  border-color: #495765 !important;
}

.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-row:last-child
.arx-tier-badge {
  color: #172018 !important;
  background: #c8ee77 !important;
  border-color: #c8ee77 !important;
  box-shadow: none !important;
}

/* Honest tier label, no popularity claims */
.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-row:last-child
.arx-tier-range::after {
  content: "TOP TIER";
  display: block;
  margin-top: 3px;
  color: #c8ee77;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .13em;
}

/* Informational note */
.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-note {
  color: #798493 !important;
  font-size: 10px !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

/* Premium CTA */
.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-deposit {
  position: relative !important;
  min-height: 50px !important;
  border-radius: 15px !important;
  background:
    linear-gradient(
      135deg,
      #35414d 0%,
      #171d24 100%
    ) !important;
  border: 1px solid #35414d !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .035em !important;
  box-shadow:
    0 12px 23px rgba(23,29,36,.17),
    inset 0 1px 0 rgba(255,255,255,.13)
    !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease
    !important;
}

.dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-deposit::after {
  content: "↗";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #c8ee77;
  font-size: 16px;
  font-weight: 700;
}

/* Only interactive elements get hover feedback */
@media (hover: hover) and (pointer: fine) {
  .dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-toggle:hover {
    background: rgba(36,43,51,.035) !important;
  }
  .dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-deposit:hover {
    transform: translateY(-1px);
    box-shadow:
      0 15px 28px rgba(23,29,36,.22)
      !important;
  }
}

/* Subtle animation as the list opens */
@media (prefers-reduced-motion: no-preference) {
  .dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-toggle[aria-expanded="true"]
  + .arx-tier-collapse .arx-tier-row {
    animation: arxTierV2Enter .28s ease both;
  }

  @keyframes arxTierV2Enter {
    from {
      opacity: .65;
      transform: translateY(5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Mobile readability */
@media (max-width: 390px) {
  .dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-row {
    min-height: 56px !important;
    gap: 7px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-range {
    font-size: 10.5px !important;
  }

  .dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-badge {
    font-size: 10px !important;
    min-width: 0 !important;
    padding: 7px 8px !important;
  }

  .dv4-page .dv4-hero-stack > section.arx-deposit-tiered .arx-tier-title strong {
    font-size: 11px !important;
  }
}
