/* CSP Compatible Styles - 用於符合Content Security Policy要求 */

/* Swiper slide support */
.swiper_wrapper .swiper-slide {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    height: 100% !important;
}

/* 確保非活動的 slide 隱藏 */
.swiper-wrapper {
    display: flex !important;
    height: 100% !important;
}

.swiper-wrapper .swiper-slide {
    flex-shrink: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Display控制 - 用於替代內聯style.display */
.csp-visible {
    display: block !important;
}

.csp-hidden {
    display: none !important;
}

/* 背景圖片支持 - 使用CSS變數 */
[data-csp-bg],
.swiper-slide[data-csp-bg],
.swiper_wrapper .swiper-slide[data-csp-bg],
.section[data-csp-bg] {
    background-image: var(--bg-image, none) !important;
    background-size: var(--bg-size, cover) !important;
    background-position: var(--bg-position, center) !important;
    background-repeat: var(--bg-repeat, no-repeat) !important;
    background-attachment: var(--bg-attachment, scroll) !important;
}

/* Parallax section 背景 - 確保不重複 */
.section.parallax[data-csp-bg] {
    background-size: auto !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

[data-csp-bg-pos] {
    background-position: var(--bg-position, 0 0) !important;
}

/* CSS變數支持 - 用於jQuery動態設置的屬性 */
:root {
    /* Display and visibility */
    --csp-opacity: 1;
    --csp-display: block;
    --csp-visibility: visible;
    --csp-zIndex: auto;
    
    /* Dimensions */
    --csp-width: auto;
    --csp-height: auto;
    --csp-minWidth: auto;
    --csp-minHeight: auto;
    --csp-maxWidth: auto;
    --csp-maxHeight: auto;
    
    /* Colors */
    --csp-color: inherit;
    --csp-backgroundColor: transparent;
    --csp-borderColor: inherit;
    
    /* Layout */
    --csp-margin: 0;
    --csp-padding: 0;
    --csp-border: none;
    
    /* Position */
    --csp-position: static;
    --csp-top: auto;
    --csp-left: auto;
    --csp-right: auto;
    --csp-bottom: auto;
    
    /* Transform and animation */
    --csp-transform: none;
    --csp-transformOrigin: 50% 50%;
    --csp-transition: none;
    --csp-animation: none;
    
    /* Background */
    --bg-image: none;
    --bg-position: 0 0;
    --bg-size: auto;
    --bg-repeat: repeat;
    --bg-attachment: scroll;
    
    /* Other */
    --csp-float: none;
    --csp-clear: none;
    --csp-overflow: visible;
    --csp-boxShadow: none;
    --csp-textShadow: none;
}

/* 應用CSS變數 */
[style*="--csp-opacity"] {
    opacity: var(--csp-opacity);
}

[style*="--csp-width"] {
    width: var(--csp-width);
}

[style*="--csp-height"] {
    height: var(--csp-height);
}

[style*="--csp-color"] {
    color: var(--csp-color);
}

[style*="--csp-backgroundColor"] {
    background-color: var(--csp-backgroundColor);
}

[style*="--csp-transform"] {
    transform: var(--csp-transform);
}

[style*="--csp-position"] {
    position: var(--csp-position);
}

[style*="--csp-top"] {
    top: var(--csp-top);
}

[style*="--csp-left"] {
    left: var(--csp-left);
}

[style*="--csp-right"] {
    right: var(--csp-right);
}

[style*="--csp-bottom"] {
    bottom: var(--csp-bottom);
}

[style*="--csp-zIndex"] {
    z-index: var(--csp-zIndex);
}

[style*="--csp-float"] {
    float: var(--csp-float);
}

[style*="--csp-overflow"] {
    overflow: var(--csp-overflow);
}

[style*="--csp-margin"] {
    margin: var(--csp-margin);
}

[style*="--csp-padding"] {
    padding: var(--csp-padding);
}

[style*="--csp-visibility"] {
    visibility: var(--csp-visibility);
}

[style*="--csp-display"] {
    display: var(--csp-display);
}