/* 比較區塊容器 */
.compare-section {
    max-width: 1224px;
    margin: 0 auto;
    position: relative;
}

/* 圖片比較容器 */
.image-compare {
    position: relative;
    width: 100%;
    overflow: hidden;
}
@media (min-width: 768px) {
    .image-compare {
        border-radius: 30px;
    }
}
/* 圖片包裹容器基本樣式 */
.image-wrap {
    position: relative;
    display: block;
}

/* 左側圖片容器 - 預設狀態為50% */
.image-wrap.before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2;
    clip-path: inset(0 50% 0 0);
    transition: clip-path 0.5s ease;
}

/* 右側圖片容器 */
.image-wrap.after {
    position: relative;
    width: 100%;
    z-index: 1;
}

/* 圖片基本樣式 */
.image-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* 分隔線樣式 - 預設在中間 */
.divider {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 2px;
    background: white;
    transform: translateX(-1px);
    z-index: 3;
    transition: left 0.5s ease;
}

/* 開關容器 */
.switch {
    text-align: center;
    padding-bottom: 20px;
    z-index: 4;
    position: relative;
}

/* 開關標籤 */
.switch label {
    display: inline-block;
    width: 70px;
    height: 34px;
    position: relative;
    cursor: pointer;
}

/* 隱藏原生checkbox */
.switch input {
    display: none;
}

/* 開關軌道 */
.switch-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #3e3f40;
    border-radius: 34px;
    transition: background-color 0.5s ease;
    display: flex;
    align-items: center;
}

/* 開關滑塊 */
.switch-track:before {
    content: "";
    position: absolute;
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background: white;
    border-radius: 50%;
    transition: transform 0.5s ease;
}

/* ON文字樣式 */
.switch-text {
    color: white;
    font-size: 16px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.5s ease;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

/* 開關啟動狀態樣式 */
.switch input:checked + .switch-track {
    background: #007AFF;
}

.switch input:checked + .switch-track:before {
    transform: translateX(36px);
}

.switch input:checked + .switch-track .switch-text {
    opacity: 1;
}

/* 開啟狀態 - 右圖100% */
.compare-active .before {
    clip-path: inset(0 100% 0 0);
}

.compare-active .divider {
    left: 0;
}

/* 關閉狀態 - 左圖100% */
.compare-inactive .before {
    clip-path: inset(0 0 0 0);
}

.compare-inactive .divider {
    left: 100%;
}

/* 底部間隔 */
.bottom-space {
    height: 800px;
    background: #eee;
}