/* drx: Bonusclub — Kundencenter-Karte mit Meilenstein-Balken + Checkout-Opt-in.
   Primaerfarbe ueber die Theme-Variable --primary (Drexel-Oliv), mit Fallback.
   Stufen-Akzente metallisch (Bronze/Silber/Gold/Platin) fuer Wiedererkennung. */

.drx-bonusclub-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.drx-bonusclub-hint,
.drx-bonusclub-revenue,
.drx-bonusclub-info {
    margin-bottom: 0.75rem;
}

/* --- Status-Zeile: Stufen-Badge + aktueller Vorteil --- */
.drx-bonusclub-headline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    margin-bottom: 1.5rem;
}

.drx-bonusclub-tier-badge {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    font-weight: 700;
    color: #fff;
    background: var(--primary, rgb(64, 86, 29));
    letter-spacing: 0.02em;
}

/* Metallische Stufen-Akzente */
.drx-bonusclub-tier-1 { background: #b5713a; }               /* Bronze */
.drx-bonusclub-tier-2 { background: #8d99a6; }               /* Silber */
.drx-bonusclub-tier-3 { background: #c9a227; }               /* Gold   */
.drx-bonusclub-tier-4 { background: #4a5a68; }               /* Platin */

.drx-bonusclub-current-discount {
    font-weight: 600;
    color: var(--primary, rgb(64, 86, 29));
}

/* --- Meilenstein-Balken --- */
.drx-bonusclub-track {
    position: relative;
    margin: 0.5rem 0 2.75rem;   /* unten Platz fuer die Knoten-Labels */
    padding: 0 2px;
}

.drx-bonusclub-track-line {
    position: relative;
    height: 10px;
    background: var(--gray-medium, #ebebeb);
    border-radius: 999px;
    overflow: hidden;
}

.drx-bonusclub-track-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary, rgb(64, 86, 29)), #6f8a3a);
    border-radius: 999px;
    transition: width 0.6s ease;
}

.drx-bonusclub-node {
    position: absolute;
    top: 5px;                   /* Mitte der Linie */
    transform: translate(-50%, -50%);
    text-align: center;
    width: 0;                   /* Label per white-space nicht umbrechen */
}

.drx-bonusclub-node-dot {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 auto;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--gray-dark, #9b9b9b);
    box-sizing: border-box;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.drx-bonusclub-node.is-reached .drx-bonusclub-node-dot {
    border-color: var(--primary, rgb(64, 86, 29));
    background: var(--primary, rgb(64, 86, 29));
}

.drx-bonusclub-node.is-current .drx-bonusclub-node-dot {
    transform: scale(1.35);
    box-shadow: 0 0 0 4px rgba(64, 86, 29, 0.18);
}

.drx-bonusclub-node-label {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.78rem;
    line-height: 1.15;
    color: var(--gray-darker, #525252);
}

.drx-bonusclub-node.is-current .drx-bonusclub-node-label {
    font-weight: 700;
    color: var(--primary, rgb(64, 86, 29));
}

.drx-bonusclub-node-label small {
    display: block;
    font-size: 0.7rem;
    opacity: 0.75;
}

/* Aeussere Knoten buendig halten, damit die Labels nicht ueberstehen */
.drx-bonusclub-node.is-first .drx-bonusclub-node-label { left: 0; transform: none; text-align: left; }
.drx-bonusclub-node.is-last  .drx-bonusclub-node-label { left: auto; right: 0; transform: none; text-align: right; }

/* --- Umsatz + Motivator --- */
.drx-bonusclub-next {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.drx-bonusclub-togo { color: var(--gray-darker, #525252); }

.drx-bonusclub-reward {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: rgba(64, 86, 29, 0.1);
    color: var(--primary, rgb(64, 86, 29));
    font-weight: 700;
    white-space: nowrap;
}

.drx-bonusclub-top {
    font-weight: 600;
    color: var(--primary, rgb(64, 86, 29));
}

.drx-bonusclub-info {
    font-style: italic;
    color: var(--gray-darker, #525252);
}

.drx-bonusclub-form { margin-top: 0.5rem; }

/* Schmale Viewports: Labels etwas kleiner */
@media (max-width: 575px) {
    .drx-bonusclub-node-label { font-size: 0.68rem; }
    .drx-bonusclub-node-label small { font-size: 0.62rem; }
}

/* --- Checkout-Opt-in --- */
.drx-bonusclub-checkout {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    background: var(--gray-light, #f5f7fa);
    border: 1px solid var(--gray-medium, #ebebeb);
    border-radius: 0.375rem;
}

.drx-bonusclub-checkout-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    cursor: pointer;
}

.drx-bonusclub-checkout-label input { margin-top: 0.2rem; }

/* === drx (Markus): Vor-Beitritt-Onboarding — Stufen-Vorschau, kostenlos-Botschaft, Aktionen, Popup === */

/* Stufen-Leiter als Ausblick (Nicht-Mitglied): dieselbe Optik wie die Mitglieder-Reise, aber Dots in
   der jeweiligen Stufenfarbe (Reihenfolge Bronze/Silber/Gold/Platin), damit Interessenten die Stufen
   sofort sehen. nth-child(2..) weil das track-line-DIV das erste Kind ist. */
.drx-bonusclub-track--preview .drx-bonusclub-node:nth-child(2) .drx-bonusclub-node-dot { border-color: #b5713a; background: #b5713a; }
.drx-bonusclub-track--preview .drx-bonusclub-node:nth-child(3) .drx-bonusclub-node-dot { border-color: #8d99a6; background: #8d99a6; }
.drx-bonusclub-track--preview .drx-bonusclub-node:nth-child(4) .drx-bonusclub-node-dot { border-color: #c9a227; background: #c9a227; }
.drx-bonusclub-track--preview .drx-bonusclub-node:nth-child(5) .drx-bonusclub-node-dot { border-color: #4a5a68; background: #4a5a68; }

/* kostenlos-Botschaft — freundlich, klar, Markengruen. Die Kernaussage fuer die Zielgruppe. */
.drx-bonusclub-free {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.25rem 0 1rem;
    padding: 0.7rem 0.9rem;
    background: rgb(233, 241, 222);
    border-radius: 10px;
    color: #3a4a26;
    font-size: 0.92rem;
    line-height: 1.4;
}
.drx-bonusclub-free .fa-heart { color: rgb(64, 86, 29); margin-top: 0.15rem; }
.drx-bonusclub-free b { color: rgb(64, 86, 29); }

/* Aktionen-Reihe (Beitreten/Abmelden + "Mehr erfahren"). */
.drx-bonusclub-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}
.drx-bonusclub-actions .drx-bonusclub-form { margin: 0; }
.drx-bonusclub-more { text-decoration: none; }

/* Checkout: kostenlos-Note + Info-Link unter der Checkbox. */
.drx-bonusclub-checkout-note {
    margin: 0.4rem 0 0;
    padding-left: 1.6rem;   /* mit dem Checkbox-Label ausrichten (Box + gap) */
    font-size: 0.85rem;
    color: #5b6450;
}
.drx-bonusclub-checkout-free { font-weight: 700; color: rgb(64, 86, 29); }
.drx-bonusclub-checkout-note .drx-bonusclub-more { padding: 0 0.15rem; vertical-align: baseline; }

/* "Mehr erfahren"-Popup: CMS-Inhalt der Info-Seite lesbar aufbereiten. */
.drx-bonusclub-modal-star { color: #c9a227; }
.drx-bonusclub-modal-body { font-size: 0.95rem; line-height: 1.6; color: #3a3a3a; }
.drx-bonusclub-modal-body h1,
.drx-bonusclub-modal-body h2,
.drx-bonusclub-modal-body h3 { color: rgb(64, 86, 29); font-family: Montserrat, sans-serif; margin: 1.25rem 0 0.6rem; }
.drx-bonusclub-modal-body h1:first-child,
.drx-bonusclub-modal-body h2:first-child,
.drx-bonusclub-modal-body h3:first-child { margin-top: 0; }
.drx-bonusclub-modal-body ul,
.drx-bonusclub-modal-body ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.drx-bonusclub-modal-body li { margin-bottom: 0.4rem; }
.drx-bonusclub-modal-body p { margin: 0 0 0.9rem; }
.drx-bonusclub-modal-body a { color: rgb(64, 86, 29); font-weight: 600; }