@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&family=Inter:wght@400;500&display=swap');

/* 只針對外掛容器內的樣式 */
.rsokinos-product-sections {
    /* 確保外掛容器內的樣式不會溢出 */
    contain: content;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.6 !important;
    overflow-x: hidden !important;
}

/* 只重置外掛容器內的元素 */
.rsokinos-product-sections .section-container,
.rsokinos-product-sections .content-wrapper,
.rsokinos-product-sections .content-area,
.rsokinos-product-sections .text-content {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 只針對外掛容器內的元素設定白色文字 */
.rsokinos-product-sections,
.rsokinos-product-sections .section-container,
.rsokinos-product-sections .content-wrapper,
.rsokinos-product-sections .content-area,
.rsokinos-product-sections .text-content,
.rsokinos-product-sections .product-title,
.rsokinos-product-sections .product-subtitle,
.rsokinos-product-sections p,
.rsokinos-product-sections span,
.rsokinos-product-sections div:not([style*="color"]):not([class*="color-"]) {
    color: white !important;
}

/* 主要區塊容器 - 滿版背景 */
.section-container {
    width: 100% !important;
    min-height: 100vh !important;
    display: flex !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 背景層 */
.background-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

.background-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 背景設定 - 桌面版 */
.bg-left-focus .background-image {
    object-position: left bottom !important;
}

.bg-right-focus .background-image {
    object-position: right bottom !important;
}

.bg-center-bottom .background-image {
    object-position: center bottom !important;
}

.bg-center-full .background-image {
    object-position: center center !important;
}

/* 手機版背景圖片設定 */
@media (max-width: 767px) {
    .bg-left-focus .background-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 3% center !important;
    }
    
    .bg-right-focus .background-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 90% center !important;
    }

    .bg-center-bottom .background-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .bg-center-full .background-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* 內容包裝器 - 限制內容寬度 */
.content-wrapper {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    display: flex !important;
    min-height: 100vh !important;
    position: relative !important;
    z-index: 2 !important;
    padding: 0 !important;
}

.section-container.reverse .content-wrapper {
    flex-direction: row-reverse !important;
}

/* 內容區塊 */
.content-area {
    width: 40% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 第三個區塊的特殊樣式 - 改為置頂往下80px */
.section-container.center-align .content-wrapper {
    align-items: flex-start !important;
    padding-top: 80px !important;
}

.section-container.center-align .content-area {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
}

/* 第四個區塊的特殊樣式 - 置頂往下80px */
.section-container.top-align .content-wrapper {
    align-items: flex-start !important;
    padding-top: 80px !important;
}

.section-container.top-align .content-area {
    width: 40% !important;
    align-items: flex-start !important;
}

.text-content {
    max-width: 500px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 統一的標題樣式 - 解決優先權衝突 */
.product-title,
.product-title h1,
.product-title h2,
.product-title h3,
.product-title h4,
.product-title h5,
.product-title h6,
.product-title p,
.product-title div,
.product-title span,
.text-content .product-title,
.text-content h1.product-title,
.text-content h2.product-title,
.text-content h3.product-title,
.center-content .product-title,
.center-content h1.product-title,
.center-content h2.product-title,
.center-content h3.product-title {
    color: white !important;
    font-size: 46px !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* 統一的副標題樣式 - 解決優先權衝突 */
.product-subtitle,
.product-subtitle h1,
.product-subtitle h2,
.product-subtitle h3,
.product-subtitle h4,
.product-subtitle h5,
.product-subtitle h6,
.product-subtitle p,
.product-subtitle div,
.product-subtitle span,
.text-content .product-subtitle,
.text-content h1.product-subtitle,
.text-content h2.product-subtitle,
.text-content h3.product-subtitle,
.center-content .product-subtitle,
.center-content h1.product-subtitle,
.center-content h2.product-subtitle,
.center-content h3.product-subtitle {
    color: white !important;
    font-size: 32px !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 400 !important;
    margin-bottom: 16px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* 統一的描述樣式 - 解決優先權衝突 */
.product-description,
.product-description h1,
.product-description h2,
.product-description h3,
.product-description h4,
.product-description h5,
.product-description h6,
.product-description p,
.product-description div,
.product-description span,
.product-description strong,
.product-description em,
.product-description u,
.product-description i,
.product-description b,
.text-content .product-description,
.text-content p.product-description,
.center-content .product-description,
.center-content p.product-description {
    color: white !important;
    font-size: 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 確保所有沒有自定義顏色的文字元素都是白色 */
.section-container *:not([style*="color"]),
.center-section *:not([style*="color"]),
.content-area *:not([style*="color"]),
.text-content *:not([style*="color"]),
.center-content *:not([style*="color"]) {
    color: white !important;
}

/* 特別針對可能的HTML標籤，但允許自定義顏色 */
.section-container h1:not([style*="color"]),
.section-container h2:not([style*="color"]),
.section-container h3:not([style*="color"]),
.section-container h4:not([style*="color"]),
.section-container h5:not([style*="color"]),
.section-container h6:not([style*="color"]),
.section-container p:not([style*="color"]),
.section-container div:not([style*="color"]),
.section-container span:not([style*="color"]),
.section-container strong:not([style*="color"]),
.section-container em:not([style*="color"]),
.section-container u:not([style*="color"]),
.section-container i:not([style*="color"]),
.section-container b:not([style*="color"]),
.center-section h1:not([style*="color"]),
.center-section h2:not([style*="color"]),
.center-section h3:not([style*="color"]),
.center-section h4:not([style*="color"]),
.center-section h5:not([style*="color"]),
.center-section h6:not([style*="color"]),
.center-section p:not([style*="color"]),
.center-section div:not([style*="color"]),
.center-section span:not([style*="color"]),
.center-section strong:not([style*="color"]),
.center-section em:not([style*="color"]),
.center-section u:not([style*="color"]),
.center-section i:not([style*="color"]),
.center-section b:not([style*="color"]) {
    color: white !important;
}

/* 居中區塊 - 滿版背景，改為置頂往下80px */
.center-section {
    width: 100% !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
    padding: 80px 0 100px !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.center-content {
    margin-bottom: 60px !important;
    max-width: 1100px !important;
    padding: 0 20px !important;
    position: relative !important;
    z-index: 2 !important;
    margin-top: 0 !important;
}

.image-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 80px !important;
    max-width: 866px !important;
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.image-grid img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 手機版響應式設計 */
@media (max-width: 768px) {
    .section-container {
        flex-direction: column !important;
        padding: 60px 20px !important;
        width: 100% !important;
    }

    .content-wrapper {
        flex-direction: column !important;
        max-width: none !important;
    }

    .section-container.reverse .content-wrapper {
        flex-direction: column !important;
    }

    .section-container.top-align .content-wrapper {
        padding-top: 60px !important;
    }

    .section-container.center-align {
        padding: 60px 20px !important;
    }

    .section-container.center-align .content-wrapper {
        flex-direction: column !important;
        align-items: center !important;
        padding-top: 0 !important;
    }

    .content-area {
        width: 100% !important;
        padding: 0 !important;
    }

    .section-container.top-align .content-area {
        width: 100% !important;
        align-items: center !important;
    }

    .section-container.center-align .content-area {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* 手機版字體大小調整 */
    .product-title,
    .product-title h1,
    .product-title h2,
    .product-title h3,
    .text-content .product-title,
    .text-content h1.product-title,
    .text-content h2.product-title,
    .text-content h3.product-title,
    .center-content .product-title,
    .center-content h1.product-title,
    .center-content h2.product-title,
    .center-content h3.product-title {
        font-size: 32px !important;
        color: white !important;
    }

    .product-subtitle,
    .product-subtitle h1,
    .product-subtitle h2,
    .product-subtitle h3,
    .text-content .product-subtitle,
    .text-content h1.product-subtitle,
    .text-content h2.product-subtitle,
    .text-content h3.product-subtitle,
    .center-content .product-subtitle,
    .center-content h1.product-subtitle,
    .center-content h2.product-subtitle,
    .center-content h3.product-subtitle {
        font-size: 20px !important;
        color: white !important;
    }

    .center-section {
        padding: 60px 20px !important;
        justify-content: center !important;
    }

    .image-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
}

/* 平板版本 768px-1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .content-area {
        width: 60% !important;
        padding: 0 20px !important;
    }

    .section-container.top-align .content-area {
        width: 60% !important;
        padding: 0 20px !important;
    }

    .section-container.center-align .content-area {
        width: 80% !important;
        padding: 0 20px !important;
    }

    .center-content {
        padding: 0 20px !important;
    }

    .product-title,
    .product-title h1,
    .product-title h2,
    .product-title h3,
    .text-content .product-title,
    .text-content h1.product-title,
    .text-content h2.product-title,
    .text-content h3.product-title,
    .center-content .product-title,
    .center-content h1.product-title,
    .center-content h2.product-title,
    .center-content h3.product-title {
        font-size: 36px !important;
        color: white !important;
    }
}