/**
 * Magic Paywall — HeartBit+ Badge-Branding + Mein-Konto-Page (Child-Theme).
 *  - Badge-Override fuer Premium-Marker
 *  - Mein-Konto-Erweiterungen (Edit-Form, Delete-Section)
 */

/* ============================================================
   Modal-Overlay: gleicher Blur-Effekt wie Bexons Hamburger-Sidebar
   (.body-overlay { backdrop-filter: blur(10px) } - kein Tint).
   ============================================================ */
.mpw-modal-overlay {
    background: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ============================================================
   Paywall-CTA-Box: CI-Override
   - HeartBit+ Logo zentriert oben
   - Headline in Fraunces (Display-Font wie auf der Site)
   - Brand-Primary #29BD98 (Elementor-Kit-Wert) statt Plugin-Default
   - Bexon-CI-konforme Button-Padding/Radius
   - Ghost-Button transparent + Border (mit hoeherer Spezifitaet
     wegen Bexons globalen .button-Regeln).
   ============================================================ */
.mpw-paywall__cta--ehnes .mpw-paywall__box {
    padding: 2.75rem 2rem 2.25rem;
    border-radius: 14px;
    background: #F0F7F4;
    border: 1px solid #DDE5E1;
    box-shadow: 0 6px 24px rgba(12, 30, 33, .06);
    text-align: center;
}

.mpw-paywall__brand {
    margin: 0 auto 1.4rem;
    display: flex;
    justify-content: center;
}
.mpw-paywall__brand-img {
    display: block;
    width: 100px;
    height: auto;
    user-select: none;
}

.mpw-paywall__cta--ehnes .mpw-paywall__title {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 500;
    font-size: 1.75rem;
    line-height: 1.25;
    color: #15293A;
    margin: 0 0 .65rem;
}

.mpw-paywall__cta--ehnes .mpw-paywall__text {
    font-family: 'Ubuntu', 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #5C6873;
    max-width: 38rem;
    margin: 0 auto 1.6rem;
}

.mpw-paywall__cta--ehnes .mpw-paywall__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin: 0 0 1.1rem;
}

/* Buttons - einheitlicher Bexon-konformer Pill-Stil. !important wegen
   Bexons globaler Button-Regeln. Padding asymmetrisch wegen Ubuntu-
   Font-Metrics (Text sitzt sonst bei line-height: 1 visuell zu tief). */
.mpw-paywall__cta--ehnes .mpw-btn,
.mpw-modal__form .mpw-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 26px 14px !important;
    border-radius: 50px !important;
    font-family: 'Ubuntu', 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    text-transform: none;
    line-height: 1 !important;
    border: 1.5px solid transparent !important;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.mpw-paywall__cta--ehnes .mpw-btn:hover,
.mpw-modal__form .mpw-btn:hover {
    transform: translateY(-1px);
}

.mpw-paywall__cta--ehnes .mpw-btn--primary,
.mpw-modal__form .mpw-btn--primary {
    background: #29BD98 !important;
    color: #FFFFFF !important;
    border-color: #29BD98 !important;
}
.mpw-paywall__cta--ehnes .mpw-btn--primary:hover,
.mpw-modal__form .mpw-btn--primary:hover {
    background: #0C1E21 !important;
    border-color: #0C1E21 !important;
    color: #FFFFFF !important;
}

.mpw-paywall__cta--ehnes .mpw-btn--ghost,
.mpw-modal__form .mpw-btn--ghost {
    background: transparent !important;
    color: #15293A !important;
    border-color: #C9D2CD !important;
}
.mpw-paywall__cta--ehnes .mpw-btn--ghost:hover,
.mpw-modal__form .mpw-btn--ghost:hover {
    background: #FFFFFF !important;
    color: #0C1E21 !important;
    border-color: #0C1E21 !important;
}

.mpw-paywall__cta--ehnes .mpw-paywall__hint {
    font-family: 'Ubuntu', 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
    font-size: .82rem;
    color: #808291;
    margin: 0;
}

