/* Myteria focused UI touchups: pricing switch, comparison prefixes, popup icon tone */

/* Pricing switch: keep existing JS/classes, only improve presentation. */
.section.-ranks .section-header {
  align-items: center !important;
}

.pricing-switch {
  display: inline-grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 7px !important;
  min-width: 348px !important;
  padding: 7px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(18, 15, 43, .96), rgba(10, 9, 28, .96)) !important;
  border: 1px solid rgba(197, 138, 251, .22) !important;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.pricing-switch-option {
  appearance: none !important;
  border: 0 !important;
  min-height: 58px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  background: transparent !important;
  color: rgba(239, 234, 255, .68) !important;
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -.01em !important;
  cursor: pointer !important;
  transition: transform .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease !important;
}

.pricing-switch-option::after {
  display: block !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  color: rgba(239, 234, 255, .48) !important;
}

.pricing-switch-option.-monthly::after {
  content: 'Recurring' !important;
}

.pricing-switch-option.-lifetime::after {
  content: 'One-time' !important;
}

.pricing-switch-option:hover {
  color: #FCFBFD !important;
  background: rgba(255, 255, 255, .055) !important;
}

.pricing-switch-option:focus-visible {
  outline: 3px solid rgba(197, 138, 251, .42) !important;
  outline-offset: 3px !important;
}

.pricing-switch-option.-selected,
.pricing-switch-option[aria-pressed="true"] {
  color: #fff !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(255,255,255,.28), transparent 38%),
    linear-gradient(135deg, #7B3AF0, #B75CFF) !important;
  box-shadow:
    0 12px 30px rgba(123, 58, 240, .38),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  transform: translateY(-1px) !important;
}

.pricing-switch-option.-selected::after,
.pricing-switch-option[aria-pressed="true"]::after {
  color: rgba(255,255,255,.72) !important;
}

@media (max-width: 620px) {
  .pricing-switch {
    width: 100% !important;
    min-width: 0 !important;
  }
  .pricing-switch-option {
    min-height: 52px !important;
    font-size: 14px !important;
    padding: 9px 10px !important;
  }
}

/* Rank comparison: use real rank prefix images without blowing up the table. */
.rank-compare-table th:not(:first-child),
.rank-compare-table td:not(:first-child) {
  text-align: center !important;
  vertical-align: middle !important;
}

.rank-compare-rank {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 86px !important;
}

.rank-compare-rank img {
  width: 48px !important;
  max-height: 18px !important;
  object-fit: contain !important;
  image-rendering: auto !important;
  filter: drop-shadow(0 0 8px rgba(197,138,251,.28)) !important;
}

.rank-prefix-img {
  width: 72px !important;
  max-height: 24px !important;
  object-fit: contain !important;
  image-rendering: auto !important;
  filter: drop-shadow(0 0 10px rgba(197,138,251,.28)) !important;
  vertical-align: middle !important;
}

.rank-check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 24px !important;
  margin: 0 auto !important;
  line-height: 1 !important;
}

/* Product popup perk icons: keep real files, render them as clean white UI icons. */
.myteria-perk-icon {
  background: linear-gradient(135deg, rgba(139, 92, 246, .26), rgba(197, 138, 251, .12)) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
}

.myteria-perk-icon-img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  opacity: .94 !important;
}

.myteria-perk-icon-letter {
  color: #fff !important;
}