/* Smart Popup Slider styles (BEM-like classes) */
.sps-popup {position:fixed; z-index:99999; left:0; top:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center;}
.sps-popup__overlay{position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:1}
.sps-popup__dialog{position:relative; background:#e6f3fb; box-shadow:0 10px 30px rgba(0,0,0,0.3); border-radius:6px; overflow:hidden; display:flex; align-items:stretch; z-index:2}
.sps-popup--center{align-items:center; justify-content:center}
.sps-popup--top-left{align-items:flex-start; justify-content:flex-start; padding:20px}
.sps-popup--top-right{align-items:flex-start; justify-content:flex-end; padding:20px}
.sps-popup--bottom-left{align-items:flex-end; justify-content:flex-start; padding:20px}
.sps-popup--bottom-right{align-items:flex-end; justify-content:flex-end; padding:20px}

.sps-popup__close{position:absolute; top:8px; right:8px; background:transparent; border:0; font-size:22px; line-height:1; cursor:pointer; z-index:3}

.sps-slider{position:relative; width:100%; height:100%; display:flex; align-items:stretch;}
.sps-slider__track{display:flex; transition:transform 400ms ease; width:100%; height:100%;}
.sps-slide{display:flex; min-width:100%; height:100%; align-items:stretch}
.sps-slide__media{width:45%; height:100%;}
.sps-slide__body{width:55%; padding:20px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center}
.sps-slide__title{margin-top:0}
.sps-slide__content{margin:12px 0}
.sps-slide__button{display:inline-block; padding:10px 16px; background:#0073aa; color:#fff; text-decoration:none; border-radius:4px}

.sps-arrow{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.4); color:#fff; border:0; width:40px; height:40px; border-radius:50%; cursor:pointer}
.sps-arrow--prev{left:8px}
.sps-arrow--next{right:8px}

.sps-nav{position:absolute; left:50%; transform:translateX(-50%); bottom:10px; display:flex; gap:6px}
.sps-dot{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.6); border:0}
.sps-dot.sps-dot--active{background:#fff}

/* responsive */
@media(max-width:600px){
    .sps-slide{flex-direction:column}
    .sps-slide__media{width:100%; height:40%}
    .sps-slide__body{width:100%; height:60%}
}


button.sps-arrow[aria-hidden="true"] {
    cursor: default;
    background-color: #d3d3d3;
}