/* slider.css */

.slider-container {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid #e1e5eb; /* 增加邊框讓容器更明顯 */
}

.slider-text {
    text-align: center;
    margin-bottom: 15px;
    color: #4a5568;
    font-weight: 500;
}

.slider-track {
    width: 100%;
    height: 10px;
    background: #e1e5eb;
    border-radius: 5px;
    position: relative; /* 確保手柄相對於它定位 */
    cursor: grab; /* 初始狀態是可拖動 */
}

.slider-fill {
    position: absolute;
    height: 100%;
    background: #4776E6; /* 填充顏色 */
    border-radius: 5px;
    width: 0;
}

.slider-handle {
    position: absolute;
    /* 移除 transform: translate(-50%, -50%); */
    top: calc(50% - 20px); /* 假設手柄高度為 40px, 使其垂直居中 */
    left: 0; /* 保持不變，現在 left 就是手柄的左邊界 */
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    z-index: 10;
    transition: background-color 0.2s ease;
}

.slider-handle i {
    color: #4776E6;
    font-size: 1.2rem;
    transition: color 0.2s ease;
}

.slider-success {
    text-align: center;
    color: #38a169;
    font-weight: 600;
    margin-top: 10px;
    display: none;
    padding: 5px;
    background-color: #e6fffa;
    border-radius: 5px;
}

/* 當驗證成功後，改變滑塊手柄的樣式 */
.slider-track.verified .slider-handle {
    background-color: #38a169;
}

.slider-track.verified .slider-handle i {
    color: #fff;
}

/* 當滑塊被禁用時 */
.slider-track.disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.slider-track.disabled .slider-handle {
    cursor: not-allowed;
}

/* 確保註冊按鈕在未驗證時禁用 */
#registerSubmit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}



/* --- 移動端優化 --- */
@media (max-width: 768px) { /* 針對平板和手機 */
    .slider-container {
        padding: 15px; /* 稍微減少內邊距 */
        margin-bottom: 15px;
    }

    .slider-text {
        font-size: 0.95rem; /* 稍微縮小字體 */
        margin-bottom: 10px;
    }

    .slider-track {
        height: 8px; /* 軌道可以稍微細一點 */
    }

    .slider-fill {
        height: 100%; /* 保持與軌道一致 */
    }

    .slider-handle {
        width: 36px; /* 稍微縮小手柄 */
        height: 36px;
        top: calc(50% - 18px); /* 重新計算垂直居中，如果手柄是36px */
    }

    .slider-handle i {
        font-size: 1rem; /* 縮小圖標 */
    }

    .slider-success {
        font-size: 0.9rem; /* 成功提示字體縮小 */
        margin-top: 8px;
    }
}

@media (max-width: 480px) { /* 針對小型手機 */
    .slider-container {
        padding: 10px;
        margin-bottom: 10px;
    }

    .slider-text {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    .slider-track {
        height: 7px;
    }

    .slider-handle {
        width: 32px;
        height: 32px;
        top: calc(50% - 16px); /* 重新計算垂直居中，如果手柄是32px */
    }

    .slider-handle i {
        font-size: 0.9rem;
    }

    .slider-success {
        font-size: 0.85rem;
    }
}