/* =========================
   BASE MODAL
========================= */
.prp-offer-overlay{
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.6);
    display:none;
    z-index:99998;
}

.prp-offer-modal{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    
    background:#fff;
    width:420px;
    max-width:90%;
    height:auto;

    border-radius:14px;
    text-align:center;

    z-index:99999;
    display:none;

    overflow:visible;
    padding:0;

    box-shadow:0 20px 60px rgba(0,0,0,0.25);
}

/* cerrar modal */
.prp-close{
    position:absolute;
    top:-30px;
    right:-20px;

    width:38px;
    height:38px;

    background:#0073aa;
    color:#fff;

    border-radius:50%;

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

    font-size:20px;
    cursor:pointer;

    box-shadow:0 8px 20px rgba(0,0,0,0.25);
    z-index:100000;
}

.prp-close:hover{
    background:#005f8d;
}

/* =========================
   IMAGEN
========================= */
.prp-offer-image{
    width:100%;
    height:auto;
    display:block;
}

/* modal */
.prp-offer-modal .prp-offer-image{
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius:12px 12px 0 0;
}

/* slide */
.prp-offer-slide .prp-offer-image{
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius:14px 14px 0 0;
}

/* =========================
   SLIDE LIMPIO PRO
========================= */
.prp-offer-slide{
    position:fixed;
    bottom:20px;
    right:20px;
    width:290px;
    z-index:99999;

    background:#fff;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(0,0,0,0.18);

    transform:translateY(40px);
    opacity:0;

    transition:all .35s ease;
    will-change: transform, opacity;

    overflow:hidden;
}

/* ENTRADA */
.prp-offer-slide.show{
    transform:translateY(0);
    opacity:1;
}

/* SALIDA 🔥 */
.prp-offer-slide.hide{
    transform:translateY(40px);
    opacity:0;
}

/* botón cerrar slide */
.prp-close-slide{
    position:absolute;
    top:8px;
    right:8px;

    width:26px;
    height:26px;

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

    border-radius:50%;
    background:#eee;

    cursor:pointer;
    font-size:14px;
    color:#333;

    transition:all .2s ease;
}

.prp-close-slide:hover{
    background:#0073aa;
    color:#fff;
    transform:rotate(90deg);
}

/* =========================
   CONTENIDO
========================= */
.prp-offer-modal h2{
    font-size:22px;
    margin:15px 15px 5px;
}

.prp-offer-modal p{
    font-size:15px;
    color:#555;
    margin:0 15px 10px;
}

.prp-offer-modal .prp-offer-btn{
    margin-bottom:20px;
}

/* =========================
   CTA
========================= */
.prp-offer-btn{
    display:inline-block;
    margin-top:14px;

    background:#0073aa;
    color:#fff;

    padding:10px 18px;
    text-decoration:none;
    border-radius:8px;

    font-size:14px;
    font-weight:500;

    transition:all .2s ease;
}

.prp-offer-btn:hover{
    background:#005f8d;
    transform:translateY(-2px);
    color:#fff;
}

/* =========================
   FIX BOTÓN SLIDE
========================= */

/* centrado del contenido del slide */
.prp-offer-slide .prp-slide-body{
    text-align:center;
    padding:15px;
}

/* botón centrado y tamaño controlado */
.prp-offer-slide .prp-offer-btn{
    display:block;
    width:fit-content;
    margin:15px auto 10px;

    padding:10px 16px;
    font-size:14px;

    max-width:100%;
}


/* =========================
   TEMPLATES
========================= */
.template_1 .prp-offer-slide{ background:#fff; color:#111; }
.template_2 .prp-offer-slide{ background:#111; color:#fff; }
.template_2 .prp-offer-btn{ background:#ff3b3b; }
.template_3 .prp-offer-slide{ background:rgba(255,255,255,0.15); backdrop-filter: blur(10px); color:#fff; }
.template_4 .prp-offer-slide{ background:linear-gradient(135deg,#ff512f,#dd2476); color:#fff; }
.template_4 .prp-offer-btn{ background:#fff; color:#000; }

/* =========================
   DESKTOP
========================= */
@media (min-width: 1024px){
    .prp-offer-modal{
        width:520px;
    }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px){

    .prp-offer-modal{
        width:90%;
    }

    .prp-offer-image{
        aspect-ratio: 2 / 1;
        object-fit: cover;
    }

}


/* =========================
   POSICIONES SLIDE DESKTOP
========================= */

@media (min-width: 1024px){

    /* DEFAULT (bottom) */
    .prp-offer-slide.position-bottom{
        bottom:50px;
        top:auto;
        transform:translateY(40px);
    }

    /* CENTRO */
    .prp-offer-slide.position-middle{
        top:50%;
        bottom:auto;
        transform:translateY(50px) translateY(-50%);
    }

    .prp-offer-slide.position-middle.show{
        transform:translateY(-50%);
    }

    .prp-offer-slide.position-middle.hide{
        transform:translateY(50px) translateY(-50%);
    }

    /* ARRIBA */
    .prp-offer-slide.position-top{
        top:20px;
        bottom:auto;
        transform:translateY(-40px);
    }

    .prp-offer-slide.position-top.show{
        transform:translateY(0);
    }

    .prp-offer-slide.position-top.hide{
        transform:translateY(-40px);
    }

}