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

/* Container positioning */
.psolvp-container{
    position: fixed;
    z-index: 99;
    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 - Full screen centered video player */
.psolvp-modal[hidden]{ display:none !important; }
.psolvp-modal{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.psolvp-modal-backdrop{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.85);
}
.psolvp-modal-dialog{
    position: relative;
    width: auto;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    -webkit-box-shadow: 0 10px 40px rgba(0,0,0,.6);
    box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.psolvp-video-wrap{
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
}
.psolvp-video-wrap video{
    display: block;
    width: 100%;
    height: auto;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
}
.psolvp-close{
    position: absolute;
    right: 15px;
    top: 15px;
    background: rgba(255,255,255,.95);
    border: 0;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 20px;
    line-height: 36px;
    text-align: center;
    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.3);
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    z-index: 99;
    -webkit-transition: background .2s ease, -webkit-transform .2s ease;
    transition: background .2s ease, -webkit-transform .2s ease;
    -o-transition: background .2s ease, transform .2s ease;
    transition: background .2s ease, transform .2s ease;
    transition: background .2s ease, transform .2s ease, -webkit-transform .2s ease;
}
.psolvp-close:hover{
    background: #fff;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

/* Responsive adjustments for mobile */
@media screen and (max-width: 768px) {
    .psolvp-modal{ padding: 10px; }
    .psolvp-modal-dialog{ max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); border-radius: 4px; }
    .psolvp-video-wrap video{ max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
    .psolvp-close{ right: 10px; top: 10px; width: 32px; height: 32px; font-size: 18px; line-height: 32px; }
}

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