@media (max-width: 600px) {
    .mpw-paywall__cta--ehnes .mpw-paywall__box {
        padding: 2rem 1.25rem 1.75rem;
    }
    .mpw-paywall__brand-img {
        width: 80px;
    }
    .mpw-paywall__cta--ehnes .mpw-paywall__title {
        font-size: 1.45rem;
    }
    .mpw-paywall__cta--ehnes .mpw-paywall__actions {
        flex-direction: column;
        gap: .5rem;
    }
    .mpw-paywall__cta--ehnes .mpw-btn {
        width: 100%;
    }
}

/* ============================================================
   Mein-Konto-Page Erweiterungen
   ============================================================ */
.mpw-dashboard__form .mpw-form-row {
    margin-bottom: 1rem;
}
.mpw-dashboard__panel + .mpw-dashboard__panel {
    margin-top: 1.25rem;
}
.mpw-text--success {
    color: #15803d;
    background: #dcfce7;
    padding: .55rem .8rem;
    border-radius: .35rem;
    margin-top: .75rem;
}

.mpw-btn--danger {
    background: #b91c1c;
    color: #fff;
    border-color: #b91c1c;
}
.mpw-btn--danger:hover {
    background: #7f1d1d;
    color: #fff;
    border-color: #7f1d1d;
}

.mpw-dashboard__panel--danger {
    border-color: #fecaca;
    background: #fff7f7;
}
.mpw-dashboard__panel--danger .mpw-dashboard__panel-title {
    color: #b91c1c;
}
.mpw-dashboard__delete-form {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #fecaca;
}



/* ============================================================
   Archiv/Listing: HeartBit+ Logo klein oben-links in der Ecke,
   ohne Hintergrund, leicht abgesetzt durch Drop-Shadow.
   ============================================================ */

/* Wrap aus dem Layout nehmen: display:contents verhindert, dass der
   Span als Layout-Box zwischen .blog-thumb und <img> Bexons height:100%
   bricht. Der Badge positioniert sich dann relativ zum naechsten
   positionierten Vorfahren - in Bexon ist das .blog-thumb (position:
   relative). Falls eine Theme-Variante keinen positionierten Vorfahren
   hat, fallback unten via :has(). */
.mpw-thumb-wrap {
    display: contents;
}

/* Span statt img + !important: schuetzt gegen Theme-Rules wie
   ".blog-thumb img { width:100%; min-height:280px }" (Bexon).
   Weisser Hintergrund + Shadow analog zum Single-Page-Overlay,
   damit der Badge auf allen Bildhintergruenden lesbar bleibt. */
.mpw-thumb-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    width: 57px !important;
    height: 39px !important;
    min-height: 0 !important;
    max-width: none !important;
    z-index: 5;
    pointer-events: none;
    display: block;
    background-color: rgba(255, 255, 255, .94);
    background-image: url('../images/heartbit-badge.png');
    background-size: 44px auto;
    background-position: center;
    background-repeat: no-repeat;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

@media (max-width: 600px) {
    .mpw-thumb-badge {
        width: 46px !important;
        height: 31px !important;
        background-size: 36px auto;
        top: 8px !important;
        left: 8px !important;
        border-radius: 7px;
    }
}

/* ============================================================
   Single-Post mit Elementor Theme-Builder:
   Elementor's "Theme Post Featured Image"-Widget umgeht den
   post_thumbnail_html-Filter, weshalb der PHP-Pfad oben dort nicht
   greift. Wir positionieren den Badge daher per CSS-::before direkt
   am Widget. Greift via mpw-is-premium-Klasse am Article-Wrapper.
   ============================================================ */
.mpw-is-premium .elementor-widget-theme-post-featured-image {
    position: relative;
}
.mpw-is-premium .elementor-widget-theme-post-featured-image::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 18px;
    width: 110px;
    height: 75px;
    background-color: rgba(255, 255, 255, .94);
    background-image: url('../images/heartbit-badge.png');
    background-size: 86px auto;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    z-index: 5;
    pointer-events: none;
}
@media (max-width: 1024px) {
    .mpw-is-premium .elementor-widget-theme-post-featured-image::before {
        width: 90px;
        height: 62px;
        top: 14px;
        left: 14px;
        background-size: 70px auto;
        border-radius: 9px;
    }
}
@media (max-width: 600px) {
    .mpw-is-premium .elementor-widget-theme-post-featured-image::before {
        width: 72px;
        height: 50px;
        top: 10px;
        left: 10px;
        background-size: 56px auto;
        border-radius: 7px;
    }
}