/**
 * MageShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the MageShop.com license that is
 * available through the world-wide-web at this URL:
 * https://www.mageshop.com/LICENSE.txt
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade this extension to newer
 * version in the future.
 *
 * @category    MageShop
 * @package     MageShop_BannerSlider
 * @copyright   Copyright (c) MageShop (https://www.mageshop.com/)
 * @license     https://www.mageshop.com/LICENSE.txt
 */

.ms-banner-slider .owl-nav button span{
    position: absolute;
    top: 40%;
    font-size: 80px;
    color: #869791;
}
.ms-banner-slider .owl-nav .owl-prev span{
    left: 1%;
}
.ms-banner-slider .owl-nav .owl-next span{
    right: 1%;
}
.ms-banner-slider .owl-dots{
    position: absolute;
    top: 88%;
    left: 49%;
}
.ms-banner-slider .owl-dots .owl-dot{
    box-shadow: none;
}
.sidebar .ms-banner-slider .owl-nav button span{
    font-size: 30px;
    top: 30%;
}
.sidebar .ms-banner-slider .owl-dots .owl-dot span{
    width: 8px;
    height: 8px;
}
.sidebar .ms-banner-slider .owl-dots{
    top: 70%;
    left: 42.5%;
}

@media only screen and (max-width: 764px) {
    .ms-banner-slider .owl-nav button span{
        top: 20%;
        font-size: 45px;
    }
    .ms-banner-slider .owl-dots{
        top: 62%;
        left: 47%;
    }
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .ms-banner-slider .owl-nav button span{
        top: 30%;
        font-size: 80px;
    }
    .ms-banner-slider .owl-dots{
        top: 75%;
        left: 49%;
    }
}

/* ----------------------------------------------------------------------------
 * AJAX loading mode - anti-CLS reserved box + loading skeleton.
 * The box reserves vertical space BEFORE the banners arrive, so the page does
 * not "jump" when they load (good for PageSpeed / CLS). --ms-ar is set inline
 * per slider; the value below is the automatic fallback.
 * ------------------------------------------------------------------------- */
.ms-ajax-slider {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ms-ar, 1903 / 400);
    overflow: hidden;
}
/* No banners to show (e.g. all out of schedule): remove the reserved box. */
.ms-ajax-slider.ms-empty {
    display: none;
}
.ms-ajax-slider .ms-ajax-slider-inner,
.ms-ajax-slider .owl-carousel,
.ms-ajax-slider .owl-stage-outer,
.ms-ajax-slider .owl-stage,
.ms-ajax-slider .owl-item,
.ms-ajax-slider .banner-item,
.ms-ajax-slider .item-image,
.ms-ajax-slider .item-image a {
    height: 100%;
}
/* Banner fills the reserved (fixed) box; cropped to the configured ratio. */
.ms-ajax-slider .item-image img,
.ms-ajax-slider .owl-image img,
.ms-ajax-slider img.owl-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ms-banner-skeleton {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #eee;
    animation: ms-banner-pulse 1.3s ease-in-out infinite;
}
@keyframes ms-banner-pulse {
    0%, 100% { background-color: #eee; }
    50% { background-color: #f6f6f6; }
}
@media (prefers-reduced-motion: reduce) {
    .ms-banner-skeleton { animation: none; }
}