/*
 * MOBIS8 STORY PAYWALL
 * Full-screen modal / German UI / automatic light + dark mode
 */

html.mobis8-paywall-open,
body.mobis8-paywall-open{
    overflow:hidden !important;
}

/*
 * The article itself only provides the trigger location.
 * The actual paywall covers the WHOLE browser viewport.
 */
.mobis8-paywall{
    position:fixed !important;
    z-index:2147483000 !important;
    inset:0 !important;

    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;

    margin:0 !important;
    padding:20px !important;
    box-sizing:border-box !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    overflow:auto !important;

    background:rgba(245,247,250,.58) !important;

    backdrop-filter:blur(13px) saturate(.75) !important;
    -webkit-backdrop-filter:blur(13px) saturate(.75) !important;
}

/*
 * We do NOT show fake skeleton text anymore.
 * The REAL SITE remains visible behind the translucent full-screen layer.
 */
.mobis8-paywall-fake,
.mobis8-paywall-shade{
    display:none !important;
}

/* ---------- Modal ---------- */

.mobis8-paywall-card{
    position:relative !important;
    z-index:2 !important;

    top:auto !important;
    left:auto !important;
    transform:none !important;

    width:100% !important;
    max-width:460px !important;

    margin:auto !important;
    padding:34px 32px 27px !important;

    box-sizing:border-box !important;

    border:1px solid rgba(15,23,42,.09) !important;
    border-radius:22px !important;

    background:rgba(255,255,255,.96) !important;
    color:#16181d !important;

    box-shadow:
        0 30px 90px rgba(15,23,42,.22),
        0 8px 28px rgba(15,23,42,.10) !important;

    text-align:center !important;

    backdrop-filter:blur(24px) !important;
    -webkit-backdrop-filter:blur(24px) !important;
}

/* ---------- Lock ---------- */

.mobis8-paywall-lock{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:58px !important;
    height:58px !important;

    margin:0 auto 17px !important;

    border-radius:18px !important;

    background:#f2f4f7 !important;

    font-size:26px !important;
    line-height:1 !important;
}

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

.mobis8-paywall-card h2{
    margin:0 0 10px !important;
    padding:0 !important;

    color:inherit !important;

    font-size:27px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    letter-spacing:-.35px !important;
}

.mobis8-paywall-card p{
    max-width:360px !important;

    margin:0 auto 21px !important;

    color:#626873 !important;

    font-size:15px !important;
    line-height:1.6 !important;
}

/* ---------- Price ---------- */

.mobis8-paywall-price{
    margin:0 0 22px !important;

    color:#111318 !important;

    font-size:38px !important;
    font-weight:850 !important;
    line-height:1 !important;
    letter-spacing:-1px !important;
}

/* ---------- Main button ---------- */

.mobis8-paywall-primary{
    appearance:none !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    min-height:54px !important;

    margin:0 !important;
    padding:14px 20px !important;

    box-sizing:border-box !important;

    border:0 !important;
    border-radius:13px !important;

    background:#16181d !important;
    color:#fff !important;

    box-shadow:0 8px 20px rgba(15,23,42,.14) !important;

    font-family:inherit !important;
    font-size:15px !important;
    font-weight:750 !important;
    line-height:1.3 !important;

    cursor:pointer !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        opacity .16s ease !important;
}

.mobis8-paywall-primary:hover{
    transform:translateY(-1px) !important;

    box-shadow:
        0 11px 25px rgba(15,23,42,.20) !important;
}

.mobis8-paywall-primary:active{
    transform:translateY(0) !important;
}

.mobis8-paywall-primary:disabled{
    opacity:.55 !important;
    cursor:wait !important;
    transform:none !important;
}

/* ---------- Secondary link ---------- */

.mobis8-paywall-text-button{
    appearance:none !important;

    display:inline-block !important;

    margin:17px auto 0 !important;
    padding:4px 6px !important;

    border:0 !important;

    background:transparent !important;
    color:#555d69 !important;

    font-family:inherit !important;
    font-size:13.5px !important;
    font-weight:600 !important;

    cursor:pointer !important;

    text-decoration:none !important;
}

.mobis8-paywall-text-button:hover{
    color:#111318 !important;
    text-decoration:underline !important;
    text-underline-offset:3px !important;
}

/* ---------- Forms ---------- */

.mobis8-paywall-card form{
    margin:21px 0 0 !important;
    padding:0 !important;
}

