@charset 'UTF-8';

.slick-loading .slick-list{background:#fff none;}

@font-face{font-family:'slick';font-weight:normal;font-style:normal;src:url('./fonts/slick.eot');src:url('./fonts/slick.eot?#iefix') format('embedded-opentype'),url('./fonts/slick.woff') format('woff'),url('./fonts/slick.ttf') format('truetype'),url('./fonts/slick.svg#slick') format('svg');}

.slick-prev,.slick-next{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:20px;height:20px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:none;background:transparent;}
.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus{color:transparent;outline:none;}
.slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before{opacity:1;}
.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{opacity:.25;}
.slick-prev:before,.slick-next:before{font-family:'slick';font-size:20px;line-height:1;opacity:.75;color:white;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.slick-prev{left:-25px;}
[dir='rtl'] .slick-prev{right:-25px;left:auto;}
.slick-prev:before{content:'';}
[dir='rtl'] .slick-prev:before{content:'';}
.slick-next{right:-25px;}
[dir='rtl'] .slick-next{right:auto;left:-25px;}
.slick-next:before{content:'';}
[dir='rtl'] .slick-next:before{content:'';}

.slick-dotted.slick-slider{margin-bottom:30px;}
.slick-dots{position:absolute;bottom:-53px;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center;}
.slick-dots li{position: relative; display: inline-block; width: 22px; height: 6px; margin: 0 8px; padding: 0; cursor: pointer; }
.slick-dots li button{font-size:0;line-height:0;display:block;width:22px;height:6px;cursor:pointer;color:transparent;border:0;outline:none;background: rgba(196, 196, 196, 0.3); border-radius: 6px;}
.slick-dots li button:hover,.slick-dots li button:focus{outline:none;}

.slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;}

.slick-dots li.slick-active button { background: #019DEA; }

.slick-dots li button:before{ display: none; font-family:'slick';font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'•';text-align:center;opacity:.25;color:black;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.slick-dots li.slick-active button:before{opacity:.75;color:black;}

.slick-prev { 
    background: linear-gradient(135deg, #019DEA, #0066CC), url('../img/slidera-l-row.svg') no-repeat center center;
    background-size: 100% 100%, 18px 18px;
    border: 2px solid rgba(1, 157, 234, 0.3);
    border-radius: 50%;
    width: 45px; 
    height: 45px; 
    right: 0px;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slick-next { 
    background: linear-gradient(135deg, #019DEA, #0066CC), url('../img/slidera-r-row.svg') no-repeat center center;
    background-size: 100% 100%, 18px 18px;
    border: 2px solid rgba(1, 157, 234, 0.3);
    border-radius: 50%;
    width: 45px; 
    height: 45px; 
    right: 0px;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slick-prev:hover {
    background: linear-gradient(135deg, #0066CC, #019DEA), url('../img/slidera-l-row.svg') no-repeat center center;
    background-size: 100% 100%, 18px 18px;
    border-color: rgba(1, 157, 234, 0.9);
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 20px rgba(1, 157, 234, 0.4);
}

.slick-next:hover {
    background: linear-gradient(135deg, #0066CC, #019DEA), url('../img/slidera-r-row.svg') no-repeat center center;
    background-size: 100% 100%, 18px 18px;
    border-color: rgba(1, 157, 234, 0.9);
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 20px rgba(1, 157, 234, 0.4);
}

.slick-prev:before, .slick-next:before { 
    display: none;
}

.slick-arrow { z-index: 2; }

/* Специфические стили для слайдеров в разделах "Резерв валюты" и "Отзывы" */
.popularCollection .popular.slider .slick-prev,
.popularCollection .popular.slider .slick-next,
.LastAddedItems .lastAdded.slider .slick-prev,
.LastAddedItems .lastAdded.slider .slick-next {
    z-index: 999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    border: 2px solid rgba(1, 157, 234, 0.3) !important;
    border-radius: 15px !important;
    background: linear-gradient(145deg, rgba(30, 42, 58, 0.8), rgba(20, 32, 48, 0.8)) !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    cursor: pointer !important;
    overflow: hidden !important;
}

.popularCollection .popular.slider .slick-prev,
.LastAddedItems .lastAdded.slider .slick-prev {
    left: -50px !important;
}

.popularCollection .popular.slider .slick-next,
.LastAddedItems .lastAdded.slider .slick-next {
    right: -50px !important;
}

/* Современные CSS стрелки */
.popularCollection .popular.slider .slick-prev:after,
.LastAddedItems .lastAdded.slider .slick-prev:after {
    content: '' !important;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-top: 2px solid #ffffff !important;
    border-right: 2px solid #ffffff !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-25%, -50%) rotate(-135deg) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.popularCollection .popular.slider .slick-next:after,
.LastAddedItems .lastAdded.slider .slick-next:after {
    content: '' !important;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-top: 2px solid #ffffff !important;
    border-right: 2px solid #ffffff !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-75%, -50%) rotate(45deg) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Эффекты при наведении */
.popularCollection .popular.slider .slick-prev:hover,
.popularCollection .popular.slider .slick-next:hover,
.LastAddedItems .lastAdded.slider .slick-prev:hover,
.LastAddedItems .lastAdded.slider .slick-next:hover {
    background: linear-gradient(135deg, #019DEA, #0066CC) !important;
    border-color: rgba(1, 157, 234, 0.9) !important;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 15px rgba(1, 157, 234, 0.3) !important;
}

/* Анимация стрелочек при наведении */
.popularCollection .popular.slider .slick-prev:hover:after,
.LastAddedItems .lastAdded.slider .slick-prev:hover:after {
    transform: translate(-25%, -50%) rotate(-135deg) scale(1.1) !important;
    border-color: #ffffff !important;
}

.popularCollection .popular.slider .slick-next:hover:after,
.LastAddedItems .lastAdded.slider .slick-next:hover:after {
    transform: translate(-75%, -50%) rotate(45deg) scale(1.1) !important;
    border-color: #ffffff !important;
}

/* Убираем пульсирующий эффект для четкого отображения стрелочек */

/* Добавляем контейнеру относительное позиционирование */
.popularCollection .popular.slider,
.LastAddedItems .lastAdded.slider {
    position: relative !important;
    overflow: visible !important;
}

/* Принудительно показываем стрелочки даже если у них есть класс slick-hidden */
.popularCollection .popular.slider .slick-arrow.slick-hidden,
.LastAddedItems .lastAdded.slider .slick-arrow.slick-hidden {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Убираем только стандартные стрелки Slick, но оставляем наши CSS стрелки */
.slick-prev:before, 
.slick-next:before { 
    display: none !important;
}

/* Для планшетов */
@media (max-width: 992px) {
    .popularCollection .popular.slider .slick-prev,
    .LastAddedItems .lastAdded.slider .slick-prev {
        left: -50px !important;
        width: 45px !important;
        height: 45px !important;
    }
    
    .popularCollection .popular.slider .slick-next,
    .LastAddedItems .lastAdded.slider .slick-next {
        right: -50px !important;
        width: 45px !important;
        height: 45px !important;
    }
}

/* Для мобильных устройств */
@media (max-width: 768px) {
    .popularCollection .popular.slider .slick-prev,
    .LastAddedItems .lastAdded.slider .slick-prev {
        left: -45px !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    .popularCollection .popular.slider .slick-next,
    .LastAddedItems .lastAdded.slider .slick-next {
        right: -45px !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    .popularCollection .popular.slider .slick-prev,
    .popularCollection .popular.slider .slick-next,
    .LastAddedItems .lastAdded.slider .slick-prev,
    .LastAddedItems .lastAdded.slider .slick-next {
        background-size: 100% 100%, 16px 16px !important;
    }
}