:root{
    --psolvp-size-small:100px;
    --psolvp-size-medium:150px;
    --psolvp-size-large:200px;
}

/* Container positioning */
.psolvp-container{
    position: fixed;
    z-index: 10000;
    opacity: var(--psolvp-opacity, 0.9);
    transition: opacity .3s ease, transform .3s ease;
}
.psolvp-container.psolvp-hidden{ opacity: 0; transform: scale(.95); pointer-events:none; }

/* Positions */
.psolvp-container.position-bottom-right{ right: 16px; bottom: 16px; }
.psolvp-container.position-bottom-left{ left: 16px; bottom: 16px; }
.psolvp-container.position-top-right{ right: 16px; top: 16px; }
.psolvp-container.position-top-left{ left: 16px; top: 16px; }

/* Sizes */
.psolvp-container.size-small .psolvp-bubble{ width: var(--psolvp-size-small); height: var(--psolvp-size-small); }
.psolvp-container.size-medium .psolvp-bubble{ width: var(--psolvp-size-medium); height: var(--psolvp-size-medium); }
.psolvp-container.size-large .psolvp-bubble{ width: var(--psolvp-size-large); height: var(--psolvp-size-large); }
.psolvp-container.size-custom .psolvp-bubble{ width: var(--psolvp-custom-width, var(--psolvp-size-medium)); height: var(--psolvp-custom-height, var(--psolvp-size-medium)); }

/* Bubble */
.psolvp-bubble{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,.9);
    background: var(--psolvp-color, #007cba);
    box-shadow: 0 8px 16px rgba(0,0,0,.2);
    cursor: pointer;
    position: relative;
}
.psolvp-bubble img{ width: 100%; height: 100%; object-fit: cover; display:block; }
.psolvp-bubble video{ width: 100%; height: 100%; object-fit: cover; display:block; }
.psolvp-bubble-close {
    position: absolute;
    right: -14px;
    top: 0px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: 0;
    background: #fff;
    color: #333;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    display: flex
;
    justify-content: center;
    align-items: center;
}
.psolvp-play-icon{ color:#fff; font-size:28px; line-height:1; }

/* Animation variants */
.psolvp-container.anim-fade{ transition: opacity .4s ease; }
.psolvp-container.anim-slide{ transform: translateY(10px); }
.psolvp-container.anim-slide:not(.psolvp-hidden){ transform: translateY(0); }
.psolvp-container.anim-bounce{ animation: psolvp-bounce 2s infinite; }
@keyframes psolvp-bounce{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-4px);} }

/* Modal */
.psolvp-modal[hidden]{ display:none !important; }
.psolvp-modal{ position:fixed; inset:0; z-index:10001; }
.psolvp-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.psolvp-modal-dialog{ position:relative; max-width: 90vw; width: 960px; margin: 5vh auto; background:#000; border-radius:8px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.4); }
.psolvp-video-wrap{ position:relative; padding-top:56.25%; background:#000; }
.psolvp-video-wrap video{ position:absolute; inset:0; width:100%; height:100%; }
.psolvp-close{ position:absolute; right:10px; top:10px; background:#fff; border:0; border-radius:50%; width:32px; height:32px; cursor:pointer; font-size:18px; line-height:32px; text-align:center; }

/* Body lock when modal open */
body.psolvp-modal-open{ overflow:hidden; }