.mobis8-paywall-card input{
    appearance:none !important;

    display:block !important;

    width:100% !important;
    height:52px !important;

    margin:0 0 11px !important;
    padding:0 15px !important;

    box-sizing:border-box !important;

    border:1px solid #d9dde4 !important;
    border-radius:12px !important;

    outline:none !important;

    background:#f8f9fb !important;
    color:#17191e !important;

    box-shadow:none !important;

    font-family:inherit !important;
    font-size:15px !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease !important;
}

.mobis8-paywall-card input::placeholder{
    color:#8b929e !important;
}

.mobis8-paywall-card input:focus{
    border-color:#777f8d !important;
    background:#fff !important;

    box-shadow:
        0 0 0 3px rgba(31,41,55,.07) !important;
}

/* ---------- Messages ---------- */

.mobis8-paywall-message{
    min-height:18px !important;

    margin:3px 0 10px !important;

    font-size:13px !important;
    line-height:1.4 !important;
}

.mobis8-paywall-message.is-error{
    color:#c62828 !important;
}

/* ---------- Stripe ---------- */

.mobis8-paywall-secure{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;

    margin:20px 0 0 !important;

    color:#7b828d !important;

    font-size:11.5px !important;
    line-height:1.4 !important;
}

.mobis8-paywall-secure::before{
    content:"🔒";
    font-size:11px;
}

/* ---------- Unlock ---------- */

.mobis8-paywall.is-unlocking{
    animation:mobis8OverlayOut .42s ease forwards !important;
}

@keyframes mobis8OverlayOut{
    from{
        opacity:1;
    }

    to{
        opacity:0;
    }
}

/* =========================================================
   DARK MODE
   Works with OS dark mode AND common theme dark-mode classes
   ========================================================= */

@media (prefers-color-scheme: dark){

    .mobis8-paywall{
        background:rgba(4,7,12,.70) !important;

        backdrop-filter:blur(14px) saturate(.7) !important;
        -webkit-backdrop-filter:blur(14px) saturate(.7) !important;
    }

    .mobis8-paywall-card{
        border-color:rgba(255,255,255,.09) !important;

        background:rgba(24,26,31,.97) !important;
        color:#f4f5f7 !important;

        box-shadow:
            0 32px 100px rgba(0,0,0,.55),
            0 8px 30px rgba(0,0,0,.28) !important;
    }

    .mobis8-paywall-lock{
        background:#30333a !important;
    }

    .mobis8-paywall-card p{
        color:#aeb3bc !important;
    }

    .mobis8-paywall-price{
        color:#fff !important;
    }

    .mobis8-paywall-primary{
        background:#f4f5f7 !important;
        color:#15171b !important;

        box-shadow:none !important;
    }

    .mobis8-paywall-text-button{
        color:#b9bec7 !important;
    }

    .mobis8-paywall-text-button:hover{
        color:#fff !important;
    }

    .mobis8-paywall-card input{
        border-color:#40444d !important;

        background:#202329 !important;
        color:#f5f6f7 !important;
    }

    .mobis8-paywall-card input::placeholder{
        color:#858b95 !important;
    }

    .mobis8-paywall-card input:focus{
        border-color:#777e89 !important;

        background:#25282e !important;

        box-shadow:
            0 0 0 3px rgba(255,255,255,.06) !important;
    }

    .mobis8-paywall-secure{
        color:#8f959f !important;
    }
}

/*
 * Theme-controlled dark mode fallback.
 */
body.dark-mode .mobis8-paywall,
body.dark .mobis8-paywall,
html.dark .mobis8-paywall,
[data-theme="dark"] .mobis8-paywall{
    background:rgba(4,7,12,.70) !important;
}

body.dark-mode .mobis8-paywall-card,
body.dark .mobis8-paywall-card,
html.dark .mobis8-paywall-card,
[data-theme="dark"] .mobis8-paywall-card{
    border-color:rgba(255,255,255,.09) !important;
    background:rgba(24,26,31,.97) !important;
    color:#f4f5f7 !important;
}

/* ---------- Mobile ---------- */

@media(max-width:600px){

    .mobis8-paywall{
        padding:
            max(14px, env(safe-area-inset-top))
            14px
            max(14px, env(safe-area-inset-bottom))
            !important;

        align-items:center !important;
    }

    .mobis8-paywall-card{
        max-width:100% !important;

        padding:27px 20px 23px !important;

        border-radius:19px !important;
    }

    .mobis8-paywall-lock{
        width:52px !important;
        height:52px !important;

        margin-bottom:14px !important;

        border-radius:16px !important;

        font-size:23px !important;
    }

    .mobis8-paywall-card h2{
        font-size:24px !important;
    }

    .mobis8-paywall-card p{
        font-size:14px !important;
    }

    .mobis8-paywall-price{
        font-size:34px !important;
    }
}