.inffni-360-widget-container {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.inffni-360-carousel {
    width: 100%;
    position: relative;
}

.inffni-media-container {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.inffni-media-element {
    width: 100%;
    height: 100%;
    display: block;
}

/* Overlay */
.inffni-overlay-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
    pointer-events: none;
    display: flex;
    padding: 40px;
}

.inffni-overlay-inner {
    max-width: 100%;
    pointer-events: auto;
}

.inffni-slide-title, .inffni-slide-title a {
    text-decoration: none;
    margin-top: 0;
}

.inffni-badge {
    max-width: 100px;
    margin-bottom: 15px;
    display: block;
}

/* Buttons Row */
.inffni-buttons-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    width: 100%;
}

/* Button Base Style */
.inffni-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    box-sizing: border-box;
    line-height: 1 !important;
    vertical-align: middle;
}

.inffni-buttons-row[style*="column"] .inffni-btn {
    width: fit-content;
}

/* Navigation - 基础样式 */
//.inffni-360-carousel .swiper-button-next,
//.inffni-360-carousel .swiper-button-prev {
    //transition: opacity 0.3s, background-color 0.3s, color 0.3s, transform 0.3s;
    //z-index: 20;
    //position: absolute; /* 确保是绝对定位，PHP 会生成 top/bottom 规则 */
//}
/* =========================================
   Navigation Arrows Visibility Logic
   ========================================= */

/* 默认样式：基础过渡效果 */
.inffni-360-carousel .swiper-button-next,
.inffni-360-carousel .swiper-button-prev {
    transition: opacity 0.3s, background-color 0.3s, color 0.3s, transform 0.3s;
    z-index: 20;
    position: absolute; /* 确保绝对定位 */
}

/* ----------------------------------
   1. Desktop Styles (Default or min-width: 1025px)
   ---------------------------------- */
@media (min-width: 1025px) {
    /* Hover Only: 默认透明，Hover 容器时显示 */
    .inffni-360-carousel.arrow-vis-desktop-hover .swiper-button-next,
    .inffni-360-carousel.arrow-vis-desktop-hover .swiper-button-prev {
        opacity: 0;
    }
    .inffni-360-carousel.arrow-vis-desktop-hover:hover .swiper-button-next,
    .inffni-360-carousel.arrow-vis-desktop-hover:hover .swiper-button-prev {
        opacity: 1;
    }

    /* Always Visible: 强制显示 */
    .inffni-360-carousel.arrow-vis-desktop-always .swiper-button-next,
    .inffni-360-carousel.arrow-vis-desktop-always .swiper-button-prev {
        opacity: 1;
    }

    /* Hidden: 隐藏 */
    .inffni-360-carousel.arrow-vis-desktop-hide .swiper-button-next,
    .inffni-360-carousel.arrow-vis-desktop-hide .swiper-button-prev {
        display: none !important;
    }
}

/* ----------------------------------
   2. Tablet Styles (max-width: 1024px)
   ---------------------------------- */
@media (max-width: 1024px) {
    /* 如果设置了平板的具体规则，覆盖桌面规则 */
    
    /* Hover Only */
    .inffni-360-carousel.arrow-vis-tablet-hover .swiper-button-next,
    .inffni-360-carousel.arrow-vis-tablet-hover .swiper-button-prev {
        opacity: 0 !important;
    }
    .inffni-360-carousel.arrow-vis-tablet-hover:hover .swiper-button-next,
    .inffni-360-carousel.arrow-vis-tablet-hover:hover .swiper-button-prev {
        opacity: 1 !important;
    }

    /* Always Visible */
    .inffni-360-carousel.arrow-vis-tablet-always .swiper-button-next,
    .inffni-360-carousel.arrow-vis-tablet-always .swiper-button-prev {
        opacity: 1 !important;
        display: flex !important; /* 确保不被 hidden 覆盖 */
    }

    /* Hidden */
    .inffni-360-carousel.arrow-vis-tablet-hide .swiper-button-next,
    .inffni-360-carousel.arrow-vis-tablet-hide .swiper-button-prev {
        display: none !important;
    }
}

/* ----------------------------------
   3. Mobile Styles (max-width: 767px)
   ---------------------------------- */
@media (max-width: 767px) {
    /* 如果设置了手机的具体规则，覆盖平板/桌面规则 */

    /* Hover Only (手机端 Hover 体验通常不好，但如果用户选了就支持) */
    .inffni-360-carousel.arrow-vis-mobile-hover .swiper-button-next,
    .inffni-360-carousel.arrow-vis-mobile-hover .swiper-button-prev {
        opacity: 0 !important;
    }
    .inffni-360-carousel.arrow-vis-mobile-hover:active .swiper-button-next,
    .inffni-360-carousel.arrow-vis-mobile-hover:active .swiper-button-prev {
        opacity: 1 !important;
    }

    /* Always Visible */
    .inffni-360-carousel.arrow-vis-mobile-always .swiper-button-next,
    .inffni-360-carousel.arrow-vis-mobile-always .swiper-button-prev {
        opacity: 1 !important;
        display: flex !important;
    }

    /* Hidden */
    .inffni-360-carousel.arrow-vis-mobile-hide .swiper-button-next,
    .inffni-360-carousel.arrow-vis-mobile-hide .swiper-button-prev {
        display: none !important;
    }
}

/* 注意：原来的 .arrows-autohide 样式已被移除，
   现在由 PHP 中的 selectors 属性动态控制 opacity 
   (例如：PC端 hover 显示，手机端 always 显示) */

/* Pagination & Tooltip */
.inffni-360-carousel .swiper-pagination {
    bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
    z-index: 20;
}

.inffni-360-carousel .swiper-pagination-bullet {
    border-radius: 2px;
    opacity: 1;
    background: rgba(255,255,255,0.3);
    position: relative;
    overflow: visible;
    margin: 0 !important;
    transition: width 0.3s;
}

.inffni-pagination-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background-color: #fff;
    display: block;
    z-index: 2;
}

/* Tooltip Styles */
.inffni-pagination-tooltip {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    margin-bottom: 5px;
}

.inffni-360-carousel .swiper-pagination-bullet:hover .inffni-pagination-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-3px);
}