/**
 * Homepage specific styles
 * Created: 2025-12-31
 */

/* Statistics bar positioning */
.statistics-pc {
    float: left;
}

.statistics {
    bottom: 0;
}


.statistics-theme-home {
    background-color: rgb(90, 90, 226);
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: normal;
    padding: 7px;
    margin: 0;
}

.banner-slide-link {
    display: block;
}

.banner-slide-img {
    width: 100%;
}

.banner-slide-picture {
    display: block;
}

.tablist-home-offset {
    margin-top: 3.5rem;
}

.home-price {
    font-size: 1.2rem;
}

.place-slide-grid {
    margin: 0 4.3rem;
}

.font-semibold-600 {
    font-weight: 600;
}

.video-playlist-layout-wide {
    max-width: 1400px;
    margin: 3.5rem auto;
}

.home-main-player-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    background: #000;
    border-radius: 15px;
    overflow: hidden;
}

.home-main-video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.is-hidden {
    display: none;
}

.idx-bg-home-2 {
    background-image: url("/uploads/20260120/7e377b4c61eb654052f51de92c24ff18.jpg");
}

.idx-bg-4-responsive {
    background-image: url(/assets/fr/image/m_idx4.webp);
}

.idx-bg-home-custom {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: rgb(10, 10, 10);
    font-size: 13px;
    font-weight: normal;
    padding: 0;
    margin: 0;
}


@media (max-width: 959px) {
    .idx-bg-home-2 {
        background-image: url(/assets/fr/image/m_idx2.webp);
    }
}
@media (min-width: 960px) {

    .idx-bg-4-responsive {
        background-image: url(/assets/fr/image/bg_idx4.webp);
    }
}


