/**
 * Step 3 - 證件類型切換按鈕樣式
 */

/* 證件類型切換容器 */
.id-type-toggle {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

/* 證件類型按鈕 */
.id-type-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.id-type-btn i,
.id-type-btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

/* 懸停效果 */
.id-type-btn:hover {
    border-color: #6366f1;
    background: #f8f9ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

/* 選中狀態 */
.id-type-btn.active {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-color: #6366f1;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.id-type-btn.active i,
.id-type-btn.active svg {
    stroke: #ffffff;
}

/* 禁用狀態 */
.id-type-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* 響應式設計 */
@media (max-width: 576px) {
    .id-type-toggle {
        flex-direction: column;
        gap: 0.75rem;
    }

    .id-type-btn {
        width: 100%;
    }
}