/**
 * LAROME Popup Manager – Frontend CSS
 * popup.css
 *
 * Usa prefijos lr- para no colisionar con el tema de PrestaShop.
 * Modo "centro" → overlay oscuro a pantalla completa.
 * Modos esquina → popup flotante sin overlay intrusivo.
 */

/* ── Variables ─────────────────────────────────────────────────── */
:root {
    --lr-overlay-bg    : rgba(0, 0, 0, 0.52);
    --lr-popup-bg      : #ffffff;
    --lr-popup-radius  : 10px;
    --lr-popup-shadow  : 0 20px 60px rgba(0, 0, 0, 0.28);
    --lr-popup-padding : 32px 36px 28px;
    --lr-popup-maxw    : 640px;
    --lr-close-size    : 38px;
    --lr-close-color   : #666;
    --lr-close-hover   : #111;
    --lr-anim-duration : 0.32s;
    --lr-corner-margin : 24px;
    --lr-corner-width  : 360px;
    --lr-z             : 99990;
}

/* ── Overlay (modo center) ──────────────────────────────────────── */
.lr-popup-overlay {
    display         : none;  /* JS lo pone a flex */
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    z-index         : var(--lr-z);
    align-items     : center;
    justify-content : center;
    opacity         : 0;
    -webkit-transition: opacity var(--lr-anim-duration) ease;
            transition: opacity var(--lr-anim-duration) ease;
    will-change     : opacity;
}

/* Centro: con overlay oscuro */
.lr-popup-pos-center {
    background: var(--lr-overlay-bg);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
}

/* Esquinas: sin overlay, alineado al borde */
.lr-popup-pos-bottom-right { background: transparent; align-items: flex-end;   justify-content: flex-end;   }
.lr-popup-pos-bottom-left  { background: transparent; align-items: flex-end;   justify-content: flex-start; }
.lr-popup-pos-top-right    { background: transparent; align-items: flex-start; justify-content: flex-end;   }
.lr-popup-pos-top-left     { background: transparent; align-items: flex-start; justify-content: flex-start; }

/* Estado visible (JS añade la clase) */
.lr-popup-overlay.lr-popup-visible {
    opacity: 1;
}

/* Estado de cierre */
.lr-popup-overlay.lr-popup-closing {
    opacity: 0;
    pointer-events: none;
}

/* ── Caja del popup ─────────────────────────────────────────────── */
.lr-popup-box {
    position        : relative;
    background      : var(--lr-popup-bg);
    border-radius   : var(--lr-popup-radius);
    padding         : var(--lr-popup-padding);
    max-width       : var(--lr-popup-maxw);
    width           : 92%;
    box-shadow      : var(--lr-popup-shadow);
    outline         : none;
    -webkit-transform: translateY(18px) scale(0.97);
            transform: translateY(18px) scale(0.97);
    -webkit-transition:
        -webkit-transform var(--lr-anim-duration) cubic-bezier(0.22, 1, 0.36, 1),
                transform var(--lr-anim-duration) cubic-bezier(0.22, 1, 0.36, 1);
            transition:
        -webkit-transform var(--lr-anim-duration) cubic-bezier(0.22, 1, 0.36, 1),
                transform var(--lr-anim-duration) cubic-bezier(0.22, 1, 0.36, 1);
    box-sizing      : border-box;
    overflow        : hidden;
}

/* Popup visible → posición normal */
.lr-popup-visible .lr-popup-box {
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
}

/* Modos esquina: tamaño reducido + margen */
.lr-popup-pos-bottom-right .lr-popup-box,
.lr-popup-pos-bottom-left  .lr-popup-box,
.lr-popup-pos-top-right    .lr-popup-box,
.lr-popup-pos-top-left     .lr-popup-box {
    max-width    : var(--lr-corner-width);
    width        : calc(100% - var(--lr-corner-margin) * 2);
    margin       : var(--lr-corner-margin);
    border-radius: 10px;
}

/* Animación desde abajo para esquinas inferiores */
.lr-popup-pos-bottom-right .lr-popup-box,
.lr-popup-pos-bottom-left  .lr-popup-box {
    -webkit-transform: translateY(24px) scale(0.97);
            transform: translateY(24px) scale(0.97);
}

/* Animación desde arriba para esquinas superiores */
.lr-popup-pos-top-right .lr-popup-box,
.lr-popup-pos-top-left  .lr-popup-box {
    -webkit-transform: translateY(-24px) scale(0.97);
            transform: translateY(-24px) scale(0.97);
}

/* ── Botón de cierre ────────────────────────────────────────────── */
.lr-popup-close {
    position         : absolute;
    top              : 10px;
    right            : 12px;
    width            : var(--lr-close-size);
    height           : var(--lr-close-size);
    background       : none;
    border           : none;
    border-radius    : 50%;
    font-size        : 18px;
    line-height      : var(--lr-close-size);
    text-align       : center;
    cursor           : pointer;
    color            : var(--lr-close-color);
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    -webkit-transition: color 0.2s, background 0.2s;
            transition: color 0.2s, background 0.2s;
    padding          : 0;
    z-index          : 2;
}

.lr-popup-close:hover,
.lr-popup-close:focus {
    color      : var(--lr-close-hover);
    background : rgba(0, 0, 0, 0.06);
    outline    : none;
}

/* ── Contenido interno ──────────────────────────────────────────── */
.lr-popup-content {
    margin-top  : 4px;
    line-height : 1.6;
    font-size   : 15px;
    color       : #333;
    word-wrap   : break-word;
    overflow-wrap: break-word;
}

/* Reset básico para no heredar estilos del tema */
.lr-popup-content img {
    max-width  : 100%;
    height     : auto;
    display    : block;
    margin     : 0 auto 12px;
}

.lr-popup-content a {
    color           : inherit;
    text-decoration : underline;
}

.lr-popup-content button,
.lr-popup-content .btn {
    cursor: pointer;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .lr-popup-box {
        width   : 95%;
        padding : 22px 18px 18px;
    }

    .lr-popup-pos-bottom-right .lr-popup-box,
    .lr-popup-pos-bottom-left  .lr-popup-box,
    .lr-popup-pos-top-right    .lr-popup-box,
    .lr-popup-pos-top-left     .lr-popup-box {
        width  : calc(100% - 16px);
        margin : 8px;
    }
}

/* ── Accesibilidad: reducir movimiento ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lr-popup-overlay,
    .lr-popup-box {
        -webkit-transition: none;
                transition: none;
    }
}