.force-visible-media {
    opacity: 1 !important;
    visibility: visible !important;
}
/* Mobile statistics bar - position below banner, not overlapping */
@media (max-width: 959px) {
    .banner {
        position: relative;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Mobile statistics bar should be static, not absolute */
    .statistics.wap-statistics {
        position: relative !important;
        bottom: auto !important;
        margin-top: 0 !important;
    }
}

/* Mobile banner auto-height - override diy.css 19/7 ratio */
@media (max-width: 959px) {
    /* Mobile ss correct ratio, override diy.css aspect-ratio: 19/7 */
    body.page-index .banner .uk-slideshow-items,
    .banner .uk-slideshow-items {
        aspect-ratio: unset !important;
        /* Keep overflow hidden so stacked slides do not leak */
        overflow: hidden !important;
        position: relative !important;
        /* Height is set by homepage.js based on mobile image dimensions */
    }
    
    /* Slideshow container also needs reset */
    .banner [uk-slideshow],
    .banner .uk-slideshow {
        height: auto !important;
        min-height: unset !important;
        overflow: hidden !important;
    }

    /* Hide PC images, show mobile images */
    .banner .uk-slideshow-items img.uk-visible\@m {
        display: none !important;
    }
    
    .banner .uk-slideshow-items img.uk-hidden\@m {
        display: block !important;
        width: 100%;
        height: auto !important;
        object-fit: contain;
    }
    
    /* Let UIkit handle slide positioning and fade animation natively.
       UIkit slideshow uses absolute positioning for all slides and
       controls opacity via inline styles for the fade transition.
       We must NOT override opacity/visibility with !important,
       otherwise UIkit cannot animate the fade and all slides flash. */
    .banner .uk-slideshow-items > li {
        /* UIkit sets position:absolute by default - just ensure overflow is clipped */
        overflow: hidden !important;
        width: 100% !important;
    }
    
    /* Mobile statistics bar flush under banner, remove white gap */
    .banner .wap-statistics,
    .statistics.wap-statistics {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Mobile statistics bar content vertical centering */
    .wap-statistics {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .wap-statistics .uk-container {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }
    
    .wap-statistics .marquee-container {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }
    
    .wap-statistics .marquee-content {
        display: inline-flex !important;
        align-items: center !important;
    }
    
    .wap-statistics .uk-flex {
        align-items: center !important;
    }

    .wap-statistics .js-statistics-track,
    .wap-statistics .js-statistics-track-clone {
        display: flex !important;
        align-items: center !important;
    }
    
    .wap-statistics .item {
        display: flex !important;
        align-items: center !important;
    }
    
    /* Navigation dots position adjustment */
    .banner .uk-position-bottom-center {
        bottom: 10px !important;
    }
    
    /* idx3 title area display */
    .idx3 .idx-type {
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .idx3 .idx-type.wow {
        animation: none !important;
        visibility: visible !important;
    }

    /* idx3 mobile layout fix - force hide non-active slides */
    .idx3 .slides [uk-slideshow] {
        overflow: hidden !important;
    }
    
    .idx3 .slides .uk-slideshow-items {
        position: relative !important;
        overflow: hidden !important;
        min-height: 500px !important;
        background: #f5f5f5 !important;
    }
    
    /* Force hide all non-active slides with display:none */
    .idx3 .slides .uk-slideshow-items > li:not(.uk-active) {
        display: none !important;
    }
    
    /* Active slide visible */
    .idx3 .slides .uk-slideshow-items > li.uk-active {
        display: block !important;
        position: relative !important;
        pointer-events: auto !important;
        z-index: 2 !important;
        background: #f5f5f5 !important;
    }
    
    .idx3 .slides .uk-grid,
    .idx3 .slides [uk-grid] {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .idx3 .slides .col {
        width: 100% !important;
        position: relative !important;
    }
    
    /* First col (product image + text) at bottom */
    .idx3 .slides [uk-grid] > .col:first-child {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Second col (scene image) at top */
    .idx3 .slides [uk-grid] > .col:last-child {
        order: 1 !important;
    }
    
    /* Scene image styles - 95% width near edge */
    .idx3 .slides .col .fitImg {
        max-width: 95% !important;
        margin: 0 auto 1rem !important;
        height: auto !important;
    }
    
    .idx3 .slides .col .fitImg img {
        width: 100% !important;
        height: auto !important;
        border-radius: 15px !important;
    }
    
    /* Product image styles - 95% width same as scene image */
    .idx3 .slides .col .small-pic {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        margin-top: 1rem !important;
        margin-bottom: 0.5rem !important;
        order: 1 !important;
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .idx3 .slides .col .small-pic img {
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    /* Text and buttons at bottom */
    .idx3 .slides .col .item-tit {
        order: 2 !important;
        margin-top: 0.5rem !important;
    }
    
    .idx3 .slides .col .item-desc {
        order: 3 !important;
    }
    
    .idx3 .slides .col .idx-btns {
        order: 4 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    .idx3 .slides .col .idx-btns a {
        font-size: 12px !important;
        padding: 8px 15px !important;
        white-space: normal !important;
        text-align: center !important;
        min-width: 120px !important;
    }
    
    /* Navigation dots position */
    .idx3 .slides .uk-position-bottom-center {
        position: relative !important;
        margin-top: 1rem !important;
    }
    
    /* idx3 navigation buttons - keep inside container */
    .idx3 .slides .uk-slidenav-previous,
    .idx3 .slides .uk-slidenav-next {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    .idx3 .slides .uk-slidenav-previous {
        left: 5px !important;
        right: auto !important;
    }
    
    .idx3 .slides .uk-slidenav-next {
        right: 5px !important;
        left: auto !important;
    }
    
    /* Ensure slides container clips overflow */
    .idx3 .slides {
        overflow: hidden !important;
    }

    /* Mobile fallback: when WOW leaves homepage sections stuck at visibility:hidden,
       keep the lower modules readable instead of rendering large blank panels. */
    /* Disable wow animations on key mobile blocks to prevent large white spaces if they fail to trigger */
    .idx2 .wow,
    .idx4 .wow,
    .idx5 .wow,
    #home-video-storyblock .wow,
    /* Mobile fallback: when WOW leaves homepage sections stuck at visibility:hidden */
    /* Force display on mobile for bottom sections to prevent large gaps */
    /* Only fix visibility and opacity to avoid breaking slider transforms */
    .idx8 .wow[style*="visibility: hidden"],
    .idx9 .wow[style*="visibility: hidden"] {
        visibility: visible !important;
        opacity: 1 !important;
    }
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    /* 彻底消除移动端由于 mt-55rem 等类名导致的巨额间距 */
    .mt-55rem, .mt-19rem, .mt-33rem {
        margin-top: 1rem !important;
    }

    /* 确保底部区块高度自适应，防止容器撑开 */
    .idx8, .idx9, .idx-type {
        margin-top: 0 !important;
        padding-top: 2rem !important;
        min-height: auto !important;
    }

    /* 防止底部模块溢出 */
    .idx9 {
        margin-bottom: 0 !important;
        padding-bottom: 2rem !important;
    }
    .footer {
        margin-top: 0 !important;
    }
}

/* PC statistics bar content vertical centering + space-between */
@media (min-width: 960px) {
    /* Hide mobile images on PC */
    .banner .uk-slideshow-items img.uk-hidden\@m {
        display: none !important;
    }
    
    /* PC statistics bar content vertical centering + space-between */
    .statistics.uk-visible\@m {
        display: flex !important;
        align-items: center !important;
    }
    
    .statistics.uk-visible\@m .uk-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        width: 100% !important;
    }
    
    .statistics.uk-visible\@m .uk-container > div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    .statistics.uk-visible\@m .-items {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 100% !important;
        width: 100% !important;
    }
    
    .statistics.uk-visible\@m .item {
        display: flex !important;
        align-items: center !important;
    }
}

/* idx5 images - show immediately and disable hover/secondary switching */
.idx5 .fitImg img {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
}

.idx5 .fitImg img + img {
    display: none !important;
}

/* ==================================================================
   New Home Video Storyblock Layout (Playlist + Player)
   ================================================================== */
/* Common Styles */
.video-playlist-layout {
    display: flex;
    gap: 20px;
    padding: 0 0 20px 0;
}

.playlist-item {
    display: flex;
    /* Vertically center content so it aligns with the card border (no top-heavy layout). */
    align-items: center;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.playlist-item:hover {
    background-color: #f9f9fa;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.playlist-item.active {
    background-color: #fff;
    border-color: #3e3ab5;
    box-shadow: 0 0 0 1px #3e3ab5 inset;
}

/* Number Badge */
.item-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #3e3ab5;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    margin-right: 15px;
    flex-shrink: 0;
    margin-top: 0;
    box-shadow: 0 4px 8px rgba(62, 58, 181, 0.3);
}

.playlist-item.active .item-number {
    transform: scale(1.1);
}

/* Thumbnail */
.item-thumb {
    width: 100px;
    height: 75px;
    border-radius: 6px;
    object-fit: cover;
    margin-right: 15px;
    background-color: #eee;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Info */
.item-info {
    flex: 1;
    min-width: 0;
}

.item-title {
    font-weight: 700;
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.3;
}

.item-desc {
    font-size: 13px;
    color: #777;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Main Video Player */
.main-player-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

.main-player-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Desktop Styles */
@media (min-width: 960px) {
    .video-playlist-layout {
        gap: 30px;
    }
    .video-playlist-sidebar {
        width: 40%;
        max-height: 520px;
        overflow-y: auto;
        padding-right: 15px;
    }
    .video-player-main {
        width: 60%;
    }
    
    /* Custom Scrollbar for list */
    .video-playlist-sidebar::-webkit-scrollbar {
        width: 5px;
    }
    .video-playlist-sidebar::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    .video-playlist-sidebar::-webkit-scrollbar-thumb {
        background: #d1d1d1;
        border-radius: 3px;
    }
    .video-playlist-sidebar::-webkit-scrollbar-thumb:hover {
        background: #aaa;
    }
}

/* Mobile Styles */
@media (max-width: 959px) {
    .video-playlist-layout {
        flex-direction: column-reverse; /* Video Top, Playlist Bottom */
    }
    
    .video-player-main {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .video-playlist-sidebar {
        width: 100%;
        max-height: 60vh; /* Allow scrolling on mobile if list is long */
        overflow-y: auto;
    }
    
    .playlist-item {
        padding: 10px;
    }
    
    .item-thumb {
        width: 80px;
        height: 60px;
        margin-right: 10px;
    }
    
    .item-title {
        font-size: 15px;
    }
    
    .item-desc {
        font-size: 12px;
    }
}

/* Links Section */
.idx-links {
    padding: 3.75rem 0; /* Align with other sections like idx8 padding */
    background-color: #f8f9fa;
    border-top: 1px solid #eee;
}

.links-section {
    position: relative;
    z-index: 1;
}

.links-section .idx-type {
    text-align: left; /* Align titles left for these sections */
    margin-bottom: 1.5rem;
}

.links-section .idx-type .tit {
    margin-bottom: 1rem;
    position: relative;
    padding-left: 0;
    font-size: 1.25rem; /* Smaller than main section titles */
    letter-spacing: 0.05em;
}

.links-section .link-item {
    display: block;
    padding: 0.5rem 0;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.links-section .link-item:hover {
    color: #333;
    transform: translateX(5px);
}

.links-section .link-img {
    transition: transform 0.2s;
    display: block;
}

.links-section .link-item:hover .link-img {
    transform: scale(1.05);
}

/* Margin utilities if not present */
.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mt-35rem {
    margin-top: 2.18rem; /* Approx 35px */
}

.mt-55rem {
    margin-top: 3.43rem; /* Approx 55px */
}

@media (max-width: 640px) {
    .idx-links {
        padding: 2rem 0;
    }
    
    .links-section .idx-type {
        text-align: center;
    }
    
    .links-section .tit {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    .links-section .link-item {
        font-size: 13px;
        text-align: center;
    }
    
    .links-section .link-item:hover {
        transform: none;
    }
}

/* Fix for .goodsShow .right .top .pull-left li.active border-bottom issue */
.goodsShow .right .top .pull-left li.active {
    border-bottom: none !important;
}