/* Mony Style Video Slider — slider.css (frontend) */

.ms-slider {
    background:    var(--ms-bg, #FAF7F7);
    padding:       52px 0 40px;
    overflow:      hidden;
    user-select:   none;
    -webkit-user-select: none;
    touch-action:  pan-y;
    position:      relative;
}
.ms-viewport {
    width:    100%;
    overflow: hidden;
    cursor:   grab;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.ms-viewport.is-dragging { cursor: grabbing; }

.ms-track {
    display:     flex;
    align-items: center;
    gap:         var(--ms-gap, 18px);
    will-change: transform;
    padding:     32px 0;
}
.ms-track.animated {
    transition: transform .55s cubic-bezier(.25,.46,.45,.94);
}
.ms-slide {
    flex:          0 0 auto;
    width:         var(--ms-w, 210px);
    height:        var(--ms-h, 374px);
    border-radius: 20px;
    overflow:      hidden;
    position:      relative;
    transition:    transform .55s cubic-bezier(.25,.46,.45,.94),
                   opacity    .55s ease,
                   filter     .55s ease,
                   box-shadow .55s ease;
    will-change:   transform, opacity, filter;
    
    /* Всички не-централни видеа - еднакъв размер */
    transform:  scale(0.78);
    opacity:    0.65;
    filter:     brightness(0.75) saturate(0.85);
}

.ms-slide.active {
    transform:  scale(1);
    opacity:    1;
    filter:     brightness(1) saturate(1);
    box-shadow: 0 20px 60px rgba(243,166,175,.35), 
                0 8px 25px rgba(0,0,0,.12);
    z-index:    5;
}

/* Adj (съседните) - също еднакви с останалите */
.ms-slide.adj {
    transform:  scale(0.78);
    opacity:    0.65;
    filter:     brightness(0.75) saturate(0.85);
}
.ms-slide video {
    width:          100%;
    height:         100%;
    object-fit:     cover;
    display:        block;
    pointer-events: none;
    border-radius:  20px;
}
.ms-dots {
    display:         flex;
    justify-content: center;
    gap:             8px;
    margin-top:      28px;
}
.ms-dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--ms-dot-inactive, #E8D7D9);
    transition:    background .3s, width .3s;
    cursor:        pointer;
}
.ms-dot.active {
    width:         24px;
    border-radius: 3px;
    background:    var(--ms-dot-active, #F3A6AF);
}
/* Hint — подобрена видимост и позиция */
.ms-hint {
    position: absolute;
    bottom: 24px;           /* преместваме го по-ниско, под видеата */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    z-index: 20;            /* по-отгоре */
    background: rgba(250, 247, 247, 0.92);
    padding: 10px 18px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid rgba(243,166,175,0.3);
    opacity: 1;
    transition: opacity 0.6s ease;
    white-space: nowrap;
}

.ms-hint.hidden { 
    opacity: 0; 
}

.ms-hint-icon {
    width: 34px;
    height: 34px;
    background: rgba(243,166,175,0.15);
    border: 1px solid rgba(243,166,175,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: ms-nudge 1.8s ease-in-out infinite;
}

.ms-hint-text {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #E03A4F;
    letter-spacing: 0.5px;
}
@keyframes ms-nudge {
    0%,100% { transform: translateX(0); }
    30%      { transform: translateX(-6px); }
    60%      { transform: translateX(6px); }
}

/* Автоматично скриване при влачене */
.ms-slider.is-dragging .ms-hint,
.ms-slider .ms-hint.hidden {
    opacity: 0;
}