/* ==================================================
   CUSTOM INPUT CHECK (checkbox & radio)
   هماهنگ با قالب custom-education-theme
   ================================================== */

.custom-input-check {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .custom-input-check label {
        cursor: pointer;
        user-select: none;
        transition: opacity 0.25s ease;
        color: var(--text-primary);
        font-size: 0.88rem;
        font-weight: 600;
    }

    .custom-input-check input:disabled + label {
        opacity: 0.4;
        cursor: not-allowed;
        color: var(--text-secondary);
    }

    /* ============ BASE (checkbox + radio) ============ */
    .custom-input-check input[type="checkbox"],
    .custom-input-check input[type="radio"] {
        appearance: none;
        -webkit-appearance: none;
        width: 22px;
        height: 22px;
        border: 2px solid var(--input-border);
        background: var(--glass-bg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        cursor: pointer;
        position: relative;
        transition: var(--transition);
        flex-shrink: 0;
        outline: none;
    }

        /* ============ DISABLED ============ */
        .custom-input-check input[type="checkbox"]:disabled,
        .custom-input-check input[type="radio"]:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

    /* ============ SHAPES ============ */
    .custom-input-check input[type="checkbox"] {
        border-radius: 8px !important;
    }

    .custom-input-check input[type="radio"] {
        border-radius: 50% !important;
    }

        /* ============ HOVER ============ */
        .custom-input-check input[type="checkbox"]:not(:disabled):hover,
        .custom-input-check input[type="radio"]:not(:disabled):hover {
            border-color: var(--accent);
            box-shadow: 0 0 12px var(--accent-glow-35);
            transform: scale(1.05);
        }

        /* ============ FOCUS ============ */
        .custom-input-check input[type="checkbox"]:focus-visible,
        .custom-input-check input[type="radio"]:focus-visible {
            border-color: var(--accent);
            box-shadow: 0 0 0 4px var(--accent-glow-20);
        }

        /* ============ CHECKED ============ */
        .custom-input-check input[type="checkbox"]:checked,
        .custom-input-check input[type="radio"]:checked {
            background: var(--accent-gradient);
            border-color: transparent;
            box-shadow: 0 6px 16px var(--accent-glow-35);
        }

            /* ============ CHECK MARK (checkbox) ============ */
            .custom-input-check input[type="checkbox"]:checked::after {
                content: "";
                position: absolute;
                left: 6px;
                top: 2px;
                width: 6px;
                height: 12px;
                border: solid #fff;
                border-width: 0 3px 3px 0;
                transform: rotate(45deg) scale(0);
                animation: checkAnimation 0.2s forwards ease;
            }

            /* ============ RADIO DOT ============ */
            .custom-input-check input[type="radio"]:checked::after {
                content: "";
                position: absolute;
                width: 10px;
                height: 10px;
                background: #fff;
                border-radius: 50%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(0);
                animation: radioAnimation 0.2s forwards ease;
                box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
            }

/* ============ KEYFRAMES ============ */
@keyframes checkAnimation {
    to {
        transform: rotate(45deg) scale(1);
    }
}

@keyframes radioAnimation {
    to {
        transform: translate(-50%, -50%) scale(1);
    }
}