/* Front-end slider styles - responsive, retains 1074x375 aspect ratio */
.prf-slider-wrap { position:relative; width:100%; max-width:1074px; }
.prf-slider-viewport {
    position:relative;
    width:100%;
    aspect-ratio: 1074 / 375;
    overflow:hidden;
    background: #ffffff00;
    border-radius: 5px;
    box-shadow: 0px 1px 19px 1px rgba(0,0,0,0.36);
    -webkit-box-shadow: 0px 1px 19px 1px rgba(0,0,0,0.36);
    -moz-box-shadow: 0px 1px 19px 1px rgba(0,0,0,0.36);

}

/* Slide mode (default): horizontal sliding */
.prf-slider-track { display:flex; transition: transform 500ms ease; height:100%; }
.prf-slide { min-width:100%; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.prf-slide img { width:100%; height:100%; object-fit:cover; display:block; }

/* Fade mode: stack slides, use opacity transitions */
.prf-transition-fade .prf-slider-track { display:block; height:100%; position:relative; }
.prf-transition-fade .prf-slide { position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; transition: opacity 600ms ease; }
.prf-transition-fade .prf-slide.is-active { opacity:1; z-index:2; }

/* top-right description box */
.prf-top-right-desc {
    position:absolute;
    bottom:12px;
    right:12px;
    max-width:50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding:8px 10px;
    font-size:14px;
    line-height:1.2;
    border-radius:6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}


/* arrows */
.prf-nav {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:20;
    background:#005697b8;
    border:none;
    color:#fff;
    font-size:18px;
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.prf-prev { left:8px; }
.prf-next { right:8px; }

/* bullets */
.prf-bullets { text-align:center; margin-top:12px; }
.prf-bullets button {
    width:14px;
    height:14px;
    border-radius:50%;
    border:none;
    background: #0199e3;
    margin:0 6px;
    display:inline-block;
    cursor:pointer;
    padding:0;
    line-height:14px;
    vertical-align:middle;
    transition: transform 0.2s ease, background 0.2s ease;
}
.prf-bullets button:hover {
    background:#003def;
    transform: scale(1.3);
}
.prf-bullets button.active {
    background:#056695;
    transform: scale(1.4);
}

.prf-bullets button:focus {
    padding: unset;
}

/* Responsive tweaks */
@media (max-width:480px) {
    .prf-top-right-desc {
        font-size:12px; padding:6px 8px; max-width:70%;
     }

    .prf-nav {
        display: none !important;
    }
}