/**
 * LuxDesign Popup Maker — frontend
 * Dependency-free. Root is fixed & full-viewport but pointer-transparent;
 * only the overlay (when present) and the box catch clicks.
 */

.luxpop-lock { overflow: hidden; }

.luxpop-root {
    --luxpop-bg: #ffffff;
    --luxpop-text: #1a1a1a;
    --luxpop-gold: #b8860b;
    --luxpop-overlay: rgba(0, 0, 0, .6);
    --luxpop-radius: 14px;
    --luxpop-width: 560px;
    --luxpop-gap: 24px;

    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--luxpop-gap);
    pointer-events: none;
}
.luxpop-root[hidden] { display: none; }

/* Overlay */
.luxpop-overlay {
    position: absolute;
    inset: 0;
    background: var(--luxpop-overlay);
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: auto;
    cursor: pointer;
}
.luxpop-root.is-open .luxpop-overlay { opacity: 1; }

/* Box */
.luxpop-box {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--luxpop-width);
    max-height: calc(100vh - var(--luxpop-gap) * 2);
    overflow: auto;
    background: var(--luxpop-bg);
    color: var(--luxpop-text);
    border-radius: var(--luxpop-radius);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
    pointer-events: auto;
    outline: none;
    -webkit-overflow-scrolling: touch;
}

/* Content */
.luxpop-content {
    padding: 40px;
    font-size: 15px;
    line-height: 1.7;
}
.luxpop-content > :first-child { margin-top: 0; }
.luxpop-content > :last-child { margin-bottom: 0; }
.luxpop-content img { max-width: 100%; height: auto; border-radius: 6px; }
.luxpop-content a:not(.button):not(.btn) { color: var(--luxpop-gold); }
.luxpop-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 16px;
}

/* Close button */
.luxpop-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 3;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
    color: currentColor;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    opacity: .55;
    transition: opacity .2s ease, background .2s ease;
}
.luxpop-close:hover { opacity: 1; background: rgba(128, 128, 128, .14); }

/* ---- Sizes ---- */
.luxpop--small  { --luxpop-width: 420px; }
.luxpop--medium { --luxpop-width: 560px; }
.luxpop--large  { --luxpop-width: 760px; }
.luxpop--full   { --luxpop-width: none; }
.luxpop--full { padding: 0; }
.luxpop--full .luxpop-box {
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.luxpop--full .luxpop-content { max-width: 760px; }

/* ---- Positions (flex align/justify on the root) ---- */
.luxpop--pos-center       { align-items: center;     justify-content: center; }
.luxpop--pos-top          { align-items: flex-start;  justify-content: center; }
.luxpop--pos-bottom       { align-items: flex-end;    justify-content: center; }
.luxpop--pos-top-left     { align-items: flex-start;  justify-content: flex-start; }
.luxpop--pos-top-right    { align-items: flex-start;  justify-content: flex-end; }
.luxpop--pos-bottom-left  { align-items: flex-end;    justify-content: flex-start; }
.luxpop--pos-bottom-right { align-items: flex-end;    justify-content: flex-end; }
.luxpop--pos-left         { align-items: stretch;     justify-content: flex-start; }
.luxpop--pos-right        { align-items: stretch;     justify-content: flex-end; }

/* Side panels: full height */
.luxpop--pos-left .luxpop-box,
.luxpop--pos-right .luxpop-box {
    height: 100%;
    max-height: 100%;
    border-radius: 0;
}
.luxpop--pos-left,
.luxpop--pos-right { padding: 0; }

/* ---- Themes ---- */
.luxpop--theme-light { --luxpop-bg: #ffffff; --luxpop-text: #1a1a1a; }
.luxpop--theme-dark  { --luxpop-bg: #17181c; --luxpop-text: #f2f2f2; }
.luxpop--theme-dark .luxpop-close:hover { background: rgba(255, 255, 255, .12); }
.luxpop--theme-gold {
    --luxpop-bg: #b8860b;
    --luxpop-text: #fffaf0;
}
.luxpop--theme-gold .luxpop-content a:not(.button):not(.btn),
.luxpop--theme-dark .luxpop-content a:not(.button):not(.btn) { color: inherit; text-decoration: underline; }

/* ---- Animation states (box) ---- */
.luxpop-box {
    opacity: 0;
    transition: opacity .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.luxpop-root.is-open .luxpop-box { opacity: 1; transform: none; }

.luxpop--anim-none .luxpop-box { transition: none; }
.luxpop--anim-none .luxpop-box,
.luxpop--anim-none.is-open .luxpop-box { opacity: 1; }

.luxpop--anim-zoom .luxpop-box       { transform: scale(.92); }
.luxpop--anim-slide-up .luxpop-box   { transform: translateY(28px); }
.luxpop--anim-slide-down .luxpop-box { transform: translateY(-28px); }

/* Corner/side popups slide in from their edge regardless of chosen animation feel */
.luxpop--pos-left .luxpop-box  { transform: translateX(-100%); }
.luxpop--pos-right .luxpop-box { transform: translateX(100%); }
.luxpop--pos-left.is-open .luxpop-box,
.luxpop--pos-right.is-open .luxpop-box { transform: none; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .luxpop-box,
    .luxpop-overlay { transition: opacity .1s linear; }
    .luxpop-box { transform: none !important; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
    .luxpop-root { padding: 12px; }
    .luxpop-content { padding: 28px 22px; }
    .luxpop-title { font-size: 23px; }

    /* Corner + side popups collapse to a bottom sheet on small screens */
    .luxpop--pos-top-left,
    .luxpop--pos-top-right,
    .luxpop--pos-bottom-left,
    .luxpop--pos-bottom-right,
    .luxpop--pos-left,
    .luxpop--pos-right {
        align-items: flex-end;
        justify-content: center;
        padding: 0;
    }
    .luxpop--pos-top-left .luxpop-box,
    .luxpop--pos-top-right .luxpop-box,
    .luxpop--pos-bottom-left .luxpop-box,
    .luxpop--pos-bottom-right .luxpop-box,
    .luxpop--pos-left .luxpop-box,
    .luxpop--pos-right .luxpop-box {
        width: 100%;
        max-width: none;
        height: auto;
        max-height: 88vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    .luxpop--pos-left.is-open .luxpop-box,
    .luxpop--pos-right.is-open .luxpop-box,
    .luxpop--pos-top-left.is-open .luxpop-box,
    .luxpop--pos-top-right.is-open .luxpop-box,
    .luxpop--pos-bottom-left.is-open .luxpop-box,
    .luxpop--pos-bottom-right.is-open .luxpop-box { transform: none; }
}