/* MagicMedia legacy brand compatibility — v1.7.67.
   Active layer derived from the user's old black-and-gold package.
   It targets only current v1.7.67 plugin markup and does not load obsolete AJAX code. */

:root {
  --mm-legacy-gold: #d4af37;
  --mm-legacy-gold-bright: #f0d477;
  --mm-legacy-gold-dark: #96731f;
  --mm-legacy-black: #050505;
  --mm-legacy-panel: #141414;
  --mm-legacy-panel-2: #1b1913;
  --mm-legacy-text: #f6f1e5;
  --mm-legacy-muted: #bdb6a6;
  --mm-legacy-border: #40371f;
}

.mm-page,
.mm-dashboard,
.mm-admin,
.mm-store,
.mm-wrapper,
.mm-store-wrapper,
.mm-dashboard-wrapper,
.mm-admin-wrapper {
  --mm-gold: #d4af37;
  --mm-gold-2: #f0d477;
  --mm-gold-soft: rgba(212, 175, 55, 0.12);
  --mm-line: rgba(212, 175, 55, 0.28);
  --mm-line-soft: rgba(246, 241, 229, 0.1);
  --mm-white: #f6f1e5;
  --mm-muted: #bdb6a6;
  --mm-panel: #141414;
  --mm-panel-2: #1b1913;
  --mm-black: #050505;
  --mm-black-2: #0c0c0c;
  --mm-radius: 18px;
}

.mm-page,
.mm-dashboard,
.mm-admin,
.mm-store {
  background:
    radial-gradient(circle at 8% 0%, rgba(212, 175, 55, 0.11), transparent 26rem),
    linear-gradient(145deg, #050505, #10100d 58%, #0a0907);
  border-color: rgba(212, 175, 55, 0.18);
  color: #f6f1e5;
}

.mm-page h1,
.mm-page h2,
.mm-page h3,
.mm-page h4,
.mm-dashboard h1,
.mm-dashboard h2,
.mm-dashboard h3,
.mm-admin h1,
.mm-admin h2,
.mm-admin h3 {
  color: #fffaf0;
}

.mm-page p,
.mm-page small,
.mm-page label,
.mm-page li,
.mm-page td,
.mm-dashboard p,
.mm-dashboard td,
.mm-admin p,
.mm-admin td {
  color: #c2baa9;
}

.mm-page .mm-kicker,
.mm-dashboard .mm-kicker,
.mm-admin .mm-kicker {
  color: #f0d477;
}

.mm-page .mm-card,
.mm-page .mm-stat,
.mm-page .mm-plan-card,
.mm-dashboard .mm-card,
.mm-admin .mm-card {
  background: linear-gradient(160deg, rgba(31, 27, 17, 0.82), rgba(12, 12, 12, 0.96));
  border-color: rgba(212, 175, 55, 0.22);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
}

.mm-page .mm-button--gold,
.mm-dashboard .mm-button--gold,
.mm-admin .mm-button--gold {
  background: linear-gradient(135deg, #f0d477, #d4af37);
  border-color: #d4af37;
  color: #050505;
}

.mm-page .mm-button--ghost,
.mm-dashboard .mm-button--ghost,
.mm-admin .mm-button--ghost {
  color: #f0d477;
  border-color: #d4af37;
}

.mm-page .mm-badge,
.mm-dashboard .mm-badge,
.mm-admin .mm-badge {
  border-color: rgba(212, 175, 55, 0.36);
  background: rgba(212, 175, 55, 0.1);
  color: #f0d477;
}

.mm-page .mm-table th,
.mm-dashboard .mm-table th,
.mm-admin .mm-table th {
  color: #f0d477;
  background: #1b1810;
  border-color: rgba(212, 175, 55, 0.22);
}

.mm-page .mm-table td,
.mm-dashboard .mm-table td,
.mm-admin .mm-table td {
  border-color: rgba(212, 175, 55, 0.12);
}

.mm-page .mm-input:focus,
.mm-dashboard .mm-input:focus,
.mm-admin .mm-input:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.13);
}

.mm-page .mm-chat__launcher,
.mm-page .mm-chat__header {
  background: linear-gradient(135deg, #f0d477, #d4af37);
  color: #050505;
}

/* Old hero photograph becomes the full-bleed hero background; current content stays intact. */
.mm-about .mm-hero {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 520px;
  overflow: hidden;
  border-color: rgba(212, 175, 55, 0.35) !important;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.98) 0%, rgba(5, 5, 5, 0.9) 42%, rgba(5, 5, 5, 0.35) 100%),
    url('../images/magicmedia-marketplace-hero-black-gold.jpg') center / cover no-repeat !important;
}

.mm-about .mm-hero::before {
  content: "";
  position: absolute;
  right: clamp(18px, 4vw, 46px);
  top: clamp(18px, 4vw, 42px);
  width: 190px;
  height: 48px;
  background: url('../images/magicmedia-header-logo.png') center / contain no-repeat;
  opacity: 0.82;
  pointer-events: none;
  z-index: 2;
}

.mm-about .mm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 88% 18%, rgba(212, 175, 55, 0.18), transparent 32%);
  pointer-events: none;
  z-index: -1;
}

.mm-about .mm-hero__art {
  display: none !important;
}

.mm-about .mm-hero__content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.mm-about .mm-hero h1,
.mm-about .mm-hero .mm-lead,
.mm-about .mm-hero .mm-fineprint {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75);
}

/* Legacy shortcode compatibility cards. */
.mm-legacy-compat {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 18px;
  background: linear-gradient(145deg, #141414, #0a0907);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}

.mm-legacy-compat h2 {
  margin-top: 0;
  color: #f0d477;
}

.mm-legacy-compat p {
  color: #c2baa9;
}

.mm-legacy-compat .mm-button {
  margin-top: 10px;
}

@media (max-width: 640px) {
  .mm-about .mm-hero {
    min-height: 440px;
    background-position: 68% center;
  }
  .mm-about .mm-hero::before {
    width: 140px;
    height: 34px;
    right: 14px;
    top: 14px;
    opacity: 0.68;
  }
}