/* ============ Contenitore: copre lo schermo e posiziona il box con flexbox ============ */
.psb-wrap {
    position: fixed;
    inset: 0;
    z-index: 99990; /* sotto i banner dei cookie più comuni (99999) */
    display: flex;
    align-items: var(--psb-ai, flex-end);
    justify-content: var(--psb-jc, center);
    padding: var(--psb-offset, 20px);
    box-sizing: border-box;
    pointer-events: none;
}

.psb-wrap[hidden] {
    display: none !important;
}

.psb-overlay {
    position: absolute;
    inset: 0;
    background: var(--psb-overlay, rgba(0, 0, 0, .5));
    opacity: 0;
    transition: opacity var(--psb-dur, 400ms) ease;
    pointer-events: auto;
}

.psb-open .psb-overlay {
    opacity: 1;
}

/* ============ Box ============ */
.psb-box {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: min(var(--psb-width, 420px), 100%);
    max-height: calc(100vh - 2 * var(--psb-offset, 20px));
    padding: var(--psb-pad, 28px);
    background: var(--psb-bg, #fff);
    color: var(--psb-text, #222);
    border: var(--psb-border-w, 0) solid var(--psb-border-c, transparent);
    border-radius: var(--psb-radius, 16px);
    text-align: center;
    pointer-events: auto;
    transition: opacity var(--psb-dur, 400ms) ease, transform var(--psb-dur, 400ms) cubic-bezier(.2, .8, .2, 1);
}

.psb-box.psb-shadow {
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}

/* ============ Contenuto codice sconto ============ */
.psb-box .psb-title {
    margin: 0 0 8px;
    font-size: var(--psb-title-size, 24px);
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

.psb-box .psb-sub {
    margin: 0 0 12px;
    font-size: var(--psb-sub-size, 14px);
    opacity: .85;
    color: inherit;
}

.psb-box .psb-code {
    display: inline-block;
    padding: 10px 22px;
    background: var(--psb-code-bg, #222);
    color: var(--psb-code-color, #fff) !important;
    border: var(--psb-code-border-w, 0) solid var(--psb-code-border-c, transparent);
    border-radius: calc(var(--psb-radius, 16px) / 2);
    font-size: var(--psb-code-size, 21px);
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    text-decoration: none !important;
    cursor: pointer;
    transition: opacity .2s ease;
}

.psb-box .psb-code:hover {
    opacity: .9;
}

/* ============ Contenuto libero ============ */
.psb-box .psb-content {
    min-height: 0;
    overflow: auto;
    text-align: left;
}

/* Dimensione del font impostata nel pannello (solo se > 0) */
.psb-box.psb-has-fs .psb-content,
.psb-box.psb-has-fs .psb-content p,
.psb-box.psb-has-fs .psb-content li {
    font-size: var(--psb-font-size, inherit);
}

.psb-box .psb-content > :first-child {
    margin-top: 0;
}

.psb-box .psb-content > :last-child {
    margin-bottom: 0;
}

.psb-box .psb-content img {
    max-width: 100%;
    height: auto;
}

/* ============ Pulsante (CTA) del contenuto libero ============ */
.psb-box .psb-btn-wrap {
    flex-shrink: 0;
    margin-top: 18px;
    text-align: center;
}

.psb-box .psb-btn-align-left {
    text-align: left;
}

.psb-box .psb-btn-align-right {
    text-align: right;
}

.psb-box a.psb-btn {
    display: inline-block;
    box-sizing: border-box;
    padding: var(--psb-btn-py, 12px) var(--psb-btn-px, 24px);
    background: var(--psb-btn-bg, #222);
    color: var(--psb-btn-color, #fff) !important;
    border: var(--psb-btn-bw, 0) solid var(--psb-btn-bc, transparent);
    border-radius: var(--psb-btn-radius, 6px);
    font-size: var(--psb-btn-size, 16px);
    font-weight: var(--psb-btn-weight, 600);
    line-height: 1.3;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.psb-box a.psb-btn:hover,
.psb-box a.psb-btn:focus-visible {
    background: var(--psb-btn-bg-h, #000);
    color: var(--psb-btn-color-h, #fff) !important;
    border-color: var(--psb-btn-bc-h, transparent);
}

.psb-box a.psb-btn.psb-btn-upper {
    text-transform: uppercase;
    letter-spacing: .05em;
}

.psb-box .psb-btn-align-full a.psb-btn {
    display: block;
    width: 100%;
}

/* ============ Pulsante di chiusura (regole forti: il tema stilizza i button) ============ */
.psb-box button.psb-close {
    position: absolute;
    z-index: 2;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--psb-close-size, 30px) !important;
    height: var(--psb-close-size, 30px) !important;
    min-width: var(--psb-close-size, 30px) !important;
    min-height: var(--psb-close-size, 30px) !important;
    max-width: var(--psb-close-size, 30px) !important;
    max-height: var(--psb-close-size, 30px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: var(--psb-close-bw, 0) solid var(--psb-close-bc, transparent) !important;
    border-radius: var(--psb-close-radius, 50%) !important;
    background: var(--psb-close-bg, #222) !important;
    color: var(--psb-close-color, #fff) !important;
    font-size: var(--psb-close-icon, 20px) !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    cursor: pointer;
}

.psb-box.psb-close-flat button.psb-close {
    box-shadow: none;
}

.psb-box button.psb-close:hover,
.psb-box button.psb-close:focus-visible {
    background: var(--psb-close-bg-h, var(--psb-close-bg, #222)) !important;
    color: var(--psb-close-color-h, var(--psb-close-color, #fff)) !important;
    opacity: .85;
}

.psb-close-outside .psb-box button.psb-close {
    top: calc(-12px + var(--psb-close-dy, 0px));
    right: calc(-12px + var(--psb-close-dx, 0px));
}

.psb-close-inside .psb-box button.psb-close {
    top: calc(8px + var(--psb-close-dy, 0px));
    right: calc(8px + var(--psb-close-dx, 0px));
}

.psb-close-outside-left .psb-box button.psb-close {
    top: calc(-12px + var(--psb-close-dy, 0px));
    left: calc(-12px + var(--psb-close-dx, 0px));
}

.psb-close-inside-left .psb-box button.psb-close {
    top: calc(8px + var(--psb-close-dy, 0px));
    left: calc(8px + var(--psb-close-dx, 0px));
}

/* ============ Posizioni ============ */
.psb-pos-tl { --psb-ai: flex-start; --psb-jc: flex-start; }
.psb-pos-tc { --psb-ai: flex-start; --psb-jc: center; }
.psb-pos-tr { --psb-ai: flex-start; --psb-jc: flex-end; }
.psb-pos-ml { --psb-ai: center; --psb-jc: flex-start; }
.psb-pos-mc { --psb-ai: center; --psb-jc: center; }
.psb-pos-mr { --psb-ai: center; --psb-jc: flex-end; }
.psb-pos-bl { --psb-ai: flex-end; --psb-jc: flex-start; }
.psb-pos-bc { --psb-ai: flex-end; --psb-jc: center; }
.psb-pos-br { --psb-ai: flex-end; --psb-jc: flex-end; }
.psb-pos-bar-top { --psb-ai: flex-start; --psb-jc: center; }
.psb-pos-bar-bottom { --psb-ai: flex-end; --psb-jc: center; }

/* Desktop: vale la posizione principale */
@media (min-width: 768px) {
    .psb-wrap.psb-pos-bar-top,
    .psb-wrap.psb-pos-bar-bottom {
        padding: 0;
    }

    .psb-wrap.psb-pos-bar-top .psb-box,
    .psb-wrap.psb-pos-bar-bottom .psb-box {
        width: 100%;
        max-height: none;
        border-radius: 0;
        padding-right: calc(var(--psb-pad, 28px) + 40px);
        padding-left: calc(var(--psb-pad, 28px) + 40px);
    }

    .psb-wrap.psb-pos-bar-top .psb-box button.psb-close,
    .psb-wrap.psb-pos-bar-bottom .psb-box button.psb-close {
        top: 50%;
        right: 12px;
        left: auto;
        transform: translateY(-50%);
    }

    .psb-wrap.psb-pos-bar-top .psb-coupon,
    .psb-wrap.psb-pos-bar-bottom .psb-coupon {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 6px 14px;
    }

    .psb-wrap.psb-pos-bar-top .psb-coupon p,
    .psb-wrap.psb-pos-bar-bottom .psb-coupon p {
        margin: 0;
    }
}

/* Mobile: vale la posizione mobile (uguale alla desktop se non impostata) */
@media (max-width: 767px) {
    .psb-wrap.psb-mpos-tl { --psb-ai: flex-start; --psb-jc: flex-start; }
    .psb-wrap.psb-mpos-tc { --psb-ai: flex-start; --psb-jc: center; }
    .psb-wrap.psb-mpos-tr { --psb-ai: flex-start; --psb-jc: flex-end; }
    .psb-wrap.psb-mpos-ml { --psb-ai: center; --psb-jc: flex-start; }
    .psb-wrap.psb-mpos-mc { --psb-ai: center; --psb-jc: center; }
    .psb-wrap.psb-mpos-mr { --psb-ai: center; --psb-jc: flex-end; }
    .psb-wrap.psb-mpos-bl { --psb-ai: flex-end; --psb-jc: flex-start; }
    .psb-wrap.psb-mpos-bc { --psb-ai: flex-end; --psb-jc: center; }
    .psb-wrap.psb-mpos-br { --psb-ai: flex-end; --psb-jc: flex-end; }
    .psb-wrap.psb-mpos-bar-top { --psb-ai: flex-start; --psb-jc: center; }
    .psb-wrap.psb-mpos-bar-bottom { --psb-ai: flex-end; --psb-jc: center; }

    .psb-wrap {
        padding: min(var(--psb-offset, 20px), 14px);
    }

    .psb-close-outside .psb-box button.psb-close {
        top: calc(-10px + var(--psb-close-dy, 0px));
        right: calc(-6px + var(--psb-close-dx, 0px));
    }

    .psb-close-outside-left .psb-box button.psb-close {
        top: calc(-10px + var(--psb-close-dy, 0px));
        left: calc(-6px + var(--psb-close-dx, 0px));
    }

    .psb-wrap.psb-mpos-bar-top,
    .psb-wrap.psb-mpos-bar-bottom {
        padding: 0;
    }

    .psb-wrap.psb-mpos-bar-top .psb-box,
    .psb-wrap.psb-mpos-bar-bottom .psb-box {
        width: 100%;
        border-radius: 0;
        padding-right: calc(var(--psb-pad, 28px) + 30px);
    }

    .psb-wrap.psb-mpos-bar-top .psb-box button.psb-close,
    .psb-wrap.psb-mpos-bar-bottom .psb-box button.psb-close {
        top: 8px;
        right: 8px;
        left: auto;
    }
}

/* ============ Animazioni di ingresso ============ */
.psb-anim-fade .psb-box        { opacity: 0; }
.psb-anim-slide-up .psb-box    { opacity: 0; transform: translateY(40px); }
.psb-anim-slide-down .psb-box  { opacity: 0; transform: translateY(-40px); }
.psb-anim-slide-left .psb-box  { opacity: 0; transform: translateX(-60px); }
.psb-anim-slide-right .psb-box { opacity: 0; transform: translateX(60px); }
.psb-anim-zoom .psb-box        { opacity: 0; transform: scale(.85); }
.psb-anim-bounce .psb-box      { opacity: 0; }
.psb-anim-none .psb-box,
.psb-anim-none .psb-overlay    { transition: none; }

.psb-open .psb-box {
    opacity: 1;
    transform: none;
}

.psb-anim-bounce.psb-open .psb-box {
    animation: psb-bounce var(--psb-dur, 400ms) cubic-bezier(.2, .8, .2, 1);
}

@keyframes psb-bounce {
    0%   { opacity: 0; transform: scale(.6); }
    55%  { opacity: 1; transform: scale(1.06); }
    75%  { transform: scale(.97); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .psb-box,
    .psb-overlay {
        transition: opacity .15s linear !important;
        animation: none !important;
        transform: none !important;
    }
}