/* ============================================================
   Content Paywall Pro – Frontend CSS v3.2
   ============================================================ */

/* ── Wrapper words preview ────────────────────────────────── */
.cpp-words-preview {
    position: relative;
    overflow: hidden;
}

/* ── Wrapper scroll ───────────────────────────────────────── */
.cpp-scroll-wrap {
    position: relative;
}

/* ── Overlay cliccabile sul contenuto sfocato ─────────────── */
.cpp-content-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    cursor: pointer;
}

/* ── Popup ────────────────────────────────────────────────── */
#cpp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99998;
    cursor: pointer;
}
#cpp-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
#cpp-popup.cpp-open   { display: flex !important; }
#cpp-overlay.cpp-open { display: block !important; }

/* ── Animazione popup ─────────────────────────────────────── */
.cpp-popup-box {
    animation: cpp-in .22s cubic-bezier(.34, 1.4, .64, 1) both;
}
@keyframes cpp-in {
    from { opacity: 0; transform: scale(.88) translateY(18px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ── Bottoni ──────────────────────────────────────────────── */
.cpp-btn {
    transition: transform .12s, box-shadow .12s, opacity .12s;
}
.cpp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.2);
    opacity: .93;
    text-decoration: none !important;
}
.cpp-btn:active  { transform: none; box-shadow: none; }
.cpp-close-btn:hover { opacity: 1 !important; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 480px) {
    .cpp-popup-btns { flex-direction: column; }
    .cpp-btn        { width: 100%; text-align: center; }
}