/* mm-v2.css - the 2026 store look for older pages (profile, user panel).
   Only applies under <body class="mm-v2">, and only restyles - no layout or
   behaviour changes, so the pages' own markup and scripts keep working. */

/* Cards */
body.mm-v2 main .glass-panel {
  border-radius: 1rem !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.mm-v2 main .glass-panel::after { display: none; }
body.mm-v2 main .glass-panel:hover { border-color: rgba(255, 255, 255, 0.12); }

/* Tab bars */
body.mm-v2 .mm-tabs {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.9rem !important;
  padding: 0.25rem !important;
  gap: 0.25rem;
}
body.mm-v2 .mm-tabs .tab-btn {
  border-radius: 0.65rem !important;
  padding: 0.5rem 1rem !important;
  font-weight: 600 !important;
  font-size: 0.75rem;
  box-shadow: none !important;
}

/* Tables */
body.mm-v2 main table thead th {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.mm-v2 main table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.015); }
body.mm-v2 main table tbody tr:hover { background: rgba(255, 255, 255, 0.035); }

/* Form controls */
body.mm-v2 main input[type="text"],
body.mm-v2 main input[type="number"],
body.mm-v2 main input[type="search"],
body.mm-v2 main select,
body.mm-v2 main textarea {
  border-radius: 0.75rem;
}

/* Headings inside cards read a little softer */
body.mm-v2 main .glass-panel h2,
body.mm-v2 main .glass-panel h3 { letter-spacing: -0.01em; }

/* Older card style used by transfer / battlepass (bg-dark-800/50 boxes) */
body.mm-v2 main .bg-dark-800\/50 {
  border-radius: 1rem !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Any button/link row marked as a tab bar */
body.mm-v2 .mm-tabs > button,
body.mm-v2 .mm-tabs > a {
  border-radius: 0.65rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* Server picker tiles (teleport) - selected one in the theme colour, like the store */
body.mm-v2 .home-srv-btn[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--brand-600, #cd402a) 90%, transparent) !important;
  background: color-mix(in srgb, var(--brand-600, #cd402a) 12%, transparent) !important;
  color: #fff !important;
}

/* Opt-in with body.mm-cards: older pages' orange-bordered boxes, flat dark cards and grey
   buttons in the new card style. The page hero and pop-up modals are left alone. */
body.mm-cards main :is(.border-brand-500\/30, .border-brand-500\/20, .border-white\/10):not(section.rounded-3xl *):not(.fixed *) {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.mm-cards main :is(.hover\:border-brand-500\/30, .hover\:border-brand-500\/50):not(.fixed *):hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
}
body.mm-cards main .divide-brand-500\/30 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255, 255, 255, 0.06) !important; }
body.mm-cards main :is(div, a, article, li).rounded-xl:is(.bg-dark-800, .bg-dark-800\/30, .bg-dark-800\/50):not(.fixed *) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)) !important;
  border-radius: 1rem !important;
  box-shadow: none !important;
}
body.mm-cards main .glass-panel.rounded-xl:not(.fixed *) { border-radius: 1rem !important; }
body.mm-cards main :is(button, a).bg-dark-700:not(.fixed *) {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.75rem !important;
}
body.mm-cards main :is(button, a).bg-dark-700:not(.fixed *):hover:not(:disabled) { background: rgba(255, 255, 255, 0.1) !important; }
/* Card header strips */
body.mm-cards main .glass-panel > .bg-white\/\[0\.02\] { background: rgba(255, 255, 255, 0.015) !important; }

/* New-UI cards on mm-cards pages: store-style gradient card, compact header strip, small
   card titles with the title icon in a tile. Pop-up modals (inside .fixed) keep their look. */
body.mm-cards main .glass-panel:not(.fixed *),
body.mm-cards main :is(div, a, article, li).rounded-xl:is(.bg-dark-800, .bg-dark-800\/30, .bg-dark-800\/50, .bg-dark-800\/80):not(.fixed *) {
  border-radius: 1.25rem !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: none !important;
}
body.mm-cards main .glass-panel:not(.fixed *):hover { border-color: rgba(255, 255, 255, 0.15) !important; }
body.mm-cards main .glass-panel:not(.fixed *) > div[class*="border-b"]:first-child {
  padding: 0.85rem 1.15rem !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
body.mm-cards main .glass-panel:not(.fixed *) :is(h2, h3) {
  font-size: 0.875rem !important;
  line-height: 1.35rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
}
body.mm-cards main .glass-panel:not(.fixed *) :is(h2, h3) > i:first-child {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  margin-right: 0.2rem;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem !important;
  vertical-align: middle;
}
/* the old coloured accent bar some titles started with */
body.mm-cards main .glass-panel:not(.fixed *) :is(h2, h3) > span.w-1:first-child { display: none; }
/* table header rows inside cards */
body.mm-cards main .glass-panel:not(.fixed *) thead tr { background: transparent !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; }