/*
 * MAXIFY – own styles (decision 11.11.2026: Bootstrap 5.3 first).
 * Only what Bootstrap utilities cannot express. Every class has the prefix mx-.
 *
 * Frontend design (11.11.2026, from the design mock-up): dark violet, pink →
 * violet gradient, Barlow Condensed (display) + Manrope (text), self-hosted.
 * The theme is scoped to <html data-mx-theme="club"> – the admin area keeps
 * Bootstrap's light theme.
 */

/* ------------------------------------------------------------------------
 * Fonts (self-hosted, OFL; files from @fontsource 5.3.0)
 * --------------------------------------------------------------------- */
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../plugins/barlow-condensed/5.3.0/barlow-condensed-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../plugins/barlow-condensed/5.3.0/barlow-condensed-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../plugins/barlow-condensed/5.3.0/barlow-condensed-latin-ext-700-italic.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../plugins/barlow-condensed/5.3.0/barlow-condensed-latin-700-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url("../plugins/barlow-condensed/5.3.0/barlow-condensed-latin-ext-800-italic.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url("../plugins/barlow-condensed/5.3.0/barlow-condensed-latin-800-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../plugins/manrope/5.3.0/manrope-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../plugins/manrope/5.3.0/manrope-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("../plugins/manrope/5.3.0/manrope-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("../plugins/manrope/5.3.0/manrope-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("../plugins/manrope/5.3.0/manrope-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("../plugins/manrope/5.3.0/manrope-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("../plugins/manrope/5.3.0/manrope-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("../plugins/manrope/5.3.0/manrope-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("../plugins/manrope/5.3.0/manrope-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("../plugins/manrope/5.3.0/manrope-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ------------------------------------------------------------------------
 * Shared (admin + frontend)
 * --------------------------------------------------------------------- */

/* Alpine: hide x-cloak elements until Alpine is ready (the only sanctioned !important). */
[x-cloak] {
    display: none !important;
}

/*
 * reCAPTCHA v3 badge hidden – allowed by Google when the reCAPTCHA notice is
 * shown in the form (recaptcha_notice(), 11.11.2026).
 */
.grecaptcha-badge {
    visibility: hidden;
}

/* Brand wordmark: letter spacing has no Bootstrap utility. */
.mx-brand {
    letter-spacing: .08em;
}

/* ------------------------------------------------------------------------
 * Club theme: tokens + Bootstrap variable overrides (dark)
 * --------------------------------------------------------------------- */
[data-mx-theme="club"] {
    --mx-bg: #0a0616;
    --mx-surface: #130e26;
    --mx-surface-2: #1c1538;
    --mx-border: rgba(255, 255, 255, .08);
    --mx-text: #f5f1ff;
    --mx-muted: #a59ec3;
    --mx-pink: #f03ec4;
    --mx-pink-rgb: 240, 62, 196;
    --mx-violet: #8b3dff;
    --mx-violet-rgb: 139, 61, 255;
    --mx-gold: #f6c453;
    --mx-gradient: linear-gradient(90deg, #e331b6 0%, #8d3cff 100%);
    --mx-font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;

    --bs-body-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-bg: var(--mx-bg);
    --bs-body-bg-rgb: 10, 6, 22;
    --bs-body-color: var(--mx-text);
    --bs-body-color-rgb: 245, 241, 255;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: #fff;
    --bs-secondary-color: var(--mx-muted);
    --bs-secondary-color-rgb: 165, 158, 195;
    --bs-secondary-bg: var(--mx-surface-2);
    --bs-tertiary-bg: var(--mx-surface);
    --bs-tertiary-bg-rgb: 19, 14, 38;
    --bs-border-color: rgba(255, 255, 255, .12);
    --bs-border-color-translucent: rgba(255, 255, 255, .1);
    --bs-primary: var(--mx-pink);
    --bs-primary-rgb: var(--mx-pink-rgb);
    --bs-link-color: #ff79db;
    --bs-link-color-rgb: 255, 121, 219;
    --bs-link-hover-color: #ffb0ea;
    --bs-link-hover-color-rgb: 255, 176, 234;
    --bs-focus-ring-color: rgba(var(--mx-pink-rgb), .35);
    --bs-border-radius: .75rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.5rem;
    --bs-dropdown-link-active-bg: var(--mx-pink);
}

[data-mx-theme="club"] body {
    -webkit-font-smoothing: antialiased;
}

/* Bootstrap compiles these focus/checked colours as fixed values – re-colour them pink. */
[data-mx-theme="club"] .form-control:focus,
[data-mx-theme="club"] .form-select:focus,
[data-mx-theme="club"] .form-check-input:focus {
    border-color: rgba(var(--mx-pink-rgb), .7);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

[data-mx-theme="club"] .form-check-input:checked {
    background-color: var(--mx-pink);
    border-color: var(--mx-pink);
}

/* Active pills (member area navigation on phones) – Bootstrap compiles the colour. */
[data-mx-theme="club"] .nav-pills {
    --bs-nav-pills-link-active-bg: var(--mx-pink);
    --bs-nav-pills-link-active-color: #fff;
}

[data-mx-theme="club"] .dropdown-item.active,
[data-mx-theme="club"] .dropdown-item:active {
    background-color: rgba(var(--mx-pink-rgb), .9);
}

/* ------------------------------------------------------------------------
 * Typography
 * --------------------------------------------------------------------- */

/* Heavy condensed italic headlines ("NÄHER DRAN …" in the mock-up). */
.mx-display {
    font-family: var(--mx-font-display);
    font-style: italic;
    font-weight: 800;
    line-height: .92;
    text-transform: uppercase;
    letter-spacing: -.005em;
    color: var(--bs-heading-color);
}

/* Small pink label above headlines. */
.mx-eyebrow {
    font-family: var(--mx-font-display);
    font-style: italic;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mx-pink);
}

/* Outlined accent words ("REIHE EINS."). */
.mx-outline {
    color: transparent;
    -webkit-text-stroke: 2px var(--mx-pink);
}

/* Prices: upright condensed numerals. */
.mx-price {
    font-family: var(--mx-font-display);
    font-weight: 700;
    line-height: 1;
}

/* ------------------------------------------------------------------------
 * Buttons (pill shape via Bootstrap .rounded-pill)
 * --------------------------------------------------------------------- */
.btn.mx-btn-gradient {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
    --bs-btn-border-width: 0;
    --bs-btn-font-weight: 700;
    background-image: var(--mx-gradient);
    box-shadow: 0 .75rem 2rem -.75rem rgba(var(--mx-pink-rgb), .7);
    transition: filter .15s ease, transform .15s ease;
}

.btn.mx-btn-gradient:hover,
.btn.mx-btn-gradient:focus-visible {
    filter: brightness(1.1);
}

.btn.mx-btn-ghost {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(255, 255, 255, .03);
    --bs-btn-border-color: rgba(255, 255, 255, .22);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, .08);
    --bs-btn-hover-border-color: rgba(255, 255, 255, .4);
    --bs-btn-active-bg: rgba(255, 255, 255, .12);
    --bs-btn-active-border-color: rgba(255, 255, 255, .4);
    --bs-btn-font-weight: 700;
}

.btn.mx-btn-light {
    --bs-btn-color: #120c24;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #120c24;
    --bs-btn-hover-bg: #f2ecff;
    --bs-btn-hover-border-color: #f2ecff;
    --bs-btn-font-weight: 700;
}

/* ------------------------------------------------------------------------
 * Header / logo / footer
 * --------------------------------------------------------------------- */
.mx-header {
    z-index: 1030;
}

/* Limited-time offer bar on top of every page (12.11.2026). */
.mx-promo-bar {
    background-image: var(--mx-gradient);
}

.mx-promo-bar .badge {
    letter-spacing: .06em;
}

.mx-promo-bar del {
    opacity: .75;
}

/* Solid header on normal pages, transparent over the hero. */
.mx-header-solid {
    background-color: rgba(10, 6, 22, .9);
    border-bottom: 1px solid var(--mx-border);
    backdrop-filter: blur(10px);
}

.mx-logo {
    font-family: var(--mx-font-display);
    font-style: italic;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #fff;
}

/* Tilted pink tag next to the logo and on featured cards ("FAN CLUB", "BELIEBT"). */
.mx-tag {
    display: inline-block;
    padding: .2em .55em;
    font-family: var(--mx-font-display);
    font-style: italic;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .12em;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
    background: var(--mx-pink);
    border-radius: .35rem;
    transform: rotate(-3deg);
}

/* Collapsed mobile menu needs its own background over the hero. */
@media (max-width: 991.98px) {
    .mx-header .navbar-collapse {
        margin-top: .75rem;
        padding: 1rem;
        background: var(--mx-surface);
        border: 1px solid var(--mx-border);
        border-radius: 1rem;
    }
}

.mx-footer {
    border-top: 1px solid var(--mx-border);
    color: var(--mx-muted);
}

/* ------------------------------------------------------------------------
 * Hero with the arena photo (12.11.2026)
 *
 * The photo is a real <img> (srcset) with a canvas on top on which
 * hero.js lets the phone lights of the audience fade in and out. Both sit
 * in .mx-hero-zoom, which zooms very slowly – so the lights stay on their
 * spots. Desktop: photo behind the text. Below lg: photo first, text below.
 * No motion with prefers-reduced-motion.
 * --------------------------------------------------------------------- */
.mx-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--mx-bg);
}

.mx-hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.mx-hero-zoom {
    position: absolute;
    inset: 0;
    transform-origin: 65% 45%;
    animation: mx-hero-zoom 28s ease-in-out infinite alternate;
    will-change: transform;
}

.mx-hero-img,
.mx-hero-lights {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mx-hero-img {
    object-fit: cover;
    /* Percentages only – hero.js reads them to place the lights. */
    object-position: 65% 50%;
}

.mx-hero-lights {
    pointer-events: none;
}

.mx-hero-shade {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(10, 6, 22, .96) 0%, rgba(10, 6, 22, .78) 38%, rgba(10, 6, 22, .25) 70%, rgba(10, 6, 22, .1) 100%),
        linear-gradient(180deg, rgba(10, 6, 22, .55) 0%, rgba(10, 6, 22, 0) 25%, rgba(10, 6, 22, 0) 70%, var(--mx-bg) 100%);
}

@keyframes mx-hero-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

/* Phones and tablets: photo on top (header over it), content below. */
@media (max-width: 991.98px) {
    .mx-hero-media {
        position: relative;
        aspect-ratio: 16 / 10;
    }

    .mx-hero-img {
        object-position: 72% 50%;
    }

    .mx-hero-shade {
        background-image:
            linear-gradient(180deg, rgba(10, 6, 22, .6) 0%, rgba(10, 6, 22, 0) 22%, rgba(10, 6, 22, 0) 62%, var(--mx-bg) 100%);
    }

    /* Text starts on the faded lower edge of the photo, like the design. */
    .mx-hero-content {
        margin-top: -3rem;
    }
}

@media (max-width: 575.98px) {
    .mx-hero-media {
        aspect-ratio: 4 / 5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mx-hero-zoom {
        animation: none;
    }
}

/* Limited-time offer box in the hero (12.11.2026). */
.mx-offer {
    background-color: rgba(19, 14, 38, .72);
    border: 1px solid rgba(var(--mx-pink-rgb), .55);
    box-shadow: 0 1rem 3rem -1rem rgba(var(--mx-pink-rgb), .55);
    backdrop-filter: blur(8px);
}

.mx-hero-title {
    font-size: clamp(2.75rem, 7vw, 6.25rem);
}

/* Dimmed photo behind form pages (12.11.2026: one photo per page).
 * The photo is a custom property so each page only sets a modifier class
 * (.mx-photo-*). WebP only: url() in a custom property must stay valid in
 * every browser (image-set() would make the whole declaration fail). */
.mx-backdrop {
    --mx-photo: url("../img/hero-arena-1280.webp");
    background-image:
        radial-gradient(60% 50% at 85% 0%, rgba(var(--mx-violet-rgb), .35) 0%, rgba(10, 6, 22, 0) 70%),
        radial-gradient(45% 40% at 0% 15%, rgba(var(--mx-pink-rgb), .18) 0%, rgba(10, 6, 22, 0) 70%),
        linear-gradient(180deg, rgba(10, 6, 22, .45) 0%, rgba(10, 6, 22, .72) 300px, var(--mx-bg) 620px),
        var(--mx-photo);
    background-size: auto, auto, auto, 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
}

.mx-photo-arena-above { --mx-photo: url("../img/photos/arena-above-wide-1280.webp"); }
.mx-photo-flames      { --mx-photo: url("../img/photos/flames-wide-1280.webp"); }
.mx-photo-shout       { --mx-photo: url("../img/photos/shout-wide-1280.webp"); }
.mx-photo-silhouette  { --mx-photo: url("../img/photos/silhouette-wide-1280.webp"); }
.mx-photo-theater     { --mx-photo: url("../img/photos/theater-wide-1280.webp"); }

@media (min-width: 1400px) {
    .mx-photo-arena-above { --mx-photo: url("../img/photos/arena-above-wide-1920.webp"); }
    .mx-photo-flames      { --mx-photo: url("../img/photos/flames-wide-1920.webp"); }
    .mx-photo-shout       { --mx-photo: url("../img/photos/shout-wide-1920.webp"); }
    .mx-photo-silhouette  { --mx-photo: url("../img/photos/silhouette-wide-1920.webp"); }
    .mx-photo-theater     { --mx-photo: url("../img/photos/theater-wide-1920.webp"); }
}

/* Split view for login, registration, login link (12.11.2026): photo left,
 * form right; on phones a photo strip on top. */
.mx-split-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.mx-split-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

.mx-split-shade {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(10, 6, 22, .15) 0%, rgba(10, 6, 22, 0) 45%, var(--mx-bg) 100%);
}

.mx-split-form {
    max-width: 34rem;
}

@media (min-width: 992px) {
    .mx-split-media {
        aspect-ratio: auto;
        min-height: calc(100svh - 7.5rem);
    }

    .mx-split-shade {
        background-image: linear-gradient(90deg, rgba(10, 6, 22, 0) 55%, var(--mx-bg) 100%);
    }
}

/* "Live on stage" photo strip on the home page (12.11.2026): swipe on
 * phones, all five in a row from lg on. */
.mx-gallery {
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.mx-gallery > * {
    scroll-snap-align: start;
}

/* Soft pink/violet glow behind a section (pricing). */
.mx-glow {
    background-image: radial-gradient(55% 60% at 50% 45%, rgba(var(--mx-violet-rgb), .22) 0%, rgba(10, 6, 22, 0) 70%);
}

/* ------------------------------------------------------------------------
 * Marquee band (MEMBERS ONLY · …)
 * --------------------------------------------------------------------- */
/* The rotated band is wider than the page: clip sideways only (no scroll container). */
.mx-marquee-wrap {
    position: relative;
    z-index: 2;
    margin-top: -1.75rem;
    padding: 1.5rem 0;
    overflow-x: clip;
}

.mx-marquee {
    margin: 0 -1rem;
    padding: 1rem 0;
    overflow: hidden;
    background-image: linear-gradient(90deg, #8d3cff 0%, #e331b6 55%, #b23cff 100%);
    transform: rotate(-2deg);
    box-shadow: 0 1rem 3rem -1rem rgba(var(--mx-pink-rgb), .6);
}

.mx-marquee-track {
    display: flex;
    width: max-content;
    animation: mx-marquee 36s linear infinite;
}

.mx-marquee-item {
    font-family: var(--mx-font-display);
    font-style: italic;
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
}

@keyframes mx-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .mx-marquee-track {
        animation: none;
    }
}

/* ------------------------------------------------------------------------
 * Cards
 * --------------------------------------------------------------------- */
.card.mx-card {
    --bs-card-bg: var(--mx-surface);
    --bs-card-border-color: var(--mx-border);
    --bs-card-border-radius: 1.5rem;
    --bs-card-inner-border-radius: 1.5rem;
    /* form controls inside cards sit one step lighter */
    --bs-body-bg: var(--mx-surface-2);
    --bs-secondary-bg: #251d47;
    /* intl-tel-input (29.5) dropdown in the dark theme */
    --iti-country-selector-bg: var(--mx-surface-2);
    --iti-border-color: rgba(255, 255, 255, .12);
    --iti-hover-color: rgba(255, 255, 255, .08);
    --iti-icon-color: var(--mx-muted);
}

/* Highlighted plan: violet gradient, pink border, glow. */
.card.mx-card-featured {
    --bs-card-bg: transparent;
    --bs-card-border-color: rgba(var(--mx-pink-rgb), .85);
    background-image: linear-gradient(180deg, rgba(var(--mx-violet-rgb), .38) 0%, rgba(var(--mx-violet-rgb), .1) 100%);
    box-shadow: 0 1.5rem 4rem -1.5rem rgba(var(--mx-pink-rgb), .55);
}

.mx-card-tag {
    position: absolute;
    top: -.8rem;
    left: 1.5rem;
}

/* Small pink icon box in benefit cards. */
.mx-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
    color: var(--mx-pink);
    background: rgba(var(--mx-pink-rgb), .12);
    border: 1px solid rgba(var(--mx-pink-rgb), .35);
    border-radius: .9rem;
}

/* Plan choice on the membership page (radio styled as card). */
.mx-plan-option {
    --bs-btn-color: var(--mx-text);
    --bs-btn-bg: var(--mx-surface);
    --bs-btn-border-color: var(--mx-border);
    --bs-btn-hover-color: var(--mx-text);
    --bs-btn-hover-bg: var(--mx-surface-2);
    --bs-btn-hover-border-color: rgba(var(--mx-pink-rgb), .5);
    --bs-btn-active-color: var(--mx-text);
    --bs-btn-active-bg: var(--mx-surface);
    --bs-btn-active-border-color: var(--mx-pink);
    border-radius: 1.25rem;
}

.btn-check:checked + .mx-plan-option {
    background-image: linear-gradient(180deg, rgba(var(--mx-violet-rgb), .35) 0%, rgba(var(--mx-violet-rgb), .08) 100%);
    border-color: var(--mx-pink);
    box-shadow: 0 1rem 3rem -1.25rem rgba(var(--mx-pink-rgb), .65);
}

/* ------------------------------------------------------------------------
 * Call to action band at the end of the home page
 * --------------------------------------------------------------------- */
.mx-cta {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(110deg, #6d2fe0 0%, #a32fd0 45%, #e033b4 100%);
    border-radius: 2rem;
    isolation: isolate;
}

.mx-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* fallback without image-set() */
    background-image: url("../img/hero-arena-1280.jpg");
    background-image: image-set(url("../img/hero-arena-1280.webp") type("image/webp"), url("../img/hero-arena-1280.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center 30%;
    mix-blend-mode: soft-light;
    opacity: .5;
}

/* ------------------------------------------------------------------------
 * Autocomplete (Giveaway City) and intl-tel-input in the dark theme
 * --------------------------------------------------------------------- */
[data-mx-theme="club"] .iti__search-input {
    color: inherit;
    background-color: transparent;
}

[data-mx-theme="club"] .iti__dial-code {
    color: var(--mx-muted);
}